@kanso-labs/kanso-ui 0.11.21 → 0.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStyles } from '../../styles/merge';\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    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\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> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * 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} & useRender.ComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;;AAkBA,MAAM,SAAS;CACb,MAAM;EACJ,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,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;;;;;;;;;;;;;AA2CA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,SACA,eACA,iBACA,eACA,gBACA,aACA,UAAU,WACV,QACA,UAAU,YACV,GAAG,WACS;CAMZ,MAAM,SAAS,UAAU,aAAa;EACpC;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB,cAAc,WAAW;EACzC,OAAO;GACL,GAAG;GAKH,GAAI,eAAe,WAAW,KAAA,IAAY,EACxC,MAAM,SACR,IAAI,KAAA;GACJ,GAAG,OAAO;GACV,UAAU,qBAAA,UAAA,EAAA,UAAA,CACL,UACA,OAAO,OACV,EAAA,CAAA;GACF,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,eAAe,OAAO,aAAa,eAAe,kBAAkB,QAAQ,GAAG,OAAK;EACxJ;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\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    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\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> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * 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} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;;AAmBA,MAAM,SAAS;CACb,MAAM;EACJ,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,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;;;;;;;;;;;;;AA2CA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,SACA,eACA,iBACA,eACA,gBACA,aACA,UAAU,WACV,QACA,UAAU,YACV,GAAG,WACS;CAMZ,MAAM,SAAS,UAAU,aAAa;EACpC;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB,cAAc,WAAW;EACzC,OAAO;GACL,GAAG;GAKH,GAAI,eAAe,WAAW,KAAA,IAAY,EACxC,MAAM,SACR,IAAI,KAAA;GACJ,GAAG,OAAO;GACV,UAAU,qBAAA,UAAA,EAAA,UAAA,CACL,UACA,OAAO,OACV,EAAA,CAAA;GACF,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,eAAe,OAAO,aAAa,eAAe,kBAAkB,QAAQ,GAAG,OAAK;EACxJ;EACA;CACF,CAAC;AACH"}

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

@@ -1,13 +1,13 @@
-import { ToggleProps } from "@base-ui/react/toggle";
+import { ToggleButtonProps } from "react-aria-components";
 //#region src/components/chip/index.d.ts
-type ChipProps<Value extends string = string> = ToggleProps<Value>;
+type ChipProps = ToggleButtonProps;
 /**
- * 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
+ * A chip is a two-state button, so its selected state is React Aria's
+ * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` 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;
+declare function Chip({ children, ...props }: ChipProps): import("react").JSX.Element;
 //#endregion
 export { type ChipProps, Chip as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.js

@@ -1,11 +1,11 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Toggle } from "@base-ui/react/toggle";
+import { ToggleButton } from "react-aria-components";
 //#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
+* A chip is a two-state button, so its selected state is React Aria's
+* `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to
 * let it keep its own state. Selection is announced through `aria-pressed`
 * rather than a role of its own.
 */
@@ -18,7 +18,7 @@ function Chip(t0) {
 	if ($[0] !== t0) {
 		const { children: t3, ...props } = t0;
 		children = t3;
-		T0 = Toggle;
+		T0 = ToggleButton;
 		t1 = props;
 		t2 = mergeStatefulStyles(propsFor, props);
 		$[0] = t0;
@@ -51,7 +51,7 @@ function propsFor(state) {
 	return {
 		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 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 x9f619 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];
+	}[!!state.isSelected << 0];
 }
 //#endregion
 export { Chip as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","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 { mergeStatefulStyles } from '../../styles/merge';\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} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </BaseUIToggle>;\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 this is — and it is why an uncontrolled chip styles itself correctly\n// without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: BaseUIToggleState) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 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 x9f619 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}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;AA0BA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA6C,MAAA,EAAA,UAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAInC,KAAA;EAAiBA,KAAA;EAAW,KAAA,oBAAoB,UAAU,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAAjE,KAAA,oBAAC,IAAD;GAAa,GAAKA;GAAK,GAAM;GAC/B;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAWnB,SAAS,SAAS,OAA0B;CAC1C,OAAO;EACL,GAAG,EACD,WAAW,4RACb;EACA,GAAG,EACD,WAAW,6RACb;CACF,EAAE,CAAC,CAAC,MAAM,WAAW;AACvB"}
+{"version":3,"file":"index.js","names":["props","children"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// 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 = ToggleButtonProps;\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` 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({\n  children,\n  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 x10w6t97 x1xdvaa9 x1y0btm7 xmkeg23 x9f619 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 x9f619 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.isSelected << 0];\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;AA0BA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,UAAA,IAAA,GAAA,UAAA;EAAA,WAAA;EAIJ,KAAA;EAAiBA,KAAA;EAAW,KAAA,oBAAoB,UAAU,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,WAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAAjE,KAAA,oBAAC,IAAD;GAAa,GAAKA;GAAK,GAAM;GAC/B;EADe,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFV;AAEU;AAWnB,SAAS,SAAS,OAAgC;CAChD,OAAO;EACL,GAAG,EACD,WAAW,4RACb;EACA,GAAG,EACD,WAAW,6RACb;CACF,EAAE,CAAC,CAAC,MAAM,cAAc;AAC1B"}

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

@@ -1,6 +1,6 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/code/index.d.ts
-type CodeProps = useRender.ComponentProps<'code'>;
+type CodeProps = RenderComponentProps<'code'>;
 /**
  * A fragment of code, a path, or an identifier set in the mono face. It
  * renders a `<code>` and takes its scale from the text around it.

package/dist/components/code/index.js

@@ -1,5 +1,5 @@
+import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
-import { useRender } from "@base-ui/react/use-render";
 import { c } from "react/compiler-runtime";
 //#region src/components/code/index.tsx
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;;AAuBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAILA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,2CACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = RenderComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;;AAwBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAILA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,2CACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}

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

@@ -1,6 +1,6 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/container/index.d.ts
-type ContainerProps = useRender.ComponentProps<'div'> & {
+type ContainerProps = RenderComponentProps<'div'> & {
   /**
    * How wide the content may run before it stops growing. The container is
    * centred in whatever space is left over.

package/dist/components/container/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/container/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The width fourteen of this library's own story files already centre their\n// page on, which is what makes it the default rather than a number picked\n// here. A measure is a property of the content: 960px suits a page of mixed\n// components, and prose wants something nearer 58ch, which is what the story\n// files that hold prose use. Say which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = '960px';\n\n// A dynamic style rather than a static one, for the same reason Feed's is:\n// the measure comes from the call site and StyleX compiles its classes ahead\n// of time, so the value is written to a custom property inline instead.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  kzqmXN: \"xh8yej3\",\n  kUOVxO: \"xvueqy4\",\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst styles = {\n  paddingDefault: {\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  paddingNone: {\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  root: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }]\n};\ntype ContainerProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How wide the content may run before it stops growing. The container is\n   * centred in whatever space is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a measure in `ch`, since what makes a line hard to read is how many\n   * characters it holds rather than how many pixels.\n   * @default '960px'\n   */\n  maxInlineSize?: string;\n  /**\n   * Inline padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure. `none` is for a container\n   * nested inside one that already has it.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n};\n\n/**\n * A centred measure for a page or a section of one: content grows to a width\n * and stops, with the leftover space split evenly either side.\n *\n * Layout only — it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `render` swaps the element, for a container that should be a `<main>` or a\n * `<section>` rather than a `<div>`.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  render,\n  ...props\n}: ContainerProps) {\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root(maxInlineSize), padded), props)\n    },\n    render\n  });\n}\nexport type { ContainerProps };\nexport default Container;"],"mappings":";;;;AAWA,MAAM,0BAA0B;AAKhC,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO,kBAA0B,CAAC,OAAO,EACvC,uBAAsB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,aAAa,EAClH,CAAC;AACH;;;;;;;;;;;;AAgCA,SAAS,UAAU,EACjB,gBAAgB,yBAChB,UAAU,WACV,QACA,GAAG,WACc;CACjB,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,KAAK,aAAa,GAAG,MAAM,GAAG,OAAK;EACxE;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/container/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The width fourteen of this library's own story files already centre their\n// page on, which is what makes it the default rather than a number picked\n// here. A measure is a property of the content: 960px suits a page of mixed\n// components, and prose wants something nearer 58ch, which is what the story\n// files that hold prose use. Say which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = '960px';\n\n// A dynamic style rather than a static one, for the same reason Feed's is:\n// the measure comes from the call site and StyleX compiles its classes ahead\n// of time, so the value is written to a custom property inline instead.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  kzqmXN: \"xh8yej3\",\n  kUOVxO: \"xvueqy4\",\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst styles = {\n  paddingDefault: {\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  paddingNone: {\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  root: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }]\n};\ntype ContainerProps = RenderComponentProps<'div'> & {\n  /**\n   * How wide the content may run before it stops growing. The container is\n   * centred in whatever space is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a measure in `ch`, since what makes a line hard to read is how many\n   * characters it holds rather than how many pixels.\n   * @default '960px'\n   */\n  maxInlineSize?: string;\n  /**\n   * Inline padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure. `none` is for a container\n   * nested inside one that already has it.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n};\n\n/**\n * A centred measure for a page or a section of one: content grows to a width\n * and stops, with the leftover space split evenly either side.\n *\n * Layout only — it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `render` swaps the element, for a container that should be a `<main>` or a\n * `<section>` rather than a `<div>`.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  render,\n  ...props\n}: ContainerProps) {\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root(maxInlineSize), padded), props)\n    },\n    render\n  });\n}\nexport type { ContainerProps };\nexport default Container;"],"mappings":";;;;AAYA,MAAM,0BAA0B;AAKhC,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO,kBAA0B,CAAC,OAAO,EACvC,uBAAsB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,aAAa,EAClH,CAAC;AACH;;;;;;;;;;;;AAgCA,SAAS,UAAU,EACjB,gBAAgB,yBAChB,UAAU,WACV,QACA,GAAG,WACc;CACjB,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,KAAK,aAAa,GAAG,MAAM,GAAG,OAAK;EACxE;EACA;CACF,CAAC;AACH"}

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

@@ -1,8 +1,8 @@
 import { mergeStyles } from "../../styles/merge.js";
 import Button from "../button/index.js";
 import Code from "../code/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/copy-field/index.tsx
 const COPIED_RESET_MS = 2e3;
 /**

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

@@ -1,6 +1,6 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/currency/index.d.ts
-type CurrencyProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+type CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {
   /**
    * ISO 4217 code for the currency to format in.
    * @default 'USD'

package/dist/components/currency/index.js

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

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

@@ -1 +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 { mergeStyles } from '../../styles/merge';\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    kB7OPa: \"x9f619\",\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  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\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":";;;;AAYA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,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;CAChB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,eAAe,OAAO;IAC9B;IACA;IACA;GACF,CAAC;GACD,GAAG,YAAY,MAAa,OAAO,MAAM,MAAM,YAAY,OAAO,IAAI,EAAE,GAAG,OAAK;EAClF;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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// 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    kB7OPa: \"x9f619\",\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<RenderComponentProps<'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  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\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":";;;;AAaA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,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;CAChB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,eAAe,OAAO;IAC9B;IACA;IACA;GACF,CAAC;GACD,GAAG,YAAY,MAAa,OAAO,MAAM,MAAM,YAAY,OAAO,IAAI,EAAE,GAAG,OAAK;EAClF;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/feed/index.d.ts

@@ -1,6 +1,6 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/feed/index.d.ts
-type FeedProps = useRender.ComponentProps<'div'> & {
+type FeedProps = RenderComponentProps<'div'> & {
   /**
    * How narrow a cell may get before the grid drops a column. Every column is
    * at least this wide and the grid fits as many as the space allows, which is

package/dist/components/feed/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's example minimum for an adaptive grid cell, and the only number\n// the spec puts on one. It is a floor rather than a recommendation: how narrow\n// a card can get before its contents stop making sense is a property of the\n// contents, which is why M3 leaves it a parameter rather than fixing it. Most\n// feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material 3's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// M3 describes the grid by its cell rather than by its columns: Compose spells\n// it `GridCells.Adaptive(minSize)`, meaning every column is at least that wide\n// and the grid fits as many as it can. `repeat(auto-fill, minmax(…, 1fr))` is\n// the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how M3 describes an adaptive grid — by its cell rather than by a column\n   * count per breakpoint.\n   *\n   * Worth setting. The default is the figure M3's own example uses, and it is\n   * a floor rather than advice: only the contents know how narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n};\n\n/**\n * Material 3's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;AAWA,MAAM,yBAAyB;AAsB/B,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS,EACb,OAAO,iBAAyB,CAAC,OAAO,EACtC,2BAA2B,4BAA4B,aAAY,YAAa,OAAO,4BAA4B,aAAY,WAAY,KAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA6BA,SAAS,KAAK,EACZ,eAAe,wBACf,QACA,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GAIH,GAAG,YAAY,MAAa,OAAO,KAAK,YAAY,CAAC,GAAG,OAAK;EAC/D;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's example minimum for an adaptive grid cell, and the only number\n// the spec puts on one. It is a floor rather than a recommendation: how narrow\n// a card can get before its contents stop making sense is a property of the\n// contents, which is why M3 leaves it a parameter rather than fixing it. Most\n// feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material 3's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// M3 describes the grid by its cell rather than by its columns: Compose spells\n// it `GridCells.Adaptive(minSize)`, meaning every column is at least that wide\n// and the grid fits as many as it can. `repeat(auto-fill, minmax(…, 1fr))` is\n// the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = RenderComponentProps<'div'> & {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how M3 describes an adaptive grid — by its cell rather than by a column\n   * count per breakpoint.\n   *\n   * Worth setting. The default is the figure M3's own example uses, and it is\n   * a floor rather than advice: only the contents know how narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n};\n\n/**\n * Material 3's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;AAYA,MAAM,yBAAyB;AAsB/B,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS,EACb,OAAO,iBAAyB,CAAC,OAAO,EACtC,2BAA2B,4BAA4B,aAAY,YAAa,OAAO,4BAA4B,aAAY,WAAY,KAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA6BA,SAAS,KAAK,EACZ,eAAe,wBACf,QACA,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GAIH,GAAG,YAAY,MAAa,OAAO,KAAK,YAAY,CAAC,GAAG,OAAK;EAC/D;EACA;CACF,CAAC;AACH"}

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

@@ -1,4 +1,6 @@
-import { ButtonProps } from "@base-ui/react/button";
+import { ButtonDOMProps, ButtonState } from "../button/index.js";
+import { ReactNode } from "react";
+import { ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
 //#region src/components/icon-button/index.d.ts
 type IconButtonProps = {
   /**
@@ -7,6 +9,9 @@ type IconButtonProps = {
    * nothing at all.
    */
   'aria-label': string;
+  children?: ReactNode;
+  /** A function may compute the class from the button's render state. */
+  className?: ClassNameOrFunction<ButtonState>;
   /**
    * Disables the press ripple. The hover and pressed state layers are
    * unaffected.
@@ -14,36 +19,37 @@ type IconButtonProps = {
    */
   disableRipple?: boolean;
   /**
-   * Whether the element `render` produces is a real `<button>`, which decides
-   * whether Base UI supplies the button role, keyboard activation and
-   * disabled semantics itself.
-   *
-   * Read off `render` when that is a plain element, so
-   * `render={<a href="…" />}` needs nothing here. Worth setting only when
-   * `render` is a component or a function, where the tag it will produce
-   * cannot be read ahead of time.
-   *
-   * An anchor rendered this way is announced as a button rather than as a
-   * link, since that is what Base UI's non-native mode applies. For a control
-   * that should be announced as the link it is, reach for `Link`, or `Card`
-   * with `render`, neither of which imposes button semantics.
-   * @default true
+   * Where the button leads. Given one, the button is rendered as a link —
+   * an `<a>`, announced as the link it is — with the same styles and ripple.
+   * `render`, `type`, and the form and pending props apply to the button
+   * form only.
    */
-  nativeButton?: boolean;
+  href?: string;
+  /** The link's `rel`, when `href` is set. */
+  rel?: string;
   /**
    * 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';
+  /** A function may compute the style from the button's render state. */
+  style?: StyleOrFunction<ButtonState>;
+  /** The link's `target`, when `href` is set. */
+  target?: string;
   /**
    * `standard` is transparent and tints what it sits on; `filled` and `tonal`
    * carry a container of their own.
    * @default 'standard'
    */
   variant?: 'filled' | 'standard' | 'tonal';
-} & ButtonProps;
-declare function IconButton({ children, disabled, disableRipple, nativeButton, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+} & ButtonDOMProps;
+/**
+ * A button that is an icon, at three control heights. Given `href` it is a
+ * link with the same appearance. Every `aria-*` prop is forwarded to the
+ * element; React Aria alone would keep only the labelling ones.
+ */
+declare function IconButton({ children, disableRipple, href, isDisabled, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, rel, render, size, target, 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

@@ -1,17 +1,17 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { rendersNativeButton } from "../../render/nativeButton.js";
+import { ariaAttributesOf, buttonRenderer, linkRenderer } from "../../render/aria.js";
 import { jsxs } from "react/jsx-runtime";
-import { Button } from "@base-ui/react/button";
+import { Button, Link } from "react-aria-components";
 //#region src/components/icon-button/index.tsx
 const styles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kaIpWk: "xtecew7 x3y1ksm",
+		kaIpWk: "xtt5grq x3y1ksm",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
-		kkrTdU: "x1s07b3s x1ypdohk",
+		kkrTdU: "x1ypdohk",
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",
 		kjj79g: "xl56j7k",
@@ -27,9 +27,19 @@ const styles = {
 		kAMwcw: "x15l9jch",
 		$$css: true
 	},
+	disabled: {
+		kaIpWk: "x3y1ksm",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
 	filled: {
-		kWkggS: "xm7dzmu x1n0xrd1 x197hsbc xnety89",
-		kMwMTN: "xhfb3ry xwjo7ld",
+		kWkggS: "xpky1to xyf7a0q xnety89",
+		kMwMTN: "xwjo7ld",
+		$$css: true
+	},
+	filledDisabled: {
+		kWkggS: "xepofeg",
+		kMwMTN: "x1xj74d8",
 		$$css: true
 	},
 	lg: {
@@ -45,13 +55,23 @@ const styles = {
 		$$css: true
 	},
 	standard: {
-		kWkggS: "x1a42vn9 x6gcojk xjbqb8w",
-		kMwMTN: "xhfb3ry x1w5n3ug",
+		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	},
+	standardDisabled: {
+		kWkggS: "xjbqb8w",
+		kMwMTN: "x1xj74d8",
 		$$css: true
 	},
 	tonal: {
-		kWkggS: "x1c3n7wt x1n0xrd1 xwypj8i xp89om9",
-		kMwMTN: "xhfb3ry xscdzaa",
+		kWkggS: "xxwd9aw x1hei0q8 xp89om9",
+		kMwMTN: "xscdzaa",
+		$$css: true
+	},
+	tonalDisabled: {
+		kWkggS: "xepofeg",
+		kMwMTN: "x1xj74d8",
 		$$css: true
 	},
 	xs: {
@@ -61,8 +81,18 @@ const styles = {
 		$$css: true
 	}
 };
-function IconButton({ children, disabled = false, disableRipple = false, nativeButton, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "md", variant = "standard", ...props$1 }) {
-	const ripple = useRipple(!disableRipple, {
+const disabledStyles = {
+	filled: styles.filledDisabled,
+	standard: styles.standardDisabled,
+	tonal: styles.tonalDisabled
+};
+/**
+* A button that is an icon, at three control heights. Given `href` it is a
+* link with the same appearance. Every `aria-*` prop is forwarded to the
+* element; React Aria alone would keep only the labelling ones.
+*/
+function IconButton({ children, disableRipple = false, href, isDisabled = false, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, rel, render, size = "md", target, variant = "standard", ...props$1 }) {
+	const ripple = useRipple(!disableRipple && !isDisabled, {
 		onClick,
 		onContextMenu,
 		onPointerCancel,
@@ -70,12 +100,29 @@ function IconButton({ children, disabled = false, disableRipple = false, nativeB
 		onPointerLeave,
 		onPointerUp
 	});
+	const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
+	const element = {
+		aria: ariaAttributesOf(props$1),
+		onKeyDown,
+		onKeyUp
+	};
+	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
+		href,
+		isDisabled,
+		rel,
+		render: linkRenderer(element),
+		target,
+		...ripple.handlers,
+		...props$1,
+		...styleProps,
+		children: [children, ripple.surface]
+	});
 	return /* @__PURE__ */ jsxs(Button, {
-		disabled,
-		nativeButton: nativeButton ?? rendersNativeButton(props$1.render),
+		isDisabled,
+		render: buttonRenderer(element, render),
 		...ripple.handlers,
 		...props$1,
-		...mergeStatefulStyles(props(styles.base, styles[variant], styles[size]), props$1),
+		...styleProps,
 		children: [children, ripple.surface]
 	});
 }

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

@@ -1 +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 { rendersNativeButton } from '../../render/nativeButton';\nimport { mergeStatefulStyles } from '../../styles/merge';\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    kB7OPa: \"x9f619\",\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    kybGjl: \"x1hl2dhg\",\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 = {\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   * Whether the element `render` produces is a real `<button>`, which decides\n   * whether Base UI supplies the button role, keyboard activation and\n   * disabled semantics itself.\n   *\n   * Read off `render` when that is a plain element, so\n   * `render={<a href=\"…\" />}` needs nothing here. Worth setting only when\n   * `render` is a component or a function, where the tag it will produce\n   * cannot be read ahead of time.\n   *\n   * An anchor rendered this way is announced as a button rather than as a\n   * link, since that is what Base UI's non-native mode applies. For a control\n   * that should be announced as the link it is, reach for `Link`, or `Card`\n   * with `render`, neither of which imposes button semantics.\n   * @default true\n   */\n  nativeButton?: 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} & BaseUIButtonProps;\nfunction IconButton({\n  children,\n  disabled = false,\n  disableRipple = false,\n  nativeButton,\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. It is also\n  // why the styles below merge through mergeStatefulStyles rather than the\n  // plain mergeStyles.\n  const ripple = useRipple<HTMLButtonElement>(!disableRipple, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <BaseUIButton disabled={disabled}\n  // Destructured out of `props` above rather than left to flow through\n  // with it: spread later, an absent `nativeButton` would arrive as an\n  // explicit `undefined` and overwrite what is inferred here.\n  nativeButton={nativeButton ?? rendersNativeButton(props.render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[variant], styles[size]), props)}>\n      {children}\n      {ripple.surface}\n    </BaseUIButton>;\n}\nexport type { IconButtonProps };\nexport default IconButton;"],"mappings":";;;;;;;AA0BA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,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,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;AA4CA,SAAS,WAAW,EAClB,UACA,WAAW,OACX,gBAAgB,OAChB,cACA,SACA,eACA,iBACA,eACA,gBACA,aACA,OAAO,MACP,UAAU,YACV,GAAG,WACe;CAMlB,MAAM,SAAS,UAA6B,CAAC,eAAe;EAC1D;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OAAO,qBAAC,QAAD;EAAwB;EAI/B,cAAc,gBAAgB,oBAAoB,QAAM,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,KAAK,GAAG,OAAK;EAJjL,UAAA,CAKF,UACA,OAAO,OACI;;AAClB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\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// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\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: \"xtt5grq x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"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    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x3y1ksm\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\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: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xxwd9aw x1hei0q8 xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\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  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\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  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\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} & ButtonDOMProps;\n\n/**\n * A button that is an icon, at three control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n */\nfunction IconButton({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, as in Button.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nexport type { IconButtonProps };\nexport default IconButton;"],"mappings":";;;;;;;AA8BA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,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,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,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,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,OAAO,OAAO;AAChB;;;;;;AAiDA,SAAS,WAAW,EAClB,UACA,gBAAgB,OAChB,MACA,aAAa,OACb,SACA,eACA,WACA,SACA,iBACA,eACA,gBACA,aACA,KACA,QACA,OAAO,MACP,QACA,UAAU,YACV,GAAG,WACe;CAMlB,MAAM,SAAS,UAA4B,CAAC,iBAAiB,CAAC,YAAY;EACxE;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,qBAAqB,UAAuB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,OAAO,MAAM,cAAc,OAAO,UAAU,MAAM,cAAc,eAAe,QAAQ,GAAG,OAAK;CAChN,MAAM,UAAU;EACd,MAAM,iBAAiB,OAAK;EAC5B;EACA;CACF;CACA,IAAI,SAAS,KAAA,GACX,OAAO,qBAAC,MAAD;EAAe;EAAkB;EAAiB;EAAK,QAAQ,aAAa,OAAO;EAAW;EAAQ,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAA1I,UAAA,CACF,UACA,OAAO,OACD;;CAEb,OAAO,qBAAC,QAAD;EAAuB;EAAY,QAAQ,eAAe,SAAS,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAAhH,UAAA,CACF,UACA,OAAO,OACC;;AACf"}

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
 import ListDetail, { ListDetailProps } from "./list-detail/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
+import Popover, { PopoverProps } from "./popover/index.js";
 import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
 import Sheet, { SheetProps } from "./sheet/index.js";
@@ -22,4 +23,4 @@ import SupportingPane, { SupportingPaneProps } from "./supporting-pane/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 { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

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

@@ -1,6 +1,6 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/keycap/index.d.ts
-type KeycapProps = useRender.ComponentProps<'kbd'>;
+type KeycapProps = RenderComponentProps<'kbd'>;
 /**
  * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
  * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A

package/dist/components/keycap/index.js

@@ -1,5 +1,5 @@
+import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
-import { useRender } from "@base-ui/react/use-render";
 import { c } from "react/compiler-runtime";
 //#region src/components/keycap/index.tsx
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;AA4BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAIPA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,qHACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = RenderComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;AA6BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAIPA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,qHACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}