@kanso-labs/kanso-ui 0.2.0

package/dist/components/text/index.js

@@ -0,0 +1,173 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text/index.tsx
+const styles = {
+	base: {
+		kogj98: "x1ghz6dp",
+		$$css: true
+	},
+	bodyLarge: {
+		kMv6JI: "x16svsjw",
+		kGuDYH: "x1848etk",
+		k63SB2: "x1c52epr",
+		kb6lSQ: "x1qn8t5l",
+		kLWn49: "xh7dzej",
+		$$css: true
+	},
+	bodyMedium: {
+		kMv6JI: "xpo2rfv",
+		kGuDYH: "x193rfdd",
+		k63SB2: "x1hews6w",
+		kb6lSQ: "xn43zvd",
+		kLWn49: "xv61bfh",
+		$$css: true
+	},
+	bodySmall: {
+		kMv6JI: "x1yicsit",
+		kGuDYH: "x1b35g6e",
+		k63SB2: "x9d6959",
+		kb6lSQ: "xwth0xh",
+		kLWn49: "xybisxh",
+		$$css: true
+	},
+	displayLarge: {
+		kMv6JI: "xjaampf",
+		kGuDYH: "xuyiek4",
+		k63SB2: "x1n2oj23",
+		kb6lSQ: "x1hxa6v5",
+		kLWn49: "x1iwmiir",
+		$$css: true
+	},
+	displayMedium: {
+		kMv6JI: "x1gi70vc",
+		kGuDYH: "xlzzeuu",
+		k63SB2: "xh9quta",
+		kb6lSQ: "x148mp24",
+		kLWn49: "xs5hucj",
+		$$css: true
+	},
+	displaySmall: {
+		kMv6JI: "x1eslvzl",
+		kGuDYH: "x1g52wnc",
+		k63SB2: "x1x664hp",
+		kb6lSQ: "x1rnjaw4",
+		kLWn49: "x92ldg4",
+		$$css: true
+	},
+	headlineLarge: {
+		kMv6JI: "x1vsmgmf",
+		kGuDYH: "xh9c4x",
+		k63SB2: "x1y15vu6",
+		kb6lSQ: "xoqu3bc",
+		kLWn49: "x10x9d6x",
+		$$css: true
+	},
+	headlineMedium: {
+		kMv6JI: "x18s19nt",
+		kGuDYH: "xcohea8",
+		k63SB2: "x1mtpwof",
+		kb6lSQ: "x1kuyk5j",
+		kLWn49: "xucx483",
+		$$css: true
+	},
+	headlineSmall: {
+		kMv6JI: "x1fz0g89",
+		kGuDYH: "xkb6epg",
+		k63SB2: "x76yrz5",
+		kb6lSQ: "x1s1qhaa",
+		kLWn49: "x1voeury",
+		$$css: true
+	},
+	labelLarge: {
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		$$css: true
+	},
+	labelMedium: {
+		kMv6JI: "xp6n8n2",
+		kGuDYH: "xkucv67",
+		k63SB2: "x14hhc5u",
+		kb6lSQ: "x12utw95",
+		kLWn49: "xvzb9hk",
+		$$css: true
+	},
+	labelSmall: {
+		kMv6JI: "xs1w0rn",
+		kGuDYH: "x1n35her",
+		k63SB2: "x1su64ma",
+		kb6lSQ: "xdlnduh",
+		kLWn49: "xaomhve",
+		$$css: true
+	},
+	titleLarge: {
+		kMv6JI: "xdy5w5q",
+		kGuDYH: "xete2z3",
+		k63SB2: "x14ijtet",
+		kb6lSQ: "xug9e1u",
+		kLWn49: "x2divse",
+		$$css: true
+	},
+	titleMedium: {
+		kMv6JI: "x46eyla",
+		kGuDYH: "x5ehqhr",
+		k63SB2: "xrf6cl6",
+		kb6lSQ: "x1g135zh",
+		kLWn49: "x1ggk5va",
+		$$css: true
+	},
+	titleSmall: {
+		kMv6JI: "xrgwony",
+		kGuDYH: "x12s497w",
+		k63SB2: "x1szcwkt",
+		kb6lSQ: "xo803ec",
+		kLWn49: "xyl1r0q",
+		$$css: true
+	}
+};
+const tones = {
+	default: {
+		kMwMTN: "x139gbkf",
+		$$css: true
+	},
+	error: {
+		kMwMTN: "x4ii1qj",
+		$$css: true
+	},
+	inherit: {
+		kMwMTN: "x1heor9g",
+		$$css: true
+	},
+	muted: {
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	},
+	negative: {
+		kMwMTN: "x12gp0t",
+		$$css: true
+	},
+	positive: {
+		kMwMTN: "x4no3js",
+		$$css: true
+	},
+	primary: {
+		kMwMTN: "x1mxwv8y",
+		$$css: true
+	}
+};
+function Text({ render, tone = "default", variant = "bodyMedium", ...props$1 }) {
+	return useRender({
+		defaultTagName: "span",
+		props: {
+			...props$1,
+			...props(styles.base, styles[variant], tones[tone])
+		},
+		render
+	});
+}
+//#endregion
+export { Text as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,30 @@
+import { FieldControlProps } from "@base-ui/react/field";
+//#region src/components/text-field/index.d.ts
+type TextFieldProps = {
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state — the message, the red underline, and
+   * `aria-invalid` all follow from it.
+   */
+  error?: string;
+  /**
+   * What the field is for. Required rather than optional: a text field with
+   * no label is a box a screen reader cannot name.
+   */
+  label: string;
+  /**
+   * Renders the value in the mono face with tabular figures, for amounts and
+   * other numbers meant to be compared down a column.
+   * @default false
+   */
+  numeric?: boolean;
+} & Omit<FieldControlProps, 'render'>;
+declare function TextField({ description, disabled, error, label, numeric, ...props }: TextFieldProps): import("react").JSX.Element;
+//#endregion
+export { type TextFieldProps, TextField as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Field } from "@base-ui/react/field";
+//#region src/components/text-field/index.tsx
+function TextField({ description, disabled = false, error, 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: "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" }
+			}[!!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]
+			})]
+		}), invalid ? /* @__PURE__ */ jsx(Field.Error, {
+			match: true,
+			className: "x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj",
+			children: error
+		}) : description === void 0 ? null : /* @__PURE__ */ jsx(Field.Description, {
+			className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi",
+			children: description
+		})]
+	});
+}
+//#endregion
+export { TextField as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/dist/hooks/useRipple.js

@@ -0,0 +1,391 @@
+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 { 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;
+const INITIAL_ORIGIN_SCALE = .2;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = .35;
+const surfaceProps = props(styles.surface);
+/**
+* On touch: `Inactive -> TouchDelay -> WaitingForClick -> Inactive`, or
+* `Inactive -> TouchDelay -> Holding -> WaitingForClick -> Inactive` for a
+* held press.
+*
+* On mouse or pen: `Inactive -> WaitingForClick -> Inactive`.
+*/
+const RippleState = {
+	/** A touch has been confirmed as a press (held past the touch delay). */
+	Holding: 2,
+	/** No press in progress. Touch down moves to TouchDelay; mouse/pen down moves to WaitingForClick. */
+	Inactive: 0,
+	/** Touch down received; waiting to see if it's a tap or a scroll/swipe. */
+	TouchDelay: 1,
+	/** The press has finished growing; waiting for the click that ends it. */
+	WaitingForClick: 3
+};
+function isTouch(event) {
+	return event.pointerType === "touch";
+}
+/**
+* Renders a press ripple that grows from the pointer's position, or from
+* the element's center for a keyboard or other non-pointer activation.
+*
+* Growth runs via the Web Animations API on a single reused element (no
+* per-click DOM nodes to clean up), over a fixed duration independent of how
+* long the element is held — a real press-and-hold keeps the ripple
+* growing until release, while a quick tap is still held visible for a
+* minimum duration so it plays a complete animation rather than a flicker.
+*
+* Merges its own handlers with `externalHandlers` (e.g. a component's own
+* consumer-supplied props — ripple's own run first, then the external
+* ones) and returns `handlers` to spread onto the interactive element and
+* `surface`, the node to render as a child. The host element must
+* establish a positioning context (`position: relative` or similar) so
+* `surface`, which fills it via `inset: 0`, clips to its bounds and
+* inherits its shape.
+*
+* Pass `enabled: false` to opt out — no ripple listeners are attached and
+* no surface is rendered, leaving `externalHandlers` and a component's own
+* hover/press state layer (if any) untouched.
+*
+* `handlers` and `surface` are hand-memoized (not left to build-tool
+* optimization) so a consumer rendering many instances — a list of icon
+* buttons, say — can memoize around them too, and so stability doesn't
+* depend on any particular compiler being configured.
+*/
+function useRipple(t0, t1) {
+	const $ = c(43);
+	const enabled = t0 === void 0 ? true : t0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = t1 === void 0 ? {} : t1;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const externalHandlers = t2;
+	const [pressed, setPressed] = useState(false);
+	const rippleRef = useRef(null);
+	const state = useRef(RippleState.Inactive);
+	const growAnimation = useRef(void 0);
+	const rippleStartEvent = useRef(void 0);
+	const initialSize = useRef(0);
+	const rippleScale = useRef("1");
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (event) => {
+			if (!event.isPrimary) return false;
+			const startEvent = rippleStartEvent.current;
+			if (startEvent && startEvent.pointerId !== event.pointerId) return false;
+			return isTouch(event) || event.buttons === 1;
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const shouldReactToEvent = t3;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (rect) => {
+			const { height, width } = rect;
+			const maxDimension = Math.max(height, width);
+			const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDimension, SOFT_EDGE_MINIMUM_SIZE);
+			const size = Math.floor(maxDimension * INITIAL_ORIGIN_SCALE);
+			const maxRadius = Math.hypot(width, height) + PADDING;
+			initialSize.current = size;
+			rippleScale.current = `${(maxRadius + softEdgeSize) / size}`;
+			return `${size}px`;
+		};
+		$[3] = t4;
+	} else t4 = $[3];
+	const determineRippleSize = t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (rect_0, positionEvent) => {
+			const { height: height_0, left, top, width: width_0 } = rect_0;
+			const size_0 = initialSize.current;
+			const endPoint = {
+				x: (width_0 - size_0) / 2,
+				y: (height_0 - size_0) / 2
+			};
+			const origin = positionEvent ? {
+				x: positionEvent.clientX - left,
+				y: positionEvent.clientY - top
+			} : {
+				x: width_0 / 2,
+				y: height_0 / 2
+			};
+			return {
+				endPoint,
+				startPoint: {
+					x: origin.x - size_0 / 2,
+					y: origin.y - size_0 / 2
+				}
+			};
+		};
+		$[4] = t5;
+	} else t5 = $[4];
+	const getTranslationCoordinates = t5;
+	let t6;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (target, positionEvent_0) => {
+			const ripple = rippleRef.current;
+			if (!ripple) return;
+			setPressed(true);
+			growAnimation.current?.cancel();
+			const rect_1 = target.getBoundingClientRect();
+			const size_1 = determineRippleSize(rect_1);
+			const { endPoint: endPoint_0, startPoint: startPoint_0 } = getTranslationCoordinates(rect_1, positionEvent_0);
+			ripple.style.width = size_1;
+			ripple.style.height = size_1;
+			growAnimation.current = ripple.animate({ transform: [`translate(${startPoint_0.x}px, ${startPoint_0.y}px) scale(1)`, `translate(${endPoint_0.x}px, ${endPoint_0.y}px) scale(${rippleScale.current})`] }, {
+				duration: motionDurationMs.long1,
+				easing: motionEasing.standard,
+				fill: "forwards"
+			});
+		};
+		$[5] = t6;
+	} else t6 = $[5];
+	const startPressAnimation = t6;
+	let t7;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = async () => {
+			rippleStartEvent.current = void 0;
+			state.current = RippleState.Inactive;
+			const animation = growAnimation.current;
+			const elapsed = typeof animation?.currentTime === "number" ? animation.currentTime : Infinity;
+			if (elapsed >= motionDurationMs.medium1) {
+				setPressed(false);
+				return;
+			}
+			await new Promise((resolve) => {
+				setTimeout(resolve, motionDurationMs.medium1 - elapsed);
+			});
+			if (growAnimation.current !== animation) return;
+			setPressed(false);
+		};
+		$[6] = t7;
+	} else t7 = $[6];
+	const endPressAnimation = t7;
+	let t8;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => state.current;
+		$[7] = t8;
+	} else t8 = $[7];
+	const getState = t8;
+	let t9;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = async (event_0) => {
+			if (!shouldReactToEvent(event_0)) return;
+			rippleStartEvent.current = event_0;
+			const target_0 = event_0.currentTarget;
+			if (!isTouch(event_0)) {
+				state.current = RippleState.WaitingForClick;
+				startPressAnimation(target_0, event_0);
+				return;
+			}
+			state.current = RippleState.TouchDelay;
+			await new Promise(_temp);
+			if (getState() !== RippleState.TouchDelay) return;
+			state.current = RippleState.Holding;
+			startPressAnimation(target_0, event_0);
+		};
+		$[8] = t9;
+	} else t9 = $[8];
+	const handlePointerDownAsync = t9;
+	let t10;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = (event_1) => {
+			handlePointerDownAsync(event_1);
+		};
+		$[9] = t10;
+	} else t10 = $[9];
+	const handlePointerDown = t10;
+	let t11;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (event_2) => {
+			if (!shouldReactToEvent(event_2)) return;
+			if (state.current === RippleState.Holding) {
+				state.current = RippleState.WaitingForClick;
+				return;
+			}
+			if (state.current === RippleState.TouchDelay) {
+				state.current = RippleState.WaitingForClick;
+				startPressAnimation(event_2.currentTarget, rippleStartEvent.current);
+			}
+		};
+		$[10] = t11;
+	} else t11 = $[10];
+	const handlePointerUp = t11;
+	let t12;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (event_3) => {
+			if (isTouch(event_3) || !shouldReactToEvent(event_3)) return;
+			if (state.current !== RippleState.Inactive) endPressAnimation();
+		};
+		$[11] = t12;
+	} else t12 = $[11];
+	const handlePointerLeave = t12;
+	let t13;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = (event_4) => {
+			if (!shouldReactToEvent(event_4)) return;
+			endPressAnimation();
+		};
+		$[12] = t13;
+	} else t13 = $[12];
+	const handlePointerCancel = t13;
+	let t14;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (event_5) => {
+			if (state.current === RippleState.WaitingForClick) {
+				endPressAnimation();
+				return;
+			}
+			if (state.current === RippleState.Inactive) {
+				startPressAnimation(event_5.currentTarget);
+				endPressAnimation();
+			}
+		};
+		$[13] = t14;
+	} else t14 = $[13];
+	const handleClick = t14;
+	let t15;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = () => {
+			endPressAnimation();
+		};
+		$[14] = t15;
+	} else t15 = $[14];
+	const handleContextMenu = t15;
+	const { onClick: onClickProp, onContextMenu: onContextMenuProp, onPointerCancel: onPointerCancelProp, onPointerDown: onPointerDownProp, onPointerLeave: onPointerLeaveProp, onPointerUp: onPointerUpProp } = externalHandlers;
+	let t16;
+	if ($[15] !== onClickProp) {
+		t16 = (event_6) => {
+			handleClick(event_6);
+			onClickProp?.(event_6);
+		};
+		$[15] = onClickProp;
+		$[16] = t16;
+	} else t16 = $[16];
+	const onClick = t16;
+	let t17;
+	if ($[17] !== onContextMenuProp) {
+		t17 = (event_7) => {
+			handleContextMenu();
+			onContextMenuProp?.(event_7);
+		};
+		$[17] = onContextMenuProp;
+		$[18] = t17;
+	} else t17 = $[18];
+	const onContextMenu = t17;
+	let t18;
+	if ($[19] !== onPointerCancelProp) {
+		t18 = (event_8) => {
+			handlePointerCancel(event_8);
+			onPointerCancelProp?.(event_8);
+		};
+		$[19] = onPointerCancelProp;
+		$[20] = t18;
+	} else t18 = $[20];
+	const onPointerCancel = t18;
+	let t19;
+	if ($[21] !== onPointerDownProp) {
+		t19 = (event_9) => {
+			handlePointerDown(event_9);
+			onPointerDownProp?.(event_9);
+		};
+		$[21] = onPointerDownProp;
+		$[22] = t19;
+	} else t19 = $[22];
+	const onPointerDown = t19;
+	let t20;
+	if ($[23] !== onPointerLeaveProp) {
+		t20 = (event_10) => {
+			handlePointerLeave(event_10);
+			onPointerLeaveProp?.(event_10);
+		};
+		$[23] = onPointerLeaveProp;
+		$[24] = t20;
+	} else t20 = $[24];
+	const onPointerLeave = t20;
+	let t21;
+	if ($[25] !== onPointerUpProp) {
+		t21 = (event_11) => {
+			handlePointerUp(event_11);
+			onPointerUpProp?.(event_11);
+		};
+		$[25] = onPointerUpProp;
+		$[26] = t21;
+	} else t21 = $[26];
+	const onPointerUp = t21;
+	let t22;
+	if ($[27] !== onClick || $[28] !== onContextMenu || $[29] !== onPointerCancel || $[30] !== onPointerDown || $[31] !== onPointerLeave || $[32] !== onPointerUp) {
+		t22 = {
+			onClick,
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[27] = onClick;
+		$[28] = onContextMenu;
+		$[29] = onPointerCancel;
+		$[30] = onPointerDown;
+		$[31] = onPointerLeave;
+		$[32] = onPointerUp;
+		$[33] = t22;
+	} else t22 = $[33];
+	const handlers = t22;
+	let t23;
+	if ($[34] !== pressed) {
+		t23 = props(styles.press, pressed && styles.pressed);
+		$[34] = pressed;
+		$[35] = t23;
+	} else t23 = $[35];
+	let t24;
+	if ($[36] !== t23) {
+		t24 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			...surfaceProps,
+			children: /* @__PURE__ */ jsx("span", {
+				ref: rippleRef,
+				...t23
+			})
+		});
+		$[36] = t23;
+		$[37] = t24;
+	} else t24 = $[37];
+	const surface = t24;
+	let t25;
+	if ($[38] !== handlers || $[39] !== surface) {
+		t25 = {
+			handlers,
+			surface
+		};
+		$[38] = handlers;
+		$[39] = surface;
+		$[40] = t25;
+	} else t25 = $[40];
+	const enabledResult = t25;
+	let t26;
+	if ($[41] !== externalHandlers) {
+		t26 = {
+			handlers: externalHandlers,
+			surface: null
+		};
+		$[41] = externalHandlers;
+		$[42] = t26;
+	} else t26 = $[42];
+	return enabled ? enabledResult : t26;
+}
+function _temp(resolve_0) {
+	setTimeout(resolve_0, motionDurationMs.short2);
+}
+//#endregion
+export { useRipple };
+
+//# sourceMappingURL=useRipple.js.map