@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","Radio","t0","$","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\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)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\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   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","focusLayers","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","isRequired","Radio","t0","$","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\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)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  selected: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\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   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel isRequired={state.isRequired} state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}

package/dist/components/range-calendar/index.d.ts

@@ -4,6 +4,12 @@ import { DateValue, RangeCalendarProps } from "react-aria-components";
 type RangeCalendarProps$1<T extends DateValue = DateValue> = Omit<RangeCalendarProps<T>, 'children' | 'className' | 'style'> & {
   /** A function may compute the class from the calendar's render state. */
   className?: RangeCalendarProps<T>['className'];
+  /**
+   * Whether the header draws the month and the year as menu buttons, each
+   * opening a list of them in the grid's place, as `Calendar`'s does.
+   * @default false
+   */
+  showMonthYearMenus?: boolean;
   /** A function may compute the style from the calendar's render state. */
   style?: RangeCalendarProps<T>['style'];
 };
@@ -34,7 +40,7 @@ type RangeCalendarProps$1<T extends DateValue = DateValue> = Omit<RangeCalendarP
  * The call site's `className` and `style` land on the container, which is the
  * element a layout positions.
  */
-declare function RangeCalendar$1<T extends DateValue>(props: RangeCalendarProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function RangeCalendar$1<T extends DateValue>({ showMonthYearMenus, ...props }: RangeCalendarProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type RangeCalendarProps$1 as RangeCalendarProps, RangeCalendar$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -2,8 +2,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { focus } from "../../styles/focus.js";
-import { calendarStyles } from "../../calendar/styles.js";
-import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
+import { calendarStyles, dateLayers } from "../../calendar/styles.js";
+import { CalendarFrame, CalendarGridHeader as CalendarGridHeader$1 } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import { CalendarCell, CalendarGrid, CalendarGridBody, RangeCalendar } from "rea
 //#region src/components/range-calendar/index.tsx
 function cellClassName(state) {
 	const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);
-	return 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.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
+	return 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 ?? "";
 }
 function gridCell(date) {
 	return /* @__PURE__ */ jsx(CalendarCell, {
@@ -46,53 +46,80 @@ function gridCell(date) {
 * The call site's `className` and `style` land on the container, which is the
 * element a layout positions.
 */
-function RangeCalendar$1(props$1) {
-	const $ = c(12);
-	let t0;
-	if ($[0] !== props$1) {
-		t0 = mergeStatefulStyles(props(calendarStyles.root), props$1);
-		$[0] = props$1;
-		$[1] = t0;
-	} else t0 = $[1];
+function RangeCalendar$1(t0) {
+	const $ = c(21);
+	let T0;
+	let T1;
 	let t1;
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(CalendarHeader, {});
-		t2 = props(calendarStyles.months);
-		$[2] = t1;
-		$[3] = t2;
-	} else {
-		t1 = $[2];
-		t2 = $[3];
-	}
 	let t3;
-	if ($[4] !== props$1.visibleDuration?.months) {
-		t3 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
-		$[4] = props$1.visibleDuration?.months;
-		$[5] = t3;
-	} else t3 = $[5];
 	let t4;
-	if ($[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			...t2,
-			children: t3
-		});
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
 	let t5;
-	if ($[8] !== props$1 || $[9] !== t0 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(RangeCalendar, {
-			...props$1,
-			...t0,
-			children: [t1, t4]
+	if ($[0] !== t0) {
+		const { showMonthYearMenus: t6, ...props$1 } = t0;
+		const showMonthYearMenus = t6 === void 0 ? false : t6;
+		T1 = RangeCalendar;
+		t4 = props$1;
+		t5 = mergeStatefulStyles(props(calendarStyles.root), props$1);
+		T0 = CalendarFrame;
+		t3 = showMonthYearMenus;
+		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = props(calendarStyles.months);
+			$[8] = t1;
+		} else t1 = $[8];
+		t2 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+		t5 = $[7];
+	}
+	let t6;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			...t1,
+			children: t2
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== T0 || $[13] !== t3 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			showMonthYearMenus: t3,
+			children: t6
+		});
+		$[12] = T0;
+		$[13] = t3;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== T1 || $[17] !== t4 || $[18] !== t5 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			...t4,
+			...t5,
+			children: t7
 		});
-		$[8] = props$1;
-		$[9] = t0;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[16] = T1;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 function _temp(offset) {
 	return /* @__PURE__ */ jsxs(CalendarGrid, {

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","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isUnavailable","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellUnavailable","cellDisabled","gridCell","date","$","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","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 { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } 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  /** 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. `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  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.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>(props: RangeCalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\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    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;;;AAsDA,SAAS2B,cAAcC,OAOpB;CACD,MAAMO,QAAQP,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOvB,MAAaY,eAAeiB,MAAMhB,MAAMiB,MAAMV,MAAMK,WAAWb,eAAemB,WAAWX,MAAME,cAAcV,eAAeoB,aAAaZ,MAAME,cAAcF,MAAMI,oBAAoBZ,eAAeqB,gBAAgBb,MAAME,cAAcF,MAAMG,kBAAkBX,eAAesB,cAAcP,SAASf,eAAeuB,cAAcf,MAAMM,iBAAiBd,eAAewB,iBAAiBhB,MAAMC,cAAcT,eAAeyB,YAAY,CAAC,CAACpB,aAAa;AACnc;AACA,SAASqB,SAASC,MAAkC;CAClD,OAAO,oBAACkB,cAAD;EAAiB,WAAWtC;EAAqBoB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAAhC,gBAAAqB,SAAA;CAAA,MAAAY,IAAA/C,EAAA,EAAA;CAAA,IAAAgD;CAAA,IAAAD,EAAA,OAAAZ,SAAA;EAC6Ca,KAAA3B,oBAAoBd,MAAaY,eAAc8B,IAAK,GAAGd,OAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAG;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAA5C,MAAaY,eAAcmC,MAAO;EAACP,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAZ,QAAAqB,iBAAAF,QAAA;EACzCC,KAAArC,aAAaiB,QAAKqB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACX,EAAA,KAAAZ,QAAAqB,iBAAAF;EAAAP,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAQ,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAR,EAAA,KAAAQ;EAAAR,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAZ,WAAAY,EAAA,OAAAC,MAAAD,EAAA,QAAAY,IAAA;EAPHC,KAAA,qBAACQ,eAAD;GAAiB,GAAQjC;GAAK,GAAMa;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHZ,EAAA,KAAAZ;EAAAY,EAAA,KAAAC;EAAAD,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OARda;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAACQ,cAAD;EAA6CR;EAAM,GAAMtD,MAAaY,eAAc2C,IAAK;EAAzF,UAAA,CAC5D,oBAACQ,sBAAD,CAAmB,CAAA,GACnB,oBAACC,kBAAD,EAAA,UAAsB1B,SAAF,CAAA,CAFwD;CAAMgB,GAAAA,OAAMP,MAAZ;AAG5D"}
+{"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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"}

package/dist/components/search-field/index.d.ts

@@ -4,7 +4,8 @@ import { SearchFieldProps } from "react-aria-components";
 type SearchFieldProps$1 = {
   /**
    * The name of the button that clears the field, for a screen reader.
-   * @default 'Clear'
+   * Left out, React Aria names it in the reader's locale — "Clear search" in
+   * English.
    */
   clearLabel?: string;
   /**

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

@@ -14,7 +14,7 @@ function fieldContent(label, placeholder, clearLabel, description, error, inputR
 		/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Label, { children: label }) }),
 		/* @__PURE__ */ jsxs("div", {
 			...{
-				0: { className: "x12w9bfk x6s0dn4 x17m4uoy x1g5gueg xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7" },
+				0: { className: "x12w9bfk x6s0dn4 x17m4uoy xmaqtb8 x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7" },
 				1: { className: "x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1xj74d8 x1bhcspo" }
 			}[!!state.isDisabled << 0],
 			children: [
@@ -52,49 +52,48 @@ function fieldContent(label, placeholder, clearLabel, description, error, inputR
 */
 function SearchField$1(t0) {
 	const $ = c(17);
-	const { clearLabel: t1, description, error, inputRef, isDisabled: t2, label, placeholder, ...props$1 } = t0;
-	const clearLabel = t1 === void 0 ? "Clear" : t1;
-	const isDisabled = t2 === void 0 ? false : t2;
+	const { clearLabel, description, error, inputRef, isDisabled: t1, label, placeholder, ...props$1 } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = SearchField;
-	let t3;
+	let t2;
 	if ($[0] !== error) {
-		t3 = invalidFrom(error);
+		t2 = invalidFrom(error);
 		$[0] = error;
-		$[1] = t3;
-	} else t3 = $[1];
-	const t4 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-	let t5;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t4;
 	if ($[2] !== clearLabel || $[3] !== description || $[4] !== error || $[5] !== inputRef || $[6] !== label || $[7] !== placeholder) {
-		t5 = fieldContent(label, placeholder, clearLabel, description, error, inputRef);
+		t4 = fieldContent(label, placeholder, clearLabel, description, error, inputRef);
 		$[2] = clearLabel;
 		$[3] = description;
 		$[4] = error;
 		$[5] = inputRef;
 		$[6] = label;
 		$[7] = placeholder;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== T0 || $[10] !== isDisabled || $[11] !== props$1 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== validationBehavior) {
-		t6 = /* @__PURE__ */ jsx(T0, {
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== T0 || $[10] !== isDisabled || $[11] !== props$1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== validationBehavior) {
+		t5 = /* @__PURE__ */ jsx(T0, {
 			isDisabled,
-			isInvalid: t3,
+			isInvalid: t2,
 			validationBehavior,
 			...props$1,
-			...t4,
-			children: t5
+			...t3,
+			children: t4
 		});
 		$[9] = T0;
 		$[10] = isDisabled;
 		$[11] = props$1;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
 		$[15] = validationBehavior;
-		$[16] = t6;
-	} else t6 = $[16];
-	return t6;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
 }
 //#endregion
 export { SearchField$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Ref","RefAttributes","SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","Label","SearchField","RACSearchField","VisuallyHidden","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","IconButton","FORCED_COLORS","clearLabel","description","error","inputRef","HTMLInputElement","label","placeholder","Omit","fieldContent","state","className","isDisabled","isEmpty","t0","$","t1","t2","props","undefined","validationBehavior","T0","t3","t4","root","t5","t6","SearchField","_c","props","RACSearchField","stylex.props"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\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 search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * @default 'Clear'\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\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   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string, description: string | undefined, error: string | undefined, inputRef: Ref<HTMLInputElement> | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div {...{\n      0: {\n        className: \"x12w9bfk x6s0dn4 x17m4uoy x1g5gueg xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1xj74d8 x1bhcspo\"\n      }\n    }[!!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} ref={inputRef} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel = 'Clear',\n  description,\n  error,\n  inputRef,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: RefAttributes<HTMLDivElement> & SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error, inputRef)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;;AA0FA,SAASoC,aAAaH,OAAeC,aAAiCN,YAAoBC,aAAiCC,OAA2BC,UAA6C;CACjM,QAAQM,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDK,WAAW,wOACb;IACA,GAAG,EACDA,WAAW,8NACb;GACF,EAAE,CAAC,CAACD,MAAME,cAAc;GAPtB,UAAA;IAQE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBL;KAAa,KAAKH;KAAU,WAAU;IAA2C,CAAA;IACzGM,MAAMG,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYZ;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAArB,cAAAgC,IAAA;CAAA,MAAAC,IAAAzC,EAAA,EAAA;CAAqB,MAAA,EAAA2B,YAAAe,IAAAd,aAAAC,OAAAC,UAAAQ,YAAAK,IAAAX,OAAAC,aAAA,GAAAW,YAAAJ;CACnB,MAAAb,aAAAe,OAAAG,KAAAA,IAAA,UAAAH;CAIA,MAAAJ,aAAAK,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,qBAA2B/B,2BAA2B;CAC9C,MAAAgC,KAAAtC;CAAc,IAAAuC;CAAA,IAAAP,EAAA,OAAAZ,OAAA;EAAoCmB,KAAAlC,YAAYe,KAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAyD,MAAAQ,KAAA/B,oBAAoBZ,MAAaO,YAAWqC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAV,EAAA,OAAAd,cAAAc,EAAA,OAAAb,eAAAa,EAAA,OAAAZ,SAAAY,EAAA,OAAAX,YAAAW,EAAA,OAAAT,SAAAS,EAAA,OAAAR,aAAA;EAC1LkB,KAAAhB,aAAaH,OAAOC,aAAaN,YAAYC,aAAaC,OAAOC,QAAQ;EAACW,EAAA,KAAAd;EAAAc,EAAA,KAAAb;EAAAa,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAM,MAAAN,EAAA,QAAAH,cAAAG,EAAA,QAAAG,WAAAH,EAAA,QAAAO,MAAAP,EAAA,QAAAQ,MAAAR,EAAA,QAAAU,MAAAV,EAAA,QAAAK,oBAAA;EADxEM,KAAA,oBAAC,IAAD;GAA4Bd;GAAuB,WAAAU;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAChIE,UAAAA;EADiB,CAAA;EAEHV,EAAA,KAAAM;EAAAN,EAAA,MAAAH;EAAAG,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAK;EAAAL,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAFZW;AAEY"}
+{"version":3,"file":"index.js","names":["c","_c","Ref","RefAttributes","SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","Label","SearchField","RACSearchField","VisuallyHidden","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","IconButton","FORCED_COLORS","HOVER_CAPABLE","clearLabel","description","error","inputRef","HTMLInputElement","label","placeholder","Omit","fieldContent","state","className","isDisabled","isEmpty","t0","$","t1","props","undefined","validationBehavior","T0","t2","t3","root","t4","t5","SearchField","_c","props","RACSearchField","stylex.props"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\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// A pointer that can hover: a mouse or a trackpad, not a finger. The bar is a\n// plain element around the input rather than a part React Aria hosts, so its\n// hover layer is a pseudo-class, and Chromium leaves `:hover` on whatever a\n// touch last tapped. Inside this query a touch screen draws no hover at all;\n// a touchscreen laptop still matches it for its trackpad.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * Left out, React Aria names it in the reader's locale — \"Clear search\" in\n   * English.\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\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   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string | undefined, description: string | undefined, error: string | undefined, inputRef: Ref<HTMLInputElement> | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div {...{\n      0: {\n        className: \"x12w9bfk x6s0dn4 x17m4uoy xmaqtb8 x42wrt3 xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1xj74d8 x1bhcspo\"\n      }\n    }[!!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} ref={inputRef} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel,\n  description,\n  error,\n  inputRef,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: RefAttributes<HTMLDivElement> & SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error, inputRef)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;;AAkGA,SAASqC,aAAaH,OAAeC,aAAiCN,YAAgCC,aAAiCC,OAA2BC,UAA6C;CAC7M,QAAQM,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDK,WAAW,+OACb;IACA,GAAG,EACDA,WAAW,8NACb;GACF,EAAE,CAAC,CAACD,MAAME,cAAc;GAPtB,UAAA;IAQE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBL;KAAa,KAAKH;KAAU,WAAU;IAA2C,CAAA;IACzGM,MAAMG,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYZ;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAAtB,cAAAiC,IAAA;CAAA,MAAAC,IAAA1C,EAAA,EAAA;CAAqB,MAAA,EAAA4B,YAAAC,aAAAC,OAAAC,UAAAQ,YAAAI,IAAAV,OAAAC,aAAA,GAAAU,YAAAH;CAKnB,MAAAF,aAAAI,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,qBAA2B/B,2BAA2B;CAC9C,MAAAgC,KAAAtC;CAAc,IAAAuC;CAAA,IAAAN,EAAA,OAAAZ,OAAA;EAAoCkB,KAAAlC,YAAYgB,KAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAyD,MAAAO,KAAA/B,oBAAoBZ,MAAaO,YAAWqC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAd,cAAAc,EAAA,OAAAb,eAAAa,EAAA,OAAAZ,SAAAY,EAAA,OAAAX,YAAAW,EAAA,OAAAT,SAAAS,EAAA,OAAAR,aAAA;EAC1LiB,KAAAf,aAAaH,OAAOC,aAAaN,YAAYC,aAAaC,OAAOC,QAAQ;EAACW,EAAA,KAAAd;EAAAc,EAAA,KAAAb;EAAAa,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAK,MAAAL,EAAA,QAAAH,cAAAG,EAAA,QAAAE,WAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAS,MAAAT,EAAA,QAAAI,oBAAA;EADxEM,KAAA,oBAAC,IAAD;GAA4Bb;GAAuB,WAAAS;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAChIE,UAAAA;EADiB,CAAA;EAEHT,EAAA,KAAAK;EAAAL,EAAA,MAAAH;EAAAG,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAI;EAAAJ,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFZU;AAEY"}

package/dist/components/search-view/index.d.ts

@@ -0,0 +1,79 @@
+import { AutocompleteProps as AutocompleteProps$1 } from "../autocomplete/index.js";
+import { ReactNode, RefAttributes } from "react";
+import { ClassNameOrFunction, DialogTriggerProps, PopoverRenderProps, StyleOrFunction } from "react-aria-components";
+//#region src/components/search-view/index.d.ts
+type SearchViewContentProps<T extends object = object> = {
+  /**
+   * What the back button is called, for a screen reader. Left out, the
+   * library names it in the reader's locale — "Back" in English.
+   */
+  backLabel?: string;
+  /** The results: a ListBox or a Menu, which typing narrows. */
+  children?: ReactNode;
+  /** A function may compute the class from the view's render state. */
+  className?: ClassNameOrFunction<PopoverRenderProps>;
+  /**
+   * What the clear button is called, for a screen reader. Left out, React
+   * Aria names it in the reader's locale — "Clear search" in English.
+   */
+  clearLabel?: string;
+  /**
+   * Where to portal the view. Defaults to the end of `<body>`, which is
+   * right for an app that sets its StyleX theme on `:root`. An app that
+   * scopes the theme to a subtree has to point this at an element inside it,
+   * or the view renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: Element;
+  /**
+   * What is searched, for a screen reader. It names both the view and its
+   * input, and is read rather than shown; `placeholder` is what is seen.
+   */
+  label: string;
+  /** The supporting text in the empty input, which is what a person reads. */
+  placeholder?: string;
+  /** A function may compute the style from the view's render state. */
+  style?: StyleOrFunction<PopoverRenderProps>;
+} & Omit<AutocompleteProps$1<T>, 'children'>;
+type SearchViewProps = Omit<DialogTriggerProps, 'children'> & {
+  /**
+   * The Button or IconButton that opens the view, and `SearchView.Content`.
+   */
+  children?: ReactNode;
+};
+/**
+ * The view a search opens into: full screen on a compact window, docked
+ * under what opened it on a wider one. Open state is React Aria's: pass
+ * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep
+ * its own.
+ *
+ * ```tsx
+ * <SearchView>
+ *   <IconButton aria-label="Search"><SearchIcon /></IconButton>
+ *   <SearchView.Content label="Search" placeholder="Search">
+ *     <ListBox aria-label="Results">…</ListBox>
+ *   </SearchView.Content>
+ * </SearchView>
+ * ```
+ *
+ * A Button or IconButton placed directly inside opens the view;
+ * `SearchView.Content` is the view itself.
+ */
+declare function SearchView({ children, ...props }: SearchViewProps): import("react").JSX.Element;
+declare namespace SearchView {
+  var Content: typeof SearchViewContent;
+}
+/**
+ * The view: the header with its back button, input and clear button, and
+ * the results under it, inside React Aria's Autocomplete, so typing narrows
+ * them. Its value is Autocomplete's: pass `inputValue` with `onInputChange`
+ * to control what has been typed, or `defaultInputValue` to let it keep its
+ * own.
+ *
+ * The call site's `className` and `style` land on the view's surface, and
+ * its `ref` too.
+ */
+declare function SearchViewContent<T extends object = object>({ backLabel, children, className, clearLabel, container, label, placeholder, ref, style, ...props }: RefAttributes<HTMLElement> & SearchViewContentProps<T>): import("react").JSX.Element;
+//#endregion
+export { SearchViewContent, type SearchViewContentProps, type SearchViewProps, SearchView as default };
+//# sourceMappingURL=index.d.ts.map