@kanso-labs/kanso-ui 0.8.2 → 0.9.0

package/README.md

@@ -49,6 +49,31 @@ StyleX compiles the library's own rules into a CSS `@layer`, and your app's
 stylesheet is unlayered, so your rules win the cascade wherever the two meet —
 no specificity contest, and no `!important`.
 
+### Layout
+
+`Container` centres content at a measure, and `Stack` puts one gap from the
+spacing scale between a row or a column of children. Between them they cover
+page measure, section rhythm, and the ordinary rows and columns that would
+otherwise be bespoke CSS in every consuming app:
+
+```tsx
+<Container>
+  <Stack gap="xl">
+    <Stack align="center" direction="row" justify="between">
+      <Text variant="titleLarge">Headline</Text>
+      <Button>Save changes</Button>
+    </Stack>
+    <Feed minItemWidth="260px">{items}</Feed>
+  </Stack>
+</Container>
+```
+
+Both are layout only: they paint no surface and wrap no child. `Stack` is why no
+component here carries a margin of its own, since the space between two things
+belongs to whatever holds both of them. For the page-level layouts — a list
+beside a detail pane, a main pane with a companion — reach for `ListDetail` and
+`SupportingPane` instead.
+
 ### Rendering as a different element
 
 `render` swaps the element a component produces, keeping its styling:

package/dist/components/container/index.d.ts

@@ -0,0 +1,36 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/container/index.d.ts
+type ContainerProps = useRender.ComponentProps<'div'> & {
+  /**
+   * How wide the content may run before it stops growing. The container is
+   * centred in whatever space is left over.
+   *
+   * Worth setting. The default suits a page of mixed components; prose wants
+   * a measure in `ch`, since what makes a line hard to read is how many
+   * characters it holds rather than how many pixels.
+   * @default '960px'
+   */
+  maxInlineSize?: string;
+  /**
+   * Inline padding, which is what keeps the content off the edge of the
+   * window once it is narrower than the measure. `none` is for a container
+   * nested inside one that already has it.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none';
+};
+/**
+ * A centred measure for a page or a section of one: content grows to a width
+ * and stops, with the leftover space split evenly either side.
+ *
+ * Layout only — it paints no surface and gives its children no container of
+ * their own, which is what separates it from Card. It sets no gaps either, so
+ * reach for Stack inside it for the rhythm between sections.
+ *
+ * `render` swaps the element, for a container that should be a `<main>` or a
+ * `<section>` rather than a `<div>`.
+ */
+declare function Container({ maxInlineSize, padding, render, ...props }: ContainerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type ContainerProps, Container as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/container/index.js

@@ -0,0 +1,49 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/container/index.tsx
+const DEFAULT_MAX_INLINE_SIZE = "960px";
+const _temp = {
+	kB7OPa: "x9f619",
+	kzqmXN: "xh8yej3",
+	kUOVxO: "xvueqy4",
+	ks0D6T: "x13i5qev",
+	"$$css": true
+};
+const styles = {
+	paddingDefault: {
+		kg3NbH: "xg0ps1x",
+		$$css: true
+	},
+	paddingNone: {
+		kg3NbH: "xnjsko4",
+		$$css: true
+	},
+	root: (maxInlineSize) => [_temp, { "--x-maxInlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(maxInlineSize) }]
+};
+/**
+* A centred measure for a page or a section of one: content grows to a width
+* and stops, with the leftover space split evenly either side.
+*
+* Layout only — it paints no surface and gives its children no container of
+* their own, which is what separates it from Card. It sets no gaps either, so
+* reach for Stack inside it for the rhythm between sections.
+*
+* `render` swaps the element, for a container that should be a `<main>` or a
+* `<section>` rather than a `<div>`.
+*/
+function Container({ maxInlineSize = DEFAULT_MAX_INLINE_SIZE, padding = "default", render, ...props$1 }) {
+	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			...props$1,
+			...mergeStyles(props(styles.root(maxInlineSize), padded), props$1)
+		},
+		render
+	});
+}
+//#endregion
+export { Container as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/container/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The width fourteen of this library's own story files already centre their\n// page on, which is what makes it the default rather than a number picked\n// here. A measure is a property of the content: 960px suits a page of mixed\n// components, and prose wants something nearer 58ch, which is what the story\n// files that hold prose use. Say which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = '960px';\n\n// A dynamic style rather than a static one, for the same reason Feed's is:\n// the measure comes from the call site and StyleX compiles its classes ahead\n// of time, so the value is written to a custom property inline instead.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  kzqmXN: \"xh8yej3\",\n  kUOVxO: \"xvueqy4\",\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst styles = {\n  paddingDefault: {\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  paddingNone: {\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  root: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }]\n};\ntype ContainerProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How wide the content may run before it stops growing. The container is\n   * centred in whatever space is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a measure in `ch`, since what makes a line hard to read is how many\n   * characters it holds rather than how many pixels.\n   * @default '960px'\n   */\n  maxInlineSize?: string;\n  /**\n   * Inline padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure. `none` is for a container\n   * nested inside one that already has it.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n};\n\n/**\n * A centred measure for a page or a section of one: content grows to a width\n * and stops, with the leftover space split evenly either side.\n *\n * Layout only — it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `render` swaps the element, for a container that should be a `<main>` or a\n * `<section>` rather than a `<div>`.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  render,\n  ...props\n}: ContainerProps) {\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root(maxInlineSize), padded), props)\n    },\n    render\n  });\n}\nexport type { ContainerProps };\nexport default Container;"],"mappings":";;;;AAWA,MAAM,0BAA0B;AAKhC,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO,kBAA0B,CAAC,OAAO,EACvC,uBAAsB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,aAAa,EAClH,CAAC;AACH;;;;;;;;;;;;AAgCA,SAAS,UAAU,EACjB,gBAAgB,yBAChB,UAAU,WACV,QACA,GAAG,WACc;CACjB,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,KAAK,aAAa,GAAG,MAAM,GAAG,OAAK;EACxE;EACA;CACF,CAAC;AACH"}

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ import Button, { ButtonProps } from "./button/index.js";
 import Card, { CardProps } from "./card/index.js";
 import Chip, { ChipProps } from "./chip/index.js";
 import Code, { CodeProps } from "./code/index.js";
+import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
 import Currency, { CurrencyProps } from "./currency/index.js";
 import Feed, { FeedProps } from "./feed/index.js";
@@ -16,8 +17,9 @@ import ListItem, { ListItemProps } from "./list-item/index.js";
 import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
 import Sheet, { SheetProps } from "./sheet/index.js";
+import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Tabs, { TabsProps } from "./tabs/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
-export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/components/stack/index.d.ts

@@ -0,0 +1,60 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack/index.d.ts
+type StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+type StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';
+type StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';
+type StackProps = {
+  /**
+   * How the children line up across the stack: down the inline axis of a
+   * column, down the block axis of a row. Left unset, they stretch, which is
+   * what makes every card in a column the same width.
+   *
+   * `start` is what an inline-sized child needs in a column — a Badge or a
+   * Chip spans the whole width otherwise.
+   */
+  align?: StackAlign;
+  /**
+   * Which way the children run.
+   * @default 'column'
+   */
+  direction?: 'column' | 'row';
+  /**
+   * The space between children, as a step of the spacing scale. `none` closes
+   * it entirely.
+   *
+   * Worth setting. The default is a middle step, and how much air a group of
+   * things wants is the one thing a stack cannot work out for itself.
+   * @default 'md'
+   */
+  gap?: StackGap;
+  /**
+   * How leftover space is distributed along the stack. Left unset, the
+   * children sit at the start and the space collects after them.
+   *
+   * `between` is the one that puts a headline at one end of a row and its
+   * actions at the other.
+   */
+  justify?: StackJustify;
+  /**
+   * Lets a row wrap onto further lines rather than overflowing. Has no effect
+   * on a column, which has as many lines as it has children.
+   * @default false
+   */
+  wrap?: boolean;
+} & useRender.ComponentProps<'div'>;
+/**
+ * A row or a column of children with one gap between them, taken from the
+ * spacing scale.
+ *
+ * Layout only — it paints no surface and wraps no child, so each child is a
+ * flex item exactly as it was written. It is the answer to spacing a group of
+ * things, which is why no component here carries a margin of its own: the
+ * space between two things belongs to whatever holds both of them.
+ *
+ * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,
+ * or a `<section>` rather than a `<div>`.
+ */
+declare function Stack({ align, direction, gap, justify, render, wrap, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type StackAlign, type StackGap, type StackJustify, type StackProps, Stack as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stack/index.js

@@ -0,0 +1,131 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack/index.tsx
+const alignments = {
+	baseline: {
+		kGNEyG: "x1pha0wt",
+		$$css: true
+	},
+	center: {
+		kGNEyG: "x6s0dn4",
+		$$css: true
+	},
+	end: {
+		kGNEyG: "xuk3077",
+		$$css: true
+	},
+	start: {
+		kGNEyG: "x1cy8zhl",
+		$$css: true
+	},
+	stretch: {
+		kGNEyG: "x1qjc9v5",
+		$$css: true
+	}
+};
+const gaps = {
+	lg: {
+		kOIVth: "xxj4525",
+		$$css: true
+	},
+	md: {
+		kOIVth: "x1gka490",
+		$$css: true
+	},
+	none: {
+		kOIVth: "xxhr3t",
+		$$css: true
+	},
+	sm: {
+		kOIVth: "x126z3so",
+		$$css: true
+	},
+	xl: {
+		kOIVth: "xj2l1yv",
+		$$css: true
+	},
+	xs: {
+		kOIVth: "xzoy561",
+		$$css: true
+	},
+	xxl: {
+		kOIVth: "xghv2kt",
+		$$css: true
+	},
+	xxs: {
+		kOIVth: "x14qo01y",
+		$$css: true
+	},
+	xxxl: {
+		kOIVth: "xvm9ira",
+		$$css: true
+	}
+};
+const justifications = {
+	around: {
+		kjj79g: "x1l1ennw",
+		$$css: true
+	},
+	between: {
+		kjj79g: "x1qughib",
+		$$css: true
+	},
+	center: {
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
+	end: {
+		kjj79g: "x13a6bvl",
+		$$css: true
+	},
+	start: {
+		kjj79g: "x1nhvcw1",
+		$$css: true
+	}
+};
+const styles = {
+	base: {
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		$$css: true
+	},
+	column: {
+		kXwgrk: "xdt5ytf",
+		$$css: true
+	},
+	row: {
+		kXwgrk: "x1q0g3np",
+		$$css: true
+	},
+	wrap: {
+		kwnvtZ: "x1a02dak",
+		$$css: true
+	}
+};
+/**
+* A row or a column of children with one gap between them, taken from the
+* spacing scale.
+*
+* Layout only — it paints no surface and wraps no child, so each child is a
+* flex item exactly as it was written. It is the answer to spacing a group of
+* things, which is why no component here carries a margin of its own: the
+* space between two things belongs to whatever holds both of them.
+*
+* `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,
+* or a `<section>` rather than a `<div>`.
+*/
+function Stack({ align, direction = "column", gap = "md", justify, render, wrap = false, ...props$1 }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			...props$1,
+			...mergeStyles(props(styles.base, styles[direction], gaps[gap], align !== void 0 && alignments[align], justify !== void 0 && justifications[justify], wrap && styles.wrap), props$1)
+		},
+		render
+	});
+}
+//#endregion
+export { Stack as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Badge or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & useRender.ComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":";;;;AAUA,MAAM,aAAa;CACjB,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAM,OAAO;CACX,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AAwDA,SAAS,MAAM,EACb,OACA,YAAY,UACZ,MAAM,MACN,SACA,QACA,OAAO,OACP,GAAG,WACU;CACb,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,YAAY,KAAK,MAAM,UAAU,KAAA,KAAa,WAAW,QAAQ,YAAY,KAAA,KAAa,eAAe,UAAU,QAAQ,OAAO,IAAI,GAAG,OAAK;EAChM;EACA;CACF,CAAC;AACH"}

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import Button, { ButtonProps } from "./components/button/index.js";
 import Card, { CardProps } from "./components/card/index.js";
 import Chip, { ChipProps } from "./components/chip/index.js";
 import Code, { CodeProps } from "./components/code/index.js";
+import Container, { ContainerProps } from "./components/container/index.js";
 import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
 import Currency, { CurrencyProps } from "./components/currency/index.js";
 import Feed, { FeedProps } from "./components/feed/index.js";
@@ -16,10 +17,11 @@ import ListItem, { ListItemProps } from "./components/list-item/index.js";
 import ProductIcon, { ProductIconProps } from "./components/product-icon/index.js";
 import Separator, { SeparatorProps } from "./components/separator/index.js";
 import Sheet, { SheetProps } from "./components/sheet/index.js";
+import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./components/stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./components/supporting-pane/index.js";
 import Tabs, { TabsProps } from "./components/tabs/index.js";
 import Text, { TextProps } from "./components/text/index.js";
 import TextField, { TextFieldProps } from "./components/text-field/index.js";
 import "./components/index.js";
 import "./styles.css";
-export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/index.js

@@ -6,6 +6,7 @@ import Button from "./components/button/index.js";
 import Card from "./components/card/index.js";
 import Chip from "./components/chip/index.js";
 import Code from "./components/code/index.js";
+import Container from "./components/container/index.js";
 import CopyField from "./components/copy-field/index.js";
 import Currency from "./components/currency/index.js";
 import Feed from "./components/feed/index.js";
@@ -17,8 +18,9 @@ import ListItem from "./components/list-item/index.js";
 import ProductIcon from "./components/product-icon/index.js";
 import Separator from "./components/separator/index.js";
 import Sheet from "./components/sheet/index.js";
+import Stack from "./components/stack/index.js";
 import SupportingPane from "./components/supporting-pane/index.js";
 import Tabs from "./components/tabs/index.js";
 import TextField from "./components/text-field/index.js";
 import "./styles.css";
-export { AppBar, Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, Feed, IconButton, Keycap, Link, ListDetail, ListItem, ProductIcon, Separator, Sheet, SupportingPane, Tabs, Text, TextField };
+export { AppBar, Avatar, Badge, Button, Card, Chip, Code, Container, CopyField, Currency, Feed, IconButton, Keycap, Link, ListDetail, ListItem, ProductIcon, Separator, Sheet, Stack, SupportingPane, Tabs, Text, TextField };

package/dist/styles.css

@@ -79,6 +79,10 @@
     border-width: 1px;
   }
 
+  .xxhr3t {
+    gap: 0;
+  }
+
   .xj2l1yv {
     gap: var(--x196ey9q);
   }
@@ -99,14 +103,26 @@
     gap: var(--xbmbo34);
   }
 
+  .xghv2kt {
+    gap: var(--xi3mssk);
+  }
+
   .x126z3so {
     gap: var(--xod9tvo);
   }
 
+  .xvm9ira {
+    gap: var(--xqgx294);
+  }
+
   .x10im51j {
     margin-block: 0;
   }
 
+  .xvueqy4 {
+    margin-inline: auto;
+  }
+
   .xboopgi {
     margin-inline: var(--x3km7fe);
   }
@@ -135,6 +151,10 @@
     padding-block: var(--xod9tvo);
   }
 
+  .xnjsko4 {
+    padding-inline: 0;
+  }
+
   .x1sdxjpb {
     padding-inline: 48px;
   }
@@ -181,10 +201,26 @@
 }
 
 @layer priority4 {
+  .x1pha0wt {
+    align-items: baseline;
+  }
+
   .x6s0dn4 {
     align-items: center;
   }
 
+  .xuk3077 {
+    align-items: flex-end;
+  }
+
+  .x1cy8zhl {
+    align-items: flex-start;
+  }
+
+  .x1qjc9v5 {
+    align-items: stretch;
+  }
+
   .xkh2ocl {
     align-self: stretch;
   }
@@ -425,6 +461,10 @@
     flex-direction: column;
   }
 
+  .x1q0g3np {
+    flex-direction: row;
+  }
+
   .x1iyjqo2 {
     flex-grow: 1;
   }
@@ -433,6 +473,10 @@
     flex-shrink: 0;
   }
 
+  .x1a02dak {
+    flex-wrap: wrap;
+  }
+
   .xjaampf {
     font-family: var(--x134eq0n);
   }
@@ -673,6 +717,14 @@
     justify-content: flex-end;
   }
 
+  .x1nhvcw1 {
+    justify-content: flex-start;
+  }
+
+  .x1l1ennw {
+    justify-content: space-around;
+  }
+
   .x1qughib {
     justify-content: space-between;
   }
@@ -1189,6 +1241,10 @@
     max-height: none;
   }
 
+  .x13i5qev {
+    max-width: var(--x-maxInlineSize);
+  }
+
   .xbktkl8 {
     min-height: 56px;
   }
@@ -1329,6 +1385,11 @@
   inherits: false
 }
 
+@property --x-maxInlineSize {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-minBlockSize {
   syntax: "*";
   inherits: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "A React component library built on Base UI primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",