51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
|
import type { ElementType, ReactNode, HTMLAttributes } from "react";
|
||
|
|
import type {
|
||
|
|
StackGap,
|
||
|
|
StackAlign,
|
||
|
|
StackJustify,
|
||
|
|
} from "@shared/components/Stack";
|
||
|
|
import "@shared/components/Inline.css";
|
||
|
|
|
||
|
|
export interface InlineProps extends HTMLAttributes<HTMLElement> {
|
||
|
|
/** Token-aligned gap between children (maps to `--space-*`). */
|
||
|
|
gap?: StackGap;
|
||
|
|
align?: StackAlign;
|
||
|
|
justify?: StackJustify;
|
||
|
|
/** Wrap to a new line when children overflow. Defaults to true. */
|
||
|
|
wrap?: boolean;
|
||
|
|
as?: ElementType;
|
||
|
|
children?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Horizontal flex row with token-aligned gap. Sister to {@link Stack}.
|
||
|
|
* Wraps by default — pass `wrap={false}` for a strict single-line layout.
|
||
|
|
*/
|
||
|
|
export function Inline({
|
||
|
|
gap = "2",
|
||
|
|
align = "center",
|
||
|
|
justify,
|
||
|
|
wrap = true,
|
||
|
|
as,
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
...rest
|
||
|
|
}: InlineProps) {
|
||
|
|
const Tag: ElementType = as ?? "div";
|
||
|
|
const classes = [
|
||
|
|
"sui-inline",
|
||
|
|
`sui-inline--gap-${gap}`,
|
||
|
|
`sui-inline--align-${align}`,
|
||
|
|
justify ? `sui-inline--justify-${justify}` : "",
|
||
|
|
wrap ? "" : "sui-inline--nowrap",
|
||
|
|
className ?? "",
|
||
|
|
]
|
||
|
|
.filter(Boolean)
|
||
|
|
.join(" ");
|
||
|
|
return (
|
||
|
|
<Tag className={classes} {...rest}>
|
||
|
|
{children}
|
||
|
|
</Tag>
|
||
|
|
);
|
||
|
|
}
|