@pearpages/pulp-react 0.2.2 → 0.3.0

package/dist/chunk-Y7KC2FDU.js

@@ -0,0 +1,88 @@
+import { renderAsChild } from './chunk-QJG5ILK5.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { useId, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/segmented-control/SegmentedControl.module.css
+var SegmentedControl_default = {
+  root: "SegmentedControl_root",
+  list: "SegmentedControl_list",
+  option: "SegmentedControl_option",
+  input: "SegmentedControl_input",
+  segment: "SegmentedControl_segment",
+  icon: "SegmentedControl_icon"
+};
+function SegmentedControl({
+  label,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  look = "segmented",
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  className,
+  ref,
+  ...rest
+}) {
+  const generated = useId();
+  const [own, setOwn] = useState(defaultValue);
+  const selected = value ?? own;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-disabled": disabled || void 0,
+      className: classes(SegmentedControl_default.root, className),
+      "data-look": look,
+      "data-size": size,
+      "data-full-width": fullWidth ? "" : void 0,
+      children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: SegmentedControl_default.option, "data-selected": option.value === selected ? "" : void 0, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            className: SegmentedControl_default.input,
+            name: name ?? generated,
+            value: option.value,
+            checked: option.value === selected,
+            disabled: disabled || option.disabled,
+            onChange: () => {
+              if (value === void 0) setOwn(option.value);
+              onValueChange?.(option.value);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: SegmentedControl_default.segment, children: [
+          option.icon != null && /* @__PURE__ */ jsx("span", { className: SegmentedControl_default.icon, "aria-hidden": "true", children: option.icon }),
+          option.label
+        ] })
+      ] }, option.value))
+    }
+  );
+}
+function SegmentedControlNav({ label, look = "segmented", size = "md", fullWidth = false, className, ref, children, ...rest }) {
+  return /* @__PURE__ */ jsx("nav", { ...rest, ref, "aria-label": label, className: classes(SegmentedControl_default.root, className), "data-look": look, "data-size": size, "data-full-width": fullWidth ? "" : void 0, children: /* @__PURE__ */ jsx("ul", { role: "list", className: SegmentedControl_default.list, children }) });
+}
+function SegmentedControlNavItem({ current = false, asChild = false, className, ref, children, ...rest }) {
+  const segment = classes(SegmentedControl_default.segment, className);
+  const ariaCurrent = current ? "page" : void 0;
+  return /* @__PURE__ */ jsx("li", { className: SegmentedControl_default.option, "data-selected": current ? "" : void 0, children: asChild ? (
+    // eslint-disable-next-line react-hooks/refs -- forwarded, not read
+    renderAsChild("SegmentedControl.NavItem", children, { ...rest, ref, className: segment, "aria-current": ariaCurrent })
+  ) : /* @__PURE__ */ jsx("a", { ...rest, ref, className: segment, "aria-current": ariaCurrent, children }) });
+}
+SegmentedControl.displayName = "SegmentedControl";
+SegmentedControlNav.displayName = "SegmentedControl.Nav";
+SegmentedControlNavItem.displayName = "SegmentedControl.NavItem";
+SegmentedControl.Nav = SegmentedControlNav;
+SegmentedControl.NavItem = SegmentedControlNavItem;
+
+export { SegmentedControl };
+//# sourceMappingURL=chunk-Y7KC2FDU.js.map
+//# sourceMappingURL=chunk-Y7KC2FDU.js.map

package/dist/chunk-Y7KC2FDU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control/SegmentedControl.module.css","../src/segmented-control/SegmentedControl.tsx"],"names":["root","list","option","input","segment","icon"],"mappings":"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","file":"chunk-Y7KC2FDU.js","sourcesContent":["/* Every value is a token: --segmented-control-* in packages/tokens/tokens/component/segmented-control.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--segmented-control-height-md);\n    --_padding: var(--segmented-control-padding-x-md);\n\n    display: inline-flex;\n    box-sizing: border-box;\n    max-inline-size: 100%;\n    color: var(--segmented-control-fg);\n    font-family: var(--font-family-body);\n    font-size: var(--segmented-control-font-size-md);\n    font-weight: var(--segmented-control-weight);\n    line-height: 1;\n\n    &[data-size='sm'] {\n      --_height: var(--segmented-control-height-sm);\n      --_padding: var(--segmented-control-padding-x-sm);\n\n      font-size: var(--segmented-control-font-size-sm);\n    }\n\n    &[data-look='segmented'] {\n      padding: var(--segmented-control-inset);\n      border: var(--segmented-control-border-width) solid var(--segmented-control-track-border);\n      border-radius: var(--segmented-control-track-radius);\n      background: var(--segmented-control-track-bg);\n    }\n\n    &[data-look='chips'] {\n      flex-wrap: wrap;\n      gap: var(--segmented-control-gap);\n    }\n\n    &[data-full-width][data-look='segmented'] {\n      display: flex;\n    }\n\n    &[aria-disabled='true'] {\n      opacity: 0.55;\n    }\n  }\n\n  /* The Nav flavour: the list is the flex row the root is for the radios. */\n  .list {\n    display: contents;\n  }\n\n  .option {\n    display: inline-flex;\n    position: relative;\n    min-inline-size: 0;\n\n    .root[data-full-width] & {\n      flex: 1;\n    }\n  }\n\n  /* Visually hidden, still focusable and still in the form: the segment draws its state. */\n  .input {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .segment {\n    display: inline-flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    gap: var(--segmented-control-gap);\n    box-sizing: border-box;\n    min-block-size: calc(var(--_height) - 2 * var(--segmented-control-inset) - 2 * var(--segmented-control-border-width));\n    padding-block: 0;\n    padding-inline: var(--_padding);\n    border: var(--segmented-control-border-width) solid transparent;\n    border-radius: var(--segmented-control-segment-radius);\n    color: inherit;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--motion-duration-fast) var(--motion-easing-standard),\n      color var(--motion-duration-fast) var(--motion-easing-standard);\n\n    .root[data-look='chips'] & {\n      min-block-size: var(--_height);\n      border-color: var(--segmented-control-chip-border);\n      border-radius: var(--segmented-control-chip-radius);\n      background: var(--segmented-control-chip-bg);\n    }\n  }\n\n  .option:hover .segment,\n  a.segment:hover {\n    color: var(--segmented-control-fg-hover);\n  }\n\n  .option[data-selected] .segment {\n    border-color: var(--segmented-control-segment-selected-border);\n    background: var(--segmented-control-segment-selected-bg);\n    box-shadow: var(--segmented-control-segment-selected-shadow);\n    color: var(--segmented-control-segment-selected-fg);\n\n    .root[data-look='chips'] & {\n      border-color: var(--segmented-control-chip-selected-border);\n      background: var(--segmented-control-chip-selected-bg);\n      box-shadow: none;\n      color: var(--segmented-control-chip-selected-fg);\n    }\n  }\n\n  .input:focus-visible + .segment,\n  a.segment:focus-visible {\n    outline: var(--segmented-control-focus-ring-width) solid var(--segmented-control-focus-ring);\n    outline-offset: var(--segmented-control-focus-ring-offset);\n  }\n\n  .input:disabled + .segment {\n    opacity: 0.55;\n  }\n\n  .icon {\n    display: inline-flex;\n  }\n}\n","import { useId, useState, type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport styles from './SegmentedControl.module.css';\n\nexport type SegmentedControlSize = 'sm' | 'md';\nexport type SegmentedControlLook = 'segmented' | 'chips';\n\nexport interface SegmentedControlOption<T extends string = string> {\n  value: T;\n  label: ReactNode;\n  /** Decorative: hidden from assistive technology, so the label must stand on its own. */\n  icon?: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<T extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {\n  /** Names the group for assistive technology. Not rendered; label it visibly with `aria-labelledby` instead when there is a heading. */\n  label?: string;\n  options: ReadonlyArray<SegmentedControlOption<T>>;\n  /** Controlled selected value. */\n  value?: T;\n  /** Initially selected value when uncontrolled. */\n  defaultValue?: T;\n  onValueChange?: (value: T) => void;\n  /** Form field name shared by the radios. Generated when omitted. */\n  name?: string;\n  /** `segmented` is one track with a raised thumb; `chips` is separate pills that wrap. @default 'segmented' */\n  look?: SegmentedControlLook;\n  /** @default 'md' */\n  size?: SegmentedControlSize;\n  /** Segments share the container's width equally. `segmented` look only. @default false */\n  fullWidth?: boolean;\n  disabled?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One choice out of a few, all visible, switching what is shown in place: a\n * view mode, a unit, a sort order. Generic over a string union, so `value`\n * and `onValueChange` are typed by the options. For links that navigate to\n * another page use `SegmentedControl.Nav`, which looks the same and is a `nav`.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `radiogroup` of native radio inputs, exactly as RadioGroup: the keyboard is the browser's own (arrows move and select, Tab enters on the checked radio and leaves the group), nothing is re-implemented. Name the group with `label` or `aria-labelledby`. The inputs are visually hidden, not removed, so the focus ring is drawn on the visible segment and the control takes part in a form (`name`). Icons are decorative.\n * @do Use it for two to five short options that change the view in place.\n * @do Use `SegmentedControl.Nav` when each option is a URL.\n * @dont Use it for on/off; that is a Switch. For several at once, toggle Chips.\n * @dont Use it for a form question with longer labels or a description; that is a RadioGroup.\n */\nexport function SegmentedControl<T extends string = string>({\n  label,\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  look = 'segmented',\n  size = 'md',\n  fullWidth = false,\n  disabled = false,\n  className,\n  ref,\n  ...rest\n}: SegmentedControlProps<T>) {\n  const generated = useId();\n  const [own, setOwn] = useState<T | undefined>(defaultValue);\n  const selected = value ?? own;\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"radiogroup\"\n      aria-label={label}\n      aria-disabled={disabled || undefined}\n      className={classes(styles.root, className)}\n      data-look={look}\n      data-size={size}\n      data-full-width={fullWidth ? '' : undefined}\n    >\n      {options.map((option) => (\n        <label key={option.value} className={styles.option} data-selected={option.value === selected ? '' : undefined}>\n          <input\n            type=\"radio\"\n            className={styles.input}\n            name={name ?? generated}\n            value={option.value}\n            checked={option.value === selected}\n            disabled={disabled || option.disabled}\n            onChange={() => {\n              if (value === undefined) setOwn(option.value);\n              onValueChange?.(option.value);\n            }}\n          />\n          <span className={styles.segment}>\n            {option.icon != null && (\n              <span className={styles.icon} aria-hidden=\"true\">\n                {option.icon}\n              </span>\n            )}\n            {option.label}\n          </span>\n        </label>\n      ))}\n    </div>\n  );\n}\n\nexport interface SegmentedControlNavProps extends HTMLAttributes<HTMLElement> {\n  /** Names the landmark (\"Feed view\"). Required: a page with several `nav`s needs them told apart. */\n  label: string;\n  /** @default 'segmented' */\n  look?: SegmentedControlLook;\n  /** @default 'md' */\n  size?: SegmentedControlSize;\n  /** @default false */\n  fullWidth?: boolean;\n  ref?: Ref<HTMLElement>;\n  /** `SegmentedControl.NavItem`s. */\n  children: ReactNode;\n}\n\n/**\n * The same look for links that navigate: a labelled `nav` with a list of\n * links, the current one marked `aria-current=\"page\"`. Not a radiogroup and\n * not tabs: following a link loads another page, and a screen reader user\n * should be told so.\n */\nfunction SegmentedControlNav({ label, look = 'segmented', size = 'md', fullWidth = false, className, ref, children, ...rest }: SegmentedControlNavProps) {\n  return (\n    <nav {...rest} ref={ref} aria-label={label} className={classes(styles.root, className)} data-look={look} data-size={size} data-full-width={fullWidth ? '' : undefined}>\n      <ul role=\"list\" className={styles.list}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport interface SegmentedControlNavItemProps<E extends HTMLElement = HTMLAnchorElement> extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** This link is the page being shown: `aria-current=\"page\"` and the selected look. @default false */\n  current?: boolean;\n  /** Render the single child instead of an `a`: a router's link component. @default false */\n  asChild?: boolean;\n  ref?: Ref<E>;\n  children: ReactNode;\n}\n\n/** One link of a `SegmentedControl.Nav`. With `asChild`, the router's own link takes the styles. */\nfunction SegmentedControlNavItem<E extends HTMLElement = HTMLAnchorElement>({ current = false, asChild = false, className, ref, children, ...rest }: SegmentedControlNavItemProps<E>) {\n  const segment = classes(styles.segment, className);\n  const ariaCurrent = current ? ('page' as const) : undefined;\n  return (\n    <li className={styles.option} data-selected={current ? '' : undefined}>\n      {asChild ? (\n        // eslint-disable-next-line react-hooks/refs -- forwarded, not read\n        renderAsChild('SegmentedControl.NavItem', children, { ...rest, ref, className: segment, 'aria-current': ariaCurrent })\n      ) : (\n        <a {...rest} ref={ref as Ref<HTMLAnchorElement>} className={segment} aria-current={ariaCurrent}>\n          {children}\n        </a>\n      )}\n    </li>\n  );\n}\n\nSegmentedControl.displayName = 'SegmentedControl';\nSegmentedControlNav.displayName = 'SegmentedControl.Nav';\nSegmentedControlNavItem.displayName = 'SegmentedControl.NavItem';\n\nSegmentedControl.Nav = SegmentedControlNav;\nSegmentedControl.NavItem = SegmentedControlNavItem;\n"]}

package/dist/{chunk-OFKSU77Y.js → chunk-ZEVQQQOA.js}

@@ -1,4 +1,4 @@
-import { Field } from './chunk-M5VL22MY.js';
+import { Field } from './chunk-SXMORGSG.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -48,5 +48,5 @@ function Select({
 Select.displayName = "Select";
 
 export { Select };
-//# sourceMappingURL=chunk-OFKSU77Y.js.map
-//# sourceMappingURL=chunk-OFKSU77Y.js.map
+//# sourceMappingURL=chunk-ZEVQQQOA.js.map
+//# sourceMappingURL=chunk-ZEVQQQOA.js.map

package/dist/{chunk-OFKSU77Y.js.map → chunk-ZEVQQQOA.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/select/Select.module.css","../src/select/Select.tsx"],"names":["field","control","select"],"mappings":";;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EASG,KAAA,EAAAA,cAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAuBA,MAAA,EAAAC;AAAA,CAAA;ACfI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,cAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,MAAA,EAAA,EAAK,SAAA,EAAW,eAAO,OAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,WAAA,EAC/B,+BAAC,QAAA,EAAA,EAAQ,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,eAAO,MAAA,EAC3C,QAAA,EAAA;AAAA,UAAA,WAAA,KAAgB,0BACf,GAAA,CAAC,QAAA,EAAA,EAAO,OAAM,EAAA,EAAG,QAAA,EAAU,UACxB,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAED;AAAA,SAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-OFKSU77Y.js","sourcesContent":["/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    --_height: var(--select-height-md);\n    --_font-size: var(--select-font-size-md);\n    --_border: var(--select-border-default);\n\n    font-family: var(--select-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--select-height-sm);\n      --_font-size: var(--select-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--select-height-lg);\n      --_font-size: var(--select-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--select-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n\n    &::after {\n      content: \"\";\n      inline-size: var(--space-2);\n      block-size: var(--space-2);\n      margin-inline-end: var(--select-chevron-inset);\n      border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n      border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n      justify-self: end;\n      rotate: 45deg;\n      translate: 0 -25%;\n      pointer-events: none;\n      grid-area: 1 / 1;\n    }\n  }\n\n  .select {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--select-radius);\n    background-color: var(--select-bg);\n    color: var(--select-fg);\n    font-size: var(--_font-size);\n    appearance: none;\n    cursor: pointer;\n    transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      border-color: var(--select-border-focus);\n      outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n      outline-offset: var(--select-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--select-border-hover);\n    }\n\n    &:has(option[value=\"\"]:checked) {\n      color: var(--select-placeholder);\n    }\n  }\n}\n","import type { ReactNode, Ref, SelectHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Select.module.css';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: SelectSize;\n  /** An empty first option shown until a value is chosen. */\n  placeholder?: string;\n  /** The `<select>` element. */\n  ref?: Ref<HTMLSelectElement>;\n  /** Applied to the wrapper, not the select. */\n  className?: string;\n  /** `<option>` and `<optgroup>` elements. */\n  children: ReactNode;\n}\n\n/**\n * A native `<select>` on top of Field: the browser's own popup, keyboard and\n * assistive-technology support, with the closed control drawn from\n * `--select-*` tokens. For rich options or multi-select, a listbox component\n * comes later on a headless layer; this one stays native on purpose.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.\n * @do Use it for a plain list of words; it is the most robust choice on every platform.\n * @dont Use it for options that need a description or an icon; use Picker.\n */\nexport function Select({\n  label,\n  description,\n  error,\n  size = 'md',\n  placeholder,\n  required,\n  disabled,\n  id,\n  className,\n  ref,\n  children,\n  'aria-describedby': describedBy,\n  ...rest\n}: SelectProps) {\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n  return (\n    <Field\n      id={id}\n      invalid={invalid}\n      disabled={Boolean(disabled)}\n      required={Boolean(required)}\n      className={classes(styles.field, className)}\n      data-size={size}\n    >\n      <Field.Label>{label}</Field.Label>\n      <span className={styles.control}>\n        <Field.Control aria-describedby={describedBy}>\n          <select {...rest} ref={ref} className={styles.select}>\n            {placeholder !== undefined && (\n              <option value=\"\" disabled={required}>\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </select>\n        </Field.Control>\n      </span>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nSelect.displayName = 'Select';\n"]}
+{"version":3,"sources":["../src/select/Select.module.css","../src/select/Select.tsx"],"names":["field","control","select"],"mappings":";;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EASG,KAAA,EAAAA,cAAAA;AAAA,EAoBA,OAAA,EAAAC,gBAAAA;AAAA,EAuBA,MAAA,EAAAC;AAAA,CAAA;ACfI,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,IAAa,UAAU,IAAA,IAAQ,KAAA,KAAU,SAAS,KAAA,KAAU,EAAA;AACtF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,OAAA,CAAQ,cAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,MAAA,EAAA,EAAK,SAAA,EAAW,eAAO,OAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,WAAA,EAC/B,+BAAC,QAAA,EAAA,EAAQ,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,eAAO,MAAA,EAC3C,QAAA,EAAA;AAAA,UAAA,WAAA,KAAgB,0BACf,GAAA,CAAC,QAAA,EAAA,EAAO,OAAM,EAAA,EAAG,QAAA,EAAU,UACxB,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAED;AAAA,SAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,QACC,WAAA,oBAAe,GAAA,CAAC,KAAA,CAAM,WAAA,EAAN,EAAmB,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAC/C,OAAA,oBAAW,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAClC;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-ZEVQQQOA.js","sourcesContent":["/*\n * Every value is a token (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    --_height: var(--select-height-md);\n    --_font-size: var(--select-font-size-md);\n    --_border: var(--select-border-default);\n\n    font-family: var(--select-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--select-height-sm);\n      --_font-size: var(--select-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--select-height-lg);\n      --_font-size: var(--select-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--select-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n\n    &::after {\n      content: \"\";\n      inline-size: var(--space-2);\n      block-size: var(--space-2);\n      margin-inline-end: var(--select-chevron-inset);\n      border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n      border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n      justify-self: end;\n      rotate: 45deg;\n      translate: 0 -25%;\n      pointer-events: none;\n      grid-area: 1 / 1;\n    }\n  }\n\n  .select {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--select-radius);\n    background-color: var(--select-bg);\n    color: var(--select-fg);\n    font-size: var(--_font-size);\n    appearance: none;\n    cursor: pointer;\n    transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      border-color: var(--select-border-focus);\n      outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n      outline-offset: var(--select-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--select-border-hover);\n    }\n\n    &:has(option[value=\"\"]:checked) {\n      color: var(--select-placeholder);\n    }\n  }\n}\n","import type { ReactNode, Ref, SelectHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Select.module.css';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Visible label. Always rendered. */\n  label: ReactNode;\n  description?: ReactNode;\n  /** Presence marks the control invalid and announces the message. */\n  error?: ReactNode;\n  /** @default 'md' */\n  size?: SelectSize;\n  /** An empty first option shown until a value is chosen. */\n  placeholder?: string;\n  /** The `<select>` element. */\n  ref?: Ref<HTMLSelectElement>;\n  /** Applied to the wrapper, not the select. */\n  className?: string;\n  /** `<option>` and `<optgroup>` elements. */\n  children: ReactNode;\n}\n\n/**\n * A native `<select>` on top of Field: the browser's own popup, keyboard and\n * assistive-technology support, with the closed control drawn from\n * `--select-*` tokens. For rich options or multi-select, a listbox component\n * comes later on a headless layer; this one stays native on purpose.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.\n * @do Use it for a plain list of words; it is the most robust choice on every platform.\n * @dont Use it for options that need a description or an icon; use Picker.\n */\nexport function Select({\n  label,\n  description,\n  error,\n  size = 'md',\n  placeholder,\n  required,\n  disabled,\n  id,\n  className,\n  ref,\n  children,\n  'aria-describedby': describedBy,\n  ...rest\n}: SelectProps) {\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n  return (\n    <Field\n      id={id}\n      invalid={invalid}\n      disabled={Boolean(disabled)}\n      required={Boolean(required)}\n      className={classes(styles.field, className)}\n      data-size={size}\n    >\n      <Field.Label>{label}</Field.Label>\n      <span className={styles.control}>\n        <Field.Control aria-describedby={describedBy}>\n          <select {...rest} ref={ref} className={styles.select}>\n            {placeholder !== undefined && (\n              <option value=\"\" disabled={required}>\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </select>\n        </Field.Control>\n      </span>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nSelect.displayName = 'Select';\n"]}

package/dist/combobox.css

@@ -272,6 +272,9 @@
   .Combobox_list {
     box-shadow: var(--combobox-popover-shadow);
   }
+  .Combobox_popover .Combobox_list {
+    background-color: var(--combobox-popover-bg);
+  }
   @keyframes Combobox_fade {
     from {
       opacity: 0;

package/dist/combobox.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/combobox/Combobox.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token (--combobox-*); the options read --listbox-*. Size\n * and invalid state resolve into private custom properties on the root. The\n * popover is positioned by React Aria; the gap to the control is its own\n * padding, so no offset number lives in code, and --trigger-width (set by\n * the vendor) makes it as wide as the control.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--combobox-height-md);\n    --_font-size: var(--combobox-font-size-md);\n    --_border: var(--combobox-border-default);\n\n    font-family: var(--combobox-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--combobox-height-sm);\n      --_font-size: var(--combobox-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--combobox-height-lg);\n      --_font-size: var(--combobox-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--combobox-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n  }\n\n  .input {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--combobox-padding-inline) var(--combobox-icon-size);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--combobox-radius);\n    background-color: var(--combobox-bg);\n    color: var(--combobox-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--combobox-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--combobox-placeholder);\n    }\n\n    &[data-focused] {\n      border-color: var(--combobox-border-focus);\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: var(--combobox-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focused], [data-disabled]) {\n      border-color: var(--combobox-border-hover);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--combobox-icon-size);\n    block-size: var(--_height);\n    padding: 0;\n    border: none;\n    border-radius: var(--combobox-radius);\n    background-color: transparent;\n    color: var(--combobox-icon);\n    justify-self: end;\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: calc(-1 * var(--combobox-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--combobox-gap);\n    animation: fade var(--combobox-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--combobox-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--combobox-popover-shadow);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","spinner","ring","spin","root","control","input","button","popover","list","fade"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/combobox/Combobox.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token (--combobox-*); the options read --listbox-*. Size\n * and invalid state resolve into private custom properties on the root. The\n * popover is positioned by React Aria; the gap to the control is its own\n * padding, so no offset number lives in code, and --trigger-width (set by\n * the vendor) makes it as wide as the control.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--combobox-height-md);\n    --_font-size: var(--combobox-font-size-md);\n    --_border: var(--combobox-border-default);\n\n    font-family: var(--combobox-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--combobox-height-sm);\n      --_font-size: var(--combobox-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--combobox-height-lg);\n      --_font-size: var(--combobox-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--combobox-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n  }\n\n  .input {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--combobox-padding-inline) var(--combobox-icon-size);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--combobox-radius);\n    background-color: var(--combobox-bg);\n    color: var(--combobox-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--combobox-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--combobox-placeholder);\n    }\n\n    &[data-focused] {\n      border-color: var(--combobox-border-focus);\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: var(--combobox-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focused], [data-disabled]) {\n      border-color: var(--combobox-border-hover);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--combobox-icon-size);\n    block-size: var(--_height);\n    padding: 0;\n    border: none;\n    border-radius: var(--combobox-radius);\n    background-color: transparent;\n    color: var(--combobox-icon);\n    justify-self: end;\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);\n      outline-offset: calc(-1 * var(--combobox-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--combobox-gap);\n    animation: fade var(--combobox-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--combobox-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--combobox-popover-shadow);\n  }\n\n  /* The shared list styles paint an inline Listbox's surface; here the list floats. Two classes, so it wins whatever the stylesheet order. */\n  .popover .list {\n    background-color: var(--combobox-popover-bg);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","spinner","ring","spin","root","control","input","button","popover","list","fade"]}

package/dist/combobox.js

@@ -1,9 +1,9 @@
-export { Combobox } from './chunk-NOUUOH4R.js';
+"use client";export { Combobox } from './chunk-WDIFWMKE.js';
 import './chunk-ZL5MMRLG.js';
 import './chunk-IB5UUE3S.js';
-import './chunk-EDTA65L5.js';
 import './chunk-IRNTXAA7.js';
 import './chunk-DGIXNUNI.js';
+import './chunk-EDTA65L5.js';
 import './chunk-O5LII5XP.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=combobox.js.map