@kanso-labs/kanso-ui 0.39.0 → 0.39.2

package/README.md

@@ -308,14 +308,17 @@ function StarIcon() {
 `1em` works because the slots that own an icon's size set it as a font size, and
 the icon inherits it:
 
-| Slot                                       | Size an `em` icon takes                              |
-| ------------------------------------------ | ---------------------------------------------------- |
-| `Button`'s `icon`                          | 20px, 20px, 24px, 32px and 40px across `xs` to `xxl` |
-| `Chip`'s and `ChipGroup.Chip`'s `icon`     | 18px                                                 |
-| `IconButton`                               | 20px, 24px, 24px, 32px and 40px across `xs` to `xxl` |
-| A field's `leadingIcon` and `trailingIcon` | 24px                                                 |
-| `SegmentedButton.Segment`'s `icon`         | 18px                                                 |
-| `Tabs.Tab`'s `icon`                        | 24px                                                 |
+| Slot                                        | Size an `em` icon takes                              |
+| ------------------------------------------- | ---------------------------------------------------- |
+| `Button`'s `icon`                           | 20px, 20px, 24px, 32px and 40px across `xs` to `xxl` |
+| `Chip`'s and `ChipGroup.Chip`'s `icon`      | 18px                                                 |
+| `Fab`'s children, with or without a `label` | 24px, 28px and 36px across `md` to `xl`              |
+| `FabMenu`'s `icon`                          | 24px, 28px and 36px across `md` to `xl`              |
+| `FabMenu.Item`'s `icon`                     | 24px                                                 |
+| `IconButton`                                | 20px, 24px, 24px, 32px and 40px across `xs` to `xxl` |
+| A field's `leadingIcon` and `trailingIcon`  | 24px                                                 |
+| `SegmentedButton.Segment`'s `icon`          | 18px                                                 |
+| `Tabs.Tab`'s `icon`                         | 24px                                                 |
 
 **The `leading` and `trailing` slots on a row are different.** A list item, a
 menu item, a tree item and an app bar set no icon size, so an icon there takes
@@ -473,6 +476,72 @@ default value — useful for discovering names, not required at runtime
 import '@kanso-labs/kanso-ui/tokens.css'
 ```
 
+### A scheme from Material Theme Builder
+
+The colour roles are Material Design's, so a whole scheme can come from
+[Material Theme Builder](https://material-foundation.github.io/material-theme-builder/)
+rather than being written out one role at a time. Pick a source colour there, or
+one each for primary, secondary and tertiary, and export the theme as JSON. The
+file, `material-theme.json`, keeps its schemes under `schemes`, and the `light`
+and `dark` ones each name 49 roles in camel case. Every one of them is a role
+here under the same name, `onPrimaryContainer` being
+`--kui-color-on-primary-container`, so this script turns the two into the
+overrides above:
+
+```js
+// node theme.mjs material-theme.json > theme.css
+import { readFileSync } from 'node:fs'
+
+const { schemes } = JSON.parse(readFileSync(process.argv[2], 'utf8'))
+
+// onPrimaryContainer becomes --kui-color-on-primary-container.
+const block = (scheme, indent) =>
+  Object.entries(scheme)
+    .map(([role, value]) => {
+      const name = role.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)
+      return `${indent}--kui-color-${name}: ${value};`
+    })
+    .join('\n')
+
+console.log(`:root {
+${block(schemes.light, '  ')}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+${block(schemes.dark, '    ')}
+  }
+}`)
+```
+
+`schemes` holds a medium-contrast and a high-contrast version of each scheme as
+well, `light-medium-contrast` and the rest; read those in place of `light` and
+`dark` for an app that offers more contrast. An app that pins light or dark keys
+the two blocks on its own switch rather than on the media query, as
+[Pinning light or dark](#pinning-light-or-dark) describes.
+
+That leaves `positive` and `negative`, the two roles here that Material Design
+does not have. They are the `positive` and `negative` tones on `Avatar`,
+`Currency`, `Meter`, `ProductIcon`, `Tag` and `Text`, the pair `Currency`'s
+`auto` tone picks between by a value's sign, and they are kept apart from
+`error` so that a negative amount does not read as a failed field. The export
+has no role for them, so they keep the library's own green and rust unless you
+set them as well. To match them to a brand, add each as a custom colour in Theme
+Builder. It draws a custom colour at the tones Material Design draws `error` at,
+40, 100, 90 and 10 in light and 80, 20, 30 and 90 in dark, which is how the
+library's own two are drawn, and its four roles in each scheme map onto four
+here:
+
+| Custom colour role  | Here                                |
+| ------------------- | ----------------------------------- |
+| Colour              | `--kui-color-positive`              |
+| On colour           | `--kui-color-on-positive`           |
+| Colour container    | `--kui-color-positive-container`    |
+| On colour container | `--kui-color-on-positive-container` |
+
+`negative` takes its four the same way. With the 49 from the script, that is
+every colour role `tokens.css` lists.
+
 ### Theming part of a page
 
 The tokens resolve once, on `:root`, and every component inherits them already

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","props","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","gridCell","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isToday","isUnavailable","cell","ring","cellToday","cellSelected","selectedHovered","plainHovered","selectedPressed","plainPressed","cellUnavailable","cellDisabled","date","Calendar","_c","props","RACCalendar","stylex.props","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody","RACCalendarCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was. The parts are in\n// `src/calendar`, shared with RangeCalendar.\n//\n// Five things are this component's own.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year, which would need two names React Aria has no\n// message for — the library writes a word of its own only behind a prop that\n// can replace it, and it would take a pair on four components. The year list\n// reaches any year the bounds allow in one press, and Shift with Page Up or\n// Page Down steps a year from the keyboard.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue = DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side, stacked below the expanded breakpoint. Name it with `aria-label`\n * or `aria-labelledby`; React Aria composes the visible month into that name\n * itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>({\n  showMonthYearMenus = false,\n  ...props\n}: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\n        <div {...stylex.props(calendarStyles.months)}>\n          {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n              <CalendarGridHeader />\n              <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n            </RACCalendarGrid>)}\n        </div>\n      </CalendarFrame>\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. The hover and pressed layers come\n// next, over whichever ground the date has, a press over a hover.\n// `unavailable` and `disabled` come last, and StyleX replaces a property\n// whole, so they take the layers with them.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isHovered && (state.isSelected ? dateLayers.selectedHovered : dateLayers.plainHovered), state.isPressed && (state.isSelected ? dateLayers.selectedPressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","props","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","gridCell","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isToday","isUnavailable","cell","ring","cellToday","cellSelected","selectedHovered","plainHovered","selectedPressed","plainPressed","cellUnavailable","cellDisabled","date","Calendar","_c","props","RACCalendar","stylex.props","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody","RACCalendarCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was. The parts are in\n// `src/calendar`, shared with RangeCalendar.\n//\n// Five things are this component's own.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year, which would need two names React Aria has no\n// message for — the library writes a word of its own only behind a prop that\n// can replace it, and it would take a pair on four components. The year list\n// reaches any year the bounds allow in one press, and Shift with Page Up or\n// Page Down steps a year from the keyboard.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. Each date's own inline margin supplies that room, with the\n// grid's `border-spacing` left at zero, so the circle is the element and the\n// square is the room around it — rather than a 48dp box with a 40dp box\n// inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue = DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side, stacked below the expanded breakpoint. Name it with `aria-label`\n * or `aria-labelledby`; React Aria composes the visible month into that name\n * itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>({\n  showMonthYearMenus = false,\n  ...props\n}: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\n        <div {...stylex.props(calendarStyles.months)}>\n          {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n              <CalendarGridHeader />\n              <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n            </RACCalendarGrid>)}\n        </div>\n      </CalendarFrame>\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. The hover and pressed layers come\n// next, over whichever ground the date has, a press over a hover.\n// `unavailable` and `disabled` come last, and StyleX replaces a property\n// whole, so they take the layers with them.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isHovered && (state.isSelected ? dateLayers.selectedHovered : dateLayers.plainHovered), state.isPressed && (state.isSelected ? dateLayers.selectedPressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","HOVER_CAPABLE","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","ring","t10","t11","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. An\n// interactive card is a plain element React Aria does not host, so it has no\n// `isHovered` to draw its hover layer from, and Chromium leaves `:hover` on\n// whatever a touch last tapped — a card tapped and then navigated back to\n// stayed lifted. Inside this query a touch screen draws no hover at all. A\n// touchscreen laptop still matches it for its trackpad, which is the limit of\n// asking the device rather than the event.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The state layers, from pseudo-classes, since the card has no render state\n// to read — see `HOVER_CAPABLE`.\n// `:active` is written twice, bare for a touch and again inside the query.\n// StyleX orders a rule by the sum of its conditions, so a hover inside the\n// query would otherwise come after a bare press and win while both held.\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x17zbzf9 x1ru19e0 x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x14zlms8 xqmo4o3 x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs x10l1pcx xt0lj0h x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && focus.ring, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps, CardVariant };\nexport default Card;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","HOVER_CAPABLE","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","ring","t10","t11","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. An\n// interactive card is a plain element React Aria does not host, so it has no\n// `isHovered` to draw its hover layer from, and Chromium leaves `:hover` on\n// whatever a touch last tapped — a card tapped and then navigated back to\n// stayed lifted. Inside this query a touch screen draws no hover at all. A\n// touchscreen laptop still matches it for its trackpad, which is the limit of\n// asking the device rather than the event.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The state layers, from pseudo-classes, since the card has no render state\n// to read — see `HOVER_CAPABLE`.\n// `:active` is written twice, bare for a touch and again inside the query.\n// StyleX orders a rule by the sum of its conditions, so a hover inside the\n// query would otherwise come after a bare press and win while both held.\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x17zbzf9 x1ru19e0 x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x14zlms8 xqmo4o3 x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs x10l1pcx xt0lj0h x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && focus.ring, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps, CardVariant };\nexport default Card;"],"mappings":"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"}

package/dist/components/date-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","isRequired","t8","t9","DateField","_c","props","RACDateField","stylex.props","RACDateInput"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the field still counts as\n// empty.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// floating label stays down until a segment holds a real value.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue = DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A date typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T> & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\n    isPopulated isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldSegments>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,SAAAQ,YAAAyB,IAAA;CAAA,MAAAC,IAAAjC,EAAA,EAAA;CAAwC,MAAA,EAAAwB,aAAAC,OAAAC,eAAAQ,IAAAC,YAAAC,IAAAT,OAAAC,aAAAE,cAAAC,SAAAM,IAAA,GAAAC,YAAAN;CAGtC,MAAAN,gBAAAQ,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAL,UAAAM,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BvB,2BAA2B;CAC9C,MAAAwB,KAAAjC;CAAY,IAAAkC;CAAA,IAAAT,EAAA,OAAAR,OAAA;EAAuCiB,KAAA1B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAyD,MAAAU,KAAAvB,oBAAoBd,MAAaS,YAAW6B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAZ,EAAA,OAAAa,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAACa,WAAD;GAAa,GAAKpD,MAAaa,cAAa6B,KAAM;GAC/C9B,UAAAA;EADU,CAAA,EADD,CAAA;EAIEe,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAK,QAAAY,cAAAjB,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdlBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAS3B,aAAA;GAAwB,YAAAY,QAAKY;GAAoBvB;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Gc,UAAAA;EAVO,CAAA;EAeEZ,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAK,QAAAY;EAAAjB,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAQ,MAAAR,EAAA,QAAAE,cAAAF,EAAA,QAAAK,WAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAgB,MAAAhB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAO,oBAAA;EAjBrDY,KAAA,qBAAC,IAAD;GAA6BjB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAE,EAjBgB;;EAkBHlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAO;EAAAP,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAlBVmB;AAkBU"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","isRequired","t8","t9","DateField","_c","props","RACDateField","stylex.props","RACDateInput"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the label floats from the\n// start.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// segments show it whether or not a date is in them, so the floating label\n// sits above them even while the field is empty, rather than resting on top\n// of the placeholders.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue = DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A date typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T> & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\n    isPopulated isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldSegments>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAAQ,YAAAyB,IAAA;CAAA,MAAAC,IAAAjC,EAAA,EAAA;CAAwC,MAAA,EAAAwB,aAAAC,OAAAC,eAAAQ,IAAAC,YAAAC,IAAAT,OAAAC,aAAAE,cAAAC,SAAAM,IAAA,GAAAC,YAAAN;CAGtC,MAAAN,gBAAAQ,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAL,UAAAM,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BvB,2BAA2B;CAC9C,MAAAwB,KAAAjC;CAAY,IAAAkC;CAAA,IAAAT,EAAA,OAAAR,OAAA;EAAuCiB,KAAA1B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAyD,MAAAU,KAAAvB,oBAAoBd,MAAaS,YAAW6B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAZ,EAAA,OAAAa,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAACa,WAAD;GAAa,GAAKpD,MAAaa,cAAa6B,KAAM;GAC/C9B,UAAAA;EADU,CAAA,EADD,CAAA;EAIEe,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAK,QAAAY,cAAAjB,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdlBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAS3B,aAAA;GAAwB,YAAAY,QAAKY;GAAoBvB;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Gc,UAAAA;EAVO,CAAA;EAeEZ,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAK,QAAAY;EAAAjB,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAQ,MAAAR,EAAA,QAAAE,cAAAF,EAAA,QAAAK,WAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAgB,MAAAhB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAO,oBAAA;EAjBrDY,KAAA,qBAAC,IAAD;GAA6BjB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAE,EAjBgB;;EAkBHlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAO;EAAAP,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAlBVmB;AAkBU"}

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

@@ -7,8 +7,9 @@ type DialogProps$1 = Omit<DialogTriggerProps, 'children'> & {
 /**
  * A modal dialog centred over the page, and the same dialog filling the
  * window below the medium breakpoint — the dialogs page's basic and
- * full-screen dialogs, paired by window size as the page pairs them. Open
- * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or
+ * full-screen dialogs, paired by window size as the page pairs them. An
+ * alert dialog stays the basic one at every width. Open state is React
+ * Aria's: pass `isOpen` with `onOpenChange` to control it, or
  * `defaultOpen` to let it keep its own.
  *
  * Composed rather than configured by props, as `Sheet` is, since a dialog's
@@ -34,7 +35,9 @@ declare function DialogBody({ ref: callerRef, ...props }: HTMLAttributes<HTMLDiv
  *
  * `role="alertdialog"` is React Aria's, for a dialog interrupting with
  * something that has to be answered before the page carries on — a screen
- * reader announces it rather than waiting to be asked.
+ * reader announces it rather than waiting to be asked. It also keeps the
+ * dialog the basic one below the medium breakpoint, centred and sized to its
+ * content, where a dialog of the default role fills the window.
  *
  * A press on the scrim closes the dialog unless `isDismissable` says
  * otherwise, which is the same default `Sheet` takes and the reverse of

package/dist/components/dialog/index.js

@@ -5,7 +5,7 @@ import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
 import { useScrollable } from "../../hooks/useScrollable.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
+import { createContext, useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/dialog/index.tsx
@@ -36,11 +36,23 @@ const styles = {
 		$$css: true
 	}
 };
+const basic = {
+	body: {
+		kLKAdn: "x886u18 xexx8yu",
+		$$css: true
+	},
+	centre: {
+		kmVPX3: "x1apw6a7",
+		$$css: true
+	}
+};
+const BasicContext = createContext(false);
 /**
 * A modal dialog centred over the page, and the same dialog filling the
 * window below the medium breakpoint — the dialogs page's basic and
-* full-screen dialogs, paired by window size as the page pairs them. Open
-* state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or
+* full-screen dialogs, paired by window size as the page pairs them. An
+* alert dialog stays the basic one at every width. Open state is React
+* Aria's: pass `isOpen` with `onOpenChange` to control it, or
 * `defaultOpen` to let it keep its own.
 *
 * Composed rather than configured by props, as `Sheet` is, since a dialog's
@@ -77,7 +89,8 @@ function Dialog$1(t0) {
 }
 function DialogBody(t0) {
 	const $ = c(7);
-	const { ref: callerRef, ...props$2 } = t0;
+	const { ref: callerRef, ...props$1 } = t0;
+	const isBasic = useContext(BasicContext);
 	const ref = useRef(null);
 	const scrollable = useScrollable(ref);
 	const t1 = callerRef ?? void 0;
@@ -89,17 +102,17 @@ function DialogBody(t0) {
 	} else t2 = $[1];
 	const merged = t2;
 	const t3 = scrollable ? 0 : void 0;
-	const t4 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$2);
+	const t4 = mergeStyles(props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props$1);
 	let t5;
-	if ($[2] !== merged || $[3] !== props$2 || $[4] !== t3 || $[5] !== t4) {
+	if ($[2] !== merged || $[3] !== props$1 || $[4] !== t3 || $[5] !== t4) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			tabIndex: t3,
-			...props$2,
+			...props$1,
 			ref: merged,
 			...t4
 		});
 		$[2] = merged;
-		$[3] = props$2;
+		$[3] = props$1;
 		$[4] = t3;
 		$[5] = t4;
 		$[6] = t5;
@@ -113,7 +126,9 @@ function DialogBody(t0) {
 *
 * `role="alertdialog"` is React Aria's, for a dialog interrupting with
 * something that has to be answered before the page carries on — a screen
-* reader announces it rather than waiting to be asked.
+* reader announces it rather than waiting to be asked. It also keeps the
+* dialog the basic one below the medium breakpoint, centred and sized to its
+* content, where a dialog of the default role fills the window.
 *
 * A press on the scrim closes the dialog unless `isDismissable` says
 * otherwise, which is the same default `Sheet` takes and the reverse of
@@ -123,23 +138,23 @@ function DialogBody(t0) {
 * off both.
 */
 function DialogContent(t0) {
-	const $ = c(26);
+	const $ = c(32);
 	let children;
 	let className;
 	let container;
 	let isKeyboardDismissDisabled;
-	let props$1;
+	let props$2;
 	let ref;
 	let style;
 	let t1;
 	if ($[0] !== t0) {
-		({children, className, container, isDismissable: t1, isKeyboardDismissDisabled, ref, style, ...props$1} = t0);
+		({children, className, container, isDismissable: t1, isKeyboardDismissDisabled, ref, style, ...props$2} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = container;
 		$[4] = isKeyboardDismissDisabled;
-		$[5] = props$1;
+		$[5] = props$2;
 		$[6] = ref;
 		$[7] = style;
 		$[8] = t1;
@@ -148,57 +163,63 @@ function DialogContent(t0) {
 		className = $[2];
 		container = $[3];
 		isKeyboardDismissDisabled = $[4];
-		props$1 = $[5];
+		props$2 = $[5];
 		ref = $[6];
 		style = $[7];
 		t1 = $[8];
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
+	const isBasic = props$2.role === "alertdialog";
 	let t2;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = props(overlay.scrim, styles.centre);
-		$[9] = t2;
-	} else t2 = $[9];
+	if ($[9] !== isBasic) {
+		t2 = props(overlay.scrim, styles.centre, isBasic && basic.centre);
+		$[9] = isBasic;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[10] !== className || $[11] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l" }, {
+	if ($[11] !== className || $[12] !== isBasic || $[13] !== style) {
+		t3 = mergeStatefulStyles({
+			0: { className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l" },
+			1: { className: "x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2" }
+		}[!!isBasic << 0], {
 			className,
 			style
 		});
-		$[10] = className;
-		$[11] = style;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[11] = className;
+		$[12] = isBasic;
+		$[13] = style;
+		$[14] = t3;
+	} else t3 = $[14];
 	let t4;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = props(overlay.modalDialog);
-		$[13] = t4;
-	} else t4 = $[13];
+		$[15] = t4;
+	} else t4 = $[15];
 	let t5;
-	if ($[14] !== children || $[15] !== props$1) {
+	if ($[16] !== children || $[17] !== props$2) {
 		t5 = /* @__PURE__ */ jsx(Dialog, {
-			...props$1,
+			...props$2,
 			...t4,
 			children
 		});
-		$[14] = children;
-		$[15] = props$1;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[16] = children;
+		$[17] = props$2;
+		$[18] = t5;
+	} else t5 = $[18];
 	let t6;
-	if ($[17] !== ref || $[18] !== t3 || $[19] !== t5) {
+	if ($[19] !== ref || $[20] !== t3 || $[21] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Modal, {
 			ref,
 			...t3,
 			children: t5
 		});
-		$[17] = ref;
-		$[18] = t3;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[19] = ref;
+		$[20] = t3;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
 	let t7;
-	if ($[21] !== container || $[22] !== isDismissable || $[23] !== isKeyboardDismissDisabled || $[24] !== t6) {
+	if ($[23] !== container || $[24] !== isDismissable || $[25] !== isKeyboardDismissDisabled || $[26] !== t2 || $[27] !== t6) {
 		t7 = /* @__PURE__ */ jsx(ModalOverlay, {
 			isDismissable,
 			isKeyboardDismissDisabled,
@@ -206,52 +227,73 @@ function DialogContent(t0) {
 			...t2,
 			children: t6
 		});
-		$[21] = container;
-		$[22] = isDismissable;
-		$[23] = isKeyboardDismissDisabled;
-		$[24] = t6;
-		$[25] = t7;
-	} else t7 = $[25];
-	return t7;
+		$[23] = container;
+		$[24] = isDismissable;
+		$[25] = isKeyboardDismissDisabled;
+		$[26] = t2;
+		$[27] = t6;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== isBasic || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsx(BasicContext, {
+			value: isBasic,
+			children: t7
+		});
+		$[29] = isBasic;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	return t8;
 }
 function DialogFooter(props) {
-	const $ = c(5);
+	const $ = c(6);
+	const isBasic = useContext(BasicContext);
 	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x" }, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
+	if ($[0] !== isBasic || $[1] !== props) {
+		t0 = mergeStyles({
+			0: { className: "x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x" },
+			1: { className: "x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl xg0ps1x xt7dq6l x1ejq31n x8i8c5o x13h71tw" }
+		}[!!isBasic << 0], props);
+		$[0] = isBasic;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
 	let t1;
-	if ($[2] !== props || $[3] !== t0) {
+	if ($[3] !== props || $[4] !== t0) {
 		t1 = /* @__PURE__ */ jsx("div", {
 			...props,
 			...t0
 		});
-		$[2] = props;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
 	return t1;
 }
 function DialogHeader(props) {
-	const $ = c(5);
+	const $ = c(6);
+	const isBasic = useContext(BasicContext);
 	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x" }, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
+	if ($[0] !== isBasic || $[1] !== props) {
+		t0 = mergeStyles({
+			0: { className: "x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x" },
+			1: { className: "x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x xt7dq6l x1sy0etr xzfxn0k x13h71tw" }
+		}[!!isBasic << 0], props);
+		$[0] = isBasic;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
 	let t1;
-	if ($[2] !== props || $[3] !== t0) {
+	if ($[3] !== props || $[4] !== t0) {
 		t1 = /* @__PURE__ */ jsx("div", {
 			...props,
 			...t0
 		});
-		$[2] = props;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
 	return t1;
 }
 /**
@@ -260,24 +302,29 @@ function DialogHeader(props) {
 * announces itself unnamed.
 */
 function DialogTitle(props) {
-	const $ = c(5);
+	const $ = c(6);
+	const isBasic = useContext(BasicContext);
 	let t0;
-	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp" }, props);
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
+	if ($[0] !== isBasic || $[1] !== props) {
+		t0 = mergeStyles({
+			0: { className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp" },
+			1: { className: "x9f619 x139gbkf x1ghz6dp x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury" }
+		}[!!isBasic << 0], props);
+		$[0] = isBasic;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
 	let t1;
-	if ($[2] !== props || $[3] !== t0) {
+	if ($[3] !== props || $[4] !== t0) {
 		t1 = /* @__PURE__ */ jsx(Heading, {
 			slot: "title",
 			...props,
 			...t0
 		});
-		$[2] = props;
-		$[3] = t0;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
 	return t1;
 }
 Dialog$1.Body = DialogBody;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","useMemo","useRef","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","DialogContent","className","container","isKeyboardDismissDisabled","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu x3reb9c\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps & RefAttributes<HTMLHeadingElement>) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the dialog on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it, or\n   * the dialog renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","createContext","useContext","useMemo","useRef","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","DialogContent","className","container","isKeyboardDismissDisabled","style","isDismissable","role","scrim","0","1","Symbol","for","modalDialog","t6","t7","t8","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext, useMemo, useRef } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The pairing is for a dialog that is a task, which needs the room. An alert\n// dialog is a question with two or three answers, and the page keeps the\n// full-screen dialog for tasks, so `role=\"alertdialog\"` stays the basic dialog\n// at every width. Filled to a phone's window it read as a headline at the top\n// of the screen and its answers at the bottom, with nothing between them but\n// the chrome. The `basic` styles below are how: each restates, without the\n// breakpoint, the properties the paired styles change below it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu x3reb9c\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\n\n// The basic dialog at every width, for an alert dialog. Each entry is the\n// above-breakpoint value of every property its namesake in `styles` changes\n// below the breakpoint, laid over that namesake, so a property it leaves out\n// is the same in both presentations already. A value changed above the\n// breakpoint there has to change here too, which `index.test.tsx` checks by\n// comparing an alert dialog on a phone with any dialog on a desktop.\nconst basic = {\n  body: {\n    kLKAdn: \"x886u18 xexx8yu\",\n    $$css: true\n  },\n  centre: {\n    kmVPX3: \"x1apw6a7\",\n    $$css: true\n  }\n};\n\n// Whether this dialog is the basic one at every width. Content decides it from\n// the role and the parts read it, since each part carries its own share of\n// the full-screen presentation.\nconst BasicContext = createContext(false);\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. An\n * alert dialog stays the basic one at every width. Open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked. It also keeps the\n * dialog the basic one below the medium breakpoint, centred and sized to its\n * content, where a dialog of the default role fills the window.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  const isBasic = props.role === 'alertdialog';\n  return <BasicContext value={isBasic}>\n      <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre, isBasic && basic.centre)}>\n        <Modal\n      // The panel, where the call site's class and style land, rather\n      // than the dialog inside it, which takes the rest of the props.\n      ref={ref} {...mergeStatefulStyles({\n        0: {\n          className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n        },\n        1: {\n          className: \"x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2\"\n        }\n      }[!!isBasic << 0], {\n        className,\n        style\n      })}>\n          <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n            {children}\n          </RACDialog>\n        </Modal>\n      </ModalOverlay>\n    </BasicContext>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl xg0ps1x xt7dq6l x1ejq31n x8i8c5o x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x xt7dq6l x1sy0etr xzfxn0k x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps & RefAttributes<HTMLHeadingElement>) {\n  const isBasic = useContext(BasicContext);\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n    },\n    1: {\n      className: \"x9f619 x139gbkf x1ghz6dp x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the dialog on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it, or\n   * the dialog renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":"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"}

package/dist/components/range-calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isSelectionEnd","isSelectionStart","isToday","isUnavailable","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","selectedHovered","inRangeHovered","plainHovered","selectedPressed","inRangePressed","plainPressed","cellUnavailable","cellDisabled","gridCell","date","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","stylex.props","RACCalendarCell","RangeCalendar","_c","props","RACRangeCalendar","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends. The docked token set\n// stops at the selected date, so the band's colours are the modal date\n// picker's range-selection tokens — the secondary container, one step down\n// from the primary the two ends take — and its reasons are in\n// `src/calendar/styles.ts` where it is defined.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as `Calendar`'s does.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. The hover and pressed layers come\n// next, each written for the ground under it — the circle, the band, or\n// nothing — a press over a hover. `unavailable` comes after those, so a\n// ruled-out day inside a range keeps the band and takes the strikethrough\n// over it. `disabled` is last of all, and StyleX replaces a property whole,\n// so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isHovered && (isEnd ? dateLayers.selectedHovered : state.isSelected ? dateLayers.inRangeHovered : dateLayers.plainHovered), state.isPressed && (isEnd ? dateLayers.selectedPressed : state.isSelected ? dateLayers.inRangePressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>({\n  showMonthYearMenus = false,\n  ...props\n}: RangeCalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\n        <div {...stylex.props(calendarStyles.months)}>\n          {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n              <CalendarGridHeader />\n              <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n            </RACCalendarGrid>)}\n        </div>\n      </CalendarFrame>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isSelectionEnd","isSelectionStart","isToday","isUnavailable","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","selectedHovered","inRangeHovered","plainHovered","selectedPressed","inRangePressed","plainPressed","cellUnavailable","cellDisabled","gridCell","date","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","stylex.props","RACCalendarCell","RangeCalendar","_c","props","RACRangeCalendar","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends. The docked token set\n// stops at the selected date, so the band's colours are the modal date\n// picker's range-selection tokens — the secondary container, one step down\n// from the primary the two ends take — and its reasons are in\n// `src/calendar/styles.ts` where it is defined.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band fills the whole of each day's 48dp.** A day in the range drops\n// the 4dp margin either side that every other date keeps and takes the full\n// width of its cell, so one day's band meets the next one's. Without it the\n// band arrives as a dashed run of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as `Calendar`'s does.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. The hover and pressed layers come\n// next, each written for the ground under it — the circle, the band, or\n// nothing — a press over a hover. `unavailable` comes after those, so a\n// ruled-out day inside a range keeps the band and takes the strikethrough\n// over it. `disabled` is last of all, and StyleX replaces a property whole,\n// so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isHovered && (isEnd ? dateLayers.selectedHovered : state.isSelected ? dateLayers.inRangeHovered : dateLayers.plainHovered), state.isPressed && (isEnd ? dateLayers.selectedPressed : state.isSelected ? dateLayers.inRangePressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>({\n  showMonthYearMenus = false,\n  ...props\n}: RangeCalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\n        <div {...stylex.props(calendarStyles.months)}>\n          {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n              <CalendarGridHeader />\n              <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n            </RACCalendarGrid>)}\n        </div>\n      </CalendarFrame>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.39.0",
+  "version": "0.39.2",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -84,7 +84,7 @@
     "@commitlint/cli": "21.2.3",
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.18",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.19",
     "@microsoft/api-extractor": "7.59.4",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.1",