@kanso-labs/kanso-ui 0.2.0

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

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/card/index.d.ts
+type CardProps = {
+  children?: ReactNode;
+  /**
+   * Renders a `<button>` that ripples and lifts on hover, for a card that is
+   * itself the thing you press. Leave it off for a card that merely holds
+   * content, including one containing its own buttons.
+   * @default false
+   */
+  interactive?: boolean;
+  /**
+   * `none` removes the card's own padding, for a card whose children run to
+   * its edges — a list of rows separated by rules.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none';
+  /**
+   * How the card separates itself from the page: `elevated` casts a shadow,
+   * `filled` sits on a darker surface, `outlined` draws a border.
+   * @default 'elevated'
+   */
+  variant?: CardVariant;
+} & HTMLAttributes<HTMLElement>;
+type CardVariant = 'elevated' | 'filled' | 'outlined';
+declare function Card({ children, interactive, padding, variant, ...props }: CardProps): import("react").JSX.Element;
+//#endregion
+export { type CardProps, Card as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -0,0 +1,84 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/card/index.tsx
+const styles = {
+	base: {
+		kaIpWk: "xhpdng0",
+		kMzoRj: "xc342km",
+		k1xSpc: "x1lliihq",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	},
+	elevated: {
+		kWkggS: "x1vnz5z6",
+		kGVxlE: "x19efjv6",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "x1rrhr5q",
+		$$css: true
+	},
+	interactive: {
+		kkrTdU: "x1ypdohk",
+		kVVagm: "xln7xf2",
+		kzqmXN: "xh8yej3",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		k9WMMc: "x1yc453h",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x14s9m32",
+		kVAM5u: "x133yhug",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		$$css: true
+	},
+	paddingDefault: {
+		kmVPX3: "xgc26li",
+		$$css: true
+	},
+	paddingNone: {
+		kmVPX3: "x1717udv",
+		$$css: true
+	}
+};
+const interactionStyles = {
+	elevated: {
+		kWkggS: "xu5m21g x5r8g2b x1vnz5z6",
+		kGVxlE: "x1g60mc1 x1fzngjt x19efjv6",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "x1w49kxs xovjh5a x1rrhr5q",
+		$$css: true
+	},
+	outlined: {
+		kWkggS: "x1jqfdmz x1dmgsxd x14s9m32",
+		$$css: true
+	}
+};
+function Card({ children, interactive = false, padding = "default", variant = "elevated", ...props$1 }) {
+	const ripple = useRipple(interactive);
+	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
+	if (!interactive) return /* @__PURE__ */ jsx("div", {
+		...props$1,
+		...props(styles.base, styles[variant], padded),
+		children
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...ripple.handlers,
+		...props$1,
+		...props(styles.base, styles[variant], padded, styles.interactive, interactionStyles[variant]),
+		children: [children, ripple.surface]
+	});
+}
+//#endregion
+export { Card as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"xhpdng0\",\n    kMzoRj: \"xc342km\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> and a <button> both accept, because\n// `interactive` decides which one renders. Anything element-specific — a\n// button's `type`, a div's ref type — would be wrong for one of the two, so\n// the shared surface is what the prop type can honestly promise.\ntype CardProps = {\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and lifts on hover, for a card that is\n   * itself the thing you press. Leave it off for a card that merely holds\n   * content, including one containing its own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & HTMLAttributes<HTMLElement>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\nfunction Card({\n  children,\n  interactive = false,\n  padding = 'default',\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  if (!interactive) {\n    return <div {...props} {...stylex.props(styles.base, styles[variant], padded)}>\n        {children}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...stylex.props(styles.base, styles[variant], padded, styles.interactive, interactionStyles[variant])}>\n      {children}\n      {ripple.surface}\n    </button>;\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;AAiBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,oBAAoB;CACxB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AA6BA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,UAAU,WACV,UAAU,YACV,GAAG,WACS;CACZ,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,MAAM;EACvE;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,OAAO,aAAa,kBAAkB,QAAQ;EAA3J,UAAA,CACF,UACA,OAAO,OACF;;AACZ"}

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

@@ -0,0 +1,13 @@
+import { ToggleProps } from "@base-ui/react/toggle";
+//#region src/components/chip/index.d.ts
+type ChipProps<Value extends string = string> = ToggleProps<Value>;
+/**
+ * A chip is a two-state button, so its selected state is Base UI's `pressed`:
+ * pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to
+ * let it keep its own state. Selection is announced through `aria-pressed`
+ * rather than a role of its own.
+ */
+declare function Chip<Value extends string = string>({ children, ...props }: ChipProps<Value>): import("react").JSX.Element;
+//#endregion
+export { type ChipProps, Chip as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/chip/index.tsx
+/**
+* A chip is a two-state button, so its selected state is Base UI's `pressed`:
+* pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to
+* let it keep its own state. Selection is announced through `aria-pressed`
+* rather than a role of its own.
+*/
+function Chip(t0) {
+	const $ = c(6);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(Toggle, {
+			...props,
+			className: classNameForState,
+			style: styleForState,
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function classNameForState(state) {
+	return propsFor(state).className;
+}
+function propsFor(state) {
+	return {
+		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x1fwvt7v xhfb3ry x1w5n3ug" },
+		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd" }
+	}[!!state.pressed << 0];
+}
+function styleForState(state) {
+	return propsFor(state).style;
+}
+//#endregion
+export { Chip as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["classNameForState","styleForState","children"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleProps as BaseUIToggleProps, ToggleState as BaseUIToggleState } from '@base-ui/react/toggle';\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each state composites an 'on-color' over its own container at the\n// interaction state's opacity rather than swapping in a separate hover color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes, and it is inlined at each property because\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n\ntype ChipProps<Value extends string = string> = BaseUIToggleProps<Value>;\n\n/**\n * A chip is a two-state button, so its selected state is Base UI's `pressed`:\n * pass `pressed` with `onPressedChange` to control it, or `defaultPressed` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip<Value extends string = string>({\n  children,\n  ...props\n}: ChipProps<Value>) {\n  return <BaseUIToggle {...props} className={classNameForState} style={styleForState}>\n      {children}\n    </BaseUIToggle>;\n}\nfunction classNameForState(state: BaseUIToggleState) {\n  return propsFor(state).className;\n}\n\n// StyleX has no way to target [data-pressed] on the element it is styling, so\n// the selected styles cannot be chosen in CSS. Base UI's answer is to let\n// className and style be functions of the component's own state, which is\n// what these two are — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// Declared at module scope so each is one stable reference rather than a\n// fresh closure per render, which is what react-perf's no-new-function-as-prop\n// is after. They close over nothing, so there is nothing to capture.\nfunction propsFor(state: BaseUIToggleState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 x1a42vn9 x6gcojk xjbqb8w xd8uu4e x1fwvt7v xhfb3ry x1w5n3ug\"\n    },\n    1: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x1s07b3s x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh x1eaenvl xpc4ca7 xctpbsp x1n0xrd1 x1qndd53 x15dekr4 x9r1u3d xhfb3ry x1sawysd\"\n    }\n  }[!!state.pressed << 0];\n}\nfunction styleForState(state: BaseUIToggleState) {\n  return propsFor(state).style;\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;AAyBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA6C,CAAA,CAAA,aAAA,SAAA;EAG1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,OAAA;EACV,KAAA,oBAAC,QAAD;GAAa,GAAK;GAAkBA,WAAA;GAA0BC,OAAA;GAChE;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAEnB,SAAS,kBAAkB,OAA0B;CACnD,OAAO,SAAS,KAAK,CAAC,CAAC;AACzB;AAWA,SAAS,SAAS,OAA0B;CAC1C,OAAO;EACL,GAAG,EACD,WAAW,qRACb;EACA,GAAG,EACD,WAAW,sRACb;CACF,EAAE,CAAC,CAAC,MAAM,WAAW;AACvB;AACA,SAAS,cAAc,OAA0B;CAC/C,OAAO,SAAS,KAAK,CAAC,CAAC;AACzB"}

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

@@ -0,0 +1,36 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/currency/index.d.ts
+type CurrencyProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+  /**
+   * ISO 4217 code for the currency to format in.
+   * @default 'USD'
+   */
+  currency?: string;
+  /**
+   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an
+   * app that has not chosen one still formats the way its reader expects.
+   */
+  locale?: string;
+  /**
+   * When to show the sign. `auto` shows one only on negatives, `always` also
+   * prefixes positives with a plus, and `never` shows neither — which leaves
+   * colour as the only thing separating a credit from a debt, so reach for it
+   * only where the direction is already stated some other way.
+   * @default 'auto'
+   */
+  sign?: SignDisplay;
+  /**
+   * Which colour role to render in. `auto` follows the sign of `value`, with
+   * zero reading as neutral.
+   * @default 'auto'
+   */
+  tone?: Tone;
+  /** The amount, in the currency's major units. */
+  value: number;
+};
+type SignDisplay = 'always' | 'auto' | 'never';
+type Tone = 'auto' | 'negative' | 'neutral' | 'positive';
+declare function Currency({ currency, locale, render, sign, tone, value, ...props }: CurrencyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type CurrencyProps, Currency as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/currency/index.js

@@ -0,0 +1,56 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/currency/index.tsx
+const styles = { base: {
+	kMv6JI: "xbppi91",
+	kcqcaj: "xss6m8b",
+	k63SB2: "x1bf3uqz",
+	$$css: true
+} };
+const tones = {
+	negative: {
+		kMwMTN: "x12gp0t",
+		$$css: true
+	},
+	neutral: {
+		kMwMTN: "x139gbkf",
+		$$css: true
+	},
+	positive: {
+		kMwMTN: "x4no3js",
+		$$css: true
+	}
+};
+const MINUS_SIGN = "−";
+function Currency({ currency = "USD", locale, render, sign = "auto", tone = "auto", value, ...props$1 }) {
+	return useRender({
+		defaultTagName: "span",
+		props: {
+			...props$1,
+			children: formatCurrency(value, {
+				currency,
+				locale,
+				sign
+			}),
+			...props(styles.base, tones[resolveTone(value, tone)])
+		},
+		render
+	});
+}
+function formatCurrency(value, options) {
+	return new Intl.NumberFormat(options.locale, {
+		currency: options.currency,
+		signDisplay: options.sign,
+		style: "currency"
+	}).formatToParts(value).map((part) => part.type === "minusSign" ? MINUS_SIGN : part.value).join("");
+}
+function resolveTone(value, tone) {
+	if (tone !== "auto") return tone;
+	if (value > 0) return "positive";
+	if (value < 0) return "negative";
+	return "neutral";
+}
+//#endregion
+export { Currency as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/currency/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// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\nconst styles = {\n  base: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  // stylex.props() spreads after `props` for the same reason Text does it: it\n  // wins over a consumer-supplied className rather than merging with one.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...stylex.props(styles.base, tones[resolveTone(value, tone)])\n    },\n    render\n  });\n}\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return new Intl.NumberFormat(options.locale, {\n    currency: options.currency,\n    signDisplay: options.sign,\n    style: 'currency'\n  }).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":";;;AAWA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AACA,MAAM,QAAQ;CACZ,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,aAAa;AA+BnB,SAAS,SAAS,EAChB,WAAW,OACX,QACA,QACA,OAAO,QACP,OAAO,QACP,OACA,GAAG,WACa;CAGhB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,eAAe,OAAO;IAC9B;IACA;IACA;GACF,CAAC;GACD,GAAG,MAAa,OAAO,MAAM,MAAM,YAAY,OAAO,IAAI,EAAE;EAC9D;EACA;CACF,CAAC;AACH;AAMA,SAAS,eAAe,OAAe,SAIpC;CACD,OAAO,IAAI,KAAK,aAAa,QAAQ,QAAQ;EAC3C,UAAU,QAAQ;EAClB,aAAa,QAAQ;EACrB,OAAO;CACT,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,KAAI,SAAQ,KAAK,SAAS,cAAc,aAAa,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE;AAClG;AAKA,SAAS,YAAY,OAAe,MAAY;CAC9C,IAAI,SAAS,QACX,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,OAAO;AACT"}

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,32 @@
+import { ButtonProps } from "@base-ui/react/button";
+//#region src/components/icon-button/index.d.ts
+type IconButtonProps = ButtonProps & {
+  /**
+   * What the button does, in words. Required rather than optional: an icon
+   * on its own has no accessible name, so without this the control announces
+   * nothing at all.
+   */
+  'aria-label': string;
+  /**
+   * Disables the press ripple. The hover and pressed state layers are
+   * unaffected.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * Control size: `xs` 32px, `md` 40px, `lg` 56px — the same heights `Button`
+   * uses, so the two line up beside each other in a row.
+   * @default 'md'
+   */
+  size?: 'lg' | 'md' | 'xs';
+  /**
+   * `standard` is transparent and tints what it sits on; `filled` and `tonal`
+   * carry a container of their own.
+   * @default 'standard'
+   */
+  variant?: 'filled' | 'standard' | 'tonal';
+};
+declare function IconButton({ children, disabled, disableRipple, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+//#endregion
+export { type IconButtonProps, IconButton as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.js

@@ -0,0 +1,80 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/icon-button/index.tsx
+const styles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kaIpWk: "xtecew7 x3y1ksm",
+		kMzoRj: "xc342km",
+		kkrTdU: "x1s07b3s x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kjj79g: "xl56j7k",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		kmVPX3: "x1717udv",
+		kVAEAm: "x1n2onr6",
+		kIyJzY: "x1iuyhda",
+		k1ekBW: "xb5u718",
+		kAMwcw: "x15l9jch",
+		$$css: true
+	},
+	filled: {
+		kWkggS: "xm7dzmu x1n0xrd1 x197hsbc xnety89",
+		kMwMTN: "xhfb3ry xwjo7ld",
+		$$css: true
+	},
+	lg: {
+		kZKoxP: "xnnlda6",
+		kGuDYH: "x1s3cmhv",
+		kzqmXN: "x15yg21f",
+		$$css: true
+	},
+	md: {
+		kZKoxP: "x1vqgdyp",
+		kGuDYH: "x1pvqxga",
+		kzqmXN: "x100vrsf",
+		$$css: true
+	},
+	standard: {
+		kWkggS: "x1a42vn9 x6gcojk xjbqb8w",
+		kMwMTN: "xhfb3ry x1w5n3ug",
+		$$css: true
+	},
+	tonal: {
+		kWkggS: "x1c3n7wt x1n0xrd1 xwypj8i xp89om9",
+		kMwMTN: "xhfb3ry xscdzaa",
+		$$css: true
+	},
+	xs: {
+		kZKoxP: "x10w6t97",
+		kGuDYH: "xwsyq91",
+		kzqmXN: "x1td3qas",
+		$$css: true
+	}
+};
+function IconButton({ children, disabled = false, disableRipple = false, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "md", variant = "standard", ...props$1 }) {
+	const ripple = useRipple(!disableRipple, {
+		onClick,
+		onContextMenu,
+		onPointerCancel,
+		onPointerDown,
+		onPointerLeave,
+		onPointerUp
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		disabled,
+		...ripple.handlers,
+		...props$1,
+		...props(styles.base, styles[variant], styles[size]),
+		children: [children, ripple.surface]
+	});
+}
+//#endregion
+export { IconButton as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ButtonProps as BaseUIButtonProps } from '@base-ui/react/button';\nimport { Button as BaseUIButton } from '@base-ui/react/button';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// :hover and :active still match a disabled native <button>, and stylex's\n// fixed pseudo-class ordering places both after :disabled, so without the\n// :not(:disabled) guard a hovered disabled button would render with the\n// interaction color instead of the disabled one.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the source design gives this control. The two\n// transitioned properties take different curves — the colour change is\n// linear-ish and the shape change is emphasized — so the timing functions are\n// a matching comma list rather than one value.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"xtecew7 x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kkrTdU: \"x1s07b3s x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xm7dzmu x1n0xrd1 x197hsbc xnety89\",\n    kMwMTN: \"xhfb3ry xwjo7ld\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1a42vn9 x6gcojk xjbqb8w\",\n    kMwMTN: \"xhfb3ry x1w5n3ug\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1c3n7wt x1n0xrd1 xwypj8i xp89om9\",\n    kMwMTN: \"xhfb3ry xscdzaa\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  }\n};\ntype IconButtonProps = BaseUIButtonProps & {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px — the same heights `Button`\n   * uses, so the two line up beside each other in a row.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'xs';\n  /**\n   * `standard` is transparent and tints what it sits on; `filled` and `tonal`\n   * carry a container of their own.\n   * @default 'standard'\n   */\n  variant?: 'filled' | 'standard' | 'tonal';\n};\nfunction IconButton({\n  children,\n  disabled = false,\n  disableRipple = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'md',\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // `props` (className/style/render, etc.) is spread separately: `className`\n  // and `style` there may be functions of render state, a Base UI extension\n  // ripple's own handler-only merge doesn't need to know about.\n  const ripple = useRipple<HTMLButtonElement>(!disableRipple, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <BaseUIButton disabled={disabled} {...ripple.handlers} {...props} {...stylex.props(styles.base, styles[variant], styles[size])}>\n      {children}\n      {ripple.surface}\n    </BaseUIButton>;\n}\nexport type { IconButtonProps };\nexport default IconButton;"],"mappings":";;;;;AAwBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AA2BA,SAAS,WAAW,EAClB,UACA,WAAW,OACX,gBAAgB,OAChB,SACA,eACA,iBACA,eACA,gBACA,aACA,OAAO,MACP,UAAU,YACV,GAAG,WACe;CAIlB,MAAM,SAAS,UAA6B,CAAC,eAAe;EAC1D;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OAAO,qBAAC,QAAD;EAAwB;EAAU,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,KAAK;EAA7H,UAAA,CACF,UACA,OAAO,OACI;;AAClB"}

package/dist/components/index.d.ts

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

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

@@ -0,0 +1,30 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/link/index.d.ts
+type LinkProps = {
+  /**
+   * Which colour role to render in. `primary` marks the link out from the
+   * text around it; `inherit` takes the surrounding colour and leans on the
+   * underline alone, for a link in a place already understood to be links —
+   * a footer, a breadcrumb, a nav.
+   * @default 'primary'
+   */
+  tone?: LinkTone;
+  /**
+   * When to draw the rule. Leave it at `always` in prose: without it, colour
+   * is the only thing separating the link from the sentence, which some
+   * readers cannot see. `hover` and `none` are for links whose position
+   * already announces them, such as a row of footer links.
+   * @default 'always'
+   */
+  underline?: LinkUnderline;
+} & useRender.ComponentProps<'a'>;
+type LinkTone = 'inherit' | 'primary';
+type LinkUnderline = 'always' | 'hover' | 'none';
+/**
+ * A navigational link. It renders an `<a>` and sets no type of its own, so it
+ * takes the size and face of the text it sits in.
+ */
+declare function Link({ render, tone, underline, ...props }: LinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type LinkProps, Link as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/link/index.js

@@ -0,0 +1,61 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/link/index.tsx
+const styles = { base: {
+	kaIpWk: "x1tfhd1",
+	kkrTdU: "x1ypdohk",
+	kjBf7l: "xrgy624",
+	kInvED: "x1hl8ikr",
+	k3XXqK: "x9v5kkp x1t137rt",
+	kMeerF: "x1de99jn",
+	kNySMw: "xyi4chj",
+	kcSHmL: "x1ohr1zr",
+	kIyJzY: "x1qno0dh",
+	k1ekBW: "xz1df8t",
+	kAMwcw: "xpc4ca7",
+	$$css: true
+} };
+const tones = {
+	inherit: {
+		kMwMTN: "x1aetzt3 x1heor9g",
+		k1TLXF: "x1rdisx9 x1dbr5dg",
+		$$css: true
+	},
+	primary: {
+		kMwMTN: "x1mxwv8y",
+		k1TLXF: "x1rdisx9 xfhk6l2",
+		$$css: true
+	}
+};
+const underlines = {
+	always: {
+		kMnn75: "xujl8zx",
+		$$css: true
+	},
+	hover: {
+		kMnn75: "x1sur9pj xkrqix3",
+		$$css: true
+	},
+	none: {
+		kMnn75: "xkrqix3",
+		$$css: true
+	}
+};
+/**
+* A navigational link. It renders an `<a>` and sets no type of its own, so it
+* takes the size and face of the text it sits in.
+*/
+function Link({ render, tone = "primary", underline = "always", ...props$1 }) {
+	return useRender({
+		defaultTagName: "a",
+		props: {
+			...props$1,
+			...props(styles.base, tones[tone], underlines[underline])
+		},
+		render
+	});
+}
+//#endregion
+export { Link as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font size or family. A link is nearly always a run of\n// words inside something else — a paragraph, a list, a table cell — so its\n// type is the surrounding text's decision. What is here is only what makes it\n// read as a link: the colour, the rule under it, and the focus ring.\n//\n// The underline is on by default rather than an opt-in. Colour alone fails\n// anyone who cannot separate the two hues, so a link in prose that is not\n// underlined is only distinguishable to some readers.\nconst styles = {\n  base: {\n    kaIpWk: \"x1tfhd1\",\n    kkrTdU: \"x1ypdohk\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  }\n};\n\n// Each tone gets a hover that means something. `primary` is already the accent\n// colour, so hovering it deepens the rule instead of restating the colour;\n// `inherit` sits in body text, so hovering moves it to the accent — which is\n// what tells the reader the words are a link and not emphasis.\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\ntype LinkProps = {\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & useRender.ComponentProps<'a'>;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in.\n */\nfunction Link({\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'a',\n    props: {\n      ...props,\n      ...stylex.props(styles.base, tones[tone], underlines[underline])\n    },\n    render\n  });\n}\nexport type { LinkProps };\nexport default Link;"],"mappings":";;;AAaA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AAMA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,aAAa;CACjB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;AA0BA,SAAS,KAAK,EACZ,QACA,OAAO,WACP,YAAY,UACZ,GAAG,WACS;CAIZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,MAAa,OAAO,MAAM,MAAM,OAAO,WAAW,UAAU;EACjE;EACA;CACF,CAAC;AACH"}

package/dist/components/list-item/index.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/list-item/index.d.ts
+type ListItemProps = {
+  /** The row's headline — the one thing it is mostly about. */
+  children?: ReactNode;
+  /**
+   * Renders a `<button>` that ripples and tints on hover, for a row that is
+   * itself pressable. Leave it off for a row that only presents.
+   * @default false
+   */
+  interactive?: boolean;
+  /** Content before the headline: an avatar, an icon, a checkbox. */
+  leading?: ReactNode;
+  /** A second line under the headline, in the muted role. */
+  supporting?: ReactNode;
+  /** Content after the headline, such as an amount or a control. */
+  trailing?: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+declare function ListItem({ children, interactive, leading, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
+//#endregion
+export { type ListItemProps, ListItem as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/list-item/index.js

@@ -0,0 +1,42 @@
+import { useRipple } from "../../hooks/useRipple.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list-item/index.tsx
+function ListItem({ children, interactive = false, leading, supporting, trailing, ...props }) {
+	const ripple = useRipple(interactive);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			className: "x6s0dn4 x78zum5 x2lah0s",
+			children: leading
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "x78zum5 xdt5ytf x1iyjqo2 x14qo01y xeuugli",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+				children
+			}), supporting === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh",
+				children: supporting
+			})]
+		}),
+		trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			className: "x6s0dn4 x78zum5 x2lah0s",
+			children: trailing
+		})
+	] });
+	if (!interactive) return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: "x6s0dn4 xjbqb8w xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h",
+		children: content
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...ripple.handlers,
+		...props,
+		className: "x6s0dn4 xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h x83qkoq x1p2om7n xjbqb8w x1ypdohk xln7xf2 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn",
+		children: [content, ripple.surface]
+	});
+}
+//#endregion
+export { ListItem as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, or the page.\n\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n  const content = <>\n      {leading === undefined ? null : <span className=\"x6s0dn4 x78zum5 x2lah0s\">{leading}</span>}\n      <span className=\"x78zum5 xdt5ytf x1iyjqo2 x14qo01y xeuugli\">\n        <span className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{children}</span>\n        {supporting === undefined ? null : <span className=\"x1w5n3ug x1yicsit x1b35g6e x9d6959 xwth0xh xybisxh\">{supporting}</span>}\n      </span>\n      {trailing === undefined ? null : <span className=\"x6s0dn4 x78zum5 x2lah0s\">{trailing}</span>}\n    </>;\n  if (!interactive) {\n    return <div {...props} className=\"x6s0dn4 xjbqb8w xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h\">\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} className=\"x6s0dn4 xc342km x139gbkf x78zum5 xxj4525 xh8yej3 xbktkl8 x1uvvd8r x790zyz x1n2onr6 x1yc453h x83qkoq x1p2om7n xjbqb8w x1ypdohk xln7xf2 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\">\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;AAoCA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,YACA,UACA,GAAG,SACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CACvD,MAAM,UAAU,qBAAA,UAAA,EAAA,UAAA;EACX,YAAY,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAc,CAAA;EACzF,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAA+C;GAAe,CAAA,GAC7E,eAAe,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAsD,UAAA;GAAiB,CAAA,CACtH;;EACL,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,WAAU;GAA2B,UAAA;EAAe,CAAA;CAC7F,EAAA,CAAA;CACF,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAU;EAC5B,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,WAAU;EAAhE,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}