@kanso-labs/kanso-ui 0.2.0

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

@@ -0,0 +1,14 @@
+import { SeparatorProps } from "@base-ui/react/separator";
+//#region src/components/separator/index.d.ts
+type SeparatorProps$1 = Omit<SeparatorProps, 'orientation'> & {
+  /**
+   * Which way the rule runs. A vertical separator takes its length from a
+   * flex or grid parent and has none of its own.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+};
+declare function Separator$1({ orientation, ...props }: SeparatorProps$1): import("react").JSX.Element;
+//#endregion
+export { type SeparatorProps$1 as SeparatorProps, Separator$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/separator/index.js

@@ -0,0 +1,34 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/separator/index.tsx
+const styles = {
+	base: {
+		kWkggS: "x1l12bh",
+		kMzoRj: "xc342km",
+		kmuXW: "x2lah0s",
+		kogj98: "x1ghz6dp",
+		$$css: true
+	},
+	horizontal: {
+		kZKoxP: "xjm9jq1",
+		kzqmXN: "xh8yej3",
+		$$css: true
+	},
+	vertical: {
+		kSGwAc: "xkh2ocl",
+		kzqmXN: "x1i1rx1s",
+		$$css: true
+	}
+};
+function Separator$1({ orientation = "horizontal", ...props$1 }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		orientation,
+		...props$1,
+		...props(styles.base, styles[orientation])
+	});
+}
+//#endregion
+export { Separator$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as BaseUISeparatorProps } from '@base-ui/react/separator';\nimport { Separator as BaseUISeparator } from '@base-ui/react/separator';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\ntype SeparatorProps = Omit<BaseUISeparatorProps, 'orientation'> & {\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\nfunction Separator({\n  orientation = 'horizontal',\n  ...props\n}: SeparatorProps) {\n  return <BaseUISeparator orientation={orientation} {...props} {...stylex.props(styles.base, styles[orientation])} />;\n}\nexport type { SeparatorProps };\nexport default Separator;"],"mappings":";;;;AAoBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AASA,SAAS,YAAU,EACjB,cAAc,cACd,GAAG,WACc;CACjB,OAAO,oBAAC,WAAD;EAA8B;EAAa,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,YAAY;CAAE,CAAA;AAClH"}

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

@@ -0,0 +1,73 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { DialogCloseProps, DialogPopupProps, DialogPortalProps, DialogRootProps, DialogTitleProps, DialogTriggerProps } from "@base-ui/react/dialog";
+//#region src/components/sheet/index.d.ts
+type SheetSize = 'md' | 'sm';
+type SheetProps = Omit<DialogRootProps, 'children'> & {
+  children?: ReactNode;
+  /**
+   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.
+   * Ignored below the medium breakpoint, where the sheet is full width.
+   * @default 'md'
+   */
+  size?: SheetSize;
+};
+/**
+ * A modal panel that arrives from the edge of the screen — a side sheet on a
+ * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:
+ * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it
+ * keep its own.
+ *
+ * Composed rather than configured by props, because a sheet's header, body,
+ * and footer all take arbitrary content — the parts are `Sheet.Trigger`,
+ * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,
+ * `Sheet.Footer`, and `Sheet.Close`.
+ */
+declare function Sheet({ children, size, ...props }: SheetProps): import("react").JSX.Element;
+declare namespace Sheet {
+  var Body: typeof SheetBody;
+  var Close: typeof SheetClose;
+  var Content: typeof SheetContent;
+  var Footer: typeof SheetFooter;
+  var Header: typeof SheetHeader;
+  var Title: typeof SheetTitle;
+  var Trigger: typeof SheetTrigger;
+}
+declare function SheetBody(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/**
+ * Closes the sheet when pressed. Carries no styling of its own, so give it
+ * the control it should be through `render` — an `IconButton` in the header,
+ * a `Button` in the footer.
+ */
+declare function SheetClose(props: DialogCloseProps): import("react").JSX.Element;
+/**
+ * The panel itself, and the scrim behind it. Everything the sheet shows goes
+ * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the
+ * page while this is portalled out to the end of the body.
+ */
+declare function SheetContent({ children, container, ...props }: SheetContentProps): import("react").JSX.Element;
+declare function SheetFooter(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function SheetHeader(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/**
+ * Names the sheet. Rendered through Base UI's title part, which is what
+ * points the dialog's `aria-labelledby` at it — a sheet without one announces
+ * itself as an unnamed dialog.
+ */
+declare function SheetTitle(props: DialogTitleProps): import("react").JSX.Element;
+/**
+ * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the
+ * control through `render`.
+ */
+declare function SheetTrigger(props: DialogTriggerProps): import("react").JSX.Element;
+type SheetContentProps = DialogPopupProps & {
+  /**
+   * Where to portal the panel and scrim. Defaults to the end of `<body>`,
+   * which is right for an app that sets its StyleX theme on `:root`. An app
+   * that scopes the theme to a subtree has to point this at an element inside
+   * it, or the sheet renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: DialogPortalProps['container'];
+};
+//#endregion
+export { type SheetContentProps, type SheetProps, type SheetSize, Sheet as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sheet/index.js

@@ -0,0 +1,266 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/sheet/index.tsx
+const styles = {
+	backdrop: {
+		k44tkh: "x1vhuh8u",
+		kKVMdj: "xqcmdr3",
+		kyAemX: "x1yujl0p",
+		kWkggS: "x1iqbvzf",
+		kpwlN0: "x10a8y8t",
+		kVAEAm: "xixxii4",
+		$$css: true
+	},
+	body: {
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kzQI83: "x1iyjqo2",
+		kOIVth: "xxj4525",
+		kORKVm: "x1odjw0f",
+		kmVPX3: "xgc26li",
+		$$css: true
+	},
+	content: {
+		k44tkh: "x1n1nwrg",
+		kKVMdj: "xu2fq7p x18ihq2d",
+		kyAemX: "x16dv9tl",
+		kWkggS: "x1vnz5z6",
+		kT0f0o: "xkducg2",
+		kVL7Gh: "xrzall9 xb0nsol",
+		kfmiAY: "x1a37zkv xys6ro8",
+		krdFHd: "x6xk272 x9t1vth",
+		kGVxlE: "x19efjv6",
+		kMwMTN: "x139gbkf",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		krVfgx: "x1ey2m1c",
+		k87sOh: "x13vifvy xmpip4z",
+		kt4wiu: "xtijo5x",
+		kLqNvP: "xhi6v0a x1upgybz",
+		kskxy: "x7ab17h x1dexy1j",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "xixxii4",
+		$$css: true
+	},
+	footer: {
+		kLZC3w: "x12smttz",
+		kPef9Z: "x13fuv20",
+		kEafiO: "x178xt8z",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kOIVth: "x126z3so",
+		kjj79g: "x13a6bvl",
+		k8WAf4: "x1uvvd8r",
+		kg3NbH: "x790zyz",
+		$$css: true
+	},
+	header: {
+		kGNEyG: "x6s0dn4",
+		kL6WhQ: "x1j6faob",
+		kfdmCh: "x1q0q8m5",
+		kt9PQ7: "xso031l",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kOIVth: "x1gka490",
+		kjj79g: "x1qughib",
+		k8WAf4: "x1cmllll",
+		kg3NbH: "x790zyz",
+		$$css: true
+	},
+	md: {
+		kzqmXN: "x1l2rt3b xwvxfow",
+		$$css: true
+	},
+	sm: {
+		kzqmXN: "x1m258z3 xwvxfow",
+		$$css: true
+	},
+	title: {
+		kMwMTN: "x139gbkf",
+		kMv6JI: "xdy5w5q",
+		kGuDYH: "xete2z3",
+		k63SB2: "x14ijtet",
+		kb6lSQ: "xug9e1u",
+		kLWn49: "x2divse",
+		kogj98: "x1ghz6dp",
+		$$css: true
+	}
+};
+const SheetSizeContext = createContext("md");
+/**
+* A modal panel that arrives from the edge of the screen — a side sheet on a
+* wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:
+* pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it
+* keep its own.
+*
+* Composed rather than configured by props, because a sheet's header, body,
+* and footer all take arbitrary content — the parts are `Sheet.Trigger`,
+* `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,
+* `Sheet.Footer`, and `Sheet.Close`.
+*/
+function Sheet({ children, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		...props,
+		children: /* @__PURE__ */ jsx(SheetSizeContext, {
+			value: size,
+			children
+		})
+	});
+}
+function SheetBody(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx("div", {
+			...props,
+			className: "x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* Closes the sheet when pressed. Carries no styling of its own, so give it
+* the control it should be through `render` — an `IconButton` in the header,
+* a `Button` in the footer.
+*/
+function SheetClose(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Dialog.Close, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* The panel itself, and the scrim behind it. Everything the sheet shows goes
+* in here; `Sheet.Trigger` stays outside it, since the trigger lives in the
+* page while this is portalled out to the end of the body.
+*/
+function SheetContent(t0) {
+	const $ = c(14);
+	let children;
+	let container;
+	let props$1;
+	if ($[0] !== t0) {
+		({children, container, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = container;
+		$[3] = props$1;
+	} else {
+		children = $[1];
+		container = $[2];
+		props$1 = $[3];
+	}
+	const size = useContext(SheetSizeContext);
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4" });
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== size) {
+		t2 = props(styles.content, styles[size]);
+		$[5] = size;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props$1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Dialog.Popup, {
+			...props$1,
+			...t2,
+			children
+		});
+		$[7] = children;
+		$[8] = props$1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== container || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [t1, t3]
+		});
+		$[11] = container;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+function SheetFooter(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx("div", {
+			...props,
+			className: "x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function SheetHeader(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx("div", {
+			...props,
+			className: "x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* Names the sheet. Rendered through Base UI's title part, which is what
+* points the dialog's `aria-labelledby` at it — a sheet without one announces
+* itself as an unnamed dialog.
+*/
+function SheetTitle(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Dialog.Title, {
+			...props,
+			className: "x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the
+* control through `render`.
+*/
+function SheetTrigger(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Dialog.Trigger, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+Sheet.Body = SheetBody;
+Sheet.Close = SheetClose;
+Sheet.Content = SheetContent;
+Sheet.Footer = SheetFooter;
+Sheet.Header = SheetHeader;
+Sheet.Title = SheetTitle;
+Sheet.Trigger = SheetTrigger;
+//#endregion
+export { Sheet as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:\n * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\" />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...stylex.props(styles.content, styles[size])}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\" />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\" />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} className=\"x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\" />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":";;;;;;AAuBA,MAAM,SAAS;CACb,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,mBAAmB,cAAyB,IAAI;;;;;;;;;;;;AA6BtD,SAAS,MAAM,EACb,UACA,OAAO,MACP,GAAG,SACU;CACb,OAAO,oBAAC,OAAa,MAAd;EAAmB,GAAI;EAC1B,UAAA,oBAAC,kBAAD;GAAkB,OAAO;GAAO;EAA2B,CAAA;CAC1C,CAAA;AACvB;AACA,SAAA,UAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA;GAAgF,GAAvE;GAAiB,WAAA;EAAmD,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAhF;AAAgF;;;;;;AAQzF,SAAA,WAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA,OAAA,EAAA,GAAwB,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAjC;AAAiC;;;;;;AAQ1C,SAAA,aAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAsB,CAAA,CAAA,UAAA,cAAA,WAAA;EAIF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,YAAA,EAAA;EAAA,UAAA,EAAA;CAAA;CAClB,MAAA,OAAa,WAAW,gBAAgB;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAEtC,KAAA,oBAAA,OAAA,UAAA,EAAiC,WAAA,sDAAqD,CAAA;EAAG,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EACtD,KAAA,MAAa,OAAM,SAAU,OAAO,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,WAAA,EAAA,OAAA,IAAA;EAA7E,KAAA,oBAAA,OAAA,OAAA;GAAA,GAAwB;GAAK,GAAM;GAChC;EACH,CAAA;EAAqB,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,aAAA,EAAA,QAAA,IAAA;EAJlB,KAAA,qBAAA,OAAA,QAAA;GAAgC;GAAhC,UAAA,CACH,IACA,EAGF;;EAAsB,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALjB;AAKiB;AAE1B,SAAA,YAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA;GAA4G,GAAnG;GAAiB,WAAA;EAA+E,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA5G;AAA4G;AAErH,SAAA,YAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA;GAAmH,GAA1G;GAAiB,WAAA;EAAsF,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnH;AAAmH;;;;;;AAQ5H,SAAA,WAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA,OAAA;GAAA,GAAwB;GAAiB,WAAA;EAA4D,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAxG;AAAwG;;;;;AAOjH,SAAA,aAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,OAAA,SAAA,EAAA,GAA0B,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnC;AAAmC;AAE5C,MAAM,OAAO;AACb,MAAM,QAAQ;AACd,MAAM,UAAU;AAChB,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,UAAU"}

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

@@ -0,0 +1,24 @@
+import { TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "@base-ui/react/tabs";
+//#region src/components/tabs/index.d.ts
+/**
+ * A tab strip and its panels. Selection is Base UI's `value`: pass `value`
+ * with `onValueChange` to control it, or `defaultValue` to let it keep its
+ * own.
+ *
+ * Composed rather than configured by props, because the number of tabs and
+ * what each panel holds are the call site's to decide — the parts are
+ * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.
+ */
+declare function Tabs$1(props: TabsRootProps): import("react").JSX.Element;
+declare namespace Tabs$1 {
+  var List: typeof TabsList;
+  var Panel: typeof TabsPanel;
+  var Tab: typeof TabsTab;
+}
+declare function TabsList(props: TabsListProps): import("react").JSX.Element;
+declare function TabsPanel(props: TabsPanelProps): import("react").JSX.Element;
+declare function TabsTab(props: TabsTabProps): import("react").JSX.Element;
+type TabsProps = TabsRootProps;
+//#endregion
+export { type TabsProps, Tabs$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/index.tsx
+function tabClassName(state) {
+	return {
+		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug" },
+		2: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa" },
+		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" },
+		3: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" }
+	}[!!state.active << 1 | !!state.disabled << 0].className;
+}
+/**
+* A tab strip and its panels. Selection is Base UI's `value`: pass `value`
+* with `onValueChange` to control it, or `defaultValue` to let it keep its
+* own.
+*
+* Composed rather than configured by props, because the number of tabs and
+* what each panel holds are the call site's to decide — the parts are
+* `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.
+*/
+function Tabs$1(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Tabs.Root, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function TabsList(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Tabs.List, {
+			...props,
+			className: "x78zum5 x14qo01y"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function TabsPanel(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Tabs.Panel, {
+			...props,
+			className: "xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn"
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function TabsTab(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Tabs.Tab, {
+			...props,
+			className: tabClassName
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+Tabs$1.List = TabsList;
+Tabs$1.Panel = TabsPanel;
+Tabs$1.Tab = TabsTab;
+//#endregion
+export { Tabs$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["tabClassName"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { TabsListProps as BaseUITabsListProps, TabsPanelProps as BaseUITabsPanelProps, TabsRootProps as BaseUITabsRootProps, TabsTabProps as BaseUITabsTabProps, TabsTabState as BaseUITabsTabState } from '@base-ui/react/tabs';\nimport { Tabs as BaseUITabs } from '@base-ui/react/tabs';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// A tinted pill marks the active tab, not the underline Material draws. That\n// is what the source design uses, and the two are different controls wearing\n// the same name: an underline belongs to a full-width tab bar, while a row of\n// pills reads as a segmented control sitting inside a section.\n//\n// The pill takes the same height, radius, and type as Chip. Both are\n// pill-shaped selection controls, and a row of tabs above a row of chips\n// looks wrong the moment the two disagree about either.\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active pill cannot be chosen in CSS. Base UI's answer is a className that is\n// a function of the tab's own state, the same mechanism Chip uses — declared\n// at module scope so it is one stable reference rather than a fresh closure\n// per render.\nfunction tabClassName(state: BaseUITabsTabState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.active << 1 | !!state.disabled << 0].className;\n}\n\n/**\n * A tab strip and its panels. Selection is Base UI's `value`: pass `value`\n * with `onValueChange` to control it, or `defaultValue` to let it keep its\n * own.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs(props: BaseUITabsRootProps) {\n  return <BaseUITabs.Root {...props} />;\n}\nfunction TabsList(props: BaseUITabsListProps) {\n  return <BaseUITabs.List {...props} className=\"x78zum5 x14qo01y\" />;\n}\nfunction TabsPanel(props: BaseUITabsPanelProps) {\n  return <BaseUITabs.Panel {...props} className=\"xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\" />;\n}\nfunction TabsTab(props: BaseUITabsTabProps) {\n  return <BaseUITabs.Tab {...props} className={tabClassName} />;\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Tab = TabsTab;\ntype TabsListProps = BaseUITabsListProps;\ntype TabsPanelProps = BaseUITabsPanelProps;\ntype TabsProps = BaseUITabsRootProps;\ntype TabsTabProps = BaseUITabsTabProps;\nexport type { TabsListProps, TabsPanelProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":";;;;AAoBA,SAAS,aAAa,OAA2B;CAC/C,OAAO;EACL,GAAG,EACD,WAAW,gOACb;EACA,GAAG,EACD,WAAW,+NACb;EACA,GAAG,EACD,WAAW,uNACb;EACA,GAAG,EACD,WAAW,uNACb;CACF,EAAE,CAAC,CAAC,MAAM,UAAU,IAAI,CAAC,CAAC,MAAM,YAAY,EAAE,CAAC;AACjD;;;;;;;;;;AAWA,SAAA,OAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,MAAA,EAAA,GAAqB,MAAK,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA9B;AAA8B;AAEvC,SAAA,SAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,MAAA;GAAA,GAAqB;GAAiB,WAAA;EAAkB,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA3D;AAA2D;AAEpE,SAAA,UAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,OAAA;GAAA,GAAsB;GAAiB,WAAA;EAA4C,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAtF;AAAsF;AAE/F,SAAA,QAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACS,KAAA,oBAAA,KAAA,KAAA;GAAA,GAAoB;GAAkBA,WAAA;EAAY,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAtD;AAAsD;AAE/D,OAAK,OAAO;AACZ,OAAK,QAAQ;AACb,OAAK,MAAM"}

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

@@ -0,0 +1,19 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text/index.d.ts
+type TextProps = useRender.ComponentProps<'span'> & {
+  /**
+   * The color role to render in. `inherit` takes the color of the nearest
+   * colored ancestor instead of setting one.
+   * @default 'default'
+   */
+  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';
+  /**
+   * Which style of the type scale to render.
+   * @default 'bodyMedium'
+   */
+  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';
+};
+declare function Text({ render, tone, variant, ...props }: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type TextProps, Text as default };
+//# sourceMappingURL=index.d.ts.map