@kanso-labs/kanso-ui 0.34.15 → 0.35.0

package/README.md

@@ -51,9 +51,33 @@ positioned from the call site like any other element:
 <Card className="col-span-2" style={{ marginBlockStart: '2rem' }} />
 ```
 
-StyleX compiles the library's own rules into a CSS `@layer`, and your app's
-stylesheet is unlayered, so your rules win the cascade wherever the two meet —
-no specificity contest, and no `!important`.
+### Ordering the library's rules
+
+StyleX compiles the library's own rules into one CSS cascade layer, named
+`kanso`. A stylesheet of your own that is not layered beats every rule in it
+wherever the two meet — no specificity contest, and no `!important`.
+
+CSS that is layered takes its place from the order its layers are named in, so
+an app whose CSS is layered names the order. Tailwind v4 writes its preflight
+into `base` and its utilities into `utilities`; put `kanso` between them, so a
+utility on the call site wins and the preflight does not empty a button:
+
+```css
+@layer theme, base, kanso, components, utilities;
+@import 'tailwindcss';
+```
+
+A reset that is not layered — Tailwind v3's preflight, or a normalize sheet —
+beats every layered rule, the library's included, and turns a filled button
+transparent. Give it a layer ordered before `kanso`:
+
+```css
+@layer reset, kanso;
+@import 'modern-normalize.css' layer(reset);
+```
+
+A layer's place is fixed where it is first named, so the statement goes at the
+top of the stylesheet your app loads first, ahead of the library's.
 
 ### React Aria utilities
 
@@ -266,6 +290,38 @@ it does next belongs to the slot rather than to the icon. In an `IconButton` it
 fills the button edge to edge; in a field's icon slot it collapses and draws
 nothing. Sizing it is what avoids both.
 
+### Server components
+
+Every component is a client module, so a server component — a page or a layout
+in the Next.js App Router — imports and renders one directly:
+
+```tsx
+// app/page.tsx
+import { Button } from '@kanso-labs/kanso-ui'
+
+export default function Page() {
+  return <Button href="/start">Start</Button>
+}
+```
+
+Four things follow from where that boundary falls.
+
+- **Only serialisable props cross it.** A string, a number or a plain object
+  reaches the component from a server component; a function does not, so
+  `onPress` and a `render` callback belong in a client component of your own.
+  Neither does a class instance, so a `CalendarDate` for a date component is
+  built on the client side too.
+- **A sub-part is reached through its component**, as in `Dialog.Title` or
+  `Menu.Item`, and a server component cannot reach into a client module that
+  way. Compose those in a client component and render that.
+- **The React Aria utilities the package re-exports are client-only** —
+  `I18nProvider`, `useListData`, `parseColor` and the rest. `collectionSizes` is
+  a plain value and works on either side.
+- **A server-rendered app wraps its tree in `I18nProvider`** with the request's
+  locale. React Aria reads the browser's locale on the client and has none on
+  the server, so without it a date or a number can render differently on the two
+  and fail hydration.
+
 ## Theming
 
 Every design token — color, spacing, radii, sizing, shadows, typography,

package/dist/components/app-bar/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","createElement","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADINGS","heading","level","index","Math","min","max","round","length","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","props","collapse","expandedHeight","height","t14","t15","t16","Symbol","for","0","className","1","t17","t18","t19","t20","t21","children","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. Disclosure's\n// own `headingLevel` hands the number to React Aria, which is why that one\n// needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;\n  return createElement(HEADINGS[index]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline. A screen reader moves\n   * between headings, so a bar drawn beside another bar, or under a page\n   * heading of its own, should lower it.\n   * @default 1\n   */\n  headingLevel?: number;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   *\n   * Spelled out rather than the `sm`/`md`/`lg` the rest of the library takes\n   * — see AGENTS.md, under Prop vocabularies. It predates that rule, and\n   * renaming a public prop's values is a breaking change of its own rather\n   * than something to fold into other work.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"x12w9bfk xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","stylex","createElement","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADINGS","heading","level","index","Math","min","max","round","length","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","props","collapse","expandedHeight","height","t14","t15","t16","Symbol","for","0","className","1","t17","t18","t19","t20","t21","children","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. Disclosure's\n// own `headingLevel` hands the number to React Aria, which is why that one\n// needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;\n  return createElement(HEADINGS[index]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline. A screen reader moves\n   * between headings, so a bar drawn beside another bar, or under a page\n   * heading of its own, should lower it.\n   * @default 1\n   */\n  headingLevel?: number;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   *\n   * Spelled out rather than the `sm`/`md`/`lg` the rest of the library takes\n   * — see AGENTS.md, under Prop vocabularies. It predates that rule, and\n   * renaming a public prop's values is a breaking change of its own rather\n   * than something to fold into other work.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"x12w9bfk xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}

package/dist/components/autocomplete/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Autocomplete, useFilter } from "react-aria-components";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","AutocompleteProps","RACAutocompleteProps","Autocomplete","RACAutocomplete","useFilter","AutocompleteFilter","NonNullable","T","children","filter","Omit","t0","$","_c","props","t1","Symbol","for","sensitivity","contains","t2","containsFilter","t3","textValue","inputValue","Autocomplete","_c","RACAutocomplete"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { AutocompleteProps as RACAutocompleteProps } from 'react-aria-components'\n\nimport {\n  Autocomplete as RACAutocomplete,\n  useFilter,\n} from 'react-aria-components'\n\n// The search page's search with suggestions, as the wrapper React Aria makes\n// it: a search input over a collection, where typing narrows what the\n// collection shows. It draws nothing of its own — the input is SearchField,\n// the collection is ListBox or Menu, and where the two sit is the page's\n// business, which is what lets the same wrapper be a searchable list, a\n// filtered menu and a command palette inside a Dialog.\n//\n// Every other component here is a shape; this one is a behaviour, so it\n// renders no element and takes no `className` or `style`. There is nothing\n// for them to land on, and a wrapper element added to give them somewhere\n// would be a layout decision this component has no business making — the\n// three shapes above want three different ones.\n//\n// One thing is added to React Aria's. **Filtering is on by default.** Their\n// wrapper filters nothing unless it is handed a predicate, on the grounds\n// that a collection fed from a server may already be filtered. A collection\n// written out in the page is the common case here, and a search box that\n// does not search is a puzzle rather than a default, so `filter` falls back\n// to the same locale-aware contains match ComboBox uses. A collection that\n// filters itself passes a predicate that always returns true.\n\n// React Aria's own filter signature. Taken from the prop rather than written\n// out, since its third parameter is a collection node whose type this package\n// does not depend on directly.\ntype AutocompleteFilter<T extends object = object> = NonNullable<\n  RACAutocompleteProps<T>['filter']\n>\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search input and the collection it filters, in whatever the page\n   * puts around them. React Aria needs both somewhere inside.\n   */\n  children?: ReactNode\n  /**\n   * Which options a search keeps. Defaults to a locale-aware contains match\n   * on each option's text — React Aria's own default is to filter nothing,\n   * which is right for a collection that arrives filtered and wrong for one\n   * written out in the page.\n   */\n  filter?: AutocompleteFilter<T>\n} & Omit<RACAutocompleteProps<T>, 'children' | 'filter'>\n\n/**\n * A search input that filters the collection under it. Its value is React\n * Aria's: pass `inputValue` with `onInputChange` to control what has been\n * typed, or `defaultInputValue` to let it keep its own.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <ListBox aria-label=\"Results\">\n *     <ListBox.Item id=\"first\">First item</ListBox.Item>\n *   </ListBox>\n * </Autocomplete>\n * ```\n *\n * It renders no element of its own, so the input and the collection sit\n * wherever the page puts them — side by side in a panel, in a `Menu.Content`,\n * or in a `Dialog` as a command palette. That is also why it takes no\n * `className` or `style`: there is nothing for them to land on.\n *\n * Keyboard focus stays in the input while the arrow keys move through the\n * collection, which is React Aria's virtual focus. `disableVirtualFocus`\n * turns that off and makes the collection tabbable instead.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  filter,\n  ...props\n}: AutocompleteProps<T>) {\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  return (\n    <RACAutocomplete<T> filter={filter ?? containsFilter(contains)} {...props}>\n      {children}\n    </RACAutocomplete>\n  )\n}\n\n// React Aria's filter is handed the node as well as the two strings, which a\n// contains match has no use for. Built by a call rather than written inline\n// at the prop, which is what react-perf's no-new-function-as-prop is after;\n// the React Compiler memoises the result on its input.\nfunction containsFilter(\n  contains: (textValue: string, inputValue: string) => boolean,\n) {\n  return (textValue: string, inputValue: string) =>\n    contains(textValue, inputValue)\n}\n\nexport type { AutocompleteFilter, AutocompleteProps }\n\nexport default Autocomplete\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAAG,eAAAS,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAL;CAAA,IAAAC;CAAA,IAAAK;CAAA,IAAAF,EAAA,OAAAD,IAAA;EAAiD,CAAA,CAAAH,UAAAC,QAAA,GAAAK,SAAAH;EAI1BC,EAAA,KAAAD;EAAAC,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAE;CAAA,OAAA;EAAAN,WAAAI,EAAA;EAAAH,SAAAG,EAAA;EAAAE,QAAAF,EAAA;CAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAI,OAAAC,IAAA,2BAAA,GAAA;EACUF,KAAA,EAAAG,aAAe,OAAO;EAACN,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAtD,MAAA,EAAAO,aAAqBf,UAAUW,EAAuB;CAAC,IAAAK;CAAA,IAAAR,EAAA,OAAAO,YAAAP,EAAA,OAAAH,QAAA;EAGzBW,KAAAX,UAAUY,eAAeF,QAAQ;EAACP,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAJ,YAAAI,EAAA,OAAAE,SAAAF,EAAA,QAAAQ,IAAA;EAA9DE,KAAA,oBAACK,cAAD;GAA4B,QAAAP;GAAkC,GAAMN;GACjEN;EADa,CAAA;EAEEI,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFlBU;AAEkB;AAQtB,SAASD,eACPF,UACA;CACA,QAAQI,WAAmBC,eACzBL,SAASI,WAAWC,UAAU;AAClC"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","AutocompleteProps","RACAutocompleteProps","Autocomplete","RACAutocomplete","useFilter","AutocompleteFilter","NonNullable","T","children","filter","Omit","t0","$","props","t1","Symbol","for","sensitivity","contains","t2","containsFilter","t3","textValue","inputValue","Autocomplete","_c","RACAutocomplete"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\nimport type { AutocompleteProps as RACAutocompleteProps } from 'react-aria-components'\n\nimport {\n  Autocomplete as RACAutocomplete,\n  useFilter,\n} from 'react-aria-components'\n\n// The search page's search with suggestions, as the wrapper React Aria makes\n// it: a search input over a collection, where typing narrows what the\n// collection shows. It draws nothing of its own — the input is SearchField,\n// the collection is ListBox or Menu, and where the two sit is the page's\n// business, which is what lets the same wrapper be a searchable list, a\n// filtered menu and a command palette inside a Dialog.\n//\n// Every other component here is a shape; this one is a behaviour, so it\n// renders no element and takes no `className` or `style`. There is nothing\n// for them to land on, and a wrapper element added to give them somewhere\n// would be a layout decision this component has no business making — the\n// three shapes above want three different ones.\n//\n// One thing is added to React Aria's. **Filtering is on by default.** Their\n// wrapper filters nothing unless it is handed a predicate, on the grounds\n// that a collection fed from a server may already be filtered. A collection\n// written out in the page is the common case here, and a search box that\n// does not search is a puzzle rather than a default, so `filter` falls back\n// to the same locale-aware contains match ComboBox uses. A collection that\n// filters itself passes a predicate that always returns true.\n\n// React Aria's own filter signature. Taken from the prop rather than written\n// out, since its third parameter is a collection node whose type this package\n// does not depend on directly.\ntype AutocompleteFilter<T extends object = object> = NonNullable<\n  RACAutocompleteProps<T>['filter']\n>\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search input and the collection it filters, in whatever the page\n   * puts around them. React Aria needs both somewhere inside.\n   */\n  children?: ReactNode\n  /**\n   * Which options a search keeps. Defaults to a locale-aware contains match\n   * on each option's text — React Aria's own default is to filter nothing,\n   * which is right for a collection that arrives filtered and wrong for one\n   * written out in the page.\n   */\n  filter?: AutocompleteFilter<T>\n} & Omit<RACAutocompleteProps<T>, 'children' | 'filter'>\n\n/**\n * A search input that filters the collection under it. Its value is React\n * Aria's: pass `inputValue` with `onInputChange` to control what has been\n * typed, or `defaultInputValue` to let it keep its own.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <ListBox aria-label=\"Results\">\n *     <ListBox.Item id=\"first\">First item</ListBox.Item>\n *   </ListBox>\n * </Autocomplete>\n * ```\n *\n * It renders no element of its own, so the input and the collection sit\n * wherever the page puts them — side by side in a panel, in a `Menu.Content`,\n * or in a `Dialog` as a command palette. That is also why it takes no\n * `className` or `style`: there is nothing for them to land on.\n *\n * Keyboard focus stays in the input while the arrow keys move through the\n * collection, which is React Aria's virtual focus. `disableVirtualFocus`\n * turns that off and makes the collection tabbable instead.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  filter,\n  ...props\n}: AutocompleteProps<T>) {\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  return (\n    <RACAutocomplete<T> filter={filter ?? containsFilter(contains)} {...props}>\n      {children}\n    </RACAutocomplete>\n  )\n}\n\n// React Aria's filter is handed the node as well as the two strings, which a\n// contains match has no use for. Built by a call rather than written inline\n// at the prop, which is what react-perf's no-new-function-as-prop is after;\n// the React Compiler memoises the result on its input.\nfunction containsFilter(\n  contains: (textValue: string, inputValue: string) => boolean,\n) {\n  return (textValue: string, inputValue: string) =>\n    contains(textValue, inputValue)\n}\n\nexport type { AutocompleteFilter, AutocompleteProps }\n\nexport default Autocomplete\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,SAAAK,eAAAS,IAAA;CAAA,MAAAC,IAAAd,EAAA,EAAA;CAAA,IAAAU;CAAA,IAAAC;CAAA,IAAAI;CAAA,IAAAD,EAAA,OAAAD,IAAA;EAAiD,CAAA,CAAAH,UAAAC,QAAA,GAAAI,SAAAF;EAI1BC,EAAA,KAAAD;EAAAC,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAC;CAAA,OAAA;EAAAL,WAAAI,EAAA;EAAAH,SAAAG,EAAA;EAAAC,QAAAD,EAAA;CAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACUF,KAAA,EAAAG,aAAe,OAAO;EAACL,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAtD,MAAA,EAAAM,aAAqBd,UAAUU,EAAuB;CAAC,IAAAK;CAAA,IAAAP,EAAA,OAAAM,YAAAN,EAAA,OAAAH,QAAA;EAGzBU,KAAAV,UAAUW,eAAeF,QAAQ;EAACN,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAJ,YAAAI,EAAA,OAAAC,SAAAD,EAAA,QAAAO,IAAA;EAA9DE,KAAA,oBAACK,cAAD;GAA4B,QAAAP;GAAkC,GAAMN;GACjEL;EADa,CAAA;EAEEI,EAAA,KAAAJ;EAAAI,EAAA,KAAAC;EAAAD,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFlBS;AAEkB;AAQtB,SAASD,eACPF,UACA;CACA,QAAQI,WAAmBC,eACzBL,SAASI,WAAWC,UAAU;AAClC"}

package/dist/components/avatar/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","_c","render","t1","t2","props","undefined","status","t3","trim","named","t4","t5","role","t6","initialsFrom","t7","t8","children","t9","defaultTagName","words","split","filter","Boolean","length","first","Array","from","last","at","toLocaleUpperCase","_c","props","stylex.props"],"sources":["../../../src/components/avatar/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// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so an avatar and a control line\n// up in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an\n// `xs` control take and that 40dp default, for a row that wants a person\n// smaller than the button beside them.\n//\n// ProductIcon takes the same three, so a mark and a person fill the same\n// slot.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x16fbrrb\",\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  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\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 AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // 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 initials\n  // shown when there is no photo, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the avatar is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its photo with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","image","kZKoxP","kzqmXN","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","AvatarProps","Omit","name","size","src","tone","Avatar","t0","$","render","t1","t2","props","undefined","status","t3","trim","named","t4","t5","role","t6","initialsFrom","t7","t8","children","t9","defaultTagName","words","split","filter","Boolean","length","first","Array","from","last","at","toLocaleUpperCase","_c","props","stylex.props"],"sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport * 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// Tones are container/on-container pairs rather than one colour each, so the\n// initials are always a role's own foreground and can't end up unreadable on\n// a tint they were never paired with. Which tone a given person gets is the\n// consuming app's decision — the design cycles colours per person, and that\n// cycle belongs where the list of people is, not in this component.\n//\n// Sizes carry their own type size but not their own weight or family: the\n// label face at medium weight holds across all three, so a large avatar is\n// bigger initials rather than differently-styled ones.\n//\n// The three are the library's own rather than a spec page's — no Material\n// Design page gives a measurement for one in text; the lists page draws its\n// leading elements in a diagram and tabulates only their padding. So they are\n// stated against the scale the library already has. `md` is 40dp, which is\n// Button's and IconButton's own `md` height, so an avatar and a control line\n// up in a row. `lg` is 56dp. `sm` is 36dp, between the 32dp a chip and an\n// `xs` control take and that 40dp default, for a row that wants a person\n// smaller than the button beside them.\n//\n// ProductIcon takes the same three, so a mark and a person fill the same\n// slot.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x16fbrrb\",\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  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"xl1xv1r\",\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 AvatarProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * The person this represents. Supplies both the initials and the accessible\n   * name, so a screen reader announces who it is rather than reading two\n   * letters aloud.\n   */\n  name: string;\n  /**\n   * Diameter: `sm` 36px, `md` 40px, `lg` 56px.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * A photo to show in place of the initials. The initials stay until it has\n   * loaded, and come back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint with.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\nfunction Avatar({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: AvatarProps) {\n  // The photo is shown only once it has loaded, and the initials stay until\n  // then and come back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the initials be read: \"AL\" is not\n  // what anyone means to announce. Marking the root as an image also makes\n  // its contents presentational, so the photo and the initials can't be\n  // 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 initials\n  // shown when there is no photo, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the avatar is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initials, or its photo with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 xl1xv1r\" /> : initialsFrom(name),\n      ...mergeStyles(stylex.props(styles.base, styles[size], styles[tone]), props)\n    },\n    render\n  });\n}\n\n// First letter of the first and last word, which handles both \"Ada\" and \"Ada\n// Lovelace\" without a separate prop for how many to take. Array.from rather\n// than indexing, so a name starting outside the Basic Multilingual Plane\n// yields its whole first character instead of half a surrogate pair.\nfunction initialsFrom(name: string) {\n  const words = name.split(/\\s+/u).filter(Boolean);\n  if (words.length === 0) {\n    return '';\n  }\n  const first = Array.from(words[0] ?? '')[0] ?? '';\n  const last = words.length > 1 ? Array.from(words.at(-1) ?? '')[0] ?? '' : '';\n  return `${first}${last}`.toLocaleUpperCase();\n}\nexport type { AvatarProps };\nexport default Avatar;"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, RefAttributes } from "react";
 import { BreadcrumbProps, BreadcrumbsProps } from "react-aria-components";
 //#region src/components/breadcrumbs/index.d.ts
 type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'children' | 'className' | 'style'> & {
@@ -42,7 +42,7 @@ type BreadcrumbsProps$1<T extends object = object> = Omit<BreadcrumbsProps<T>, '
  * The call site's `className` and `style` land on the list, which is the
  * element a layout positions.
  */
-declare function Breadcrumbs$1<T extends object = object>(props: BreadcrumbsProps$1<T>): import("react").JSX.Element;
+declare function Breadcrumbs$1<T extends object = object>(props: BreadcrumbsProps$1<T> & RefAttributes<HTMLOListElement>): import("react").JSX.Element;
 declare namespace Breadcrumbs$1 {
   var Item: typeof BreadcrumbsItem;
 }

package/dist/components/breadcrumbs/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import Link$1 from "../link/index.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","BreadcrumbRenderProps","BreadcrumbProps","RACBreadcrumbProps","BreadcrumbsProps","RACBreadcrumbsProps","stylex","Breadcrumb","RACBreadcrumb","Breadcrumbs","RACBreadcrumbs","ChevronEndGlyph","mergeStatefulStyles","mergeStyles","colors","spacing","typography","Link","BreadcrumbsItemProps","Omit","children","className","href","rel","style","target","T","props","$","_c","t0","t1","BreadcrumbsItem","T0","t2","t3","t4","t5","t6","itemContent","state","isCurrent","Item","Breadcrumbs","_c","RACBreadcrumbs","RACBreadcrumb","Link"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { BreadcrumbRenderProps, BreadcrumbProps as RACBreadcrumbProps, BreadcrumbsProps as RACBreadcrumbsProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Breadcrumb as RACBreadcrumb, Breadcrumbs as RACBreadcrumbs } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Link from '../link';\n\n// A trail of links back up a hierarchy, ending at the page you are on. The\n// design system carries no breadcrumbs page, so the two nearest ones stand\n// in: the row takes the top app bar's muted content role, and each link the\n// text button's label-large type. Both are written down here rather than\n// guessed at each call site.\n//\n// React Aria decides which item is current — the last one — and marks it\n// `aria-current=\"page\"`. The trail is an ordered list, which is what a screen\n// reader reads it as, and `Breadcrumbs.Item` is one entry in it.\n//\n// Three things are this component's own.\n//\n// **The current item is text, not a link.** React Aria's own answer is a\n// disabled link, and a disabled link takes the library's disabled treatment\n// — the content role at 38%, which fades the one item the trail exists to\n// name. Here it is a span carrying `aria-current=\"page\"` instead, in the\n// full-strength content role, so the page you are on is the most legible\n// thing in the row rather than the least.\n//\n// **The chevron belongs to the item before it.** Each item that is not the\n// current one draws one after its link, which puts a separator between every\n// pair and none at the end. It says \"further in\" rather than \"to the right\",\n// so it mirrors under a right-to-left writing mode.\n//\n// **A link is drawn as a link in a place already understood to be links.**\n// `tone=\"inherit\"` takes the row's muted colour and `underline=\"hover\"`\n// leaves the rule for a pointer, which is what Link's own documentation\n// names this case for. The row's position is what announces them.\n//\n// `onAction` is React Aria's and is not wrapped: give each item an `id` and\n// the trail reports which one was pressed, for a page that navigates without\n// an `href`.\n\ntype BreadcrumbsItemProps = Omit<RACBreadcrumbProps, 'children' | 'className' | 'style'> & {\n  /** The item's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACBreadcrumbProps['className'];\n  /**\n   * Where the item leads. Leave it out on an item the page handles through\n   * the trail's `onAction`, and on the current one, which is never a link.\n   */\n  href?: string;\n  /** The link's `rel`. */\n  rel?: string;\n  /** A function may compute the style from the item's render state. */\n  style?: RACBreadcrumbProps['style'];\n  /** The link's `target`. */\n  target?: string;\n};\ntype BreadcrumbsProps<T extends object = object> = Omit<RACBreadcrumbsProps<T>, 'children'> & {\n  /** The trail, as `Breadcrumbs.Item` entries. */\n  children?: ReactNode;\n};\n\n/**\n * A trail of links back up a hierarchy, ending at the page you are on.\n * React Aria makes the last item the current one and marks it\n * `aria-current=\"page\"`; everything before it is a link.\n *\n * ```tsx\n * <Breadcrumbs aria-label=\"Label\">\n *   <Breadcrumbs.Item href=\"#first\">First item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"#second\">Second item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>\n * </Breadcrumbs>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby`. A page that navigates\n * without an `href` gives each item an `id` and the trail an `onAction`,\n * which is React Aria's and reports the key that was pressed.\n *\n * The call site's `className` and `style` land on the list, which is the\n * element a layout positions.\n */\nfunction Breadcrumbs<T extends object = object>(props: BreadcrumbsProps<T>) {\n  return <RACBreadcrumbs<T> {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1w5n3ug x78zum5 x1a02dak xkknnkr x14zspaw x1v9cpvo xzoy561 x155f00i x1lz68p4 xe8uvvx x1ghz6dp x1717udv\"\n  }, props)} />;\n}\n\n/**\n * One entry in the trail. Give it an `href` to navigate, or an `id` and let\n * the trail's `onAction` handle it. The last entry is the current page and\n * is drawn as text rather than a link, whatever it is given.\n */\nfunction BreadcrumbsItem({\n  children,\n  href,\n  rel,\n  target,\n  ...props\n}: BreadcrumbsItemProps) {\n  return <RACBreadcrumb {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xzoy561\"\n  }, props)}>\n      {itemContent(children, href, rel, target)}\n    </RACBreadcrumb>;\n}\n\n// What an entry draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction itemContent(children: ReactNode, href: string | undefined, rel: string | undefined, target: string | undefined) {\n  return (state: BreadcrumbRenderProps) => {\n    if (state.isCurrent) {\n      return <span aria-current=\"page\" className=\"x139gbkf\">\n          {children}\n        </span>;\n    }\n    return <>\n        <Link href={href} rel={rel} target={target} tone=\"inherit\" underline=\"hover\">\n          {children}\n        </Link>\n        <ChevronEndGlyph className=\"xmix8c7 x2lah0s x1xp8n7a x19axjrm x1c071of\" />\n      </>;\n  };\n}\nBreadcrumbs.Item = BreadcrumbsItem;\nexport type { BreadcrumbsItemProps, BreadcrumbsProps };\nexport default Breadcrumbs;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAAS,cAAAkB,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC2CG,KAAAjB,YAAY,EAAAQ,WACxC,yHACb,GAAGM,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAACc,aAAD;GAAe,GAAQlB;GAAK,GAAMG;EAEhC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;;AAQf,SAAAC,gBAAAF,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAI;CAAA,IAAAb;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAQ;CAAA,IAAAG;CAAA,IAAAT;CAAA,IAAAG,EAAA,OAAAE,IAAA;EAAyB,MAAA,EAAAV,UAAAe,IAAAb,MAAAc,IAAAb,KAAAc,IAAAZ,QAAAa,IAAA,GAAAX,UAAAG;EAAAV,WAAAe;EAAAb,OAAAc;EAAAb,MAAAc;EAAAZ,SAAAa;EAOfL,KAAAzB;EAAkBmB,KAAAA;EAAWO,KAAAtB,oBAAoB,EAAAS,WAC5C,iCACb,GAAGM,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAH;CAAA,OAAA;EAAAQ,KAAAL,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,OAAAM,EAAA;EAAAL,MAAAK,EAAA;EAAAG,KAAAH,EAAA;EAAAM,KAAAN,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,QAAAM,EAAA,QAAAL,OAAAK,EAAA,QAAAH,QAAA;EACJU,KAAAI,YAAYnB,UAAUE,MAAMC,KAAKE,MAAM;EAACG,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAH;EAAAG,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAK,MAAAL,EAAA,QAAAG,MAAAH,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EAHtCC,KAAA,oBAAC,IAAD;GAAc,GAAKT;GAAK,GAAMO;GAGhCC,UAAAA;EAHgB,CAAA;EAIHP,EAAA,MAAAK;EAAAL,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAJXQ;AAIW;AAOpB,SAASG,YAAYnB,UAAqBE,MAA0BC,KAAyBE,QAA4B;CACvH,QAAQe,UAAiC;EACvC,IAAIA,MAAMC,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtCrB;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC2B,QAAD;GAAYzB;GAAWC;GAAaE;GAAQ,MAAK;GAAU,WAAU;GAClEL;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACAX,cAAYiC,OAAOV"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","BreadcrumbRenderProps","BreadcrumbProps","RACBreadcrumbProps","BreadcrumbsProps","RACBreadcrumbsProps","stylex","Breadcrumb","RACBreadcrumb","Breadcrumbs","RACBreadcrumbs","ChevronEndGlyph","mergeStatefulStyles","mergeStyles","colors","spacing","typography","Link","BreadcrumbsItemProps","Omit","children","className","href","rel","style","target","T","props","$","t0","t1","BreadcrumbsItem","T0","t2","t3","t4","t5","t6","itemContent","state","isCurrent","Item","Breadcrumbs","_c","RACBreadcrumbs","RACBreadcrumb","Link"],"sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { BreadcrumbRenderProps, BreadcrumbProps as RACBreadcrumbProps, BreadcrumbsProps as RACBreadcrumbsProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Breadcrumb as RACBreadcrumb, Breadcrumbs as RACBreadcrumbs } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Link from '../link';\n\n// A trail of links back up a hierarchy, ending at the page you are on. The\n// design system carries no breadcrumbs page, so the two nearest ones stand\n// in: the row takes the top app bar's muted content role, and each link the\n// text button's label-large type. Both are written down here rather than\n// guessed at each call site.\n//\n// React Aria decides which item is current — the last one — and marks it\n// `aria-current=\"page\"`. The trail is an ordered list, which is what a screen\n// reader reads it as, and `Breadcrumbs.Item` is one entry in it.\n//\n// Three things are this component's own.\n//\n// **The current item is text, not a link.** React Aria's own answer is a\n// disabled link, and a disabled link takes the library's disabled treatment\n// — the content role at 38%, which fades the one item the trail exists to\n// name. Here it is a span carrying `aria-current=\"page\"` instead, in the\n// full-strength content role, so the page you are on is the most legible\n// thing in the row rather than the least.\n//\n// **The chevron belongs to the item before it.** Each item that is not the\n// current one draws one after its link, which puts a separator between every\n// pair and none at the end. It says \"further in\" rather than \"to the right\",\n// so it mirrors under a right-to-left writing mode.\n//\n// **A link is drawn as a link in a place already understood to be links.**\n// `tone=\"inherit\"` takes the row's muted colour and `underline=\"hover\"`\n// leaves the rule for a pointer, which is what Link's own documentation\n// names this case for. The row's position is what announces them.\n//\n// `onAction` is React Aria's and is not wrapped: give each item an `id` and\n// the trail reports which one was pressed, for a page that navigates without\n// an `href`.\n\ntype BreadcrumbsItemProps = Omit<RACBreadcrumbProps, 'children' | 'className' | 'style'> & {\n  /** The item's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACBreadcrumbProps['className'];\n  /**\n   * Where the item leads. Leave it out on an item the page handles through\n   * the trail's `onAction`, and on the current one, which is never a link.\n   */\n  href?: string;\n  /** The link's `rel`. */\n  rel?: string;\n  /** A function may compute the style from the item's render state. */\n  style?: RACBreadcrumbProps['style'];\n  /** The link's `target`. */\n  target?: string;\n};\ntype BreadcrumbsProps<T extends object = object> = Omit<RACBreadcrumbsProps<T>, 'children'> & {\n  /** The trail, as `Breadcrumbs.Item` entries. */\n  children?: ReactNode;\n};\n\n/**\n * A trail of links back up a hierarchy, ending at the page you are on.\n * React Aria makes the last item the current one and marks it\n * `aria-current=\"page\"`; everything before it is a link.\n *\n * ```tsx\n * <Breadcrumbs aria-label=\"Label\">\n *   <Breadcrumbs.Item href=\"#first\">First item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item href=\"#second\">Second item</Breadcrumbs.Item>\n *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>\n * </Breadcrumbs>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby`. A page that navigates\n * without an `href` gives each item an `id` and the trail an `onAction`,\n * which is React Aria's and reports the key that was pressed.\n *\n * The call site's `className` and `style` land on the list, which is the\n * element a layout positions.\n */\nfunction Breadcrumbs<T extends object = object>(props: BreadcrumbsProps<T> & RefAttributes<HTMLOListElement>) {\n  return <RACBreadcrumbs<T> {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1w5n3ug x78zum5 x1a02dak xkknnkr x14zspaw x1v9cpvo xzoy561 x155f00i x1lz68p4 xe8uvvx x1ghz6dp x1717udv\"\n  }, props)} />;\n}\n\n/**\n * One entry in the trail. Give it an `href` to navigate, or an `id` and let\n * the trail's `onAction` handle it. The last entry is the current page and\n * is drawn as text rather than a link, whatever it is given.\n */\nfunction BreadcrumbsItem({\n  children,\n  href,\n  rel,\n  target,\n  ...props\n}: BreadcrumbsItemProps) {\n  return <RACBreadcrumb {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xzoy561\"\n  }, props)}>\n      {itemContent(children, href, rel, target)}\n    </RACBreadcrumb>;\n}\n\n// What an entry draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction itemContent(children: ReactNode, href: string | undefined, rel: string | undefined, target: string | undefined) {\n  return (state: BreadcrumbRenderProps) => {\n    if (state.isCurrent) {\n      return <span aria-current=\"page\" className=\"x139gbkf\">\n          {children}\n        </span>;\n    }\n    return <>\n        <Link href={href} rel={rel} target={target} tone=\"inherit\" underline=\"hover\">\n          {children}\n        </Link>\n        <ChevronEndGlyph className=\"xmix8c7 x2lah0s x1xp8n7a x19axjrm x1c071of\" />\n      </>;\n  };\n}\nBreadcrumbs.Item = BreadcrumbsItem;\nexport type { BreadcrumbsItemProps, BreadcrumbsProps };\nexport default Breadcrumbs;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAY,cAAAkB,OAAA;CAAA,MAAAC,IAAA9B,EAAA,CAAA;CAAA,IAAA+B;CAAA,IAAAD,EAAA,OAAAD,OAAA;EAC2CE,KAAAhB,YAAY,EAAAQ,WACxC,yHACb,GAAGM,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAD,SAAAC,EAAA,OAAAC,IAAA;EAFFC,KAAA,oBAACc,aAAD;GAAe,GAAQjB;GAAK,GAAME;EAEhC,CAAA;EAAID,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;;AAQf,SAAAC,gBAAAF,IAAA;CAAA,MAAAD,IAAA9B,EAAA,EAAA;CAAA,IAAAkC;CAAA,IAAAZ;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAG,EAAA,OAAAC,IAAA;EAAyB,MAAA,EAAAT,UAAAc,IAAAZ,MAAAa,IAAAZ,KAAAa,IAAAX,QAAAY,IAAA,GAAAV,UAAAE;EAAAT,WAAAc;EAAAZ,OAAAa;EAAAZ,MAAAa;EAAAX,SAAAY;EAOfL,KAAAxB;EAAkBmB,KAAAA;EAAWM,KAAArB,oBAAoB,EAAAS,WAC5C,iCACb,GAAGM,KAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAI;EAAAJ,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAE;EAAAF,EAAA,KAAAK;EAAAL,EAAA,KAAAH;CAAA,OAAA;EAAAO,KAAAJ,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,OAAAM,EAAA;EAAAL,MAAAK,EAAA;EAAAE,KAAAF,EAAA;EAAAK,KAAAL,EAAA;EAAAH,SAAAG,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,QAAAM,EAAA,QAAAL,OAAAK,EAAA,QAAAH,QAAA;EACJS,KAAAI,YAAYlB,UAAUE,MAAMC,KAAKE,MAAM;EAACG,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAH;EAAAG,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAAI,MAAAJ,EAAA,QAAAE,MAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAHtCC,KAAA,oBAAC,IAAD;GAAc,GAAKR;GAAK,GAAMM;GAGhCC,UAAAA;EAHgB,CAAA;EAIHN,EAAA,MAAAI;EAAAJ,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAJXO;AAIW;AAOpB,SAASG,YAAYlB,UAAqBE,MAA0BC,KAAyBE,QAA4B;CACvH,QAAQc,UAAiC;EACvC,IAAIA,MAAMC,WACR,OAAO,oBAAC,QAAD;GAAM,gBAAa;GAAO,WAAU;GACtCpB;EACG,CAAA;EAEV,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,oBAAC0B,QAAD;GAAYxB;GAAWC;GAAaE;GAAQ,MAAK;GAAU,WAAU;GAClEL;EACG,CAAA,GACN,oBAAC,iBAAD,EAAiB,WAAU,6CAA4C,CAAA,CACzE,EAAA,CAAA;CACJ;AACF;AACAX,cAAYgC,OAAOV"}

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

@@ -1,4 +1,4 @@
-import { DOMAttributes, ReactNode } from "react";
+import { DOMAttributes, ReactNode, RefAttributes } from "react";
 import { ButtonProps, ButtonRenderProps, ClassNameOrFunction, StyleOrFunction } from "react-aria-components";
 //#region src/components/button/index.d.ts
 type ButtonDOMProps = Omit<ButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;
@@ -57,7 +57,7 @@ type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof ButtonPro
  * forwarded to the element; React Aria alone would keep only the labelling
  * ones.
  */
-declare function Button$1({ children, disableRipple, href, isDisabled, isPending, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel, rel, render, size, target, variant, ...props }: ButtonProps$1): import("react").JSX.Element;
+declare function Button$1({ children, disableRipple, href, isDisabled, isPending, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel, ref, rel, render, size, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
 //#endregion
 export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,8 +1,10 @@
+"use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, buttonRenderer, linkRenderer } from "../../render/aria.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { refCallback } from "../../render/ref.js";
 import ProgressIndicator from "../progress-indicator/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -199,8 +201,8 @@ const disabledStyles = {
 * ones.
 */
 function Button$1(t0) {
-	const $ = c(23);
-	const { children, disableRipple: t1, href, isDisabled: t2, isPending: t3, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t4, rel, render, size: t5, target, variant: t6, ...props$1 } = t0;
+	const $ = c(26);
+	const { children, disableRipple: t1, href, isDisabled: t2, isPending: t3, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t4, ref, rel, render, size: t5, target, variant: t6, ...props$1 } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
 	const isPending = t3 === void 0 ? false : t3;
@@ -239,9 +241,17 @@ function Button$1(t0) {
 		onKeyDown,
 		onKeyUp
 	};
+	let t9;
+	if ($[10] !== ref) {
+		t9 = refCallback(ref);
+		$[10] = ref;
+		$[11] = t9;
+	} else t9 = $[11];
+	const forwarded = t9;
 	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
 		href,
 		isDisabled,
+		ref: forwarded,
 		rel,
 		render: linkRenderer(element),
 		target,
@@ -251,38 +261,40 @@ function Button$1(t0) {
 		children: [children, ripple.surface]
 	});
 	const T0 = Button;
-	const t9 = buttonRenderer(element, render);
-	const t10 = ripple.handlers;
-	let t11;
-	if ($[10] !== children || $[11] !== pendingLabel || $[12] !== ripple) {
-		t11 = buttonContent(children, pendingLabel, ripple);
-		$[10] = children;
-		$[11] = pendingLabel;
-		$[12] = ripple;
-		$[13] = t11;
-	} else t11 = $[13];
+	const t10 = buttonRenderer(element, render);
+	const t11 = ripple.handlers;
 	let t12;
-	if ($[14] !== T0 || $[15] !== isDisabled || $[16] !== isPending || $[17] !== props$1 || $[18] !== ripple.handlers || $[19] !== styleProps || $[20] !== t11 || $[21] !== t9) {
-		t12 = /* @__PURE__ */ jsx(T0, {
+	if ($[12] !== children || $[13] !== pendingLabel || $[14] !== ripple) {
+		t12 = buttonContent(children, pendingLabel, ripple);
+		$[12] = children;
+		$[13] = pendingLabel;
+		$[14] = ripple;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
+	if ($[16] !== T0 || $[17] !== forwarded || $[18] !== isDisabled || $[19] !== isPending || $[20] !== props$1 || $[21] !== ripple.handlers || $[22] !== styleProps || $[23] !== t10 || $[24] !== t12) {
+		t13 = /* @__PURE__ */ jsx(T0, {
 			isDisabled,
 			isPending,
-			render: t9,
-			...t10,
+			ref: forwarded,
+			render: t10,
+			...t11,
 			...props$1,
 			...styleProps,
-			children: t11
+			children: t12
 		});
-		$[14] = T0;
-		$[15] = isDisabled;
-		$[16] = isPending;
-		$[17] = props$1;
-		$[18] = ripple.handlers;
-		$[19] = styleProps;
-		$[20] = t11;
-		$[21] = t9;
-		$[22] = t12;
-	} else t12 = $[22];
-	return t12;
+		$[16] = T0;
+		$[17] = forwarded;
+		$[18] = isDisabled;
+		$[19] = isPending;
+		$[20] = props$1;
+		$[21] = ripple.handlers;
+		$[22] = styleProps;
+		$[23] = t10;
+		$[24] = t12;
+		$[25] = t13;
+	} else t13 = $[25];
+	return t13;
 }
 function buttonContent(children, pendingLabel, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [