@kanso-labs/kanso-ui 0.11.21 → 0.12.0

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

@@ -1,4 +1,4 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/link/index.d.ts
 type LinkProps = {
   /**
@@ -17,7 +17,7 @@ type LinkProps = {
    * @default 'always'
    */
   underline?: LinkUnderline;
-} & useRender.ComponentProps<'a'>;
+} & RenderComponentProps<'a'>;
 type LinkTone = 'inherit' | 'primary';
 type LinkUnderline = 'always' | 'hover' | 'none';
 /**

package/dist/components/link/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/link/index.tsx
 const styles = { base: {
 	kaIpWk: "x1tfhd1",

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

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

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

@@ -1,4 +1,4 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 import { ReactNode } from "react";
 //#region src/components/list-detail/index.d.ts
 type ListDetailProps = {
@@ -22,7 +22,7 @@ type ListDetailProps = {
    * @default 'list'
    */
   showing?: 'detail' | 'list';
-} & Omit<useRender.ComponentProps<'div'>, 'children'>;
+} & Omit<RenderComponentProps<'div'>, 'children'>;
 /**
  * Material 3's list-detail layout: a fixed list pane beside a flexible detail
  * pane, collapsing to one pane at a time below the expanded breakpoint.

package/dist/components/list-detail/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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-detail/index.tsx
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's recommended snap widths for a fixed pane. The list is the\n// fixed one here — M3 points a fixed pane at \"lists with light information\n// density\" — and the detail pane is the flexible one that absorbs whatever is\n// left, which satisfies the spec's rule that every layout carry at least one\n// flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material 3's canonical layouts, and the fixed-and-flexible shape of\n// its two-pane layouts. Unlike SupportingPane, the detail pane here stands on\n// its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// M3 puts the second pane on screen from expanded up. Below that the spec\n// shows one pane at a time, with selecting an item swapping to the detail and\n// back returning to the list — app navigation rather than layout, which is\n// why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<useRender.ComponentProps<'div'>, 'children'>;\n\n/**\n * Material 3's list-detail layout: a fixed list pane beside a flexible detail\n * pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;;AA8DA,SAAS,WAAW,EAClB,QACA,MACA,QACA,UAAU,QACV,GAAG,SACe;CAClB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA;GACE,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,WAAW;IACvB,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GACF,GAAG,YAAY,EACb,WAAW,kDACb,GAAG,KAAK;EACV;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * 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 { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's recommended snap widths for a fixed pane. The list is the\n// fixed one here — M3 points a fixed pane at \"lists with light information\n// density\" — and the detail pane is the flexible one that absorbs whatever is\n// left, which satisfies the spec's rule that every layout carry at least one\n// flexible pane.\nconst LIST_PANE = '360px';\nconst LIST_PANE_EXTRA_LARGE = '412px';\n\n// One of Material 3's canonical layouts, and the fixed-and-flexible shape of\n// its two-pane layouts. Unlike SupportingPane, the detail pane here stands on\n// its own: a message, a product, a file. That is what makes showing it\n// *instead of* the list a coherent thing to do when only one pane fits, and\n// why this layout has to be told which pane is showing while SupportingPane\n// does not.\n//\n// M3 puts the second pane on screen from expanded up. Below that the spec\n// shows one pane at a time, with selecting an item swapping to the detail and\n// back returning to the list — app navigation rather than layout, which is\n// why `showing` is controlled rather than held here.\n\ntype ListDetailProps = {\n  /**\n   * The selected item's content. Stands on its own, and takes the flexible\n   * pane.\n   */\n  detail?: ReactNode;\n  /**\n   * The items to choose between. Takes the fixed pane — 360px wide, 412px at\n   * extra-large.\n   */\n  list?: ReactNode;\n  /**\n   * Which pane to show while only one fits, below the expanded breakpoint.\n   * Both are shown from expanded up, where this is ignored.\n   *\n   * Controlled, with no uncontrolled fallback: the layout cannot know that an\n   * item was selected or that the reader went back, so holding that state\n   * here would only ever be wrong.\n   * @default 'list'\n   */\n  showing?: 'detail' | 'list';\n} & Omit<RenderComponentProps<'div'>, 'children'>;\n\n/**\n * Material 3's list-detail layout: a fixed list pane beside a flexible detail\n * pane, collapsing to one pane at a time below the expanded breakpoint.\n *\n * Layout only — neither pane paints a surface of its own, so what goes inside\n * them is composed at the call site. `render` swaps the container's element,\n * for a layout that should be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction ListDetail({\n  detail,\n  list,\n  render,\n  showing = 'list',\n  ...props\n}: ListDetailProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'detail') << 0]}>\n            {list}\n          </div>\n          <div {...{\n          0: {\n            className: \"x9f619 xeuugli\"\n          },\n          1: {\n            className: \"x9f619 xeuugli x1s85apg x9a4l8x\"\n          }\n        }[!!(showing === 'list') << 0]}>\n            {detail}\n          </div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xkgydl7 xxxc7o5\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { ListDetailProps };\nexport default ListDetail;"],"mappings":";;;;;;;;;;;;;;;;AA+DA,SAAS,WAAW,EAClB,QACA,MACA,QACA,UAAU,QACV,GAAG,SACe;CAClB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,qBAAA,UAAA,EAAA,UAAA,CACN,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,aAAa;IACzB,UAAA;GACE,CAAA,GACL,oBAAC,OAAD;IAAK,GAAI;KACT,GAAG,EACD,WAAW,iBACb;KACA,GAAG,EACD,WAAW,kCACb;IACF,EAAE,CAAC,EAAE,YAAY,WAAW;IACvB,UAAA;GACE,CAAA,CACP,EAAA,CAAA;GACF,GAAG,YAAY,EACb,WAAW,kDACb,GAAG,KAAK;EACV;EACA;CACF,CAAC;AACH"}

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

@@ -0,0 +1,105 @@
+import { ReactNode, RefObject } from "react";
+import { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from "react-aria-components";
+//#region src/components/popover/index.d.ts
+type PopoverAlign = 'center' | 'end' | 'start';
+type PopoverSide = 'bottom' | 'left' | 'right' | 'top';
+type PopoverSize = 'md' | 'sm';
+type PopoverProps = Omit<DialogTriggerProps, 'children'> & {
+  children?: ReactNode;
+  /**
+   * Blocks the page behind the panel while it is open, as a dialog would.
+   * Off by default: a popover leaves the page interactive, which is the
+   * difference from `Sheet`.
+   * @default false
+   */
+  modal?: boolean;
+  /**
+   * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is
+   * only as wide as its contents, and never wider than the viewport.
+   * @default 'md'
+   */
+  size?: PopoverSize;
+};
+/**
+ * A panel anchored to the control that opened it. Open state is React Aria's:
+ * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it
+ * keep its own.
+ *
+ * Non-modal by design — the page behind stays scrollable and clickable, which
+ * is the difference from `Sheet`. Pass `modal` to change that.
+ *
+ * Composed rather than configured by props, because a popover's contents are
+ * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and
+ * `Popover.Description`. A `Button` or `IconButton` placed directly inside
+ * `Popover` opens it, and one given `slot="close"` inside the content closes
+ * it; neither needs a part of its own.
+ */
+declare function Popover$1({ children, modal, size, ...props }: PopoverProps): import("react").JSX.Element;
+declare namespace Popover$1 {
+  var Content: typeof PopoverContent;
+  var Description: typeof PopoverDescription;
+  var Title: typeof PopoverTitle;
+}
+/**
+ * The panel itself. Everything the popover shows goes in here; the trigger
+ * stays outside it, since the trigger lives in the page while this is
+ * portalled out to the end of the body.
+ *
+ * Placement is React Aria's anchor positioning, so the panel flips to the
+ * opposite side and shifts along the edge of the viewport on its own rather
+ * than being clipped by it.
+ */
+declare function PopoverContent({ align, alignOffset, children, className, container, side, sideOffset, style, triggerRef, ...props }: PopoverContentProps): import("react").JSX.Element;
+/**
+ * Supporting copy under the title. The panel's `aria-describedby` points at
+ * it — see DescriptionContext for why that is this component's doing.
+ */
+declare function PopoverDescription(props: PopoverDescriptionProps): import("react").JSX.Element;
+/**
+ * Names the popover. Rendered through React Aria's title slot, which is what
+ * points the panel's `aria-labelledby` at it — a popover without one announces
+ * itself unnamed.
+ */
+declare function PopoverTitle(props: PopoverTitleProps): import("react").JSX.Element;
+type PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {
+  /**
+   * Where the panel sits along the side it opens on.
+   * @default 'center'
+   */
+  align?: PopoverAlign;
+  /** Moves the panel along that side, in pixels. */
+  alignOffset?: number;
+  children?: ReactNode;
+  /** A function may compute the class from the panel's render state. */
+  className?: ClassNameOrFunction<PopoverRenderProps>;
+  /**
+   * Where to portal the panel. Defaults to the end of `<body>`, which is
+   * right for an app that sets its StyleX theme on `:root`. An app that
+   * scopes the theme to a subtree has to point this at an element inside it,
+   * or the popover renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: Element;
+  /**
+   * Which side of the trigger the panel opens on. It flips to the opposite
+   * side when there is no room.
+   * @default 'bottom'
+   */
+  side?: PopoverSide;
+  /**
+   * The gap between the trigger and the panel, in pixels.
+   * @default 8
+   */
+  sideOffset?: number;
+  /** A function may compute the style from the panel's render state. */
+  style?: StyleOrFunction<PopoverRenderProps>;
+  /**
+   * An element to anchor the panel to other than the trigger that opened it.
+   */
+  triggerRef?: RefObject<Element | null>;
+};
+type PopoverDescriptionProps = TextProps;
+type PopoverTitleProps = HeadingProps;
+//#endregion
+export { type PopoverAlign, type PopoverContentProps, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, type PopoverTitleProps, Popover$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.js

@@ -0,0 +1,246 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Dialog, DialogTrigger, Heading, Popover, Text } from "react-aria-components";
+//#region src/components/popover/index.tsx
+const DEFAULT_SIDE_OFFSET = 8;
+const styles = {
+	description: {
+		kB7OPa: "x9f619",
+		kMwMTN: "x1w5n3ug",
+		kMv6JI: "xpo2rfv",
+		kGuDYH: "x193rfdd",
+		k63SB2: "x1hews6w",
+		kb6lSQ: "xn43zvd",
+		kLWn49: "xv61bfh",
+		kogj98: "x1ghz6dp",
+		$$css: true
+	},
+	dialog: {
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kOIVth: "x126z3so",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	fromBottom: {
+		k3nNDw: "x18ouj0k",
+		$$css: true
+	},
+	fromLeft: {
+		k3nNDw: "x1nf803f",
+		$$css: true
+	},
+	fromRight: {
+		k3nNDw: "xyibjs4",
+		$$css: true
+	},
+	fromTop: {
+		k3nNDw: "x1dp6rp6",
+		$$css: true
+	},
+	md: {
+		ks0D6T: "x10u2fgw",
+		$$css: true
+	},
+	popup: {
+		k44tkh: "xvhm28k",
+		kKVMdj: "x97zbip",
+		kyAemX: "x16dv9tl",
+		kWkggS: "x1mjdul6",
+		kaIpWk: "x62ce2h",
+		kGVxlE: "x1os83gw",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kORKVm: "x1odjw0f",
+		kmVPX3: "xgc26li",
+		$$css: true
+	},
+	sm: {
+		ks0D6T: "xjjheoa",
+		$$css: true
+	},
+	title: {
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kMv6JI: "x46eyla",
+		kGuDYH: "x5ehqhr",
+		k63SB2: "xrf6cl6",
+		kb6lSQ: "x1g135zh",
+		kLWn49: "x1ggk5va",
+		kogj98: "x1ghz6dp",
+		$$css: true
+	}
+};
+const origins = {
+	bottom: styles.fromTop,
+	center: styles.fromTop,
+	left: styles.fromRight,
+	right: styles.fromLeft,
+	top: styles.fromBottom
+};
+const PopoverContext = createContext({
+	modal: false,
+	size: "md"
+});
+const DescriptionContext = createContext({
+	id: "",
+	register: () => () => {}
+});
+function placementOf(side, align) {
+	if (align === "center") return side;
+	if (side === "top" || side === "bottom") return `${side} ${align}`;
+	return `${side} ${align === "start" ? "top" : "bottom"}`;
+}
+/**
+* A panel anchored to the control that opened it. Open state is React Aria's:
+* pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it
+* keep its own.
+*
+* Non-modal by design — the page behind stays scrollable and clickable, which
+* is the difference from `Sheet`. Pass `modal` to change that.
+*
+* Composed rather than configured by props, because a popover's contents are
+* arbitrary — the parts are `Popover.Content`, `Popover.Title`, and
+* `Popover.Description`. A `Button` or `IconButton` placed directly inside
+* `Popover` opens it, and one given `slot="close"` inside the content closes
+* it; neither needs a part of its own.
+*/
+function Popover$1({ children, modal = false, size = "md", ...props }) {
+	const context = useMemo(() => ({
+		modal,
+		size
+	}), [modal, size]);
+	return /* @__PURE__ */ jsx(DialogTrigger, {
+		...props,
+		children: /* @__PURE__ */ jsx(PopoverContext, {
+			value: context,
+			children
+		})
+	});
+}
+/**
+* The panel itself. Everything the popover shows goes in here; the trigger
+* stays outside it, since the trigger lives in the page while this is
+* portalled out to the end of the body.
+*
+* Placement is React Aria's anchor positioning, so the panel flips to the
+* opposite side and shifts along the edge of the viewport on its own rather
+* than being clipped by it.
+*/
+function PopoverContent({ align = "center", alignOffset, children, className, container, side = "bottom", sideOffset = DEFAULT_SIDE_OFFSET, style, triggerRef, ...props$1 }) {
+	const { modal, size } = useContext(PopoverContext);
+	const descriptionId = useId();
+	const [described, setDescribed] = useState(false);
+	const register = useCallback(() => {
+		setDescribed(true);
+		return () => {
+			setDescribed(false);
+		};
+	}, []);
+	const description = useMemo(() => ({
+		id: descriptionId,
+		register
+	}), [descriptionId, register]);
+	return /* @__PURE__ */ jsx(Popover, {
+		crossOffset: alignOffset,
+		isNonModal: !modal,
+		offset: sideOffset,
+		placement: placementOf(side, align),
+		triggerRef,
+		UNSTABLE_portalContainer: container,
+		...mergeStatefulStyles((state) => props(styles.popup, styles[size], origins[state.placement ?? "bottom"]), {
+			className,
+			style
+		}),
+		children: /* @__PURE__ */ jsx(Dialog, {
+			"aria-describedby": described ? descriptionId : void 0,
+			...props$1,
+			className: "x9f619 x78zum5 xdt5ytf x126z3so xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn",
+			children: /* @__PURE__ */ jsx(DescriptionContext, {
+				value: description,
+				children
+			})
+		})
+	});
+}
+/**
+* Supporting copy under the title. The panel's `aria-describedby` points at
+* it — see DescriptionContext for why that is this component's doing.
+*/
+function PopoverDescription(props) {
+	const $ = c(9);
+	const { id, register } = useContext(DescriptionContext);
+	let t0;
+	let t1;
+	if ($[0] !== register) {
+		t0 = () => register();
+		t1 = [register];
+		$[0] = register;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[3] !== props) {
+		t2 = mergeStyles({ className: "x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp" }, props);
+		$[3] = props;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== id || $[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Text, {
+			id,
+			slot: "description",
+			...props,
+			...t2
+		});
+		$[5] = id;
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+/**
+* Names the popover. Rendered through React Aria's title slot, which is what
+* points the panel's `aria-labelledby` at it — a popover without one announces
+* itself unnamed.
+*/
+function PopoverTitle(props) {
+	const $ = c(5);
+	let t0;
+	if ($[0] !== props) {
+		t0 = mergeStyles({ className: "x9f619 x139gbkf x46eyla x5ehqhr xrf6cl6 x1g135zh x1ggk5va x1ghz6dp" }, props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Heading, {
+			slot: "title",
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+Popover$1.Content = PopoverContent;
+Popover$1.Description = PopoverDescription;
+Popover$1.Title = PopoverTitle;
+//#endregion
+export { Popover$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["id"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';\nimport { Dialog, DialogTrigger, Heading, Popover as RACPopover, Text } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// Growing from the edge the panel is anchored by, rather than from its own\n// centre, which is what makes it read as coming out of the trigger. React\n// Aria reports which side the panel landed on through its render state, so\n// the origin follows the placement it actually got rather than the one asked\n// for, and the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\n\n// Entry only, for the same reason Sheet's is: an exit animation is something\n// the panel has to stay mounted through, and a popover is dismissed far more\n// often than a modal panel — usually by pressing something else, where a\n// lingering panel is in the way of whatever the press was for.\n//\n// No arrow, and that is M3 rather than an omission: menus and rich tooltips\n// both sit as plain rounded surfaces offset from their anchor, with no caret\n// drawn between the two. React Aria has an `OverlayArrow` part for designs\n// that want one; nothing here renders it.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: `popup` and a size on\n// the panel, `dialog` on the element that carries the role.\nconst styles = {\n  description: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  dialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  md: {\n    ks0D6T: \"x10u2fgw\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kaIpWk: \"x62ce2h\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  sm: {\n    ks0D6T: \"xjjheoa\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype PopoverAlign = 'center' | 'end' | 'start';\ntype PopoverSide = 'bottom' | 'left' | 'right' | 'top';\ntype PopoverSize = 'md' | 'sm';\n\n// Which side the panel opens on, and the origin its entry grows from. Keyed\n// on the placement React Aria reports rather than the one asked for, since\n// the panel flips to the opposite side when there is no room on its own.\nconst origins = {\n  bottom: styles.fromTop,\n  center: styles.fromTop,\n  left: styles.fromRight,\n  right: styles.fromLeft,\n  top: styles.fromBottom\n};\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n  modal: boolean;\n  size: PopoverSize;\n}>({\n  modal: false,\n  size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n  id: string;\n  register: () => () => void;\n}>({\n  id: '',\n  register: () => () => {}\n});\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Blocks the page behind the panel while it is open, as a dialog would.\n   * Off by default: a popover leaves the page interactive, which is the\n   * difference from `Sheet`.\n   * @default false\n   */\n  modal?: boolean;\n  /**\n   * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n   * only as wide as its contents, and never wider than the viewport.\n   * @default 'md'\n   */\n  size?: PopoverSize;\n};\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\nfunction placementOf(side: PopoverSide, align: PopoverAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n  children,\n  modal = false,\n  size = 'md',\n  ...props\n}: PopoverProps) {\n  const context = useMemo(() => ({\n    modal,\n    size\n  }), [modal, size]);\n  return <DialogTrigger {...props}>\n      <PopoverContext value={context}>{children}</PopoverContext>\n    </DialogTrigger>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  side = 'bottom',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  triggerRef,\n  ...props\n}: PopoverContentProps) {\n  const {\n    modal,\n    size\n  } = useContext(PopoverContext);\n  const descriptionId = useId();\n  const [described, setDescribed] = useState(false);\n  const register = useCallback(() => {\n    setDescribed(true);\n    return () => {\n      setDescribed(false);\n    };\n  }, []);\n  const description = useMemo(() => ({\n    id: descriptionId,\n    register\n  }), [descriptionId, register]);\n  return <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)} triggerRef={triggerRef}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: PopoverRenderProps) => stylex.props(styles.popup, styles[size], origins[state.placement ?? 'bottom']), {\n    className,\n    style\n  })}>\n      <Dialog aria-describedby={described ? descriptionId : undefined} {...props} className=\"x9f619 x78zum5 xdt5ytf x126z3so xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\">\n        <DescriptionContext value={description}>{children}</DescriptionContext>\n      </Dialog>\n    </RACPopover>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  const {\n    id,\n    register\n  } = useContext(DescriptionContext);\n  useEffect(() => register(), [register]);\n  return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x46eyla x5ehqhr xrf6cl6 x1g135zh x1ggk5va x1ghz6dp\"\n  }, props)} />;\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Where the panel sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: PopoverAlign;\n  /** Moves the panel along that side, in pixels. */\n  alignOffset?: number;\n  children?: ReactNode;\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the panel. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the popover renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Which side of the trigger the panel opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  side?: PopoverSide;\n  /**\n   * The gap between the trigger and the panel, in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n  /**\n   * An element to anchor the panel to other than the trigger that opened it.\n   */\n  triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps };\nexport default Popover;"],"mappings":";;;;;;;AAeA,MAAM,sBAAsB;AAsB5B,MAAM,SAAS;CACb,aAAa;EACX,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,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAQA,MAAM,UAAU;CACd,QAAQ,OAAO;CACf,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AAOA,MAAM,iBAAiB,cAGpB;CACD,OAAO;CACP,MAAM;AACR,CAAC;AAQD,MAAM,qBAAqB,cAGxB;CACD,IAAI;CACJ,sBAAsB,CAAC;AACzB,CAAC;AAqBD,SAAS,YAAY,MAAmB,OAAqB;CAC3D,IAAI,UAAU,UACZ,OAAO;CAET,IAAI,SAAS,SAAS,SAAS,UAC7B,OAAO,GAAG,KAAI,GAAI;CAEpB,OAAO,GAAG,KAAI,GAAI,UAAU,UAAU,QAAQ;AAChD;;;;;;;;;;;;;;;AAgBA,SAAS,UAAQ,EACf,UACA,QAAQ,OACR,OAAO,MACP,GAAG,SACY;CACf,MAAM,UAAU,eAAe;EAC7B;EACA;CACF,IAAI,CAAC,OAAO,IAAI,CAAC;CACjB,OAAO,oBAAC,eAAD;EAAe,GAAI;EACtB,UAAA,oBAAC,gBAAD;GAAgB,OAAO;GAAU;EAAyB,CAAA;CAC7C,CAAA;AACnB;;;;;;;;;;AAWA,SAAS,eAAe,EACtB,QAAQ,UACR,aACA,UACA,WACA,WACA,OAAO,UACP,aAAa,qBACb,OACA,YACA,GAAG,WACmB;CACtB,MAAM,EACJ,OACA,SACE,WAAW,cAAc;CAC7B,MAAM,gBAAgB,MAAM;CAC5B,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,WAAW,kBAAkB;EACjC,aAAa,IAAI;EACjB,aAAa;GACX,aAAa,KAAK;EACpB;CACF,GAAG,CAAA,CAAE;CACL,MAAM,cAAc,eAAe;EACjC,IAAI;EACJ;CACF,IAAI,CAAC,eAAe,QAAQ,CAAC;CAC7B,OAAO,oBAAC,SAAD;EAAY,aAAa;EAAa,YAAY,CAAC;EAAO,QAAQ;EAAY,WAAW,YAAY,MAAM,KAAK;EAAe;EAEtI,0BAA0B;EAAW,GAAI,qBAAqB,UAA8B,MAAa,OAAO,OAAO,OAAO,OAAO,QAAQ,MAAM,aAAa,SAAS,GAAG;GAC1K;GACA;EACF,CAAC;EACG,UAAA,oBAAC,QAAD;GAAQ,oBAAkB,YAAY,gBAAgB,KAAA;GAAW,GAAI;GAAO,WAAU;GACpF,UAAA,oBAAC,oBAAD;IAAoB,OAAO;IAAc;GAA6B,CAAA;EAChE,CAAA;CACE,CAAA;AAChB;;;;;AAMA,SAAA,mBAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CACE,MAAA,EAAA,IAAA,aAGI,WAAW,kBAAkB;CAAE,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA;EACzB,WAAM,SAAS;EAAG,KAAA,CAAC,QAAQ;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAtC,UAAU,IAAkB,EAAU;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACgB,KAAA,YAAY,EAAA,WACtD,qEACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAC,MAAD;GAAU;GAAS,MAAA;GAAa,GAAK;GAAK,GAAM;EAE9C,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;;;;;;AAQf,SAAA,aAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC8C,KAAA,YAAY,EAAA,WAC3C,qEACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAC,SAAD;GAAc,MAAA;GAAO,GAAK;GAAK,GAAM;EAEnC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;AAEf,UAAQ,UAAU;AAClB,UAAQ,cAAc;AACtB,UAAQ,QAAQ"}

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

@@ -1,6 +1,6 @@
-import { AvatarRootProps } from "@base-ui/react/avatar";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/product-icon/index.d.ts
-type ProductIconProps = Omit<AvatarRootProps, 'children'> & {
+type ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {
   /**
    * What this identifies. Supplies both the fallback initial and the
    * accessible name, so a screen reader announces the thing rather than
@@ -33,7 +33,7 @@ type ProductIconProps = Omit<AvatarRootProps, 'children'> & {
  * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
  * can be handed over as it was drawn.
  */
-declare function ProductIcon({ name, size, src, tone, ...props }: ProductIconProps): import("react").JSX.Element;
+declare function ProductIcon({ name, render, size, src, tone, ...props }: ProductIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 export { type ProductIconProps, ProductIcon as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { mergeStatefulStyles } from "../../styles/merge.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar } from "@base-ui/react/avatar";
+import { useRender } from "../../render/useRender.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { useImageLoadingStatus } from "../../hooks/useImageLoadingStatus.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/product-icon/index.tsx
 const styles = {
 	base: {
@@ -86,20 +87,25 @@ function initialFrom(name) {
 * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
 * can be handed over as it was drawn.
 */
-function ProductIcon({ name, size = "md", src, tone = "primary", ...props$1 }) {
-	return /* @__PURE__ */ jsxs(Avatar.Root, {
-		"aria-label": name,
-		role: "img",
-		...props$1,
-		...mergeStatefulStyles(props(styles.base, styles[size]), props$1),
-		children: [src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
-			alt: "",
-			src,
-			className: "x5yr21d xh8yej3 x19kjcj4"
-		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
-			...props(styles.fallback, styles[tone]),
-			children: initialFrom(name)
-		})]
+function ProductIcon({ name, render, size = "md", src, tone = "primary", ...props$1 }) {
+	const status = useImageLoadingStatus(src);
+	return useRender({
+		defaultTagName: "span",
+		props: {
+			"aria-label": name,
+			role: "img",
+			...props$1,
+			children: status === "loaded" ? /* @__PURE__ */ jsx("img", {
+				alt: "",
+				src,
+				className: "x5yr21d xh8yej3 x19kjcj4"
+			}) : /* @__PURE__ */ jsx("span", {
+				...props(styles.fallback, styles[tone]),
+				children: initialFrom(name)
+			}),
+			...mergeStyles(props(styles.base, styles[size]), props$1)
+		},
+		render
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return (\n    // role/aria-label rather than letting the fallback letter be read: \"B\" is\n    // not what anyone means to announce. Marking the root as an image also\n    // makes its contents presentational, so neither the mark nor the letter\n    // is announced a second time underneath the name.\n    //\n    // The lint rule below wants a real <img> tag instead of the role, which\n    // cannot work here: an <img> is void, and this element's whole job is to\n    // hold the letter shown when there is no mark, or none has loaded yet.\n    <BaseUIAvatar.Root aria-label={name}\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- <img> takes no children\n    role=\"img\" {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[size]), props)}>\n      {src === undefined ? null : <BaseUIAvatar.Image alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" />}\n      <BaseUIAvatar.Fallback {...stylex.props(styles.fallback, styles[tone])}>\n        {initialFrom(name)}\n      </BaseUIAvatar.Fallback>\n    </BaseUIAvatar.Root>\n  );\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;;AA0BA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,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,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,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;AACF;AAkCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CACnB,OASE,qBAAC,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,KAAK,GAAG,OAAK;EAF5F,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,oBAAC,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAA0B,CAAA,GACrG,oBAAC,OAAa,UAAd;GAAuB,GAAI,MAAa,OAAO,UAAU,OAAO,KAAK;GAClE,UAAA,YAAY,IAAI;EACI,CAAA,CACN;;AAEvB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;;;AA2BA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,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,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,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;AACF;AAkCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,QACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CAGnB,MAAM,SAAS,sBAAsB,GAAG;CAQxC,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,cAAc;GACd,MAAM;GACN,GAAG;GACH,UAAU,WAAW,WAAW,oBAAC,OAAD;IAAK,KAAI;IAAQ;IAAK,WAAU;GAA0B,CAAA,IAAM,oBAAC,QAAD;IAAM,GAAI,MAAa,OAAO,UAAU,OAAO,KAAK;IAC7I,UAAA,YAAY,IAAI;GACb,CAAA;GACV,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,KAAK,GAAG,OAAK;EAC/D;EACA;CACF,CAAC;AACH"}

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

@@ -1,6 +1,6 @@
-import { SeparatorProps } from "@base-ui/react/separator";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/separator/index.d.ts
-type SeparatorProps$1 = Omit<SeparatorProps, 'orientation'> & {
+type SeparatorProps = RenderComponentProps<'div'> & {
   /**
    * Which way the rule runs. A vertical separator takes its length from a
    * flex or grid parent and has none of its own.
@@ -8,7 +8,17 @@ type SeparatorProps$1 = Omit<SeparatorProps, 'orientation'> & {
    */
   orientation?: 'horizontal' | 'vertical';
 };
-declare function Separator$1({ orientation, ...props }: SeparatorProps$1): import("react").JSX.Element;
+/**
+ * A 1px rule between items. The orientation drives the accessibility tree as
+ * well as which side the rule is drawn on: `aria-orientation` is spelled out
+ * in both directions rather than leaving the horizontal case to the role's
+ * implicit value.
+ *
+ * A styled element rather than a primitive from the behaviour library: a
+ * separator has no behaviour, and the library's own would drop the
+ * `aria-orientation` written here on its way to the DOM.
+ */
+declare function Separator({ orientation, render, ...props }: SeparatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { type SeparatorProps$1 as SeparatorProps, Separator$1 as default };
+export { type SeparatorProps, Separator as default };
 //# sourceMappingURL=index.d.ts.map