@kanso-labs/kanso-ui 0.11.21 → 0.12.0

package/dist/components/tabs/index.js

@@ -1,26 +1,92 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { createContext, useContext, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Tabs } from "@base-ui/react/tabs";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 //#region src/components/tabs/index.tsx
+const NO_PANELS = /* @__PURE__ */ new Set();
+const PanelsContext = createContext(NO_PANELS);
+const RegisterPanelContext = createContext(() => () => {});
+function tabRenderer(hasPanel, render) {
+	return (domProps, state) => {
+		const adjusted = hasPanel ? domProps : {
+			...domProps,
+			"aria-controls": void 0
+		};
+		if (render !== void 0) return render(adjusted, state);
+		if ("href" in adjusted) return /* @__PURE__ */ jsx("a", { ...adjusted });
+		return /* @__PURE__ */ jsx("div", { ...adjusted });
+	};
+}
 /**
-* 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.
+* A tab strip and its panels. Selection is React Aria's `selectedKey`: pass
+* it with `onSelectionChange` to control it, or `defaultSelectedKey` to let
+* it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through
+* a shared `id`, and a strip may stand alone without panels.
 *
 * 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 Tabs$1(t0) {
+	const $ = c(10);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	const [panels, setPanels] = useState(NO_PANELS);
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (id) => {
+			setPanels((previous) => {
+				if (previous.has(id)) return previous;
+				const next = new Set(previous);
+				next.add(id);
+				return next;
+			});
+			return () => {
+				setPanels((previous_0) => {
+					if (!previous_0.has(id)) return previous_0;
+					const next_0 = new Set(previous_0);
+					next_0.delete(id);
+					return next_0;
+				});
+			};
+		};
+		$[3] = t1;
+	} else t1 = $[3];
+	const register = t1;
+	let t2;
+	if ($[4] !== children || $[5] !== panels) {
+		t2 = /* @__PURE__ */ jsx(RegisterPanelContext, {
+			value: register,
+			children: /* @__PURE__ */ jsx(PanelsContext, {
+				value: panels,
+				children
+			})
+		});
+		$[4] = children;
+		$[5] = panels;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tabs, {
+			...props,
+			children: t2
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 }
 function TabsList(props) {
 	const $ = c(5);
@@ -32,7 +98,7 @@ function TabsList(props) {
 	} else t0 = $[1];
 	let t1;
 	if ($[2] !== props || $[3] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Tabs.List, {
+		t1 = /* @__PURE__ */ jsx(TabList, {
 			...props,
 			...t0
 		});
@@ -43,44 +109,66 @@ function TabsList(props) {
 	return t1;
 }
 function TabsPanel(props) {
-	const $ = c(5);
+	const $ = c(9);
+	const register = useContext(RegisterPanelContext);
+	const { id } = props;
 	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStatefulStyles({ className: "x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn" }, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props || $[3] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Tabs.Panel, {
+	if ($[0] !== id || $[1] !== register) {
+		t0 = () => {
+			if (id === void 0) return;
+			return register(id);
+		};
+		t1 = [id, register];
+		$[0] = id;
+		$[1] = register;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[4] !== props) {
+		t2 = mergeStatefulStyles({ className: "x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn" }, props);
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TabPanel, {
 			...props,
-			...t0
+			...t2
 		});
-		$[2] = props;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 }
-function TabsTab(props) {
+function TabsTab(t0) {
 	const $ = c(5);
-	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStatefulStyles(tabStyles, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] !== props || $[3] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Tabs.Tab, {
+	const { render, ...props } = t0;
+	const panels = useContext(PanelsContext);
+	const hasPanel = props.id !== void 0 && panels.has(props.id);
+	const T0 = Tab;
+	const t1 = tabRenderer(hasPanel, render);
+	const t2 = mergeStatefulStyles(tabStyles, props);
+	let t3;
+	if ($[0] !== T0 || $[1] !== props || $[2] !== t1 || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
 			...props,
-			...t0
+			render: t1,
+			...t2
 		});
-		$[2] = props;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
+		$[0] = T0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 function tabStyles(state) {
 	return {
@@ -88,7 +176,7 @@ function tabStyles(state) {
 		2: { 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" },
 		1: { 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" },
 		3: { 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" }
-	}[!!state.active << 1 | !!state.disabled << 0];
+	}[!!state.isSelected << 1 | !!state.isDisabled << 0];
 }
 Tabs$1.List = TabsList;
 Tabs$1.Panel = TabsPanel;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["previous","next","register","panels","children"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\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\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab strip and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\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({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x14qo01y\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\nfunction TabsTab({\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...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. React Aria's answer is a className that\n// is 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: TabRenderProps) {\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.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/text/index.d.ts
-type TextProps = useRender.ComponentProps<'span'> & {
+type TextProps = RenderComponentProps<'span'> & {
   /**
    * Renders a `<p>` rather than the default `<span>`, for a block of prose
    * rather than a run of text inside one.

package/dist/components/text/index.js

@@ -1,6 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
-import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/index.tsx
 const styles = {
 	base: {

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 { 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// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\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   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\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  block = false,\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : '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":";;;;AAmBA,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;AA2BA,SAAS,KAAK,EACZ,QAAQ,OACR,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CACZ,OAAO,UAAU;EAIf,gBAAgB,QAAQ,MAAM;EAC9B,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM,KAAK,GAAG,OAAK;EAC/E;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\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// `block` renders a <p> and `render` is how a consumer reaches for any other\n// semantic markup — `<Text render={<h2 />}>` — and the UA margin on either\n// would then vary the spacing around otherwise identical type. The space\n// between two blocks of text is the job of whatever holds them, which is\n// where it can come from the spacing scale.\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 = RenderComponentProps<'span'> & {\n  /**\n   * Renders a `<p>` rather than the default `<span>`, for a block of prose\n   * rather than a run of text inside one.\n   *\n   * The paragraph carries no margin of its own, the same as every other Text.\n   * The space between two paragraphs belongs to whatever holds both of them,\n   * which is where it can be a step of the spacing scale rather than a\n   * browser default.\n   *\n   * Ignored when `render` is given, since that names the element outright.\n   * @default false\n   */\n  block?: boolean;\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  block = false,\n  render,\n  tone = 'default',\n  variant = 'bodyMedium',\n  ...props\n}: TextProps) {\n  return useRender({\n    // Card switches its default element the same way, and the props type\n    // stays the span's for the same reason: the two differ only in the ref's\n    // element interface, and neither adds anything a call site reaches for.\n    defaultTagName: block ? 'p' : '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":";;;;AAoBA,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;AA2BA,SAAS,KAAK,EACZ,QAAQ,OACR,QACA,OAAO,WACP,UAAU,cACV,GAAG,WACS;CACZ,OAAO,UAAU;EAIf,gBAAgB,QAAQ,MAAM;EAC9B,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.d.ts

@@ -1,6 +1,6 @@
-import { FieldControlProps } from "@base-ui/react/field";
+import { TextFieldProps } from "react-aria-components";
 //#region src/components/text-field/index.d.ts
-type TextFieldProps = {
+type TextFieldProps$1 = {
   /**
    * A hint shown under the field. Replaced by `error` when there is one, so
    * the two never stack.
@@ -23,8 +23,15 @@ type TextFieldProps = {
    * @default false
    */
   numeric?: boolean;
-} & Omit<FieldControlProps, 'render'>;
-declare function TextField({ description, disabled, error, label, numeric, ...props }: TextFieldProps): import("react").JSX.Element;
+} & Omit<TextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;
+/**
+ * A labelled single-line input. Its value is React Aria's: pass `value` with
+ * `onChange` to control it, or `defaultValue` to let it keep its own — and
+ * `onChange` is handed the string, not the event. The call site's
+ * `className` and `style` land on the field as a whole, which is the element
+ * a layout positions.
+ */
+declare function TextField$1({ description, error, isDisabled, label, numeric, ...props }: TextFieldProps$1): import("react").JSX.Element;
 //#endregion
-export { type TextFieldProps, TextField as default };
+export { type TextFieldProps$1 as TextFieldProps, TextField$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,54 +1,69 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { Field } from "@base-ui/react/field";
+import { Input, Label, Text, TextField } from "react-aria-components";
 //#region src/components/text-field/index.tsx
-function TextField({ description, disabled = false, error, label, numeric = false, ...props }) {
+/**
+* A labelled single-line input. Its value is React Aria's: pass `value` with
+* `onChange` to control it, or `defaultValue` to let it keep its own — and
+* `onChange` is handed the string, not the event. The call site's
+* `className` and `style` land on the field as a whole, which is the element
+* a layout positions.
+*/
+function TextField$1({ description, error, isDisabled = false, label, numeric = false, ...props }) {
 	const invalid = error !== void 0;
-	const labelClassName = useCallback((state) => ({
-		0: { className: "x1w5n3ug xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7" },
-		4: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1xj74d8" },
-		2: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj" },
-		6: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj" },
-		1: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" },
-		5: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" },
-		3: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" },
-		7: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" }
-	})[!!disabled << 2 | !!invalid << 1 | !!(!disabled && !invalid && state.focused) << 0].className, [disabled, invalid]);
-	return /* @__PURE__ */ jsxs(Field.Root, {
-		disabled,
-		invalid,
-		className: "x9f619 x78zum5 xdt5ytf",
+	const [focused, setFocused] = useState(false);
+	const handleFocus = useCallback(() => {
+		setFocused(true);
+	}, []);
+	const handleBlur = useCallback(() => {
+		setFocused(false);
+	}, []);
+	return /* @__PURE__ */ jsxs(TextField, {
+		isDisabled,
+		isInvalid: invalid,
+		validationBehavior: "aria",
+		...props,
+		...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf" }, props),
 		children: [/* @__PURE__ */ jsxs("div", {
+			onBlur: handleBlur,
+			onFocus: handleFocus,
 			...{
 				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,
+			}[!!invalid << 1 | !!isDisabled << 0],
+			children: [/* @__PURE__ */ jsx(Label, {
+				...{
+					0: { className: "x1w5n3ug xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7" },
+					4: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1xj74d8" },
+					2: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj" },
+					6: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x4ii1qj" },
+					1: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" },
+					5: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" },
+					3: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" },
+					7: { className: "xp6n8n2 xkucv67 x14hhc5u x1we8soy x19v39ok x12utw95 xvzb9hk x10l6tqk x1qno0dh xt3l3uh xpc4ca7 x1mxwv8y" }
+				}[!!isDisabled << 2 | !!invalid << 1 | !!(!isDisabled && !invalid && focused) << 0],
 				children: label
-			}), /* @__PURE__ */ jsx(Field.Control, {
-				...props,
-				...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,
+			}), /* @__PURE__ */ jsx(Input, { ...{
+				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 | !!isDisabled << 0] })]
+		}), invalid ? /* @__PURE__ */ jsx(Text, {
+			slot: "errorMessage",
 			className: "x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj",
 			children: error
-		}) : description === void 0 ? null : /* @__PURE__ */ jsx(Field.Description, {
+		}) : description === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+			slot: "description",
 			className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi",
 			children: description
 		})]
 	});
 }
 //#endregion
-export { TextField as default };
+export { TextField$1 as default };
 
 //# sourceMappingURL=index.js.map

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 { 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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/text-field/index.tsx"],"sourcesContent":["import type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { Input, Label, TextField as RACTextField, Text } from 'react-aria-components';\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//\n// The label's colour follows the input's focus, which no selector on the\n// label alone can express — the label is the input's sibling, not its\n// ancestor. The box tracks whether focus is within it, through the focus\n// events React bubbles, and the label takes `labelFocused` from that state.\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<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled single-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n */\nfunction TextField({\n  description,\n  error,\n  isDisabled = false,\n  label,\n  numeric = false,\n  ...props\n}: TextFieldProps) {\n  const invalid = error !== undefined;\n\n  // Focus events bubble in React, so the box hears its input gain and lose\n  // focus without the input being told anything.\n  const [focused, setFocused] = useState(false);\n  const handleFocus = useCallback(() => {\n    setFocused(true);\n  }, []);\n  const handleBlur = useCallback(() => {\n    setFocused(false);\n  }, []);\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalid}\n  // The message is this component's to show, so validation only marks\n  // the control rather than surfacing the browser's own constraint UI.\n  validationBehavior=\"aria\" {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      <div onBlur={handleBlur} onFocus={handleFocus} {...{\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 | !!isDisabled << 0]}>\n        <Label {...{\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      }[!!isDisabled << 2 | !!invalid << 1 | !!(!isDisabled && !invalid && focused) << 0]}>\n          {label}\n        </Label>\n        <Input {...{\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 | !!isDisabled << 0]} />\n      </div>\n      {invalid ? <Text slot=\"errorMessage\" className=\"x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj\">\n          {error}\n        </Text> : description === undefined ? null : <Text slot=\"description\" className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi\">\n          {description}\n        </Text>}\n    </RACTextField>;\n}\nexport type { TextFieldProps };\nexport default TextField;"],"mappings":";;;;;;;;;;;;AAuDA,SAAS,YAAU,EACjB,aACA,OACA,aAAa,OACb,OACA,UAAU,OACV,GAAG,SACc;CACjB,MAAM,UAAU,UAAU,KAAA;CAI1B,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,cAAc,kBAAkB;EACpC,WAAW,IAAI;CACjB,GAAG,CAAA,CAAE;CACL,MAAM,aAAa,kBAAkB;EACnC,WAAW,KAAK;CAClB,GAAG,CAAA,CAAE;CACL,OAAO,qBAAC,WAAD;EAA0B;EAAY,WAAW;EAGxD,oBAAmB;EAAO,GAAI;EAAO,GAAI,oBAAoB,EAC3D,WAAW,yBACb,GAAG,KAAK;EALD,UAAA,CAMH,qBAAC,OAAD;GAAK,QAAQ;GAAY,SAAS;GAAa,GAAI;IACnD,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,cAAc;GAbjC,UAAA,CAcE,oBAAC,OAAD;IAAO,GAAI;KACX,GAAG,EACD,WAAW,yGACb;KACA,GAAG,EACD,WAAW,yGACb;KACA,GAAG,EACD,WAAW,wGACb;KACA,GAAG,EACD,WAAW,wGACb;KACA,GAAG,EACD,WAAW,yGACb;KACA,GAAG,EACD,WAAW,yGACb;KACA,GAAG,EACD,WAAW,yGACb;KACA,GAAG,EACD,WAAW,yGACb;IACF,EAAE,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,WAAW,YAAY;IAC5E,UAAA;GACI,CAAA,GACP,oBAAC,OAAD,EAAO,GAAI;IACX,GAAG,EACD,WAAW,iHACb;IACA,GAAG,EACD,WAAW,wHACb;IACA,GAAG,EACD,WAAW,iHACb;IACA,GAAG,EACD,WAAW,wHACb;GACF,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,cAAc,GAAG,CAAA,CACjC;EACJ,CAAA,GAAA,UAAU,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;GAC1C,UAAA;EACG,CAAA,IAAI,gBAAgB,KAAA,IAAY,OAAO,oBAAC,MAAD;GAAM,MAAK;GAAc,WAAU;GAC7E,UAAA;EACG,CAAA,CACI;;AAClB"}

package/dist/hooks/useImageLoadingStatus.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
+//#region src/hooks/useImageLoadingStatus.ts
+/**
+* Whether an image at `src` can be shown yet. It is loaded off-screen first,
+* so a component can keep its fallback in place until the picture is ready
+* and bring the fallback back if the picture fails — an `<img>` swapped in
+* as soon as `src` is known would show the browser's broken-image glyph in
+* between.
+*
+* No `src` counts as a failure, since the outcome is the same: the fallback
+* shows. What settled is remembered against the `src` it settled for, so a
+* change of `src` reads as loading again rather than as the old outcome.
+*/
+function useImageLoadingStatus(src) {
+	const $ = c(3);
+	const [settled, setSettled] = useState(null);
+	let t0;
+	let t1;
+	if ($[0] !== src) {
+		t0 = () => {
+			if (src === void 0) return;
+			let mounted = true;
+			const settle = (status) => () => {
+				if (mounted) setSettled({
+					src,
+					status
+				});
+			};
+			const image = new window.Image();
+			image.addEventListener("load", settle("loaded"), { once: true });
+			image.addEventListener("error", settle("error"), { once: true });
+			image.src = src;
+			return () => {
+				mounted = false;
+			};
+		};
+		t1 = [src];
+		$[0] = src;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	if (src === void 0) return "error";
+	return settled?.src === src ? settled.status : "loading";
+}
+//#endregion
+export { useImageLoadingStatus };
+
+//# sourceMappingURL=useImageLoadingStatus.js.map

package/dist/hooks/useImageLoadingStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageLoadingStatus.js","names":["mounted"],"sources":["../../src/hooks/useImageLoadingStatus.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ntype ImageLoadingStatus = 'error' | 'loaded' | 'loading'\n\ninterface Settled {\n  src: string\n  status: 'error' | 'loaded'\n}\n\n/**\n * Whether an image at `src` can be shown yet. It is loaded off-screen first,\n * so a component can keep its fallback in place until the picture is ready\n * and bring the fallback back if the picture fails — an `<img>` swapped in\n * as soon as `src` is known would show the browser's broken-image glyph in\n * between.\n *\n * No `src` counts as a failure, since the outcome is the same: the fallback\n * shows. What settled is remembered against the `src` it settled for, so a\n * change of `src` reads as loading again rather than as the old outcome.\n */\nfunction useImageLoadingStatus(src: string | undefined): ImageLoadingStatus {\n  const [settled, setSettled] = useState<null | Settled>(null)\n\n  useEffect(() => {\n    if (src === undefined) {\n      return undefined\n    }\n\n    let mounted = true\n    const settle = (status: Settled['status']) => () => {\n      if (mounted) {\n        setSettled({ src, status })\n      }\n    }\n\n    const image = new window.Image()\n    image.addEventListener('load', settle('loaded'), { once: true })\n    image.addEventListener('error', settle('error'), { once: true })\n    image.src = src\n\n    return () => {\n      mounted = false\n    }\n  }, [src])\n\n  if (src === undefined) {\n    return 'error'\n  }\n  return settled?.src === src ? settled.status : 'loading'\n}\n\nexport type { ImageLoadingStatus }\n\nexport { useImageLoadingStatus }\n"],"mappings":";;;;;;;;;;;;;;AAoBA,SAAA,sBAAA,KAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CACE,MAAA,CAAA,SAAA,cAA8B,SAAyB,IAAI;CAAC,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,KAAA;EAElD,WAAA;GACR,IAAI,QAAQ,KAAA,GAAS;GAIrB,IAAA,UAAc;GACd,MAAA,UAAe,iBAA+B;IAC5C,IAAI,SACF,WAAW;KAAA;KAAA;IAAc,CAAC;GAC3B;GAGH,MAAA,QAAc,IAAI,OAAM,MAAO;GAC/B,MAAK,iBAAkB,QAAQ,OAAO,QAAQ,GAAG,EAAA,MAAQ,KAAK,CAAC;GAC/D,MAAK,iBAAkB,SAAS,OAAO,OAAO,GAAG,EAAA,MAAQ,KAAK,CAAC;GAC/D,MAAK,MAAO;GAAH,aAEF;IACL,UAAUA;GAAH;EACR;EACA,KAAA,CAAC,GAAG;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CApBR,UAAU,IAoBP,EAAK;CAER,IAAI,QAAQ,KAAA,GAAS,OACZ;CACR,OACM,SAAO,QAAU,MAAM,QAAO,SAA9B;AAAiD"}

package/dist/hooks/useRipple.js

@@ -1,9 +1,9 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { rippleStyles as styles } from "../styles/ripple.js";
 import { motionDurationMs, motionEasing, spacingPx } from "../tokens/values.js";
+import { useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useRef, useState } from "react";
 //#region src/hooks/useRipple.tsx
 /** How far the ripple grows past the host's corners. `spacing.sm`. */
 const PADDING = spacingPx.sm;