@kanso-labs/kanso-ui 0.8.0 → 0.8.2

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

@@ -1 +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"}
+{"version":3,"file":"index.js","names":[],"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 { mergeStatefulStyles } from '../../styles/merge';\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/**\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} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x14qo01y\"\n  }, props)} />;\n}\nfunction TabsPanel(props: BaseUITabsPanelProps) {\n  return <BaseUITabs.Panel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\nfunction TabsTab(props: BaseUITabsTabProps) {\n  return <BaseUITabs.Tab {...props} {...mergeStatefulStyles(tabStyles, props)} />;\n}\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 —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: BaseUITabsTabState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 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 x9f619 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 x9f619 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 x9f619 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];\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":";;;;;;;;;;;;;;AAyBA,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;EACyC,KAAA,oBAAoB,EAAA,WAC9C,0BACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAA,KAAA,MAAA;GAAA,GAAqB;GAAK,GAAM;EAE9B,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;AAEf,SAAA,UAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC0C,KAAA,oBAAoB,EAAA,WAC/C,oDACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAA,KAAA,OAAA;GAAA,GAAsB;GAAK,GAAM;EAE/B,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;AAEf,SAAA,QAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACwC,KAAA,oBAAoB,WAAW,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAApE,KAAA,oBAAA,KAAA,KAAA;GAAA,GAAoB;GAAK,GAAM;EAAqC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAxE;AAAwE;AAQjF,SAAS,UAAU,OAA2B;CAC5C,OAAO;EACL,GAAG,EACD,WAAW,uOACb;EACA,GAAG,EACD,WAAW,sOACb;EACA,GAAG,EACD,WAAW,8NACb;EACA,GAAG,EACD,WAAW,8NACb;CACF,EAAE,CAAC,CAAC,MAAM,UAAU,IAAI,CAAC,CAAC,MAAM,YAAY;AAC9C;AACA,OAAK,OAAO;AACZ,OAAK,QAAQ;AACb,OAAK,MAAM"}

package/dist/components/text/index.js

@@ -1,8 +1,10 @@
 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/text/index.tsx
 const styles = {
 	base: {
+		kB7OPa: "x9f619",
 		kogj98: "x1ghz6dp",
 		$$css: true
 	},
@@ -162,7 +164,7 @@ function Text({ render, tone = "default", variant = "bodyMedium", ...props$1 })
 		defaultTagName: "span",
 		props: {
 			...props$1,
-			...props(styles.base, styles[variant], tones[tone])
+			...mergeStyles(props(styles.base, styles[variant], tones[tone]), props$1)
 		},
 		render
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `render` is how a consumer reaches for semantic markup — `<Text\n// render={<h2 />}>` — and an h2's UA margin would then vary the spacing\n// around otherwise identical type.\nconst styles = {\n  base: {\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = useRender.ComponentProps<'span'> & {\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n};\nfunction Text({\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  // stylex.props() spreads after `props` for the same reason Button does it:\n  // it wins over a consumer-supplied className/style rather than merging with\n  // one. useRender would otherwise join the two class strings, and which of\n  // the two won would come down to stylesheet order rather than anything the\n  // call site can see.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...stylex.props(styles.base, styles[variant], tones[tone])\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":";;;AAgBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAcA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CAMZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM,KAAK;EAC3D;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text/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 { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// One key per style in the 15-entry type scale, named exactly as the token\n// group names it, so `styles[variant]` indexes straight off the prop with no\n// lookup table to keep in sync. Every style sets all five fields the scale\n// defines rather than inheriting any of them: a Text nested inside another\n// Text would otherwise pick up the outer line-height or tracking, which is\n// the kind of drift the scale exists to prevent.\n//\n// `margin: 0` is the one UA reset here. Text renders a <span> by default, but\n// `render` is how a consumer reaches for semantic markup — `<Text\n// render={<h2 />}>` — and an h2's UA margin would then vary the spacing\n// around otherwise identical type.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  bodyLarge: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  bodyMedium: {\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  bodySmall: {\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    $$css: true\n  },\n  displayLarge: {\n    kMv6JI: \"xjaampf\",\n    kGuDYH: \"xuyiek4\",\n    k63SB2: \"x1n2oj23\",\n    kb6lSQ: \"x1hxa6v5\",\n    kLWn49: \"x1iwmiir\",\n    $$css: true\n  },\n  displayMedium: {\n    kMv6JI: \"x1gi70vc\",\n    kGuDYH: \"xlzzeuu\",\n    k63SB2: \"xh9quta\",\n    kb6lSQ: \"x148mp24\",\n    kLWn49: \"xs5hucj\",\n    $$css: true\n  },\n  displaySmall: {\n    kMv6JI: \"x1eslvzl\",\n    kGuDYH: \"x1g52wnc\",\n    k63SB2: \"x1x664hp\",\n    kb6lSQ: \"x1rnjaw4\",\n    kLWn49: \"x92ldg4\",\n    $$css: true\n  },\n  headlineLarge: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    $$css: true\n  },\n  headlineMedium: {\n    kMv6JI: \"x18s19nt\",\n    kGuDYH: \"xcohea8\",\n    k63SB2: \"x1mtpwof\",\n    kb6lSQ: \"x1kuyk5j\",\n    kLWn49: \"xucx483\",\n    $$css: true\n  },\n  headlineSmall: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    $$css: true\n  },\n  labelLarge: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labelMedium: {\n    kMv6JI: \"xp6n8n2\",\n    kGuDYH: \"xkucv67\",\n    k63SB2: \"x14hhc5u\",\n    kb6lSQ: \"x12utw95\",\n    kLWn49: \"xvzb9hk\",\n    $$css: true\n  },\n  labelSmall: {\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  titleLarge: {\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    $$css: true\n  },\n  titleMedium: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    $$css: true\n  },\n  titleSmall: {\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    $$css: true\n  }\n};\n\n// Tone is a separate axis from variant so the two compose freely — any of the\n// 15 scale styles in any of these colors. Kept to the roles text actually\n// takes on a surface; a consumer needing something outside this set uses\n// `inherit` and colors the parent, rather than this growing a case per role.\nconst tones = {\n  default: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  error: {\n    kMwMTN: \"x4ii1qj\",\n    $$css: true\n  },\n  inherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  muted: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\ntype TextProps = useRender.ComponentProps<'span'> & {\n  /**\n   * The color role to render in. `inherit` takes the color of the nearest\n   * colored ancestor instead of setting one.\n   * @default 'default'\n   */\n  tone?: 'default' | 'error' | 'inherit' | 'muted' | 'negative' | 'positive' | 'primary';\n  /**\n   * Which style of the type scale to render.\n   * @default 'bodyMedium'\n   */\n  variant?: 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';\n};\nfunction Text({\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], tones[tone]), props)\n    },\n    render\n  });\n}\nexport type { TextProps };\nexport default Text;"],"mappings":";;;;AAiBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAcA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM,KAAK,GAAG,OAAK;EAC/E;EACA;CACF,CAAC;AACH"}

package/dist/components/text-field/index.js

@@ -1,3 +1,4 @@
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { Field } from "@base-ui/react/field";
@@ -17,25 +18,25 @@ function TextField({ description, disabled = false, error, label, numeric = fals
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		disabled,
 		invalid,
-		className: "x78zum5 xdt5ytf",
+		className: "x9f619 x78zum5 xdt5ytf",
 		children: [/* @__PURE__ */ jsxs("div", {
 			...{
-				0: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7" },
-				2: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej" },
-				1: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" },
-				3: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" }
+				0: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7" },
+				2: { className: "x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej" },
+				1: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" },
+				3: { className: "xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1" }
 			}[!!invalid << 1 | !!disabled << 0],
 			children: [/* @__PURE__ */ jsx(Field.Label, {
 				className: labelClassName,
 				children: label
 			}), /* @__PURE__ */ jsx(Field.Control, {
 				...props,
-				...{
-					0: { className: "xjbqb8w xc342km x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv" },
-					2: { className: "xjbqb8w xc342km x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b" },
-					1: { className: "xjbqb8w xc342km x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8" },
-					3: { className: "xjbqb8w xc342km x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8" }
-				}[!!numeric << 1 | !!disabled << 0]
+				...mergeStatefulStyles({
+					0: { className: "xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv" },
+					2: { className: "xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b" },
+					1: { className: "xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8" },
+					3: { className: "xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8" }
+				}[!!numeric << 1 | !!disabled << 0], props)
 			})]
 		}), invalid ? /* @__PURE__ */ jsx(Field.Error, {
 			match: true,

package/dist/components/text-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { FieldControlProps as BaseUIFieldControlProps, FieldLabelState as BaseUIFieldLabelState } from '@base-ui/react/field';\nimport { Field as BaseUIField } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label sits at a fixed size at the top rather than floating up out of\n// the input on focus: the design draws it small and in place at all times, so\n// there is no transition between two positions to get right.\n\ntype TextFieldProps = {\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n} & Omit<BaseUIFieldControlProps, 'render'>;\nfunction TextField({\n  description,\n  disabled = false,\n  error,\n  label,\n  numeric = false,\n  ...props\n}: TextFieldProps) {\n  const invalid = error !== undefined;\n\n  // The label's colour follows the field's focus, which is a state only Base\n  // UI knows — StyleX cannot express `.box:focus-within .label`, because the\n  // label is the input's sibling rather than its ancestor. useCallback keeps\n  // it one reference between renders, which is what react-perf is after.\n  const labelClassName = useCallback((state: BaseUIFieldLabelState) => ({\n    0: {\n      className: \"x1w5n3ug xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7\"\n    },\n    4: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1xj74d8\"\n    },\n    2: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    6: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    1: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    5: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    3: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    7: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    }\n  })[!!disabled << 2 | !!invalid << 1 | !!(!disabled && !invalid && state.focused) << 0].className, [disabled, invalid]);\n  return <BaseUIField.Root disabled={disabled} invalid={invalid} className=\"x78zum5 xdt5ytf\">\n      <div {...{\n      0: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7\"\n      },\n      2: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej\"\n      },\n      1: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      },\n      3: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      }\n    }[!!invalid << 1 | !!disabled << 0]}>\n        <BaseUIField.Label className={labelClassName}>\n          {label}\n        </BaseUIField.Label>\n        <BaseUIField.Control {...props} {...{\n        0: {\n          className: \"xjbqb8w xc342km x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv\"\n        },\n        2: {\n          className: \"xjbqb8w xc342km x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b\"\n        },\n        1: {\n          className: \"xjbqb8w xc342km x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8\"\n        },\n        3: {\n          className: \"xjbqb8w xc342km x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8\"\n        }\n      }[!!numeric << 1 | !!disabled << 0]} />\n      </div>\n      {invalid ? <BaseUIField.Error match className=\"x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj\">\n          {error}\n        </BaseUIField.Error> : description === undefined ? null : <BaseUIField.Description className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi\">\n          {description}\n        </BaseUIField.Description>}\n    </BaseUIField.Root>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;AAyCA,SAAS,UAAU,EACjB,aACA,WAAW,OACX,OACA,OACA,UAAU,OACV,GAAG,SACc;CACjB,MAAM,UAAU,UAAU,KAAA;CAM1B,MAAM,iBAAiB,aAAa,WAAkC;EACpE,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;CACF,EAAA,CAAG,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,MAAM,YAAY,EAAE,CAAC,WAAW,CAAC,UAAU,OAAO,CAAC;CACrH,OAAO,qBAAC,MAAY,MAAb;EAA4B;EAAmB;EAAS,WAAU;EAAlE,UAAA,CACH,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACD,WAAW,gIACb;IACA,GAAG,EACD,WAAW,iIACb;IACA,GAAG,EACD,WAAW,uHACb;IACA,GAAG,EACD,WAAW,uHACb;GACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY;GAb/B,UAAA,CAcE,oBAAC,MAAY,OAAb;IAAmB,WAAW;IAC3B,UAAA;GACgB,CAAA,GACnB,oBAAC,MAAY,SAAb;IAAqB,GAAI;IAAO,GAAI;KACpC,GAAG,EACD,WAAW,0GACb;KACA,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,0GACb;KACA,GAAG,EACD,WAAW,iHACb;IACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY;GAAG,CAAA,CAC/B;EACJ,CAAA,GAAA,UAAU,oBAAC,MAAY,OAAb;GAAmB,OAAA;GAAM,WAAU;GACzC,UAAA;EACgB,CAAA,IAAI,gBAAgB,KAAA,IAAY,OAAO,oBAAC,MAAY,aAAb;GAAyB,WAAU;GAC1F,UAAA;EACsB,CAAA,CACX;;AACtB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { FieldControlProps as BaseUIFieldControlProps, FieldLabelState as BaseUIFieldLabelState } from '@base-ui/react/field';\nimport { Field as BaseUIField } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback } from 'react';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The focus indicator is an inset box-shadow on the bottom edge rather than a\n// border that thickens. A real border going 1px -> 2px on focus grows the\n// box, which pushes every sibling below it down by a pixel — so a form\n// twitches each time focus moves between its fields. A shadow is drawn inside\n// the box and changes nothing about its size.\n//\n// The label sits at a fixed size at the top rather than floating up out of\n// the input on focus: the design draws it small and in place at all times, so\n// there is no transition between two positions to get right.\n\ntype TextFieldProps = {\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * What the field is for. Required rather than optional: a text field with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column.\n   * @default false\n   */\n  numeric?: boolean;\n} & Omit<BaseUIFieldControlProps, 'render'>;\nfunction TextField({\n  description,\n  disabled = false,\n  error,\n  label,\n  numeric = false,\n  ...props\n}: TextFieldProps) {\n  const invalid = error !== undefined;\n\n  // The label's colour follows the field's focus, which is a state only Base\n  // UI knows — StyleX cannot express `.box:focus-within .label`, because the\n  // label is the input's sibling rather than its ancestor. useCallback keeps\n  // it one reference between renders, which is what react-perf is after.\n  const labelClassName = useCallback((state: BaseUIFieldLabelState) => ({\n    0: {\n      className: \"x1w5n3ug xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7\"\n    },\n    4: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1xj74d8\"\n    },\n    2: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    6: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj\"\n    },\n    1: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    5: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    3: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    },\n    7: {\n      className: \"xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y\"\n    }\n  })[!!disabled << 2 | !!invalid << 1 | !!(!disabled && !invalid && state.focused) << 0].className, [disabled, invalid]);\n  return <BaseUIField.Root disabled={disabled} invalid={invalid} className=\"x9f619 x78zum5 xdt5ytf\">\n      <div {...{\n      0: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x89kqus x18rfq6m x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7\"\n      },\n      2: {\n        className: \"x1rrhr5q xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 x1lxxh4i x1d6xoej\"\n      },\n      1: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      },\n      3: {\n        className: \"xnnlda6 x16uus16 xbiv7yw xirz1nw xzcck0f x9f619 x18d9i69 xi7mcox x790zyz x1n2onr6 x1qno0dh xkdsq27 xpc4ca7 xepofeg x1pqbjc1\"\n      }\n    }[!!invalid << 1 | !!disabled << 0]}>\n        <BaseUIField.Label className={labelClassName}>\n          {label}\n        </BaseUIField.Label>\n        {/* `props` is the control's, which is what TextFieldProps extends,\n            so a className or style from the call site lands on the <input>\n            rather than on the wrapper around it. */}\n        <BaseUIField.Control {...props} {...mergeStatefulStyles({\n        0: {\n          className: \"xjbqb8w xc342km x9f619 x139gbkf x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv\"\n        },\n        2: {\n          className: \"xjbqb8w xc342km x9f619 x139gbkf x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b\"\n        },\n        1: {\n          className: \"xjbqb8w xc342km x9f619 x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv x1xj74d8\"\n        },\n        3: {\n          className: \"xjbqb8w xc342km x9f619 x1848etk x1c52epr xh8yej3 x1qn8t5l xh7dzej x1hmvnq2 x1t137rt x1717udv xbppi91 xss6m8b x1xj74d8\"\n        }\n      }[!!numeric << 1 | !!disabled << 0], props)} />\n      </div>\n      {invalid ? <BaseUIField.Error match className=\"x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj\">\n          {error}\n        </BaseUIField.Error> : description === undefined ? null : <BaseUIField.Description className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi\">\n          {description}\n        </BaseUIField.Description>}\n    </BaseUIField.Root>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;;AA0CA,SAAS,UAAU,EACjB,aACA,WAAW,OACX,OACA,OACA,UAAU,OACV,GAAG,SACc;CACjB,MAAM,UAAU,UAAU,KAAA;CAM1B,MAAM,iBAAiB,aAAa,WAAkC;EACpE,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,wGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;EACA,GAAG,EACD,WAAW,yGACb;CACF,EAAA,CAAG,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,MAAM,YAAY,EAAE,CAAC,WAAW,CAAC,UAAU,OAAO,CAAC;CACrH,OAAO,qBAAC,MAAY,MAAb;EAA4B;EAAmB;EAAS,WAAU;EAAlE,UAAA,CACH,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACD,WAAW,uIACb;IACA,GAAG,EACD,WAAW,wIACb;IACA,GAAG,EACD,WAAW,8HACb;IACA,GAAG,EACD,WAAW,8HACb;GACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY;GAb/B,UAAA,CAcE,oBAAC,MAAY,OAAb;IAAmB,WAAW;IAC3B,UAAA;GACgB,CAAA,GAInB,oBAAC,MAAY,SAAb;IAAqB,GAAI;IAAO,GAAI,oBAAoB;KACxD,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,wHACb;KACA,GAAG,EACD,WAAW,iHACb;KACA,GAAG,EACD,WAAW,wHACb;IACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,YAAY,IAAI,KAAK;GAAE,CAAA,CACvC;EACJ,CAAA,GAAA,UAAU,oBAAC,MAAY,OAAb;GAAmB,OAAA;GAAM,WAAU;GACzC,UAAA;EACgB,CAAA,IAAI,gBAAgB,KAAA,IAAY,OAAO,oBAAC,MAAY,aAAb;GAAyB,WAAU;GAC1F,UAAA;EACsB,CAAA,CACX;;AACtB"}

package/dist/index.d.ts

@@ -21,4 +21,5 @@ 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 };

package/dist/index.js

@@ -20,4 +20,5 @@ import Sheet from "./components/sheet/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 };

package/dist/render/nativeButton.js

@@ -0,0 +1,26 @@
+//#region src/render/nativeButton.ts
+/**
+* Whether the element a `render` prop produces is a real `<button>`.
+*
+* Base UI needs this: a `<button>` already announces its role, activates on
+* Space and Enter, and takes `disabled`, while an `<a>` or a `<div>` has to be
+* given all three by hand. It cannot see through `render` to find out, so it
+* assumes a native button and logs an error when the DOM turns out to
+* disagree — which is what `<Button render={<a href="…" />}>` used to produce
+* unless the call site knew to pass `nativeButton={false}`.
+*
+* Only a plain element with a host tag is decided here. A `render` that is a
+* function, or an element whose type is a component, could still return a
+* `<button>`, and treating one as a non-button would hand a real button the
+* role, tab index and keyboard handling it already has. Those keep Base UI's
+* own default, which is where its error message — and an explicit
+* `nativeButton` at the call site — remain the answer.
+*/
+function rendersNativeButton(render) {
+	if (render !== void 0 && typeof render !== "function" && typeof render.type === "string") return render.type === "button";
+	return true;
+}
+//#endregion
+export { rendersNativeButton };
+
+//# sourceMappingURL=nativeButton.js.map

package/dist/render/nativeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeButton.js","names":[],"sources":["../../src/render/nativeButton.ts"],"sourcesContent":["import type { ReactElement } from 'react'\n\n/**\n * Whether the element a `render` prop produces is a real `<button>`.\n *\n * Base UI needs this: a `<button>` already announces its role, activates on\n * Space and Enter, and takes `disabled`, while an `<a>` or a `<div>` has to be\n * given all three by hand. It cannot see through `render` to find out, so it\n * assumes a native button and logs an error when the DOM turns out to\n * disagree — which is what `<Button render={<a href=\"…\" />}>` used to produce\n * unless the call site knew to pass `nativeButton={false}`.\n *\n * Only a plain element with a host tag is decided here. A `render` that is a\n * function, or an element whose type is a component, could still return a\n * `<button>`, and treating one as a non-button would hand a real button the\n * role, tab index and keyboard handling it already has. Those keep Base UI's\n * own default, which is where its error message — and an explicit\n * `nativeButton` at the call site — remain the answer.\n */\nfunction rendersNativeButton(\n  render: ((...args: never) => unknown) | ReactElement | undefined,\n) {\n  if (\n    render !== undefined &&\n    typeof render !== 'function' &&\n    typeof render.type === 'string'\n  ) {\n    return render.type === 'button'\n  }\n  return true\n}\n\nexport { rendersNativeButton }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,SAAS,oBACP,QACA;CACA,IACE,WAAW,KAAA,KACX,OAAO,WAAW,cAClB,OAAO,OAAO,SAAS,UAEvB,OAAO,OAAO,SAAS;CAEzB,OAAO;AACT"}

package/dist/styles/merge.js

@@ -0,0 +1,57 @@
+//#region src/styles/merge.ts
+function joinClassNames(...names) {
+	return names.filter(Boolean).join(" ") || void 0;
+}
+/**
+* {@link mergeStyles} for an element rendered by a Base UI component, where
+* `className` and `style` may each be a function of the component's render
+* state rather than a plain value.
+*
+* Returns functions unconditionally, since Base UI accepts them everywhere it
+* accepts the plain form and one shape is easier to follow than a union that
+* changes with the arguments. `compiled` is itself a function where the
+* component's own styles depend on that state.
+*/
+function mergeStatefulStyles(compiled, consumer) {
+	const compiledFor = (state) => typeof compiled === "function" ? compiled(state) : compiled;
+	return {
+		className: (state) => joinClassNames(compiledFor(state).className, typeof consumer.className === "function" ? consumer.className(state) : consumer.className),
+		style: (state) => mergeStyleObjects(compiledFor(state).style, typeof consumer.style === "function" ? consumer.style(state) : consumer.style)
+	};
+}
+function mergeStyleObjects(compiled, consumer) {
+	if (compiled === void 0 && consumer === void 0) return;
+	return {
+		...compiled,
+		...consumer
+	};
+}
+/**
+* Combines the styles StyleX compiled for a component with the `className`
+* and `style` its call site passed, so both reach the element.
+*
+* Spreading `stylex.props()` after the consumer's own props is what this
+* replaces, and that spread silently dropped both: the returned object always
+* carries `className`, so it overwrote rather than merged, leaving no way to
+* position a component from outside it and no warning that the prop had gone.
+*
+* Order is presentational rather than load-bearing. StyleX compiles into
+* `@layer` (see `useCSSLayers` in tsdown.config.ts) and a consumer's own
+* stylesheet is unlayered, so the cascade already gives the call site the
+* last word whichever way round the two class strings are written.
+*
+* The call site's `style` is applied over the compiled one, which is the
+* order that matters: both are inline, so nothing but source order separates
+* them.
+*/
+function mergeStyles(compiled, consumer) {
+	return {
+		...compiled,
+		className: joinClassNames(compiled.className, consumer.className),
+		style: mergeStyleObjects(compiled.style, consumer.style)
+	};
+}
+//#endregion
+export { mergeStatefulStyles, mergeStyles };
+
+//# sourceMappingURL=merge.js.map

package/dist/styles/merge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.js","names":[],"sources":["../../src/styles/merge.ts"],"sourcesContent":["import type * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\n// What `stylex.props()` hands back: a className, and a `style` object only\n// when a dynamic style contributed one — Feed's cell minimum, for instance,\n// arrives as a custom property there rather than as a class.\ntype CompiledStyles = ReturnType<typeof stylex.props>;\n\n// Base UI lets `className` and `style` be functions of a component's own\n// render state, which is how a style can depend on something CSS cannot\n// select — Chip's pressed state, a field label following its input's focus.\n// A consumer may pass either form, so anything merging with one has to\n// accept both.\ntype StatefulClassName<State> = ((state: State) => string | undefined) | string | undefined;\ntype StatefulStyle<State> = ((state: State) => CSSProperties | undefined) | CSSProperties | undefined;\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  // undefined rather than '' when there is nothing to say, so an element with\n  // no classes on either side renders without a class attribute at all.\n  return names.filter(Boolean).join(' ') || undefined;\n}\n\n/**\n * {@link mergeStyles} for an element rendered by a Base UI component, where\n * `className` and `style` may each be a function of the component's render\n * state rather than a plain value.\n *\n * Returns functions unconditionally, since Base UI accepts them everywhere it\n * accepts the plain form and one shape is easier to follow than a union that\n * changes with the arguments. `compiled` is itself a function where the\n * component's own styles depend on that state.\n */\nfunction mergeStatefulStyles<State>(compiled: ((state: State) => CompiledStyles) | CompiledStyles, consumer: {\n  className?: StatefulClassName<State>;\n  style?: StatefulStyle<State>;\n}) {\n  const compiledFor = (state: State) => typeof compiled === 'function' ? compiled(state) : compiled;\n\n  // Resolved inline rather than through one shared helper: a generic one\n  // cannot narrow `typeof value === 'function'` away from its own type\n  // parameter, so it needs an assertion where these two need none.\n  return {\n    className: (state: State) => joinClassNames(compiledFor(state).className, typeof consumer.className === 'function' ? consumer.className(state) : consumer.className),\n    style: (state: State) => mergeStyleObjects(compiledFor(state).style, typeof consumer.style === 'function' ? consumer.style(state) : consumer.style)\n  };\n}\nfunction mergeStyleObjects(compiled: CompiledStyles['style'], consumer: CSSProperties | undefined) {\n  if (compiled === undefined && consumer === undefined) {\n    return undefined;\n  }\n  return {\n    ...compiled,\n    ...consumer\n  };\n}\n\n/**\n * Combines the styles StyleX compiled for a component with the `className`\n * and `style` its call site passed, so both reach the element.\n *\n * Spreading `stylex.props()` after the consumer's own props is what this\n * replaces, and that spread silently dropped both: the returned object always\n * carries `className`, so it overwrote rather than merged, leaving no way to\n * position a component from outside it and no warning that the prop had gone.\n *\n * Order is presentational rather than load-bearing. StyleX compiles into\n * `@layer` (see `useCSSLayers` in tsdown.config.ts) and a consumer's own\n * stylesheet is unlayered, so the cascade already gives the call site the\n * last word whichever way round the two class strings are written.\n *\n * The call site's `style` is applied over the compiled one, which is the\n * order that matters: both are inline, so nothing but source order separates\n * them.\n */\nfunction mergeStyles(compiled: CompiledStyles, consumer: {\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}) {\n  return {\n    ...compiled,\n    className: joinClassNames(compiled.className, consumer.className),\n    style: mergeStyleObjects(compiled.style, consumer.style)\n  };\n}\nexport { mergeStatefulStyles, mergeStyles };"],"mappings":";AAeA,SAAS,eAAe,GAAG,OAA0C;CAGnE,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;AAC5C;;;;;;;;;;;AAYA,SAAS,oBAA2B,UAA+D,UAGhG;CACD,MAAM,eAAe,UAAiB,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CAKzF,OAAO;EACL,YAAY,UAAiB,eAAe,YAAY,KAAK,CAAC,CAAC,WAAW,OAAO,SAAS,cAAc,aAAa,SAAS,UAAU,KAAK,IAAI,SAAS,SAAS;EACnK,QAAQ,UAAiB,kBAAkB,YAAY,KAAK,CAAC,CAAC,OAAO,OAAO,SAAS,UAAU,aAAa,SAAS,MAAM,KAAK,IAAI,SAAS,KAAK;CACpJ;AACF;AACA,SAAS,kBAAkB,UAAmC,UAAqC;CACjG,IAAI,aAAa,KAAA,KAAa,aAAa,KAAA,GACzC;CAEF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF;;;;;;;;;;;;;;;;;;;AAoBA,SAAS,YAAY,UAA0B,UAG5C;CACD,OAAO;EACL,GAAG;EACH,WAAW,eAAe,SAAS,WAAW,SAAS,SAAS;EAChE,OAAO,kBAAkB,SAAS,OAAO,SAAS,KAAK;CACzD;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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",
@@ -31,6 +31,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./tokens.css": "./dist/tokens.css",
     "./package.json": "./package.json"
   },
@@ -50,7 +51,7 @@
     "format": "oxfmt",
     "format:check": "oxfmt --check",
     "lint": "oxlint --type-aware . && eslint . && npm run format:check",
-    "prepare": "husky && playwright install --with-deps",
+    "prepare": "husky && playwright install --with-deps chromium",
     "storybook": "storybook dev -p ${PORT:-6006}",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
@@ -90,7 +91,7 @@
     "husky": "9.1.7",
     "lint-staged": "17.3.0",
     "oxc-transform-react": "0.145.0",
-    "oxfmt": "0.64.0",
+    "oxfmt": "0.65.0",
     "oxlint": "1.79.0",
     "oxlint-tsgolint": "7.0.2001",
     "playwright": "1.62.1",