@kanso-labs/kanso-ui 0.2.0

package/dist/cjs/components/text/index.d.cts

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

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

@@ -0,0 +1,53 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _base_ui_react_field = require("@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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_field.Field.Root, {
+		disabled,
+		invalid,
+		className: "x78zum5 xdt5ytf",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Label, {
+				className: labelClassName,
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.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__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Error, {
+			match: true,
+			className: "x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi x4ii1qj",
+			children: error
+		}) : description === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Description, {
+			className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh x10im51j x1y88zpp xboopgi",
+			children: description
+		})]
+	});
+}
+//#endregion
+exports.default = TextField;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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,kBAAA,GAAiB,MAAA,YAAA,EAAa,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,iBAAA,GAAA,kBAAA,KAAA,CAAC,qBAAA,MAAY,MAAb;EAA4B;EAAmB;EAAS,WAAU;EAAlE,UAAA,CACH,iBAAA,GAAA,kBAAA,KAAA,CAAC,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,MAAY,OAAb;IAAmB,WAAW;IAC3B,UAAA;GACgB,CAAA,GACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,MAAY,OAAb;GAAmB,OAAA;GAAM,WAAU;GACzC,UAAA;EACgB,CAAA,IAAI,gBAAgB,KAAA,IAAY,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,MAAY,aAAb;GAAyB,WAAU;GAC1F,UAAA;EACsB,CAAA,CACX;;AACtB"}

package/dist/cjs/components/text-field/index.d.cts

@@ -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.cts.map

package/dist/cjs/hooks/useRipple.cjs

@@ -0,0 +1,391 @@
+const require_stylex = require("../node_modules/@stylexjs/stylex/lib/es/stylex.cjs");
+const require_ripple = require("../styles/ripple.cjs");
+const require_values = require("../tokens/values.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react = require("react");
+//#region src/hooks/useRipple.tsx
+/** How far the ripple grows past the host's corners. `spacing.sm`. */
+const PADDING = require_values.spacingPx.sm;
+const INITIAL_ORIGIN_SCALE = .2;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = .35;
+const surfaceProps = require_stylex.props(require_ripple.rippleStyles.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 $ = (0, react_compiler_runtime.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] = (0, react.useState)(false);
+	const rippleRef = (0, react.useRef)(null);
+	const state = (0, react.useRef)(RippleState.Inactive);
+	const growAnimation = (0, react.useRef)(void 0);
+	const rippleStartEvent = (0, react.useRef)(void 0);
+	const initialSize = (0, react.useRef)(0);
+	const rippleScale = (0, react.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: require_values.motionDurationMs.long1,
+				easing: require_values.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 >= require_values.motionDurationMs.medium1) {
+				setPressed(false);
+				return;
+			}
+			await new Promise((resolve) => {
+				setTimeout(resolve, require_values.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 = require_stylex.props(require_ripple.rippleStyles.press, pressed && require_ripple.rippleStyles.pressed);
+		$[34] = pressed;
+		$[35] = t23;
+	} else t23 = $[35];
+	let t24;
+	if ($[36] !== t23) {
+		t24 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			...surfaceProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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, require_values.motionDurationMs.short2);
+}
+//#endregion
+exports.useRipple = useRipple;
+
+//# sourceMappingURL=useRipple.cjs.map

package/dist/cjs/hooks/useRipple.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.cjs","names":["rect","width","size","height","positionEvent","startPoint","endPoint","event","target","rippleRef","resolve"],"sources":["../../../src/hooks/useRipple.tsx"],"sourcesContent":["import type { MouseEvent, MouseEventHandler, PointerEvent, PointerEventHandler, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport { rippleStyles } from '../styles/ripple';\nimport { motionDurationMs, motionEasing, spacingPx } from '../tokens/values';\n\n// Every timing this file drives is a motion token, spent at the point of use\n// below. They come from tokens/values rather than the StyleX theme because\n// element.animate() and setTimeout both reject a token's var() form, and the\n// same is true of the one geometry token: `PADDING` is added to a radius, and\n// a var() would concatenate rather than add. See src/styles/ripple.ts for the\n// opacity half of the mechanism, whose three timings are deliberately not\n// tokens.\n\n/** How far the ripple grows past the host's corners. `spacing.sm`. */\nconst PADDING = spacingPx.sm;\n\n// The rest are ratios and a pixel floor that no token group covers — spacing\n// is layout rhythm, and nothing in the set holds bare geometric ratios.\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\n\n// Static input, so this is computed once for every consumer of the module\n// rather than once per component instance.\nconst surfaceProps = stylex.props(rippleStyles.surface);\n\n/**\n * On touch: `Inactive -> TouchDelay -> WaitingForClick -> Inactive`, or\n * `Inactive -> TouchDelay -> Holding -> WaitingForClick -> Inactive` for a\n * held press.\n *\n * On mouse or pen: `Inactive -> WaitingForClick -> Inactive`.\n */\nconst RippleState = {\n  /** A touch has been confirmed as a press (held past the touch delay). */\n  Holding: 2,\n  /** No press in progress. Touch down moves to TouchDelay; mouse/pen down moves to WaitingForClick. */\n  Inactive: 0,\n  /** Touch down received; waiting to see if it's a tap or a scroll/swipe. */\n  TouchDelay: 1,\n  /** The press has finished growing; waiting for the click that ends it. */\n  WaitingForClick: 3\n} as const;\ninterface RippleEventHandlers<HostElement extends HTMLElement> {\n  onClick?: MouseEventHandler<HostElement>;\n  onContextMenu?: MouseEventHandler<HostElement>;\n  onPointerCancel?: PointerEventHandler<HostElement>;\n  onPointerDown?: PointerEventHandler<HostElement>;\n  onPointerLeave?: PointerEventHandler<HostElement>;\n  onPointerUp?: PointerEventHandler<HostElement>;\n}\ntype RippleState = (typeof RippleState)[keyof typeof RippleState];\nfunction isTouch(event: PointerEvent) {\n  return event.pointerType === 'touch';\n}\n\n/**\n * Renders a press ripple that grows from the pointer's position, or from\n * the element's center for a keyboard or other non-pointer activation.\n *\n * Growth runs via the Web Animations API on a single reused element (no\n * per-click DOM nodes to clean up), over a fixed duration independent of how\n * long the element is held — a real press-and-hold keeps the ripple\n * growing until release, while a quick tap is still held visible for a\n * minimum duration so it plays a complete animation rather than a flicker.\n *\n * Merges its own handlers with `externalHandlers` (e.g. a component's own\n * consumer-supplied props — ripple's own run first, then the external\n * ones) and returns `handlers` to spread onto the interactive element and\n * `surface`, the node to render as a child. The host element must\n * establish a positioning context (`position: relative` or similar) so\n * `surface`, which fills it via `inset: 0`, clips to its bounds and\n * inherits its shape.\n *\n * Pass `enabled: false` to opt out — no ripple listeners are attached and\n * no surface is rendered, leaving `externalHandlers` and a component's own\n * hover/press state layer (if any) untouched.\n *\n * `handlers` and `surface` are hand-memoized (not left to build-tool\n * optimization) so a consumer rendering many instances — a list of icon\n * buttons, say — can memoize around them too, and so stability doesn't\n * depend on any particular compiler being configured.\n */\nfunction useRipple<HostElement extends HTMLElement = HTMLElement>(enabled = true, externalHandlers: RippleEventHandlers<HostElement> = {}): {\n  handlers: RippleEventHandlers<HostElement>;\n  surface: ReactNode;\n} {\n  const [pressed, setPressed] = useState(false);\n  const rippleRef = useRef<HTMLSpanElement>(null);\n  const state = useRef<RippleState>(RippleState.Inactive);\n  const growAnimation = useRef<Animation | undefined>(undefined);\n  const rippleStartEvent = useRef<PointerEvent<HostElement> | undefined>(undefined);\n  const initialSize = useRef(0);\n  const rippleScale = useRef('1');\n  const shouldReactToEvent = useCallback((event: PointerEvent<HostElement>) => {\n    if (!event.isPrimary) {\n      return false;\n    }\n    const startEvent = rippleStartEvent.current;\n    if (startEvent && startEvent.pointerId !== event.pointerId) {\n      return false;\n    }\n    return isTouch(event) || event.buttons === 1;\n  }, []);\n  const determineRippleSize = useCallback((rect: DOMRect) => {\n    const {\n      height,\n      width\n    } = rect;\n    const maxDimension = Math.max(height, width);\n    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDimension, SOFT_EDGE_MINIMUM_SIZE);\n    const size = Math.floor(maxDimension * INITIAL_ORIGIN_SCALE);\n    const hypotenuse = Math.hypot(width, height);\n    const maxRadius = hypotenuse + PADDING;\n    initialSize.current = size;\n    rippleScale.current = `${(maxRadius + softEdgeSize) / size}`;\n    return `${size}px`;\n  }, []);\n  const getTranslationCoordinates = useCallback((rect: DOMRect, positionEvent?: PointerEvent<HostElement>) => {\n    const {\n      height,\n      left,\n      top,\n      width\n    } = rect;\n    const size = initialSize.current;\n    const endPoint = {\n      x: (width - size) / 2,\n      y: (height - size) / 2\n    };\n    const origin = positionEvent ? {\n      x: positionEvent.clientX - left,\n      y: positionEvent.clientY - top\n    } : {\n      x: width / 2,\n      y: height / 2\n    };\n    const startPoint = {\n      x: origin.x - size / 2,\n      y: origin.y - size / 2\n    };\n    return {\n      endPoint,\n      startPoint\n    };\n  }, []);\n  const startPressAnimation = useCallback((target: HostElement, positionEvent?: PointerEvent<HostElement>) => {\n    const ripple = rippleRef.current;\n    if (!ripple) {\n      return;\n    }\n    setPressed(true);\n    growAnimation.current?.cancel();\n\n    // Read once and share: the two helpers below both only need the\n    // target's rect, and a second `getBoundingClientRect()` call back to\n    // back with the first would be a redundant layout read.\n    const rect = target.getBoundingClientRect();\n    const size = determineRippleSize(rect);\n    const {\n      endPoint,\n      startPoint\n    } = getTranslationCoordinates(rect, positionEvent);\n    ripple.style.width = size;\n    ripple.style.height = size;\n    growAnimation.current = ripple.animate({\n      transform: [`translate(${startPoint.x}px, ${startPoint.y}px) scale(1)`, `translate(${endPoint.x}px, ${endPoint.y}px) scale(${rippleScale.current})`]\n    }, {\n      // Growth runs over a fixed duration regardless of how long the\n      // press is held, so the token is spent here rather than named as a\n      // constant — element.animate() is one of the two places a StyleX\n      // token could not have gone.\n      duration: motionDurationMs.long1,\n      easing: motionEasing.standard,\n      fill: 'forwards'\n    });\n  }, [determineRippleSize, getTranslationCoordinates]);\n  const endPressAnimation = useCallback(async () => {\n    rippleStartEvent.current = undefined;\n    state.current = RippleState.Inactive;\n    const animation = growAnimation.current;\n    const elapsed = typeof animation?.currentTime === 'number' ? animation.currentTime : Infinity;\n\n    // The floor on how briefly a ripple may be visible, so a quick tap reads\n    // as a deliberate ripple rather than a flicker.\n    if (elapsed >= motionDurationMs.medium1) {\n      setPressed(false);\n      return;\n    }\n    await new Promise(resolve => {\n      setTimeout(resolve, motionDurationMs.medium1 - elapsed);\n    });\n    if (growAnimation.current !== animation) {\n      // A newer press started; let it own the pressed state instead.\n      return;\n    }\n    setPressed(false);\n  }, []);\n\n  // Reads through a function so a stale narrowing of `state.current` from\n  // before the `await` below isn't (incorrectly) carried across it — the\n  // ref can change via a different handler while this one is suspended.\n  const getState = useCallback(() => state.current, []);\n  const handlePointerDownAsync = useCallback(async (event: PointerEvent<HostElement>) => {\n    if (!shouldReactToEvent(event)) {\n      return;\n    }\n    rippleStartEvent.current = event;\n    const target = event.currentTarget;\n    if (!isTouch(event)) {\n      state.current = RippleState.WaitingForClick;\n      startPressAnimation(target, event);\n      return;\n    }\n\n    // Delay so a scroll/swipe starting on the element doesn't flash a\n    // ripple — only a held (or quickly released) touch counts as a press.\n    state.current = RippleState.TouchDelay;\n    await new Promise(resolve => {\n      setTimeout(resolve, motionDurationMs.short2);\n    });\n    if (getState() !== RippleState.TouchDelay) {\n      return;\n    }\n    state.current = RippleState.Holding;\n    startPressAnimation(target, event);\n  }, [getState, shouldReactToEvent, startPressAnimation]);\n  const handlePointerDown = useCallback((event: PointerEvent<HostElement>) => {\n    void handlePointerDownAsync(event);\n  }, [handlePointerDownAsync]);\n  const handlePointerUp = useCallback((event: PointerEvent<HostElement>) => {\n    if (!shouldReactToEvent(event)) {\n      return;\n    }\n    if (state.current === RippleState.Holding) {\n      state.current = RippleState.WaitingForClick;\n      return;\n    }\n    if (state.current === RippleState.TouchDelay) {\n      // Released before the delay elapsed: treat as a completed tap.\n      state.current = RippleState.WaitingForClick;\n      startPressAnimation(event.currentTarget, rippleStartEvent.current);\n    }\n  }, [shouldReactToEvent, startPressAnimation]);\n  const handlePointerLeave = useCallback((event: PointerEvent<HostElement>) => {\n    if (isTouch(event) || !shouldReactToEvent(event)) {\n      return;\n    }\n    if (state.current !== RippleState.Inactive) {\n      void endPressAnimation();\n    }\n  }, [endPressAnimation, shouldReactToEvent]);\n  const handlePointerCancel = useCallback((event: PointerEvent<HostElement>) => {\n    if (!shouldReactToEvent(event)) {\n      return;\n    }\n    void endPressAnimation();\n  }, [endPressAnimation, shouldReactToEvent]);\n  const handleClick = useCallback((event: MouseEvent<HostElement>) => {\n    if (state.current === RippleState.WaitingForClick) {\n      void endPressAnimation();\n      return;\n    }\n    if (state.current === RippleState.Inactive) {\n      // No pointerdown preceded this click — keyboard activation, a\n      // programmatic `.click()`, or assistive-tech-synthesized activation.\n      // Play a complete, centered press immediately.\n      startPressAnimation(event.currentTarget);\n      void endPressAnimation();\n    }\n  }, [endPressAnimation, startPressAnimation]);\n  const handleContextMenu = useCallback(() => {\n    void endPressAnimation();\n  }, [endPressAnimation]);\n  const {\n    onClick: onClickProp,\n    onContextMenu: onContextMenuProp,\n    onPointerCancel: onPointerCancelProp,\n    onPointerDown: onPointerDownProp,\n    onPointerLeave: onPointerLeaveProp,\n    onPointerUp: onPointerUpProp\n  } = externalHandlers;\n  const onClick = useCallback((event: MouseEvent<HostElement>) => {\n    handleClick(event);\n    onClickProp?.(event);\n  }, [handleClick, onClickProp]);\n  const onContextMenu = useCallback((event: MouseEvent<HostElement>) => {\n    handleContextMenu();\n    onContextMenuProp?.(event);\n  }, [handleContextMenu, onContextMenuProp]);\n  const onPointerCancel = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerCancel(event);\n    onPointerCancelProp?.(event);\n  }, [handlePointerCancel, onPointerCancelProp]);\n  const onPointerDown = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerDown(event);\n    onPointerDownProp?.(event);\n  }, [handlePointerDown, onPointerDownProp]);\n  const onPointerLeave = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerLeave(event);\n    onPointerLeaveProp?.(event);\n  }, [handlePointerLeave, onPointerLeaveProp]);\n  const onPointerUp = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerUp(event);\n    onPointerUpProp?.(event);\n  }, [handlePointerUp, onPointerUpProp]);\n  const handlers = useMemo(() => ({\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }), [onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp]);\n  const surface = useMemo(() => <span aria-hidden=\"true\" {...surfaceProps}>\n        <span ref={rippleRef} {...stylex.props(rippleStyles.press, pressed && rippleStyles.pressed)} />\n      </span>, [pressed]);\n\n  // Two separate memos rather than one branching on `enabled`, so that\n  // whichever branch is actually active stays keyed only on its own\n  // inputs — the enabled result doesn't get a new identity every time\n  // `externalHandlers` does (a component typically passes a fresh object\n  // literal each render), and vice versa.\n  const enabledResult = useMemo(() => ({\n    handlers,\n    surface\n  }), [handlers, surface]);\n  const disabledResult = useMemo(() => ({\n    handlers: externalHandlers,\n    surface: null\n  }), [externalHandlers]);\n  return enabled ? enabledResult : disabledResult;\n}\nexport { useRipple };"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_index = require("./components/avatar/index.cjs");
+const require_index$1 = require("./components/badge/index.cjs");
+const require_index$2 = require("./components/button/index.cjs");
+const require_index$3 = require("./components/card/index.cjs");
+const require_index$4 = require("./components/chip/index.cjs");
+const require_index$5 = require("./components/currency/index.cjs");
+const require_index$6 = require("./components/icon-button/index.cjs");
+const require_index$7 = require("./components/link/index.cjs");
+const require_index$8 = require("./components/list-item/index.cjs");
+const require_index$9 = require("./components/separator/index.cjs");
+const require_index$10 = require("./components/sheet/index.cjs");
+const require_index$11 = require("./components/tabs/index.cjs");
+const require_index$12 = require("./components/text/index.cjs");
+const require_index$13 = require("./components/text-field/index.cjs");
+exports.Avatar = require_index.default;
+exports.Badge = require_index$1.default;
+exports.Button = require_index$2.default;
+exports.Card = require_index$3.default;
+exports.Chip = require_index$4.default;
+exports.Currency = require_index$5.default;
+exports.IconButton = require_index$6.default;
+exports.Link = require_index$7.default;
+exports.ListItem = require_index$8.default;
+exports.Separator = require_index$9.default;
+exports.Sheet = require_index$10.default;
+exports.Tabs = require_index$11.default;
+exports.Text = require_index$12.default;
+exports.TextField = require_index$13.default;

package/dist/cjs/index.d.cts

@@ -0,0 +1,16 @@
+import Avatar, { AvatarProps } from "./components/avatar/index.cjs";
+import Badge, { BadgeProps } from "./components/badge/index.cjs";
+import Button, { ButtonProps } from "./components/button/index.cjs";
+import Card, { CardProps } from "./components/card/index.cjs";
+import Chip, { ChipProps } from "./components/chip/index.cjs";
+import Currency, { CurrencyProps } from "./components/currency/index.cjs";
+import IconButton, { IconButtonProps } from "./components/icon-button/index.cjs";
+import Link, { LinkProps } from "./components/link/index.cjs";
+import ListItem, { ListItemProps } from "./components/list-item/index.cjs";
+import Separator, { SeparatorProps } from "./components/separator/index.cjs";
+import Sheet, { SheetProps } from "./components/sheet/index.cjs";
+import Tabs, { TabsProps } from "./components/tabs/index.cjs";
+import Text, { TextProps } from "./components/text/index.cjs";
+import TextField, { TextFieldProps } from "./components/text-field/index.cjs";
+import "./components/index.cjs";
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };