@kanso-labs/kanso-ui 0.26.2 → 0.26.3

package/dist/indicator/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one: ProgressIndicator, which adds\n// the ring and the two indeterminate presentations on top, and Meter, which\n// is this and nothing else.\n//\n// The page's anatomy names three parts — the active indicator in primary,\n// the track in secondary container, and the stop indicator in primary at the\n// end — at 4dp thick with 4dp between them. The active indicator's width is\n// the percentage itself and the track takes what is left, so the row is a\n// flex line and the two gaps are its `gap`.\n//\n// `tone` is the line's colour. `primary` is the page's own pair, and it is\n// what a progress indicator draws. `negative` and `positive` swap the active\n// indicator and the stop indicator alone, leaving the track in secondary\n// container, so a column of meters reads as one scale with bars of different\n// colours rather than as several unrelated gauges. `inherit` instead takes\n// the colour around it for both, and gives the track a quarter of it, which\n// is what makes a ring legible inside a filled button, where the page's\n// primary is the button's own fill.\n//\n// Apart from ./index.tsx so that file exports components alone, which is\n// what keeps fast refresh working for it.\n\n/** The thickness of every part, and the room the page leaves between them. */\nexport const THICKNESS = 4;\nexport const GAP = 4;\n\n/** What the page gives a value that changes to move over. */\nexport const DETERMINATE_MS = 250;\nexport const DETERMINATE_EASING = 'cubic-bezier(0.4, 0, 0.6, 1)';\nexport type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nexport const indicatorStyles = {\n  active: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kIyJzY: \"x1rvut6x\",\n    k1ekBW: \"x1j4rzew\",\n    kAMwcw: \"x16pyfke\",\n    $$css: true\n  },\n  activeAt: (percentage: number) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${percentage}%`)\n  }],\n  inheritActive: {\n    kWkggS: \"xtwfq29\",\n    kjVXCG: \"x73je2i\",\n    $$css: true\n  },\n  inheritTrack: {\n    kWkggS: \"xtp5tyh\",\n    kjVXCG: \"xy3ggvv\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labels: {\n    kGNEyG: \"x1pha0wt\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  line: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xqu0tyb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x1jnr06f\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  negativeActive: {\n    kWkggS: \"xmjwayr\",\n    $$css: true\n  },\n  positiveActive: {\n    kWkggS: \"x1xov01w\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  stop: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xqu0tyb\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x51ohtg\",\n    $$css: true\n  },\n  track: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trackSolid: {\n    kWkggS: \"x15dekr4\",\n    $$css: true\n  }\n};"],"mappings":";AAmCA,MAAM,QAAQ;CACZ,QAAQ;CACR,SAAS;AACX;AACA,MAAa,kBAAkB;CAC7B,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW,eAAuB,CAAC,OAAO,EACxC,oBAAmB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,GAAG,WAAU,EAAG,EAClH,CAAC;CACD,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,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,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","typography","THICKNESS","GAP","DETERMINATE_MS","DETERMINATE_EASING","IndicatorTone","_temp","kzqmXN","indicatorStyles","active","kWkggS","kZKoxP","kaIpWk","kB7OPa","kmuXW","kIyJzY","k1ekBW","kAMwcw","$$css","activeAt","percentage","val","undefined","inheritActive","kjVXCG","inheritTrack","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","labels","kGNEyG","k1xSpc","kOIVth","kjj79g","line","negativeActive","positiveActive","root","kXwgrk","stop","track","kzQI83","k7Eaqz","kVQacm","trackSolid"],"sources":["../../src/indicator/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The line the progress indicators page draws, and the label row above it,\n// shared by the two components that draw one: ProgressIndicator, which adds\n// the ring and the two indeterminate presentations on top, and Meter, which\n// is this and nothing else.\n//\n// The page's anatomy names three parts — the active indicator in primary,\n// the track in secondary container, and the stop indicator in primary at the\n// end — at 4dp thick with 4dp between them. The active indicator's width is\n// the percentage itself and the track takes what is left, so the row is a\n// flex line and the two gaps are its `gap`.\n//\n// `tone` is the line's colour. `primary` is the page's own pair, and it is\n// what a progress indicator draws. `negative` and `positive` swap the active\n// indicator and the stop indicator alone, leaving the track in secondary\n// container, so a column of meters reads as one scale with bars of different\n// colours rather than as several unrelated gauges. `inherit` instead takes\n// the colour around it for both, and gives the track a quarter of it, which\n// is what makes a ring legible inside a filled button, where the page's\n// primary is the button's own fill.\n//\n// Apart from ./index.tsx so that file exports components alone, which is\n// what keeps fast refresh working for it.\n\n/** The thickness of every part, and the room the page leaves between them. */\nexport const THICKNESS = 4;\nexport const GAP = 4;\n\n/** What the page gives a value that changes to move over. */\nexport const DETERMINATE_MS = 250;\nexport const DETERMINATE_EASING = 'cubic-bezier(0.4, 0, 0.6, 1)';\nexport type IndicatorTone = 'inherit' | 'negative' | 'positive' | 'primary';\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nexport const indicatorStyles = {\n  active: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kIyJzY: \"x1rvut6x\",\n    k1ekBW: \"x1j4rzew\",\n    kAMwcw: \"x16pyfke\",\n    $$css: true\n  },\n  activeAt: (percentage: number) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${percentage}%`)\n  }],\n  inheritActive: {\n    kWkggS: \"xtwfq29\",\n    kjVXCG: \"x73je2i\",\n    $$css: true\n  },\n  inheritTrack: {\n    kWkggS: \"xtp5tyh\",\n    kjVXCG: \"xy3ggvv\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  labels: {\n    kGNEyG: \"x1pha0wt\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  line: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xqu0tyb\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x1jnr06f\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  negativeActive: {\n    kWkggS: \"xmjwayr\",\n    $$css: true\n  },\n  positiveActive: {\n    kWkggS: \"x1xov01w\",\n    $$css: true\n  },\n  root: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  stop: {\n    kWkggS: \"xnety89\",\n    kZKoxP: \"xqu0tyb\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x51ohtg\",\n    $$css: true\n  },\n  track: {\n    kZKoxP: \"x5yr21d\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzQI83: \"x1iyjqo2\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  },\n  trackSolid: {\n    kWkggS: \"x15dekr4\",\n    $$css: true\n  }\n};"],"mappings":";AAmCA,MAAMU,QAAQ;CACZC,QAAQ;CACR,SAAS;AACX;AACA,MAAaC,kBAAkB;CAC7BC,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,WAAWC,eAAuB,CAACd,OAAO,EACxC,oBAAmBe,QAAO,OAAOA,QAAQ,WAAWA,MAAM,OAAOA,OAAO,OAAOA,MAAMC,KAAAA,EAAAA,CAAW,GAAGF,WAAU,EAAG,EAClH,CAAC;CACDG,eAAe;EACbb,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZf,QAAQ;EACRc,QAAQ;EACRN,OAAO;CACT;CACAQ,OAAO;EACLb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,QAAQ;EACNC,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,MAAM;EACJJ,QAAQ;EACRvB,QAAQ;EACRE,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACR7B,QAAQ;EACRW,OAAO;CACT;CACAqB,gBAAgB;EACd7B,QAAQ;EACRQ,OAAO;CACT;CACAsB,gBAAgB;EACd9B,QAAQ;EACRQ,OAAO;CACT;CACAuB,MAAM;EACJ5B,QAAQ;EACRsB,QAAQ;EACRO,QAAQ;EACRN,QAAQ;EACR7B,QAAQ;EACRW,OAAO;CACT;CACAyB,MAAM;EACJjC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPP,QAAQ;EACRW,OAAO;CACT;CACA0B,OAAO;EACLjC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR7B,OAAO;CACT;CACA8B,YAAY;EACVtC,QAAQ;EACRQ,OAAO;CACT;AACF"}

package/dist/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":[],"sources":["../src/layout.ts"],"sourcesContent":["// What the collections actually measure, for the layouts a virtualized one is\n// given. React Aria's `ListLayout`, `GridLayout`, `TableLayout` and\n// `WaterfallLayout` position rows from a size rather than from the DOM, so a\n// virtualized List, ListBox, Table or Tree has to be told how tall its rows\n// are — and a number guessed at the call site puts every row in the wrong\n// place the moment a component's own height changes.\n//\n// These are that number, and `src/layout.test.ts` renders each collection and\n// measures it, so a constant here cannot drift from what the component draws.\n//\n// They are the heights as rendered, which is what a virtualizer needs — not\n// what a spec page names, where the two can differ. They agree today.\n\n/**\n * The heights the collections draw, in pixels, for a virtualized one's\n * layout options.\n *\n * ```tsx\n * <Virtualizer\n *   layout={ListLayout}\n *   layoutOptions={{\n *     rowSize: collectionSizes.listRow,\n *     headingSize: collectionSizes.sectionHeading,\n *   }}\n * >\n *   <List aria-label=\"Label\" items={items}>{renderItem}</List>\n * </Virtualizer>\n * ```\n *\n * A row that wraps is taller than any of these, so a collection whose content\n * varies takes `estimatedRowSize` rather than `rowSize` and lets React Aria\n * measure the rest.\n */\nconst collectionSizes = {\n  /** The thickness of the line a drag draws between two rows. */\n  dropIndicator: 2,\n  /** A `List`, `ListBox` or `Tree` row with a headline alone. */\n  listRow: 56,\n  /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */\n  listRowTwoLine: 72,\n  /** A `Menu` item, which the menus page gives a shorter floor than a list's. */\n  menuRow: 48,\n  /** A `List.Section` or `Tree.Section` heading. */\n  sectionHeading: 38,\n  /** A `Table` header row, which the data tables page draws taller than a body row. */\n  tableHeaderRow: 56,\n  /** A `Table` body row. */\n  tableRow: 52,\n} as const\n\nexport { collectionSizes }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,kBAAkB;;CAEtB,eAAe;;CAEf,SAAS;;CAET,gBAAgB;;CAEhB,SAAS;;CAET,gBAAgB;;CAEhB,gBAAgB;;CAEhB,UAAU;AACZ"}
+{"version":3,"file":"layout.js","names":["collectionSizes","dropIndicator","listRow","listRowTwoLine","menuRow","sectionHeading","tableHeaderRow","tableRow","const"],"sources":["../src/layout.ts"],"sourcesContent":["// What the collections actually measure, for the layouts a virtualized one is\n// given. React Aria's `ListLayout`, `GridLayout`, `TableLayout` and\n// `WaterfallLayout` position rows from a size rather than from the DOM, so a\n// virtualized List, ListBox, Table or Tree has to be told how tall its rows\n// are — and a number guessed at the call site puts every row in the wrong\n// place the moment a component's own height changes.\n//\n// These are that number, and `src/layout.test.ts` renders each collection and\n// measures it, so a constant here cannot drift from what the component draws.\n//\n// They are the heights as rendered, which is what a virtualizer needs — not\n// what a spec page names, where the two can differ. They agree today.\n\n/**\n * The heights the collections draw, in pixels, for a virtualized one's\n * layout options.\n *\n * ```tsx\n * <Virtualizer\n *   layout={ListLayout}\n *   layoutOptions={{\n *     rowSize: collectionSizes.listRow,\n *     headingSize: collectionSizes.sectionHeading,\n *   }}\n * >\n *   <List aria-label=\"Label\" items={items}>{renderItem}</List>\n * </Virtualizer>\n * ```\n *\n * A row that wraps is taller than any of these, so a collection whose content\n * varies takes `estimatedRowSize` rather than `rowSize` and lets React Aria\n * measure the rest.\n */\nconst collectionSizes = {\n  /** The thickness of the line a drag draws between two rows. */\n  dropIndicator: 2,\n  /** A `List`, `ListBox` or `Tree` row with a headline alone. */\n  listRow: 56,\n  /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */\n  listRowTwoLine: 72,\n  /** A `Menu` item, which the menus page gives a shorter floor than a list's. */\n  menuRow: 48,\n  /** A `List.Section` or `Tree.Section` heading. */\n  sectionHeading: 38,\n  /** A `Table` header row, which the data tables page draws taller than a body row. */\n  tableHeaderRow: 56,\n  /** A `Table` body row. */\n  tableRow: 52,\n} as const\n\nexport { collectionSizes }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,kBAAkB;;CAEtBC,eAAe;;CAEfC,SAAS;;CAETC,gBAAgB;;CAEhBC,SAAS;;CAETC,gBAAgB;;CAEhBC,gBAAgB;;CAEhBC,UAAU;AACZ"}

package/dist/render/aria.js.map

@@ -1 +1 @@
-{"version":3,"file":"aria.js","names":[],"sources":["../../src/render/aria.tsx"],"sourcesContent":["import type { AriaAttributes, KeyboardEventHandler } from 'react'\nimport type {\n  ButtonProps,\n  LinkProps,\n  ToggleButtonProps,\n} from 'react-aria-components'\n\nimport { createElement } from 'react'\n\n// The four React Aria forwards on its own, and may combine with what a parent\n// provides through context — a dialog's trigger names its dialog this way.\n// Everything else it drops, so those stay out of the spread below rather\n// than overriding a value React Aria computed.\nconst LABELLING = new Set([\n  'aria-describedby',\n  'aria-details',\n  'aria-label',\n  'aria-labelledby',\n])\n\n/**\n * What a component puts on the element itself, past React Aria: the `aria-*`\n * props it would drop, and the keyboard handlers it would wrap.\n *\n * React Aria forwards only the labelling attributes, which is right for the\n * states it manages but leaves a call site no way to mark a button as\n * expanded, pressed, or in control of something React Aria does not know\n * about. Its keyboard handlers stop propagation unless the handler asks\n * otherwise, which is its own convention rather than the DOM's; attached to\n * the element directly they bubble as a call site expects, and an Escape\n * pressed on a button inside a dialog still reaches the dialog.\n */\ninterface ElementProps {\n  aria: AriaAttributes\n  onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined\n  onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined\n}\n\n/** The `aria-*` props React Aria would drop, collected for {@link ElementProps}. */\nfunction ariaAttributesOf(props: object): AriaAttributes {\n  const aria: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(props)) {\n    if (key.startsWith('aria-') && !LABELLING.has(key)) {\n      aria[key] = value\n    }\n  }\n  return aria\n}\n\n/**\n * The `render` function for a React Aria `Button`: the element it would have\n * rendered, plus {@link ElementProps}, handed on to the call site's own\n * `render` when there is one. Built by a call rather than written inline at\n * the prop, which is what react-perf's no-new-function-as-prop is after.\n *\n * `createElement` rather than JSX, here and below: React Aria types the\n * props it hands over as a union of the elements it might have rendered, and\n * a spread of that union onto one tag does not type-check, where the plain\n * call takes any props object.\n */\nfunction buttonRenderer(\n  element: ElementProps,\n  render: ButtonProps['render'],\n): NonNullable<ButtonProps['render']> {\n  return (domProps, state) => {\n    const merged = withElementProps(domProps, element)\n    if (render !== undefined) {\n      return render(merged, state)\n    }\n    return createElement('button', merged)\n  }\n}\n\n// React Aria's own keyboard handling comes first, then the call site's.\nfunction chain<Event>(\n  first: ((event: Event) => void) | undefined,\n  second: ((event: Event) => void) | undefined,\n) {\n  if (second === undefined) {\n    return first\n  }\n  return (event: Event) => {\n    first?.(event)\n    second(event)\n  }\n}\n\n/**\n * The same for a React Aria `Link`, handed on to the call site's own `render`\n * when there is one. React Aria expects an anchor while the link is enabled\n * and has somewhere to go, and a span in every other case — a disabled anchor\n * is no link at all, and one without `href` is a placeholder — and it leaves\n * `href` out of what it hands over in both span cases, which is what the\n * element is chosen from.\n */\nfunction linkRenderer(\n  element: ElementProps,\n  render?: LinkProps['render'],\n): NonNullable<LinkProps['render']> {\n  return (domProps, state) => {\n    const merged = withElementProps(domProps, element)\n    if (render !== undefined) {\n      return render(merged, state)\n    }\n    if (state.isDisabled || !('href' in merged)) {\n      return createElement('span', { ...merged, href: undefined })\n    }\n    return createElement('a', merged)\n  }\n}\n\n/**\n * The same for a React Aria `ToggleButton`. Written out rather than made\n * generic over `buttonRenderer`: React Aria hands a toggle button a render\n * state of its own — no `isPending`, plus `isSelected` — and a function\n * written against the plain button's state does not type-check where that\n * one is expected.\n */\nfunction toggleButtonRenderer(\n  element: ElementProps,\n  render: ToggleButtonProps['render'],\n): NonNullable<ToggleButtonProps['render']> {\n  return (domProps, state) => {\n    const merged = withElementProps(domProps, element)\n    if (render !== undefined) {\n      return render(merged, state)\n    }\n    return createElement('button', merged)\n  }\n}\n\nfunction withElementProps<Props extends object>(\n  domProps: Props,\n  element: ElementProps,\n) {\n  const dom = domProps as Props & {\n    onKeyDown?: KeyboardEventHandler<HTMLElement>\n    onKeyUp?: KeyboardEventHandler<HTMLElement>\n  }\n  return {\n    ...domProps,\n    ...element.aria,\n    onKeyDown: chain(dom.onKeyDown, element.onKeyDown),\n    onKeyUp: chain(dom.onKeyUp, element.onKeyUp),\n  }\n}\n\nexport type { ElementProps }\n\nexport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer }\n"],"mappings":";;AAaA,MAAM,4BAAY,IAAI,IAAI;CACxB;CACA;CACA;CACA;AAAiB,CAClB;;AAqBD,SAAS,iBAAiB,OAA+B;CACvD,MAAM,OAAgC,CAAC;CACvC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,IAAI,WAAW,OAAO,KAAK,CAAC,UAAU,IAAI,GAAG,GAC/C,KAAK,OAAO;CAGhB,OAAO;AACT;;;;;;;;;;;;AAaA,SAAS,eACP,SACA,QACoC;CACpC,QAAQ,UAAU,UAAU;EAC1B,MAAM,SAAS,iBAAiB,UAAU,OAAO;EACjD,IAAI,WAAW,KAAA,GACb,OAAO,OAAO,QAAQ,KAAK;EAE7B,OAAO,cAAc,UAAU,MAAM;CACvC;AACF;AAGA,SAAS,MACP,OACA,QACA;CACA,IAAI,WAAW,KAAA,GACb,OAAO;CAET,QAAQ,UAAiB;EACvB,QAAQ,KAAK;EACb,OAAO,KAAK;CACd;AACF;;;;;;;;;AAUA,SAAS,aACP,SACA,QACkC;CAClC,QAAQ,UAAU,UAAU;EAC1B,MAAM,SAAS,iBAAiB,UAAU,OAAO;EACjD,IAAI,WAAW,KAAA,GACb,OAAO,OAAO,QAAQ,KAAK;EAE7B,IAAI,MAAM,cAAc,EAAE,UAAU,SAClC,OAAO,cAAc,QAAQ;GAAE,GAAG;GAAQ,MAAM,KAAA;EAAU,CAAC;EAE7D,OAAO,cAAc,KAAK,MAAM;CAClC;AACF;;;;;;;;AASA,SAAS,qBACP,SACA,QAC0C;CAC1C,QAAQ,UAAU,UAAU;EAC1B,MAAM,SAAS,iBAAiB,UAAU,OAAO;EACjD,IAAI,WAAW,KAAA,GACb,OAAO,OAAO,QAAQ,KAAK;EAE7B,OAAO,cAAc,UAAU,MAAM;CACvC;AACF;AAEA,SAAS,iBACP,UACA,SACA;CACA,MAAM,MAAM;CAIZ,OAAO;EACL,GAAG;EACH,GAAG,QAAQ;EACX,WAAW,MAAM,IAAI,WAAW,QAAQ,SAAS;EACjD,SAAS,MAAM,IAAI,SAAS,QAAQ,OAAO;CAC7C;AACF"}
+{"version":3,"file":"aria.js","names":["AriaAttributes","KeyboardEventHandler","ButtonProps","LinkProps","ToggleButtonProps","createElement","LABELLING","Set","ElementProps","aria","onKeyDown","HTMLElement","onKeyUp","ariaAttributesOf","props","Record","key","value","Object","entries","startsWith","has","buttonRenderer","element","render","NonNullable","domProps","state","merged","withElementProps","undefined","chain","first","event","Event","second","linkRenderer","isDisabled","href","toggleButtonRenderer","Props","dom"],"sources":["../../src/render/aria.tsx"],"sourcesContent":["import type { AriaAttributes, KeyboardEventHandler } from 'react'\nimport type {\n  ButtonProps,\n  LinkProps,\n  ToggleButtonProps,\n} from 'react-aria-components'\n\nimport { createElement } from 'react'\n\n// The four React Aria forwards on its own, and may combine with what a parent\n// provides through context — a dialog's trigger names its dialog this way.\n// Everything else it drops, so those stay out of the spread below rather\n// than overriding a value React Aria computed.\nconst LABELLING = new Set([\n  'aria-describedby',\n  'aria-details',\n  'aria-label',\n  'aria-labelledby',\n])\n\n/**\n * What a component puts on the element itself, past React Aria: the `aria-*`\n * props it would drop, and the keyboard handlers it would wrap.\n *\n * React Aria forwards only the labelling attributes, which is right for the\n * states it manages but leaves a call site no way to mark a button as\n * expanded, pressed, or in control of something React Aria does not know\n * about. Its keyboard handlers stop propagation unless the handler asks\n * otherwise, which is its own convention rather than the DOM's; attached to\n * the element directly they bubble as a call site expects, and an Escape\n * pressed on a button inside a dialog still reaches the dialog.\n */\ninterface ElementProps {\n  aria: AriaAttributes\n  onKeyDown?: KeyboardEventHandler<HTMLElement> | undefined\n  onKeyUp?: KeyboardEventHandler<HTMLElement> | undefined\n}\n\n/** The `aria-*` props React Aria would drop, collected for {@link ElementProps}. */\nfunction ariaAttributesOf(props: object): AriaAttributes {\n  const aria: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(props)) {\n    if (key.startsWith('aria-') && !LABELLING.has(key)) {\n      aria[key] = value\n    }\n  }\n  return aria\n}\n\n/**\n * The `render` function for a React Aria `Button`: the element it would have\n * rendered, plus {@link ElementProps}, handed on to the call site's own\n * `render` when there is one. Built by a call rather than written inline at\n * the prop, which is what react-perf's no-new-function-as-prop is after.\n *\n * `createElement` rather than JSX, here and below: React Aria types the\n * props it hands over as a union of the elements it might have rendered, and\n * a spread of that union onto one tag does not type-check, where the plain\n * call takes any props object.\n */\nfunction buttonRenderer(\n  element: ElementProps,\n  render: ButtonProps['render'],\n): NonNullable<ButtonProps['render']> {\n  return (domProps, state) => {\n    const merged = withElementProps(domProps, element)\n    if (render !== undefined) {\n      return render(merged, state)\n    }\n    return createElement('button', merged)\n  }\n}\n\n// React Aria's own keyboard handling comes first, then the call site's.\nfunction chain<Event>(\n  first: ((event: Event) => void) | undefined,\n  second: ((event: Event) => void) | undefined,\n) {\n  if (second === undefined) {\n    return first\n  }\n  return (event: Event) => {\n    first?.(event)\n    second(event)\n  }\n}\n\n/**\n * The same for a React Aria `Link`, handed on to the call site's own `render`\n * when there is one. React Aria expects an anchor while the link is enabled\n * and has somewhere to go, and a span in every other case — a disabled anchor\n * is no link at all, and one without `href` is a placeholder — and it leaves\n * `href` out of what it hands over in both span cases, which is what the\n * element is chosen from.\n */\nfunction linkRenderer(\n  element: ElementProps,\n  render?: LinkProps['render'],\n): NonNullable<LinkProps['render']> {\n  return (domProps, state) => {\n    const merged = withElementProps(domProps, element)\n    if (render !== undefined) {\n      return render(merged, state)\n    }\n    if (state.isDisabled || !('href' in merged)) {\n      return createElement('span', { ...merged, href: undefined })\n    }\n    return createElement('a', merged)\n  }\n}\n\n/**\n * The same for a React Aria `ToggleButton`. Written out rather than made\n * generic over `buttonRenderer`: React Aria hands a toggle button a render\n * state of its own — no `isPending`, plus `isSelected` — and a function\n * written against the plain button's state does not type-check where that\n * one is expected.\n */\nfunction toggleButtonRenderer(\n  element: ElementProps,\n  render: ToggleButtonProps['render'],\n): NonNullable<ToggleButtonProps['render']> {\n  return (domProps, state) => {\n    const merged = withElementProps(domProps, element)\n    if (render !== undefined) {\n      return render(merged, state)\n    }\n    return createElement('button', merged)\n  }\n}\n\nfunction withElementProps<Props extends object>(\n  domProps: Props,\n  element: ElementProps,\n) {\n  const dom = domProps as Props & {\n    onKeyDown?: KeyboardEventHandler<HTMLElement>\n    onKeyUp?: KeyboardEventHandler<HTMLElement>\n  }\n  return {\n    ...domProps,\n    ...element.aria,\n    onKeyDown: chain(dom.onKeyDown, element.onKeyDown),\n    onKeyUp: chain(dom.onKeyUp, element.onKeyUp),\n  }\n}\n\nexport type { ElementProps }\n\nexport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer }\n"],"mappings":";;AAaA,MAAMM,4BAAY,IAAIC,IAAI;CACxB;CACA;CACA;CACA;AAAiB,CAClB;;AAqBD,SAASM,iBAAiBC,OAA+B;CACvD,MAAML,OAAgC,CAAC;CACvC,KAAK,MAAM,CAACO,KAAKC,UAAUC,OAAOC,QAAQL,KAAK,GAC7C,IAAIE,IAAII,WAAW,OAAO,KAAK,CAACd,UAAUe,IAAIL,GAAG,GAC/CP,KAAKO,OAAOC;CAGhB,OAAOR;AACT;;;;;;;;;;;;AAaA,SAASa,eACPC,SACAC,QACoC;CACpC,QAAQE,UAAUC,UAAU;EAC1B,MAAMC,SAASC,iBAAiBH,UAAUH,OAAO;EACjD,IAAIC,WAAWM,KAAAA,GACb,OAAON,OAAOI,QAAQD,KAAK;EAE7B,OAAOtB,cAAc,UAAUuB,MAAM;CACvC;AACF;AAGA,SAASG,MACPC,OACAG,QACA;CACA,IAAIA,WAAWL,KAAAA,GACb,OAAOE;CAET,QAAQC,UAAiB;EACvBD,QAAQC,KAAK;EACbE,OAAOF,KAAK;CACd;AACF;;;;;;;;;AAUA,SAASG,aACPb,SACAC,QACkC;CAClC,QAAQE,UAAUC,UAAU;EAC1B,MAAMC,SAASC,iBAAiBH,UAAUH,OAAO;EACjD,IAAIC,WAAWM,KAAAA,GACb,OAAON,OAAOI,QAAQD,KAAK;EAE7B,IAAIA,MAAMU,cAAc,EAAE,UAAUT,SAClC,OAAOvB,cAAc,QAAQ;GAAE,GAAGuB;GAAQU,MAAMR,KAAAA;EAAU,CAAC;EAE7D,OAAOzB,cAAc,KAAKuB,MAAM;CAClC;AACF;;;;;;;;AASA,SAASW,qBACPhB,SACAC,QAC0C;CAC1C,QAAQE,UAAUC,UAAU;EAC1B,MAAMC,SAASC,iBAAiBH,UAAUH,OAAO;EACjD,IAAIC,WAAWM,KAAAA,GACb,OAAON,OAAOI,QAAQD,KAAK;EAE7B,OAAOtB,cAAc,UAAUuB,MAAM;CACvC;AACF;AAEA,SAASC,iBACPH,UACAH,SACA;CACA,MAAMkB,MAAMf;CAIZ,OAAO;EACL,GAAGA;EACH,GAAGH,QAAQd;EACXC,WAAWqB,MAAMU,IAAI/B,WAAWa,QAAQb,SAAS;EACjDE,SAASmB,MAAMU,IAAI7B,SAASW,QAAQX,OAAO;CAC7C;AACF"}

package/dist/render/useRender.js

@@ -1,4 +1,5 @@
-import { cloneElement, createElement, isValidElement, useMemo } from "react";
+import { c } from "react/compiler-runtime";
+import { cloneElement, createElement, isValidElement } from "react";
 //#region src/render/useRender.tsx
 function attach(ref, node) {
 	if (ref === null) return () => {};
@@ -104,27 +105,71 @@ function styleOf(value) {
 * contract in a hook of the library's own is what lets them stay put
 * whichever behaviour library sits underneath the rest.
 */
-function useRender({ defaultTagName = "div", props = {}, render }) {
+function useRender(t0) {
+	const $ = c(17);
+	const { defaultTagName: t1, props: t2, render } = t0;
+	const defaultTagName = t1 === void 0 ? "div" : t1;
+	let t3;
+	if ($[0] !== t2) {
+		t3 = t2 === void 0 ? {} : t2;
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	const props = t3;
 	const element = isValidElement(render) ? render : void 0;
-	const ownRef = refOf(props.ref);
-	const elementRef = refOf(element?.props.ref);
-	const ref = useMemo(() => mergeRefs(ownRef, elementRef), [ownRef, elementRef]);
-	if (element !== void 0) return cloneElement(element, {
-		...mergeElementProps(props, element.props),
-		ref
-	});
-	if (typeof render === "function") return render({
-		...props,
-		ref
-	});
-	return createElement(defaultTagName, defaultTagName === "button" ? {
-		type: "button",
-		...props,
-		ref
-	} : {
-		...props,
-		ref
-	});
+	element?.props.ref;
+	let t4;
+	if ($[2] !== element?.props.ref || $[3] !== props.ref) {
+		t4 = mergeRefs(refOf(props.ref), refOf(element?.props.ref));
+		$[2] = element?.props.ref;
+		$[3] = props.ref;
+		$[4] = t4;
+	} else t4 = $[4];
+	const ref = t4;
+	if (element !== void 0) {
+		let t5;
+		if ($[5] !== element || $[6] !== props || $[7] !== ref) {
+			t5 = cloneElement(element, {
+				...mergeElementProps(props, element.props),
+				ref
+			});
+			$[5] = element;
+			$[6] = props;
+			$[7] = ref;
+			$[8] = t5;
+		} else t5 = $[8];
+		return t5;
+	}
+	if (typeof render === "function") {
+		let t5;
+		if ($[9] !== props || $[10] !== ref || $[11] !== render) {
+			t5 = render({
+				...props,
+				ref
+			});
+			$[9] = props;
+			$[10] = ref;
+			$[11] = render;
+			$[12] = t5;
+		} else t5 = $[12];
+		return t5;
+	}
+	let t5;
+	if ($[13] !== defaultTagName || $[14] !== props || $[15] !== ref) {
+		t5 = createElement(defaultTagName, defaultTagName === "button" ? {
+			type: "button",
+			...props,
+			ref
+		} : {
+			...props,
+			ref
+		});
+		$[13] = defaultTagName;
+		$[14] = props;
+		$[15] = ref;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
 }
 //#endregion
 export { useRender };

package/dist/render/useRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRender.js","names":[],"sources":["../../src/render/useRender.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  HTMLAttributes,\n  JSX,\n  ReactElement,\n  Ref,\n  RefCallback,\n  RefObject,\n} from 'react'\n\nimport { cloneElement, createElement, isValidElement, useMemo } from 'react'\n\ntype Handler = (...args: ReadonlyArray<unknown>) => unknown\n\ntype IntrinsicTag = keyof JSX.IntrinsicElements\n\n/**\n * The props of a component rendered through {@link useRender}: everything the\n * element accepts, plus `render`.\n */\ntype RenderComponentProps<Tag extends IntrinsicTag> =\n  ComponentPropsWithRef<Tag> & {\n    /**\n     * Replaces the element the component renders by default: another tag, as\n     * `render={<h2 />}`, or a function returning the element to render, given\n     * the props the component would have put on its own.\n     */\n    render?: RenderProp | undefined\n  }\n\n/**\n * What a `render` function is handed: the element's props, merged and ready\n * to spread onto whatever element it returns. `any` on purpose, in the one\n * place it appears — the function may return any element, and a ref typed for\n * one of them would refuse every other.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see above\ntype RenderFunctionProps = HTMLAttributes<any> & { ref?: Ref<any> | undefined }\n\ntype RenderProp = ((props: RenderFunctionProps) => ReactElement) | ReactElement\n\ninterface UseRenderParameters {\n  /**\n   * The tag rendered when `render` is not given.\n   * @default 'div'\n   */\n  defaultTagName?: IntrinsicTag | undefined\n  /** The props to put on whichever element ends up rendered. */\n  props?: Record<string, unknown> | undefined\n  render?: RenderProp | undefined\n}\n\nfunction attach(ref: Ref<Element>, node: Element | null): () => void {\n  if (ref === null) {\n    return () => {}\n  }\n  if (typeof ref === 'function') {\n    const cleanup = ref(node)\n    return typeof cleanup === 'function'\n      ? cleanup\n      : () => {\n          ref(null)\n        }\n  }\n  ref.current = node\n  return () => {\n    ref.current = null\n  }\n}\n\nfunction isHandler(value: unknown): value is Handler {\n  return typeof value === 'function'\n}\n\nfunction isHandlerKey(key: string) {\n  return /^on[A-Z]/u.test(key)\n}\n\nfunction isRefCallback(value: unknown): value is RefCallback<Element> {\n  return typeof value === 'function'\n}\n\nfunction isRefObject(value: unknown): value is RefObject<Element | null> {\n  return typeof value === 'object' && value !== null && 'current' in value\n}\n\n// undefined rather than '' when there is nothing to say, so an element with\n// no classes on either side renders without a class attribute at all.\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  return names.filter(Boolean).join(' ') || undefined\n}\n\n/**\n * The component's props over the element's own. The element wins a plain\n * conflict — it is the more specific of the two — while class names, styles\n * and handlers are combined rather than chosen between. `ref` is left out:\n * the hook merges the two refs itself.\n */\nfunction mergeElementProps(\n  ours: Record<string, unknown>,\n  theirs: Record<string, unknown>,\n) {\n  const merged: Record<string, unknown> = { ...ours, ...theirs }\n\n  merged.className = joinClassNames(\n    stringOf(ours.className),\n    stringOf(theirs.className),\n  )\n  merged.style = mergeStyleObjects(styleOf(ours.style), styleOf(theirs.style))\n\n  for (const key of Object.keys(theirs)) {\n    const own = ours[key]\n    const their = theirs[key]\n    if (isHandlerKey(key) && isHandler(own) && isHandler(their)) {\n      // The element's own handler runs first, as the more specific one.\n      merged[key] = (...args: ReadonlyArray<unknown>) => {\n        their(...args)\n        own(...args)\n      }\n    }\n  }\n\n  delete merged.ref\n  return merged\n}\n\n/**\n * One ref that feeds both, or whichever one there is. Attaching through a\n * callback lets each side keep its own cleanup: React 19 calls a callback\n * ref's returned function on detach in place of calling it with `null`, so\n * the merged callback returns one that does the same for each of the two.\n */\nfunction mergeRefs(\n  a: Ref<Element> | undefined,\n  b: Ref<Element> | undefined,\n): Ref<Element> | undefined {\n  if (a === undefined) {\n    return b\n  }\n  if (b === undefined) {\n    return a\n  }\n  return (node: Element | null) => {\n    const detachA = attach(a, node)\n    const detachB = attach(b, node)\n    return () => {\n      detachA()\n      detachB()\n    }\n  }\n}\n\nfunction mergeStyleObjects(\n  ours: CSSProperties | undefined,\n  theirs: CSSProperties | undefined,\n) {\n  if (ours === undefined && theirs === undefined) {\n    return undefined\n  }\n  return { ...ours, ...theirs }\n}\n\nfunction refOf(value: unknown): Ref<Element> | undefined {\n  if (isRefCallback(value) || isRefObject(value)) {\n    return value\n  }\n  return undefined\n}\n\nfunction stringOf(value: unknown) {\n  return typeof value === 'string' ? value : undefined\n}\n\nfunction styleOf(value: unknown) {\n  return typeof value === 'object' && value !== null\n    ? (value as CSSProperties)\n    : undefined\n}\n\n/**\n * Renders a component's element, or whatever its `render` prop asks for\n * instead.\n *\n * `render` is either a React element, cloned with the component's props\n * merged over its own — class names joined, styles merged, event handlers\n * chained, the element's own value winning any other conflict — or a function\n * handed those merged props to return an element of its choosing. Without one,\n * `defaultTagName` is rendered. A default `button` is given `type=\"button\"`,\n * since a bare one submits any form it happens to sit in.\n *\n * The element form is the point of owning this. React Aria's own `render`\n * is a function that must return the element the component would have\n * rendered itself, which suits its interactive components and nothing else;\n * the non-interactive ones here take `render={<h2 />}`, and keeping that\n * contract in a hook of the library's own is what lets them stay put\n * whichever behaviour library sits underneath the rest.\n */\nfunction useRender({\n  defaultTagName = 'div',\n  props = {},\n  render,\n}: UseRenderParameters): ReactElement {\n  const element = isValidElement<Record<string, unknown>>(render)\n    ? render\n    : undefined\n\n  // Both refs, when there are two, have to land on one node. The merged\n  // callback is memoised so React does not detach and re-attach it on every\n  // render — a new identity each time would.\n  const ownRef = refOf(props.ref)\n  const elementRef = refOf(element?.props.ref)\n  const ref = useMemo(() => mergeRefs(ownRef, elementRef), [ownRef, elementRef])\n\n  if (element !== undefined) {\n    return cloneElement(element, {\n      ...mergeElementProps(props, element.props),\n      ref,\n    })\n  }\n\n  if (typeof render === 'function') {\n    return render({ ...props, ref } as RenderFunctionProps)\n  }\n\n  return createElement(\n    defaultTagName,\n    defaultTagName === 'button'\n      ? { type: 'button', ...props, ref }\n      : { ...props, ref },\n  )\n}\n\nexport type { RenderComponentProps, RenderFunctionProps, UseRenderParameters }\n\nexport { useRender }\n"],"mappings":";;AAqDA,SAAS,OAAO,KAAmB,MAAkC;CACnE,IAAI,QAAQ,MACV,aAAa,CAAC;CAEhB,IAAI,OAAO,QAAQ,YAAY;EAC7B,MAAM,UAAU,IAAI,IAAI;EACxB,OAAO,OAAO,YAAY,aACtB,gBACM;GACJ,IAAI,IAAI;EACV;CACN;CACA,IAAI,UAAU;CACd,aAAa;EACX,IAAI,UAAU;CAChB;AACF;AAEA,SAAS,UAAU,OAAkC;CACnD,OAAO,OAAO,UAAU;AAC1B;AAEA,SAAS,aAAa,KAAa;CACjC,OAAO,YAAY,KAAK,GAAG;AAC7B;AAEA,SAAS,cAAc,OAA+C;CACpE,OAAO,OAAO,UAAU;AAC1B;AAEA,SAAS,YAAY,OAAoD;CACvE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,aAAa;AACrE;AAIA,SAAS,eAAe,GAAG,OAA0C;CACnE,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;AAC5C;;;;;;;AAQA,SAAS,kBACP,MACA,QACA;CACA,MAAM,SAAkC;EAAE,GAAG;EAAM,GAAG;CAAO;CAE7D,OAAO,YAAY,eACjB,SAAS,KAAK,SAAS,GACvB,SAAS,OAAO,SAAS,CAC3B;CACA,OAAO,QAAQ,kBAAkB,QAAQ,KAAK,KAAK,GAAG,QAAQ,OAAO,KAAK,CAAC;CAE3E,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAAG;EACrC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAQ,OAAO;EACrB,IAAI,aAAa,GAAG,KAAK,UAAU,GAAG,KAAK,UAAU,KAAK,GAExD,OAAO,QAAQ,GAAG,SAAiC;GACjD,MAAM,GAAG,IAAI;GACb,IAAI,GAAG,IAAI;EACb;CAEJ;CAEA,OAAO,OAAO;CACd,OAAO;AACT;;;;;;;AAQA,SAAS,UACP,GACA,GAC0B;CAC1B,IAAI,MAAM,KAAA,GACR,OAAO;CAET,IAAI,MAAM,KAAA,GACR,OAAO;CAET,QAAQ,SAAyB;EAC/B,MAAM,UAAU,OAAO,GAAG,IAAI;EAC9B,MAAM,UAAU,OAAO,GAAG,IAAI;EAC9B,aAAa;GACX,QAAQ;GACR,QAAQ;EACV;CACF;AACF;AAEA,SAAS,kBACP,MACA,QACA;CACA,IAAI,SAAS,KAAA,KAAa,WAAW,KAAA,GACnC;CAEF,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;AAEA,SAAS,MAAM,OAA0C;CACvD,IAAI,cAAc,KAAK,KAAK,YAAY,KAAK,GAC3C,OAAO;AAGX;AAEA,SAAS,SAAS,OAAgB;CAChC,OAAO,OAAO,UAAU,WAAW,QAAQ,KAAA;AAC7C;AAEA,SAAS,QAAQ,OAAgB;CAC/B,OAAO,OAAO,UAAU,YAAY,UAAU,OACzC,QACD,KAAA;AACN;;;;;;;;;;;;;;;;;;;AAoBA,SAAS,UAAU,EACjB,iBAAiB,OACjB,QAAQ,CAAC,GACT,UACoC;CACpC,MAAM,UAAU,eAAwC,MAAM,IAC1D,SACA,KAAA;CAKJ,MAAM,SAAS,MAAM,MAAM,GAAG;CAC9B,MAAM,aAAa,MAAM,SAAS,MAAM,GAAG;CAC3C,MAAM,MAAM,cAAc,UAAU,QAAQ,UAAU,GAAG,CAAC,QAAQ,UAAU,CAAC;CAE7E,IAAI,YAAY,KAAA,GACd,OAAO,aAAa,SAAS;EAC3B,GAAG,kBAAkB,OAAO,QAAQ,KAAK;EACzC;CACF,CAAC;CAGH,IAAI,OAAO,WAAW,YACpB,OAAO,OAAO;EAAE,GAAG;EAAO;CAAI,CAAwB;CAGxD,OAAO,cACL,gBACA,mBAAmB,WACf;EAAE,MAAM;EAAU,GAAG;EAAO;CAAI,IAChC;EAAE,GAAG;EAAO;CAAI,CACtB;AACF"}
+{"version":3,"file":"useRender.js","names":["ComponentPropsWithRef","CSSProperties","HTMLAttributes","JSX","ReactElement","Ref","RefCallback","RefObject","cloneElement","createElement","isValidElement","useMemo","Handler","args","ReadonlyArray","IntrinsicTag","IntrinsicElements","RenderComponentProps","Tag","render","RenderProp","RenderFunctionProps","ref","props","UseRenderParameters","defaultTagName","Record","attach","Element","node","cleanup","current","isHandler","value","isHandlerKey","key","test","isRefCallback","isRefObject","joinClassNames","names","filter","Boolean","join","undefined","mergeElementProps","ours","theirs","merged","className","stringOf","style","mergeStyleObjects","styleOf","Object","keys","own","their","mergeRefs","a","b","detachA","detachB","refOf","useRender","t0","$","_c","t1","t2","t3","element","t4","t5","type"],"sources":["../../src/render/useRender.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  HTMLAttributes,\n  JSX,\n  ReactElement,\n  Ref,\n  RefCallback,\n  RefObject,\n} from 'react'\n\nimport { cloneElement, createElement, isValidElement, useMemo } from 'react'\n\ntype Handler = (...args: ReadonlyArray<unknown>) => unknown\n\ntype IntrinsicTag = keyof JSX.IntrinsicElements\n\n/**\n * The props of a component rendered through {@link useRender}: everything the\n * element accepts, plus `render`.\n */\ntype RenderComponentProps<Tag extends IntrinsicTag> =\n  ComponentPropsWithRef<Tag> & {\n    /**\n     * Replaces the element the component renders by default: another tag, as\n     * `render={<h2 />}`, or a function returning the element to render, given\n     * the props the component would have put on its own.\n     */\n    render?: RenderProp | undefined\n  }\n\n/**\n * What a `render` function is handed: the element's props, merged and ready\n * to spread onto whatever element it returns. `any` on purpose, in the one\n * place it appears — the function may return any element, and a ref typed for\n * one of them would refuse every other.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see above\ntype RenderFunctionProps = HTMLAttributes<any> & { ref?: Ref<any> | undefined }\n\ntype RenderProp = ((props: RenderFunctionProps) => ReactElement) | ReactElement\n\ninterface UseRenderParameters {\n  /**\n   * The tag rendered when `render` is not given.\n   * @default 'div'\n   */\n  defaultTagName?: IntrinsicTag | undefined\n  /** The props to put on whichever element ends up rendered. */\n  props?: Record<string, unknown> | undefined\n  render?: RenderProp | undefined\n}\n\nfunction attach(ref: Ref<Element>, node: Element | null): () => void {\n  if (ref === null) {\n    return () => {}\n  }\n  if (typeof ref === 'function') {\n    const cleanup = ref(node)\n    return typeof cleanup === 'function'\n      ? cleanup\n      : () => {\n          ref(null)\n        }\n  }\n  ref.current = node\n  return () => {\n    ref.current = null\n  }\n}\n\nfunction isHandler(value: unknown): value is Handler {\n  return typeof value === 'function'\n}\n\nfunction isHandlerKey(key: string) {\n  return /^on[A-Z]/u.test(key)\n}\n\nfunction isRefCallback(value: unknown): value is RefCallback<Element> {\n  return typeof value === 'function'\n}\n\nfunction isRefObject(value: unknown): value is RefObject<Element | null> {\n  return typeof value === 'object' && value !== null && 'current' in value\n}\n\n// undefined rather than '' when there is nothing to say, so an element with\n// no classes on either side renders without a class attribute at all.\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  return names.filter(Boolean).join(' ') || undefined\n}\n\n/**\n * The component's props over the element's own. The element wins a plain\n * conflict — it is the more specific of the two — while class names, styles\n * and handlers are combined rather than chosen between. `ref` is left out:\n * the hook merges the two refs itself.\n */\nfunction mergeElementProps(\n  ours: Record<string, unknown>,\n  theirs: Record<string, unknown>,\n) {\n  const merged: Record<string, unknown> = { ...ours, ...theirs }\n\n  merged.className = joinClassNames(\n    stringOf(ours.className),\n    stringOf(theirs.className),\n  )\n  merged.style = mergeStyleObjects(styleOf(ours.style), styleOf(theirs.style))\n\n  for (const key of Object.keys(theirs)) {\n    const own = ours[key]\n    const their = theirs[key]\n    if (isHandlerKey(key) && isHandler(own) && isHandler(their)) {\n      // The element's own handler runs first, as the more specific one.\n      merged[key] = (...args: ReadonlyArray<unknown>) => {\n        their(...args)\n        own(...args)\n      }\n    }\n  }\n\n  delete merged.ref\n  return merged\n}\n\n/**\n * One ref that feeds both, or whichever one there is. Attaching through a\n * callback lets each side keep its own cleanup: React 19 calls a callback\n * ref's returned function on detach in place of calling it with `null`, so\n * the merged callback returns one that does the same for each of the two.\n */\nfunction mergeRefs(\n  a: Ref<Element> | undefined,\n  b: Ref<Element> | undefined,\n): Ref<Element> | undefined {\n  if (a === undefined) {\n    return b\n  }\n  if (b === undefined) {\n    return a\n  }\n  return (node: Element | null) => {\n    const detachA = attach(a, node)\n    const detachB = attach(b, node)\n    return () => {\n      detachA()\n      detachB()\n    }\n  }\n}\n\nfunction mergeStyleObjects(\n  ours: CSSProperties | undefined,\n  theirs: CSSProperties | undefined,\n) {\n  if (ours === undefined && theirs === undefined) {\n    return undefined\n  }\n  return { ...ours, ...theirs }\n}\n\nfunction refOf(value: unknown): Ref<Element> | undefined {\n  if (isRefCallback(value) || isRefObject(value)) {\n    return value\n  }\n  return undefined\n}\n\nfunction stringOf(value: unknown) {\n  return typeof value === 'string' ? value : undefined\n}\n\nfunction styleOf(value: unknown) {\n  return typeof value === 'object' && value !== null\n    ? (value as CSSProperties)\n    : undefined\n}\n\n/**\n * Renders a component's element, or whatever its `render` prop asks for\n * instead.\n *\n * `render` is either a React element, cloned with the component's props\n * merged over its own — class names joined, styles merged, event handlers\n * chained, the element's own value winning any other conflict — or a function\n * handed those merged props to return an element of its choosing. Without one,\n * `defaultTagName` is rendered. A default `button` is given `type=\"button\"`,\n * since a bare one submits any form it happens to sit in.\n *\n * The element form is the point of owning this. React Aria's own `render`\n * is a function that must return the element the component would have\n * rendered itself, which suits its interactive components and nothing else;\n * the non-interactive ones here take `render={<h2 />}`, and keeping that\n * contract in a hook of the library's own is what lets them stay put\n * whichever behaviour library sits underneath the rest.\n */\nfunction useRender({\n  defaultTagName = 'div',\n  props = {},\n  render,\n}: UseRenderParameters): ReactElement {\n  const element = isValidElement<Record<string, unknown>>(render)\n    ? render\n    : undefined\n\n  // Both refs, when there are two, have to land on one node. The merged\n  // callback is memoised so React does not detach and re-attach it on every\n  // render — a new identity each time would.\n  //\n  // The dependencies are the props the refs are read from rather than the\n  // refs themselves. React writes through a ref object, so the compiler reads\n  // one as a value that may be modified later and declines to preserve a\n  // memoisation keyed on it — which, under the panic threshold this lands\n  // beside, fails the build. A prop it can prove holds still.\n  const ref = useMemo(\n    () => mergeRefs(refOf(props.ref), refOf(element?.props.ref)),\n    [props.ref, element?.props.ref],\n  )\n\n  if (element !== undefined) {\n    return cloneElement(element, {\n      ...mergeElementProps(props, element.props),\n      ref,\n    })\n  }\n\n  if (typeof render === 'function') {\n    return render({ ...props, ref } as RenderFunctionProps)\n  }\n\n  return createElement(\n    defaultTagName,\n    defaultTagName === 'button'\n      ? { type: 'button', ...props, ref }\n      : { ...props, ref },\n  )\n}\n\nexport type { RenderComponentProps, RenderFunctionProps, UseRenderParameters }\n\nexport { useRender }\n"],"mappings":"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"}

package/dist/row/index.js

@@ -1,5 +1,6 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { rowStyles } from "./styles.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/row/index.tsx
 /**
@@ -13,36 +14,109 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Not a component of the library's own and not exported; see `src/field` for
 * the same arrangement around a field.
 */
-function RowContent({ children, isDisabled = false, isSelected = false, leading, overline, supporting, trailing, variant = "list" }) {
+function RowContent(t0) {
+	const $ = c(28);
+	const { children, isDisabled: t1, isSelected: t2, leading, overline, supporting, trailing, variant: t3 } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isSelected = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "list" : t3;
 	const label = variant === "drawer" || variant === "menu";
-	const supportingTone = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
+	let t4;
+	if ($[0] !== isDisabled || $[1] !== isSelected || $[2] !== variant) {
+		t4 = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);
+		$[0] = isDisabled;
+		$[1] = isSelected;
+		$[2] = variant;
+		$[3] = t4;
+	} else t4 = $[3];
+	const supportingTone = t4;
+	let t5;
+	if ($[4] !== leading) {
+		t5 = leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: leading
-		}),
-		/* @__PURE__ */ jsxs("span", {
-			...props(rowStyles.main),
+		});
+		$[4] = leading;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = props(rowStyles.main);
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== overline || $[8] !== supportingTone) {
+		t7 = overline === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...props(rowStyles.overline, supportingTone),
+			children: overline
+		});
+		$[7] = overline;
+		$[8] = supportingTone;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== label) {
+		t8 = props(label ? rowStyles.headlineMenu : rowStyles.headlineList);
+		$[10] = label;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== children || $[13] !== t8) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			...t8,
+			children
+		});
+		$[12] = children;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== supporting || $[16] !== supportingTone) {
+		t10 = supporting === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...props(rowStyles.supporting, supportingTone),
+			children: supporting
+		});
+		$[15] = supporting;
+		$[16] = supportingTone;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t10 || $[19] !== t7 || $[20] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("span", {
+			...t6,
 			children: [
-				overline === void 0 ? null : /* @__PURE__ */ jsx("span", {
-					...props(rowStyles.overline, supportingTone),
-					children: overline
-				}),
-				/* @__PURE__ */ jsx("span", {
-					...props(label ? rowStyles.headlineMenu : rowStyles.headlineList),
-					children
-				}),
-				supporting === void 0 ? null : /* @__PURE__ */ jsx("span", {
-					...props(rowStyles.supporting, supportingTone),
-					children: supporting
-				})
+				t7,
+				t9,
+				t10
 			]
-		}),
-		trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		});
+		$[18] = t10;
+		$[19] = t7;
+		$[20] = t9;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== trailing) {
+		t12 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(rowStyles.slot),
 			children: trailing
-		})
-	] });
+		});
+		$[22] = trailing;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t11 || $[25] !== t12 || $[26] !== t5) {
+		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t5,
+			t11,
+			t12
+		] });
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t5;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
 }
 function selectedSupportingTone(variant) {
 	if (variant === "drawer") return rowStyles.supportingSelectedDrawer;

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Whether the row is disabled. The supporting line takes the row's own\n   * faded colour when it is, rather than staying at full strength in the\n   * muted role.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the row is selected. The supporting line takes the selected\n   * container's own content role when it is, rather than staying in the\n   * muted role it draws on the surface.\n   * @default false\n   */\n  isSelected?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label and a navigation drawer row's are label-large. The\n   * element around the content applies the matching `rowStyles.list`,\n   * `rowStyles.menu` or `rowStyles.drawer` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'drawer' | 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's own style, and whichever states\n * apply; this is what every one of them puts inside it, so a list, a menu, a\n * tree and a drawer draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  // The drawer's label is the menu's, so the two share the headline style;\n  // what they do not share is the container a selected row brings, which is\n  // why the tone below still asks which variant this is.\n  const label = variant === 'drawer' || variant === 'menu';\n  // Disabled first: a disabled row's own colour is already the faded one, so\n  // it wins over the selected container's content role.\n  const supportingTone = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);\n  return <>\n      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {overline === undefined ? null : <span {...stylex.props(rowStyles.overline, supportingTone)}>\n            {overline}\n          </span>}\n        <span {...stylex.props(label ? rowStyles.headlineMenu : rowStyles.headlineList)}>\n          {children}\n        </span>\n        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting, supportingTone)}>\n            {supporting}\n          </span>}\n      </span>\n      {trailing === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\n\n// Which on-colour a supporting line takes over a selected row's own\n// container. Each variant's container is a different colour family, and the\n// muted role is not guaranteed to be readable over any of them.\nfunction selectedSupportingTone(variant: RowVariant) {\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":";;;;;;;;;;;;;;;AAqDA,SAAS,WAAW,EAClB,UACA,aAAa,OACb,aAAa,OACb,SACA,UACA,YACA,UACA,UAAU,UACQ;CAIlB,MAAM,QAAQ,YAAY,YAAY,YAAY;CAGlD,MAAM,iBAAiB,aAAa,UAAU,oBAAoB,cAAc,uBAAuB,OAAO;CAC9G,OAAO,qBAAA,UAAA,EAAA,UAAA;EACF,YAAY,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI,MAAa,UAAU,IAAI;GAAI,UAAA;EAAc,CAAA;EACvF,qBAAC,QAAD;GAAM,GAAI,MAAa,UAAU,IAAI;GAArC,UAAA;IACG,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;KAAM,GAAI,MAAa,UAAU,UAAU,cAAc;KACrF,UAAA;IACG,CAAA;IACR,oBAAC,QAAD;KAAM,GAAI,MAAa,QAAQ,UAAU,eAAe,UAAU,YAAY;KAC3E;IACG,CAAA;IACL,eAAe,KAAA,IAAY,OAAO,oBAAC,QAAD;KAAM,GAAI,MAAa,UAAU,YAAY,cAAc;KACzF,UAAA;IACG,CAAA;GACJ;;EACL,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI,MAAa,UAAU,IAAI;GAAI,UAAA;EAAe,CAAA;CAC3F,EAAA,CAAA;AACJ;AAKA,SAAS,uBAAuB,SAAqB;CACnD,IAAI,YAAY,UACd,OAAO,UAAU;CAEnB,IAAI,YAAY,QACd,OAAO,UAAU;CAEnB,OAAO,UAAU;AACnB"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","rowStyles","RowContentProps","children","isDisabled","isSelected","leading","overline","supporting","trailing","variant","RowVariant","RowContent","t0","$","_c","t1","t2","t3","undefined","label","t4","supportingInherit","selectedSupportingTone","supportingTone","t5","props","slot","t6","Symbol","for","main","t7","t8","headlineMenu","headlineList","t9","t10","t11","t12","t13","supportingSelectedDrawer","supportingSelectedMenu","supportingSelectedList"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Whether the row is disabled. The supporting line takes the row's own\n   * faded colour when it is, rather than staying at full strength in the\n   * muted role.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the row is selected. The supporting line takes the selected\n   * container's own content role when it is, rather than staying in the\n   * muted role it draws on the surface.\n   * @default false\n   */\n  isSelected?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label and a navigation drawer row's are label-large. The\n   * element around the content applies the matching `rowStyles.list`,\n   * `rowStyles.menu` or `rowStyles.drawer` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'drawer' | 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's own style, and whichever states\n * apply; this is what every one of them puts inside it, so a list, a menu, a\n * tree and a drawer draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  // The drawer's label is the menu's, so the two share the headline style;\n  // what they do not share is the container a selected row brings, which is\n  // why the tone below still asks which variant this is.\n  const label = variant === 'drawer' || variant === 'menu';\n  // Disabled first: a disabled row's own colour is already the faded one, so\n  // it wins over the selected container's content role.\n  const supportingTone = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);\n  return <>\n      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {overline === undefined ? null : <span {...stylex.props(rowStyles.overline, supportingTone)}>\n            {overline}\n          </span>}\n        <span {...stylex.props(label ? rowStyles.headlineMenu : rowStyles.headlineList)}>\n          {children}\n        </span>\n        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting, supportingTone)}>\n            {supporting}\n          </span>}\n      </span>\n      {trailing === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\n\n// Which on-colour a supporting line takes over a selected row's own\n// container. Each variant's container is a different colour family, and the\n// muted role is not guaranteed to be readable over any of them.\nfunction selectedSupportingTone(variant: RowVariant) {\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":"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"}

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x3y1ksm\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1wxaq2x\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xxwd9aw x1hei0q8 xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xoc6x28 x2p4cas xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"xefclja\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x1qafhyn\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAoCA,MAAM,YAAY;CAChB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","rowStyles","base","kGNEyG","kWkggS","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kOIVth","kzqmXN","k8WAf4","kg3NbH","kVAEAm","k9WMMc","$$css","disabled","kkrTdU","drawer","kaIpWk","kUOVxO","kAzted","headlineList","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","headlineMenu","interactive","kVVagm","kjBf7l","kInvED","k3XXqK","kMeerF","list","main","kXwgrk","kzQI83","k7Eaqz","menu","overline","selectedDrawer","selectedList","selectedMenu","slot","kmuXW","supporting","supportingInherit","supportingSelectedDrawer","supportingSelectedList","supportingSelectedMenu","threeLine","twoLine"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x3y1ksm\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1wxaq2x\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xxwd9aw x1hei0q8 xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xoc6x28 x2p4cas xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"xefclja\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x1qafhyn\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAoCA,MAAMM,YAAY;CAChBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRZ,QAAQ;EACRG,QAAQ;EACRU,QAAQ;EACRF,OAAO;CACT;CACAG,QAAQ;EACNC,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,OAAO;CACT;CACAa,cAAc;EACZL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,OAAO;CACT;CACAc,aAAa;EACXzB,QAAQ;EACRa,QAAQ;EACRa,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,MAAM;EACJd,QAAQ;EACRN,OAAO;CACT;CACAqB,MAAM;EACJ5B,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACR7B,QAAQ;EACR8B,QAAQ;EACRxB,OAAO;CACT;CACAyB,MAAM;EACJnB,QAAQ;EACRN,OAAO;CACT;CACA0B,UAAU;EACRlC,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,OAAO;CACT;CACA2B,gBAAgB;EACdtC,QAAQ;EACRG,QAAQ;EACRQ,OAAO;CACT;CACA4B,cAAc;EACZvC,QAAQ;EACRG,QAAQ;EACRQ,OAAO;CACT;CACA6B,cAAc;EACZxC,QAAQ;EACRG,QAAQ;EACRQ,OAAO;CACT;CACA8B,MAAM;EACJ1C,QAAQ;EACRK,QAAQ;EACRsC,OAAO;EACP/B,OAAO;CACT;CACAgC,YAAY;EACVxC,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRZ,OAAO;CACT;CACAiC,mBAAmB;EACjBzC,QAAQ;EACRQ,OAAO;CACT;CACAkC,0BAA0B;EACxB1C,QAAQ;EACRQ,OAAO;CACT;CACAmC,wBAAwB;EACtB3C,QAAQ;EACRQ,OAAO;CACT;CACAoC,wBAAwB;EACtB5C,QAAQ;EACRQ,OAAO;CACT;CACAqC,WAAW;EACTjD,QAAQ;EACRkB,QAAQ;EACRN,OAAO;CACT;CACAsC,SAAS;EACPhC,QAAQ;EACRN,OAAO;CACT;AACF"}

package/dist/segments/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/segments/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, DateSegment as RACDateSegment } from 'react-aria-components';\nimport { segmentStyles } from './styles';\n\n// How a date or a time is drawn once React Aria has decided what its parts\n// are. Shared by DateField and TimeField, which differ only in the value they\n// hold: the segments, their order and their number all come from React Aria,\n// so what is here is the same for both.\n\n// What React Aria hands the input for each part of the date. Taken off the\n// component rather than imported, since the segment type is not on the\n// package's public surface.\ntype Segment = Parameters<NonNullable<Parameters<typeof RACDateInput>[0]['children']>>[0];\n\n// What each segment draws. A literal — the slash or colon between two\n// segments — takes a style of its own, since it is punctuation rather than\n// something a reader types into.\nfunction renderSegment(segment: Segment): ReactElement {\n  if (segment.type === 'literal') {\n    return <RACDateSegment {...stylex.props(segmentStyles.segment, segmentStyles.segmentLiteral)} segment={segment} />;\n  }\n  return <RACDateSegment className={segmentClassName} segment={segment} />;\n}\n\n// A segment's classes, from React Aria's render state. StyleX cannot target\n// `[data-placeholder]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters: `disabled` is last, and StyleX replaces a property\n// whole, so it wins over both the placeholder and the focused branches.\nfunction segmentClassName(state: {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isPlaceholder: boolean;\n}) {\n  return stylex.props(segmentStyles.segment, state.isPlaceholder && segmentStyles.segmentPlaceholder, state.isFocused && segmentStyles.segmentFocused, state.isDisabled && segmentStyles.segmentDisabled).className ?? '';\n}\nexport { renderSegment };"],"mappings":";;;;;AAkBA,SAAS,cAAc,SAAgC;CACrD,IAAI,QAAQ,SAAS,WACnB,OAAO,oBAAC,aAAD;EAAgB,GAAI,MAAa,cAAc,SAAS,cAAc,cAAc;EAAY;CAAQ,CAAA;CAEjH,OAAO,oBAAC,aAAD;EAAgB,WAAW;EAA2B;CAAQ,CAAA;AACvE;AAQA,SAAS,iBAAiB,OAIvB;CACD,OAAO,MAAa,cAAc,SAAS,MAAM,iBAAiB,cAAc,oBAAoB,MAAM,aAAa,cAAc,gBAAgB,MAAM,cAAc,cAAc,eAAe,CAAC,CAAC,aAAa;AACvN"}
+{"version":3,"file":"index.js","names":["ReactElement","stylex","DateInput","RACDateInput","DateSegment","RACDateSegment","segmentStyles","Segment","Parameters","NonNullable","renderSegment","segment","type","props","segmentLiteral","segmentClassName","state","isDisabled","isFocused","isPlaceholder","segmentPlaceholder","segmentFocused","segmentDisabled","className"],"sources":["../../src/segments/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, DateSegment as RACDateSegment } from 'react-aria-components';\nimport { segmentStyles } from './styles';\n\n// How a date or a time is drawn once React Aria has decided what its parts\n// are. Shared by DateField and TimeField, which differ only in the value they\n// hold: the segments, their order and their number all come from React Aria,\n// so what is here is the same for both.\n\n// What React Aria hands the input for each part of the date. Taken off the\n// component rather than imported, since the segment type is not on the\n// package's public surface.\ntype Segment = Parameters<NonNullable<Parameters<typeof RACDateInput>[0]['children']>>[0];\n\n// What each segment draws. A literal — the slash or colon between two\n// segments — takes a style of its own, since it is punctuation rather than\n// something a reader types into.\nfunction renderSegment(segment: Segment): ReactElement {\n  if (segment.type === 'literal') {\n    return <RACDateSegment {...stylex.props(segmentStyles.segment, segmentStyles.segmentLiteral)} segment={segment} />;\n  }\n  return <RACDateSegment className={segmentClassName} segment={segment} />;\n}\n\n// A segment's classes, from React Aria's render state. StyleX cannot target\n// `[data-placeholder]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters: `disabled` is last, and StyleX replaces a property\n// whole, so it wins over both the placeholder and the focused branches.\nfunction segmentClassName(state: {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isPlaceholder: boolean;\n}) {\n  return stylex.props(segmentStyles.segment, state.isPlaceholder && segmentStyles.segmentPlaceholder, state.isFocused && segmentStyles.segmentFocused, state.isDisabled && segmentStyles.segmentDisabled).className ?? '';\n}\nexport { renderSegment };"],"mappings":";;;;;AAkBA,SAASU,cAAcC,SAAgC;CACrD,IAAIA,QAAQC,SAAS,WACnB,OAAO,oBAAC,aAAD;EAAgB,GAAIX,MAAaK,cAAcK,SAASL,cAAcQ,cAAc;EAAYH;CAAQ,CAAA;CAEjH,OAAO,oBAAC,aAAD;EAAgB,WAAWI;EAA2BJ;CAAQ,CAAA;AACvE;AAQA,SAASI,iBAAiBC,OAIvB;CACD,OAAOf,MAAaK,cAAcK,SAASK,MAAMG,iBAAiBb,cAAcc,oBAAoBJ,MAAME,aAAaZ,cAAce,gBAAgBL,MAAMC,cAAcX,cAAcgB,eAAe,CAAC,CAACC,aAAa;AACvN"}

package/dist/segments/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/segments/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\n\n// The segments a date or a time is typed into, shared by DateField and\n// TimeField. Apart from either component so the two cannot drift, and outside\n// `src/components` because a directory there is a public component with\n// stories, a barrel entry and a `styling.test.tsx` case — which shared styles\n// are none of.\n\nconst segmentStyles = {\n  input: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  segment: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    knGrYV: \"xbuiw85\",\n    kMwMTN: \"x139gbkf\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"xdomwbk\",\n    k9WMMc: \"xp4054r\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  segmentFocused: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  segmentLiteral: {\n    kMwMTN: \"x1w5n3ug\",\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  segmentPlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { segmentStyles };"],"mappings":";AAUA,MAAM,gBAAgB;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","segmentStyles","input","kGNEyG","kB7OPa","k1xSpc","k3XXqK","$$css","segment","kaIpWk","knGrYV","kMwMTN","kg3NbH","k9WMMc","segmentDisabled","segmentFocused","kWkggS","segmentLiteral","segmentPlaceholder"],"sources":["../../src/segments/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\n\n// The segments a date or a time is typed into, shared by DateField and\n// TimeField. Apart from either component so the two cannot drift, and outside\n// `src/components` because a directory there is a public component with\n// stories, a barrel entry and a `styling.test.tsx` case — which shared styles\n// are none of.\n\nconst segmentStyles = {\n  input: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  segment: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    knGrYV: \"xbuiw85\",\n    kMwMTN: \"x139gbkf\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"xdomwbk\",\n    k9WMMc: \"xp4054r\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  segmentFocused: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  segmentLiteral: {\n    kMwMTN: \"x1w5n3ug\",\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  segmentPlaceholder: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { segmentStyles };"],"mappings":";AAUA,MAAMK,gBAAgB;CACpBC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,iBAAiB;EACfH,QAAQ;EACRJ,OAAO;CACT;CACAQ,gBAAgB;EACdC,QAAQ;EACRL,QAAQ;EACRJ,OAAO;CACT;CACAU,gBAAgB;EACdN,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAW,oBAAoB;EAClBP,QAAQ;EACRJ,OAAO;CACT;AACF"}

package/dist/styles/chequer.js.map

@@ -1 +1 @@
-{"version":3,"file":"chequer.js","names":[],"sources":["../../src/styles/chequer.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors } from '../tokens/design.tokens.stylex';\n\n// The chequer a transparent colour is drawn against. A half-transparent red\n// over a light surface and an opaque pink are the same pixels; this is what\n// tells them apart, behind a swatch and behind a colour slider's alpha\n// track.\n//\n// In `src/styles` rather than either component, since both draw it and a\n// second copy would be a second density to keep in step.\n//\n// Two things about the recipe are worth knowing before touching it.\n//\n// **The offsets are half a tile, not a whole one.** Four gradients draw the\n// two dark squares of a tile, and at a whole tile all four line up — the\n// pattern comes out as diamonds, which reads as a texture rather than as\n// the absence of a colour.\n//\n// **It is a layer behind, never a background on the coloured element.**\n// React Aria writes a swatch's colour to its own inline `background-color`\n// and a colour track's gradient to its inline `background`, and CSS paints a\n// background image over a background colour rather than under it — so a\n// chequer on that element would cover what it is there to reveal.\n\n// 8px squares, which reads as a chequer at a swatch's size without turning\n// into a texture.\nconst TILE = '16px';\nconst HALF = '8px';\nconst GRADIENTS = `linear-gradient(45deg, ${colors.surfaceContainerHighest} 25%, transparent 25%),\nlinear-gradient(-45deg, ${colors.surfaceContainerHighest} 25%, transparent 25%),\nlinear-gradient(45deg, transparent 75%, ${colors.surfaceContainerHighest} 75%),\nlinear-gradient(-45deg, transparent 75%, ${colors.surfaceContainerHighest} 75%)`;\nconst chequer = {\n  ground: {\n    kWkggS: \"x14q8lhr\",\n    kKwaWg: \"x12it5ax\",\n    k1YJky: \"x1wlk0ns\",\n    kgSjnq: \"x1ht9rhz\",\n    $$css: true\n  }\n};\nexport { chequer };"],"mappings":";;AA6BkB,GAA0B,OAAO,0BACzB,OAAO,0BACS,OAAO,0BACN,OAAO;AAClD,MAAM,UAAU,EACd,QAAQ;CACN,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}
+{"version":3,"file":"chequer.js","names":["stylex","colors","TILE","HALF","GRADIENTS","surfaceContainerHighest","chequer","ground","kWkggS","kKwaWg","k1YJky","kgSjnq","$$css"],"sources":["../../src/styles/chequer.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors } from '../tokens/design.tokens.stylex';\n\n// The chequer a transparent colour is drawn against. A half-transparent red\n// over a light surface and an opaque pink are the same pixels; this is what\n// tells them apart, behind a swatch and behind a colour slider's alpha\n// track.\n//\n// In `src/styles` rather than either component, since both draw it and a\n// second copy would be a second density to keep in step.\n//\n// Two things about the recipe are worth knowing before touching it.\n//\n// **The offsets are half a tile, not a whole one.** Four gradients draw the\n// two dark squares of a tile, and at a whole tile all four line up — the\n// pattern comes out as diamonds, which reads as a texture rather than as\n// the absence of a colour.\n//\n// **It is a layer behind, never a background on the coloured element.**\n// React Aria writes a swatch's colour to its own inline `background-color`\n// and a colour track's gradient to its inline `background`, and CSS paints a\n// background image over a background colour rather than under it — so a\n// chequer on that element would cover what it is there to reveal.\n\n// 8px squares, which reads as a chequer at a swatch's size without turning\n// into a texture.\nconst TILE = '16px';\nconst HALF = '8px';\nconst GRADIENTS = `linear-gradient(45deg, ${colors.surfaceContainerHighest} 25%, transparent 25%),\nlinear-gradient(-45deg, ${colors.surfaceContainerHighest} 25%, transparent 25%),\nlinear-gradient(45deg, transparent 75%, ${colors.surfaceContainerHighest} 75%),\nlinear-gradient(-45deg, transparent 75%, ${colors.surfaceContainerHighest} 75%)`;\nconst chequer = {\n  ground: {\n    kWkggS: \"x14q8lhr\",\n    kKwaWg: \"x12it5ax\",\n    k1YJky: \"x1wlk0ns\",\n    kgSjnq: \"x1ht9rhz\",\n    $$css: true\n  }\n};\nexport { chequer };"],"mappings":";;AA6BkB,GAA0BC,OAAOI,0BACzBJ,OAAOI,0BACSJ,OAAOI,0BACNJ,OAAOI;AAClD,MAAMC,UAAU,EACdC,QAAQ;CACNC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF"}

package/dist/styles/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":[],"sources":["../../src/styles/color.ts"],"sourcesContent":["import type { ColorThumbRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows } from '../tokens/design.tokens.stylex';\n\n// The handle a colour slider and a colour area share. React Aria places it —\n// along one axis on a slider, along two in an area — and fills it with the\n// colour at that point, so everything here is the ring around that fill.\n//\n// In `src/styles` rather than a directory of its own, since it is a style\n// more than one component draws, which is what that directory holds.\n//\n// Two things about it are worth knowing.\n//\n// **It is ringed rather than filled, because its fill is the value.** The\n// ring is what has to read — against every colour the track or the plane\n// runs through — so it is a surface-coloured ring with a hairline outside\n// it, which works on a light ground and a dark one alike.\n//\n// **`dragging` is applied after `focused`.** StyleX replaces a property\n// whole, so a handle being dragged takes the lifted shadow rather than\n// keeping the resting ring under it.\n\nconst colorThumb = {\n  thumb: {\n    kZKoxP: \"x1qx5ct2\",\n    kaIpWk: \"x3y1ksm\",\n    kGVxlE: \"xlzcsym\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"xw4jnvo\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2wh2y9\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kGVxlE: \"x1kr41ut\",\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\n};\n\n// The handle's classes, from React Aria's render state. StyleX cannot target\n// `[data-dragging]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\nfunction thumbClassName(state: ColorThumbRenderProps) {\n  return {\n    0: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7\"\n    },\n    4: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59\"\n    },\n    2: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s\"\n    },\n    6: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s\"\n    },\n    1: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc\"\n    },\n    5: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc\"\n    },\n    7: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc\"\n    }\n  }[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? '';\n}\nexport { colorThumb, thumbClassName };"],"mappings":";AA2DA,SAAS,eAAe,OAA8B;CACpD,OAAO;EACL,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,uHACb;EACA,GAAG,EACD,WAAW,sHACb;CACF,EAAE,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,cAAc,EAAE,CAAC,aAAa;AAClG"}
+{"version":3,"file":"color.js","names":["ColorThumbRenderProps","stylex","colors","motion","radii","shadows","colorThumb","thumb","kZKoxP","kaIpWk","kGVxlE","kB7OPa","kkrTdU","kzqmXN","k87sOh","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","$$css","thumbDisabled","thumbDragging","thumbFocused","thumbClassName","state","className","isFocusVisible","isDragging","isDisabled"],"sources":["../../src/styles/color.ts"],"sourcesContent":["import type { ColorThumbRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows } from '../tokens/design.tokens.stylex';\n\n// The handle a colour slider and a colour area share. React Aria places it —\n// along one axis on a slider, along two in an area — and fills it with the\n// colour at that point, so everything here is the ring around that fill.\n//\n// In `src/styles` rather than a directory of its own, since it is a style\n// more than one component draws, which is what that directory holds.\n//\n// Two things about it are worth knowing.\n//\n// **It is ringed rather than filled, because its fill is the value.** The\n// ring is what has to read — against every colour the track or the plane\n// runs through — so it is a surface-coloured ring with a hairline outside\n// it, which works on a light ground and a dark one alike.\n//\n// **`dragging` is applied after `focused`.** StyleX replaces a property\n// whole, so a handle being dragged takes the lifted shadow rather than\n// keeping the resting ring under it.\n\nconst colorThumb = {\n  thumb: {\n    kZKoxP: \"x1qx5ct2\",\n    kaIpWk: \"x3y1ksm\",\n    kGVxlE: \"xlzcsym\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"xw4jnvo\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2wh2y9\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kGVxlE: \"x1kr41ut\",\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\n};\n\n// The handle's classes, from React Aria's render state. StyleX cannot target\n// `[data-dragging]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\nfunction thumbClassName(state: ColorThumbRenderProps) {\n  return {\n    0: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7\"\n    },\n    4: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59\"\n    },\n    2: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s\"\n    },\n    6: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s\"\n    },\n    1: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc\"\n    },\n    5: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc\"\n    },\n    7: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc\"\n    }\n  }[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? '';\n}\nexport { colorThumb, thumbClassName };"],"mappings":";AA2DA,SAAS0B,eAAeC,OAA8B;CACpD,OAAO;EACL,GAAG,EACDC,WAAW,sHACb;EACA,GAAG,EACDA,WAAW,qHACb;EACA,GAAG,EACDA,WAAW,sHACb;EACA,GAAG,EACDA,WAAW,qHACb;EACA,GAAG,EACDA,WAAW,sHACb;EACA,GAAG,EACDA,WAAW,qHACb;EACA,GAAG,EACDA,WAAW,uHACb;EACA,GAAG,EACDA,WAAW,sHACb;CACF,EAAE,CAAC,CAACD,MAAME,kBAAkB,IAAI,CAAC,CAACF,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAMI,cAAc,EAAE,CAACH,aAAa;AAClG"}

package/dist/styles/merge.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge.js","names":[],"sources":["../../src/styles/merge.ts"],"sourcesContent":["import type * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\n// What `stylex.props()` hands back: a className, and a `style` object only\n// when a dynamic style contributed one — Feed's cell minimum, for instance,\n// arrives as a custom property there rather than as a class.\ntype CompiledStyles = ReturnType<typeof stylex.props>;\n\n// React Aria lets `className` and `style` be functions of a component's own\n// render state, which is how a style can depend on something CSS cannot\n// select — Chip's selected state, a tab's active one. A consumer may pass\n// either form, so anything merging with one has to accept both.\ntype StatefulClassName<State> = ((state: State) => string | undefined) | string | undefined;\ntype StatefulStyle<State> = ((state: State) => CSSProperties | undefined) | CSSProperties | undefined;\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  // undefined rather than '' when there is nothing to say, so an element with\n  // no classes on either side renders without a class attribute at all.\n  return names.filter(Boolean).join(' ') || undefined;\n}\n\n/**\n * {@link mergeStyles} for an element rendered by a behaviour-library\n * component, where `className` and `style` may each be a function of the\n * component's render state rather than a plain value.\n *\n * Returns functions unconditionally, since the libraries accept them\n * everywhere they accept the plain form and one shape is easier to follow\n * than a union that changes with the arguments. `compiled` is itself a\n * function where the component's own styles depend on that state.\n *\n * The two consumer functions carry their own state types rather than sharing\n * `State`: React Aria hands a `className` function the render state plus\n * `defaultClassName`, and a `style` function the same state plus\n * `defaultStyle`, and one parameter could not name both. Each extends\n * `State`, so `compiled` can be handed either.\n */\nfunction mergeStatefulStyles<State, ClassNameState extends State, StyleState extends State>(compiled: ((state: State) => CompiledStyles) | CompiledStyles, consumer: {\n  className?: StatefulClassName<ClassNameState>;\n  style?: StatefulStyle<StyleState>;\n}) {\n  const compiledFor = (state: State) => typeof compiled === 'function' ? compiled(state) : compiled;\n\n  // Resolved inline rather than through one shared helper: a generic one\n  // cannot narrow `typeof value === 'function'` away from its own type\n  // parameter, so it needs an assertion where these two need none.\n  //\n  // '' rather than undefined when there is nothing to say: a className\n  // function has to return a string for React Aria, and every component that\n  // reaches here has compiled classes of its own, so the case never renders.\n  return {\n    className: (state: ClassNameState) => joinClassNames(compiledFor(state).className, typeof consumer.className === 'function' ? consumer.className(state) : consumer.className) ?? '',\n    style: (state: StyleState) => mergeStyleObjects(compiledFor(state).style, typeof consumer.style === 'function' ? consumer.style(state) : consumer.style)\n  };\n}\nfunction mergeStyleObjects(compiled: CompiledStyles['style'], consumer: CSSProperties | undefined) {\n  if (compiled === undefined && consumer === undefined) {\n    return undefined;\n  }\n  return {\n    ...compiled,\n    ...consumer\n  };\n}\n\n/**\n * Combines the styles StyleX compiled for a component with the `className`\n * and `style` its call site passed, so both reach the element.\n *\n * Spreading `stylex.props()` after the consumer's own props is what this\n * replaces, and that spread silently dropped both: the returned object always\n * carries `className`, so it overwrote rather than merged, leaving no way to\n * position a component from outside it and no warning that the prop had gone.\n *\n * Order is presentational rather than load-bearing. StyleX compiles into\n * `@layer` (see `useCSSLayers` in tsdown.config.ts) and a consumer's own\n * stylesheet is unlayered, so the cascade already gives the call site the\n * last word whichever way round the two class strings are written.\n *\n * The call site's `style` is applied over the compiled one, which is the\n * order that matters: both are inline, so nothing but source order separates\n * them.\n */\nfunction mergeStyles(compiled: CompiledStyles, consumer: {\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}) {\n  return {\n    ...compiled,\n    className: joinClassNames(compiled.className, consumer.className),\n    style: mergeStyleObjects(compiled.style, consumer.style)\n  };\n}\nexport { mergeStatefulStyles, mergeStyles };"],"mappings":";AAcA,SAAS,eAAe,GAAG,OAA0C;CAGnE,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;AAC5C;;;;;;;;;;;;;;;;;AAkBA,SAAS,oBAAmF,UAA+D,UAGxJ;CACD,MAAM,eAAe,UAAiB,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CASzF,OAAO;EACL,YAAY,UAA0B,eAAe,YAAY,KAAK,CAAC,CAAC,WAAW,OAAO,SAAS,cAAc,aAAa,SAAS,UAAU,KAAK,IAAI,SAAS,SAAS,KAAK;EACjL,QAAQ,UAAsB,kBAAkB,YAAY,KAAK,CAAC,CAAC,OAAO,OAAO,SAAS,UAAU,aAAa,SAAS,MAAM,KAAK,IAAI,SAAS,KAAK;CACzJ;AACF;AACA,SAAS,kBAAkB,UAAmC,UAAqC;CACjG,IAAI,aAAa,KAAA,KAAa,aAAa,KAAA,GACzC;CAEF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF;;;;;;;;;;;;;;;;;;;AAoBA,SAAS,YAAY,UAA0B,UAG5C;CACD,OAAO;EACL,GAAG;EACH,WAAW,eAAe,SAAS,WAAW,SAAS,SAAS;EAChE,OAAO,kBAAkB,SAAS,OAAO,SAAS,KAAK;CACzD;AACF"}
+{"version":3,"file":"merge.js","names":["stylex","CSSProperties","CompiledStyles","ReturnType","props","StatefulClassName","state","State","StatefulStyle","joinClassNames","names","ReadonlyArray","filter","Boolean","join","undefined","mergeStatefulStyles","compiled","consumer","className","ClassNameState","style","StyleState","compiledFor","mergeStyleObjects","mergeStyles"],"sources":["../../src/styles/merge.ts"],"sourcesContent":["import type * as stylex from '@stylexjs/stylex';\nimport type { CSSProperties } from 'react';\n\n// What `stylex.props()` hands back: a className, and a `style` object only\n// when a dynamic style contributed one — Feed's cell minimum, for instance,\n// arrives as a custom property there rather than as a class.\ntype CompiledStyles = ReturnType<typeof stylex.props>;\n\n// React Aria lets `className` and `style` be functions of a component's own\n// render state, which is how a style can depend on something CSS cannot\n// select — Chip's selected state, a tab's active one. A consumer may pass\n// either form, so anything merging with one has to accept both.\ntype StatefulClassName<State> = ((state: State) => string | undefined) | string | undefined;\ntype StatefulStyle<State> = ((state: State) => CSSProperties | undefined) | CSSProperties | undefined;\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  // undefined rather than '' when there is nothing to say, so an element with\n  // no classes on either side renders without a class attribute at all.\n  return names.filter(Boolean).join(' ') || undefined;\n}\n\n/**\n * {@link mergeStyles} for an element rendered by a behaviour-library\n * component, where `className` and `style` may each be a function of the\n * component's render state rather than a plain value.\n *\n * Returns functions unconditionally, since the libraries accept them\n * everywhere they accept the plain form and one shape is easier to follow\n * than a union that changes with the arguments. `compiled` is itself a\n * function where the component's own styles depend on that state.\n *\n * The two consumer functions carry their own state types rather than sharing\n * `State`: React Aria hands a `className` function the render state plus\n * `defaultClassName`, and a `style` function the same state plus\n * `defaultStyle`, and one parameter could not name both. Each extends\n * `State`, so `compiled` can be handed either.\n */\nfunction mergeStatefulStyles<State, ClassNameState extends State, StyleState extends State>(compiled: ((state: State) => CompiledStyles) | CompiledStyles, consumer: {\n  className?: StatefulClassName<ClassNameState>;\n  style?: StatefulStyle<StyleState>;\n}) {\n  const compiledFor = (state: State) => typeof compiled === 'function' ? compiled(state) : compiled;\n\n  // Resolved inline rather than through one shared helper: a generic one\n  // cannot narrow `typeof value === 'function'` away from its own type\n  // parameter, so it needs an assertion where these two need none.\n  //\n  // '' rather than undefined when there is nothing to say: a className\n  // function has to return a string for React Aria, and every component that\n  // reaches here has compiled classes of its own, so the case never renders.\n  return {\n    className: (state: ClassNameState) => joinClassNames(compiledFor(state).className, typeof consumer.className === 'function' ? consumer.className(state) : consumer.className) ?? '',\n    style: (state: StyleState) => mergeStyleObjects(compiledFor(state).style, typeof consumer.style === 'function' ? consumer.style(state) : consumer.style)\n  };\n}\nfunction mergeStyleObjects(compiled: CompiledStyles['style'], consumer: CSSProperties | undefined) {\n  if (compiled === undefined && consumer === undefined) {\n    return undefined;\n  }\n  return {\n    ...compiled,\n    ...consumer\n  };\n}\n\n/**\n * Combines the styles StyleX compiled for a component with the `className`\n * and `style` its call site passed, so both reach the element.\n *\n * Spreading `stylex.props()` after the consumer's own props is what this\n * replaces, and that spread silently dropped both: the returned object always\n * carries `className`, so it overwrote rather than merged, leaving no way to\n * position a component from outside it and no warning that the prop had gone.\n *\n * Order is presentational rather than load-bearing. StyleX compiles into\n * `@layer` (see `useCSSLayers` in tsdown.config.ts) and a consumer's own\n * stylesheet is unlayered, so the cascade already gives the call site the\n * last word whichever way round the two class strings are written.\n *\n * The call site's `style` is applied over the compiled one, which is the\n * order that matters: both are inline, so nothing but source order separates\n * them.\n */\nfunction mergeStyles(compiled: CompiledStyles, consumer: {\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}) {\n  return {\n    ...compiled,\n    className: joinClassNames(compiled.className, consumer.className),\n    style: mergeStyleObjects(compiled.style, consumer.style)\n  };\n}\nexport { mergeStatefulStyles, mergeStyles };"],"mappings":";AAcA,SAASS,eAAe,GAAGC,OAA0C;CAGnE,OAAOA,MAAME,OAAOC,OAAO,CAAC,CAACC,KAAK,GAAG,KAAKC,KAAAA;AAC5C;;;;;;;;;;;;;;;;;AAkBA,SAASC,oBAAmFC,UAA+DC,UAGxJ;CACD,MAAMK,eAAejB,UAAiB,OAAOW,aAAa,aAAaA,SAASX,KAAK,IAAIW;CASzF,OAAO;EACLE,YAAYb,UAA0BG,eAAec,YAAYjB,KAAK,CAAC,CAACa,WAAW,OAAOD,SAASC,cAAc,aAAaD,SAASC,UAAUb,KAAK,IAAIY,SAASC,SAAS,KAAK;EACjLE,QAAQf,UAAsBkB,kBAAkBD,YAAYjB,KAAK,CAAC,CAACe,OAAO,OAAOH,SAASG,UAAU,aAAaH,SAASG,MAAMf,KAAK,IAAIY,SAASG,KAAK;CACzJ;AACF;AACA,SAASG,kBAAkBP,UAAmCC,UAAqC;CACjG,IAAID,aAAaF,KAAAA,KAAaG,aAAaH,KAAAA,GACzC;CAEF,OAAO;EACL,GAAGE;EACH,GAAGC;CACL;AACF;;;;;;;;;;;;;;;;;;;AAoBA,SAASO,YAAYR,UAA0BC,UAG5C;CACD,OAAO;EACL,GAAGD;EACHE,WAAWV,eAAeQ,SAASE,WAAWD,SAASC,SAAS;EAChEE,OAAOG,kBAAkBP,SAASI,OAAOH,SAASG,KAAK;CACzD;AACF"}