@pearpages/pulp-react 0.0.0

package/dist/chunk-XDVS7HX7.js

@@ -0,0 +1,100 @@
+import { Field, useField } from './chunk-2PXTVZ7H.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { createContext, useId, useState, useCallback, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/radio/Radio.module.css
+var Radio_default = {
+  group: "Radio_group",
+  items: "Radio_items",
+  radio: "Radio_radio",
+  label: "Radio_label",
+  input: "Radio_input"
+};
+var RadioGroupContext = createContext(null);
+function RadioGroup({
+  label,
+  description,
+  error,
+  name,
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical",
+  size = "md",
+  disabled = false,
+  required = false,
+  id,
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  const autoName = useId();
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const controlled = value !== void 0;
+  const current = controlled ? value : uncontrolled;
+  const setValue = useCallback(
+    (next) => {
+      if (!controlled) setUncontrolled(next);
+      onValueChange?.(next);
+    },
+    [controlled, onValueChange]
+  );
+  const invalid = error !== void 0 && error !== null && error !== false && error !== "";
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { name: name ?? autoName, value: current, setValue, size }, children: /* @__PURE__ */ jsxs(Field, { id, invalid, disabled, required, className: classes(Radio_default.group, className), "data-size": size, children: [
+    /* @__PURE__ */ jsx(Field.Label, { as: "span", children: label }),
+    /* @__PURE__ */ jsx(RadioGroupItems, { ...rest, ref, orientation, children }),
+    description && /* @__PURE__ */ jsx(Field.Description, { children: description }),
+    invalid && /* @__PURE__ */ jsx(Field.Error, { children: error })
+  ] }) });
+}
+function RadioGroupItems({ orientation, className, ref, children, ...rest }) {
+  const field = useField();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      id: field.id,
+      role: "radiogroup",
+      "aria-labelledby": field.labelId,
+      "aria-describedby": field.describedBy,
+      "aria-invalid": field.invalid || void 0,
+      "aria-required": field.required || void 0,
+      className: classes(Radio_default.items, className),
+      "data-orientation": orientation,
+      children
+    }
+  );
+}
+function Radio({ value, label, disabled, className, ref, ...rest }) {
+  const group = useContext(RadioGroupContext);
+  const field = useField();
+  if (!group) throw new Error("Radio must be rendered inside <RadioGroup>");
+  const checked = group.value === value;
+  return /* @__PURE__ */ jsxs("label", { className: classes(Radio_default.radio, className), "data-checked": checked ? "" : void 0, "data-disabled": disabled || field.disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        ref,
+        type: "radio",
+        className: Radio_default.input,
+        name: group.name,
+        value,
+        checked,
+        onChange: () => group.setValue(value),
+        disabled: disabled || field.disabled,
+        required: field.required
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: Radio_default.label, children: label })
+  ] });
+}
+RadioGroup.displayName = "RadioGroup";
+Radio.displayName = "Radio";
+
+export { Radio, RadioGroup };
+//# sourceMappingURL=chunk-XDVS7HX7.js.map
+//# sourceMappingURL=chunk-XDVS7HX7.js.map

package/dist/chunk-XDVS7HX7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/Radio.module.css","../src/radio/Radio.tsx"],"names":["group","items","radio","label","input"],"mappings":"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","file":"chunk-XDVS7HX7.js","sourcesContent":["/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer components {\n  .group {\n    --_size: var(--radio-size-md);\n    --_border: var(--radio-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n    &[data-invalid] { --_border: var(--radio-border-invalid); }\n  }\n\n  .items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--radio-group-gap);\n\n    &[data-orientation=\"horizontal\"] {\n      flex-flow: row wrap;\n      gap: var(--radio-group-gap) var(--space-4);\n    }\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--radio-gap);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    color: var(--field-label-fg);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--radio-radius);\n    background-color: var(--radio-bg);\n    appearance: none;\n    cursor: inherit;\n    transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) / 2);\n      block-size: calc(var(--_size) / 2);\n      border-radius: var(--radio-radius);\n      background-color: var(--radio-dot);\n      scale: 0;\n      transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      border-color: var(--radio-border-checked);\n\n      &::after {\n        scale: 1;\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n      outline-offset: var(--radio-focus-ring-offset);\n    }\n\n    &:disabled {\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      border-color: var(--radio-border-hover);\n    }\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { Field, useField } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Radio.module.css';\n\nexport type RadioSize = 'sm' | 'md' | 'lg';\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\ninterface RadioGroupContextValue {\n  name: string;\n  value: string | undefined;\n  setValue: (value: string) => void;\n  size: RadioSize;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  /** Visible group label. */\n  label: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  /** Form field name shared by the radios. Generated when omitted. */\n  name?: string;\n  /** Controlled selected value. */\n  value?: string;\n  /** Initially selected value when uncontrolled. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** @default 'vertical' */\n  orientation?: RadioGroupOrientation;\n  /** @default 'md' */\n  size?: RadioSize;\n  disabled?: boolean;\n  required?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * A set of native radios under one label. The group is labelled by\n * reference (`aria-labelledby`) and described through Field, so description\n * and error apply to the whole set. Keyboard is the browser's own: arrows\n * move and select within the group. Controlled or uncontrolled by `value`.\n *\n * @status stable\n * @category Forms\n * @accessibility A `radiogroup` labelled by reference through Field and described by its description and error. Native radios: arrows move and select within the group, Tab leaves it.\n * @do Use it for two to five exclusive options that should all be visible.\n * @dont Preselect a consequential choice; leave the group empty and mark it required.\n */\nexport function RadioGroup({\n  label,\n  description,\n  error,\n  name,\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  size = 'md',\n  disabled = false,\n  required = false,\n  id,\n  className,\n  ref,\n  children,\n  ...rest\n}: RadioGroupProps) {\n  const autoName = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : uncontrolled;\n  const setValue = useCallback(\n    (next: string) => {\n      if (!controlled) setUncontrolled(next);\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n\n  return (\n    <RadioGroupContext.Provider value={{ name: name ?? autoName, value: current, setValue, size }}>\n      <Field id={id} invalid={invalid} disabled={disabled} required={required} className={classes(styles.group, className)} data-size={size}>\n        <Field.Label as=\"span\">{label}</Field.Label>\n        <RadioGroupItems {...rest} ref={ref} orientation={orientation}>\n          {children}\n        </RadioGroupItems>\n        {description && <Field.Description>{description}</Field.Description>}\n        {invalid && <Field.Error>{error}</Field.Error>}\n      </Field>\n    </RadioGroupContext.Provider>\n  );\n}\n\ninterface RadioGroupItemsProps extends HTMLAttributes<HTMLDivElement> {\n  orientation: RadioGroupOrientation;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction RadioGroupItems({ orientation, className, ref, children, ...rest }: RadioGroupItemsProps) {\n  const field = useField();\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      id={field.id}\n      role=\"radiogroup\"\n      aria-labelledby={field.labelId}\n      aria-describedby={field.describedBy}\n      aria-invalid={field.invalid || undefined}\n      aria-required={field.required || undefined}\n      className={classes(styles.items, className)}\n      data-orientation={orientation}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface RadioProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'onChange'> {\n  /** The value this radio contributes to the group. */\n  value: string;\n  /** Visible label beside the radio. */\n  label: ReactNode;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Applied to the wrapping label, not the input. */\n  className?: string;\n}\n\n/** One option of a RadioGroup. Must be rendered inside `RadioGroup`. */\n/**\n * One option of a RadioGroup: a native radio with its own visible label.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `input type=\"radio\"` labelled by its visible text; the group semantics, description and error come from RadioGroup.\n * @do Render it only inside RadioGroup.\n * @dont Disable a single radio without saying why in its label or the group description.\n */\nexport function Radio({ value, label, disabled, className, ref, ...rest }: RadioProps) {\n  const group = useContext(RadioGroupContext);\n  const field = useField();\n  if (!group) throw new Error('Radio must be rendered inside <RadioGroup>');\n  const checked = group.value === value;\n  return (\n    <label className={classes(styles.radio, className)} data-checked={checked ? '' : undefined} data-disabled={disabled || field.disabled ? '' : undefined}>\n      <input\n        {...rest}\n        ref={ref}\n        type=\"radio\"\n        className={styles.input}\n        name={group.name}\n        value={value}\n        checked={checked}\n        onChange={() => group.setValue(value)}\n        disabled={disabled || field.disabled}\n        required={field.required}\n      />\n      <span className={styles.label}>{label}</span>\n    </label>\n  );\n}\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"]}

package/dist/chunk-Y4TZA77G.js

@@ -0,0 +1,57 @@
+import { useFloatingPosition } from './chunk-U6QRAD73.js';
+import { renderAsChild } from './chunk-ZVDN3GRI.js';
+import { useId, useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/tooltip/Tooltip.module.css
+var Tooltip_default = {
+  tooltip: "Tooltip_tooltip"};
+function Tooltip({ content, placement = "top", delay = 300, children }) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const timer = useRef(void 0);
+  const { refs, positionStyle, placement: resolved } = useFloatingPosition({ open, placement });
+  const show = useCallback(
+    (wait) => {
+      clearTimeout(timer.current);
+      if (wait === 0) setOpen(true);
+      else timer.current = setTimeout(() => setOpen(true), wait);
+    },
+    []
+  );
+  const hide = useCallback(() => {
+    clearTimeout(timer.current);
+    setOpen(false);
+  }, []);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, hide]);
+  const trigger = renderAsChild("Tooltip", children, {
+    ref: refs.setReference,
+    onMouseEnter: () => show(delay),
+    onMouseLeave: hide,
+    onFocus: () => show(0),
+    onBlur: hide,
+    "aria-describedby": open ? id : void 0
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    open && createPortal(
+      // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts
+      /* @__PURE__ */ jsx("div", { ref: refs.setFloating, id, role: "tooltip", className: Tooltip_default.tooltip, "data-placement": resolved, style: positionStyle, children: content }),
+      document.body
+    )
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };
+//# sourceMappingURL=chunk-Y4TZA77G.js.map
+//# sourceMappingURL=chunk-Y4TZA77G.js.map

package/dist/chunk-Y4TZA77G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/Tooltip.module.css","../src/tooltip/Tooltip.tsx"],"names":["tooltip"],"mappings":";;;;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAGG,OAAA,EAAAA,iBAkBY,CAAA;ACUR,SAAS,OAAA,CAAQ,EAAE,OAAA,EAAS,SAAA,GAAY,OAAO,KAAA,GAAQ,GAAA,EAAK,UAAS,EAAiB;AAC3F,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,OAAsC,MAAS,CAAA;AAC7D,EAAA,MAAM,EAAE,IAAA,EAAM,aAAA,EAAe,SAAA,EAAW,QAAA,KAAa,mBAAA,CAAoB,EAAE,IAAA,EAAM,SAAA,EAAW,CAAA;AAE5F,EAAA,MAAM,IAAA,GAAO,WAAA;AAAA,IACX,CAAC,IAAA,KAAiB;AAChB,MAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,MAAA,IAAI,IAAA,KAAS,CAAA,EAAG,OAAA,CAAQ,IAAI,CAAA;AAAA,iBACjB,OAAA,GAAU,UAAA,CAAW,MAAM,OAAA,CAAQ,IAAI,GAAG,IAAI,CAAA;AAAA,IAC3D,CAAA;AAAA,IACA;AAAC,GACH;AACA,EAAA,MAAM,IAAA,GAAO,YAAY,MAAM;AAC7B,IAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM,MAAM,YAAA,CAAa,MAAM,OAAO,CAAA,EAAG,EAAE,CAAA;AACrD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,QAAA,EAAU,IAAA,EAAK;AAAA,IACnC,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,SAAS,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAIf,EAAA,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,QAAA,EAAU;AAAA,IACjD,KAAK,IAAA,CAAK,YAAA;AAAA,IACV,YAAA,EAAc,MAAM,IAAA,CAAK,KAAK,CAAA;AAAA,IAC9B,YAAA,EAAc,IAAA;AAAA,IACd,OAAA,EAAS,MAAM,IAAA,CAAK,CAAC,CAAA;AAAA,IACrB,MAAA,EAAQ,IAAA;AAAA,IACR,kBAAA,EAAoB,OAAO,EAAA,GAAK;AAAA,GACjC,CAAA;AAED,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA,IACC,YAAA;AAAA;AAAA,sBAEE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,IAAA,CAAK,aAAa,EAAA,EAAQ,IAAA,EAAK,SAAA,EAAU,SAAA,EAAW,gBAAO,OAAA,EAAS,gBAAA,EAAgB,QAAA,EAAU,KAAA,EAAO,eAC5G,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,MACA,QAAA,CAAS;AAAA;AACX,GAAA,EACJ,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-Y4TZA77G.js","sourcesContent":["/* Every value is a token (--tooltip-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .tooltip {\n    --_gap: var(--tooltip-gap);\n\n    position: fixed;\n    z-index: var(--tooltip-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    max-inline-size: var(--tooltip-max-width);\n    padding-block: var(--tooltip-padding-block);\n    padding-inline: var(--tooltip-padding-inline);\n    border-radius: var(--tooltip-radius);\n    background-color: var(--tooltip-bg);\n    color: var(--tooltip-fg);\n    font-family: var(--font-family-body);\n    font-size: var(--tooltip-font-size);\n    line-height: var(--font-line-height-normal);\n    box-shadow: var(--tooltip-shadow);\n    pointer-events: none;\n    animation: fade var(--tooltip-duration) var(--motion-easing-standard);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .tooltip {\n      animation: none;\n    }\n  }\n}\n","import { useCallback, useEffect, useId, useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderAsChild } from '../internal/asChild';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport styles from './Tooltip.module.css';\n\nexport type TooltipPlacement = FloatingPlacement;\n\nexport interface TooltipProps {\n  /** The tooltip text. Supplementary only: it must not be the control's only name. */\n  content: ReactNode;\n  /** Preferred side; flips when there is no room. @default 'top' */\n  placement?: TooltipPlacement;\n  /** Hover delay in milliseconds. Focus shows immediately. @default 300 */\n  delay?: number;\n  /** The single element that owns the tooltip; it receives the hover, focus and `aria-describedby` wiring. */\n  children: ReactElement;\n}\n\n/**\n * A short description shown on hover or focus and linked with\n * `aria-describedby` while visible. Never the only name of a control: use it\n * for extra detail, and give icon-only controls a real label. Escape hides it.\n *\n * @status stable\n * @category Overlays\n * @accessibility Shown on hover after a delay and on focus immediately; the trigger gets `aria-describedby` pointing at the `tooltip` while it is visible; Escape hides it. It is a description, never a name.\n * @do Use it for extra detail on controls that already have a name.\n * @dont Put interactive content in it.\n * Use it to name an icon-only control; use IconButton's `label`.\n */\nexport function Tooltip({ content, placement = 'top', delay = 300, children }: TooltipProps) {\n  const id = useId();\n  const [open, setOpen] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const { refs, positionStyle, placement: resolved } = useFloatingPosition({ open, placement });\n\n  const show = useCallback(\n    (wait: number) => {\n      clearTimeout(timer.current);\n      if (wait === 0) setOpen(true);\n      else timer.current = setTimeout(() => setOpen(true), wait);\n    },\n    [],\n  );\n  const hide = useCallback(() => {\n    clearTimeout(timer.current);\n    setOpen(false);\n  }, []);\n\n  useEffect(() => () => clearTimeout(timer.current), []);\n  useEffect(() => {\n    if (!open) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') hide();\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [open, hide]);\n\n  // The helper merges these handlers with the child's own and forwards the ref.\n  // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n  const trigger = renderAsChild('Tooltip', children, {\n    ref: refs.setReference,\n    onMouseEnter: () => show(delay),\n    onMouseLeave: hide,\n    onFocus: () => show(0),\n    onBlur: hide,\n    'aria-describedby': open ? id : undefined,\n  });\n\n  return (\n    <>\n      {trigger}\n      {open &&\n        createPortal(\n          // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n          <div ref={refs.setFloating} id={id} role=\"tooltip\" className={styles.tooltip} data-placement={resolved} style={positionStyle}>\n            {content}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nTooltip.displayName = 'Tooltip';\n"]}

package/dist/chunk-YUHS5S5Y.js

@@ -0,0 +1,12 @@
+// src/internal/AriaField.module.css
+var AriaField_default = {
+  field: "AriaField_field",
+  label: "AriaField_label",
+  required: "AriaField_required",
+  description: "AriaField_description",
+  error: "AriaField_error"
+};
+
+export { AriaField_default };
+//# sourceMappingURL=chunk-YUHS5S5Y.js.map
+//# sourceMappingURL=chunk-YUHS5S5Y.js.map

package/dist/chunk-YUHS5S5Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/AriaField.module.css"],"names":["field","label","required","description","error"],"mappings":";AAAA,IAAA,iBAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,iBAAAA;AAAA,EAOA,KAAA,EAAAC,iBAAAA;AAAA,EAMA,QAAA,EAAAC,oBAAAA;AAAA,EAKA,WAAA,EAAAC,uBAAAA;AAAA,EAMA,KAAA,EAAAC;AAAA","file":"chunk-YUHS5S5Y.js","sourcesContent":["/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\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"]}

package/dist/chunk-Z4PN6B2C.js

@@ -0,0 +1,17 @@
+import { classes } from './chunk-MI4QUKQS.js';
+import { createElement } from 'react';
+
+// src/visually-hidden/VisuallyHidden.module.css
+var VisuallyHidden_default = {
+  root: "VisuallyHidden_root"
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+function VisuallyHidden({ as = "span", className, ref, children, ...rest }) {
+  return createElement(as, { ...rest, ref, className: classes(VisuallyHidden_default.root, className) }, children);
+}
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden };
+//# sourceMappingURL=chunk-Z4PN6B2C.js.map
+//# sourceMappingURL=chunk-Z4PN6B2C.js.map

package/dist/chunk-Z4PN6B2C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/visually-hidden/VisuallyHidden.tsx"],"names":["root"],"mappings":";;;;AAAA,IAAA,sBAAA,GAAA;AAAA,EAGG,IAAA,EAAAA;AAAA,CAAA;;;ACoBI,SAAS,cAAA,CAAe,EAAE,EAAA,GAAK,MAAA,EAAQ,WAAW,GAAA,EAAK,QAAA,EAAU,GAAG,IAAA,EAAK,EAAwB;AACtG,EAAA,OAAO,aAAA,CAAc,EAAA,EAAI,EAAE,GAAG,IAAA,EAAM,GAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,sBAAA,CAAO,IAAA,EAAM,SAAS,CAAA,IAAK,QAAQ,CAAA;AACjG;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"chunk-Z4PN6B2C.js","sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\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","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './VisuallyHidden.module.css';\n\nexport interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {\n  /** @default 'span' */\n  as?: 'span' | 'div';\n  ref?: Ref<HTMLElement>;\n  children: ReactNode;\n}\n\n/**\n * Content for assistive technology only: read by screen readers, invisible\n * on screen, still in the accessibility tree (unlike `display: none`). Use\n * it to give icon-only controls a name or to add context a sighted user\n * gets from layout.\n *\n * @status stable\n * @category Utilities\n * @accessibility In the accessibility tree, out of the layout (clip-path, not `display: none`).\n * @do Use it for context a sighted user gets from layout (\"Sort by\", \"Step 2 of 4\").\n * @dont Hide instructions that sighted users also need.\n */\nexport function VisuallyHidden({ as = 'span', className, ref, children, ...rest }: VisuallyHiddenProps) {\n  return createElement(as, { ...rest, ref, className: classes(styles.root, className) }, children);\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden';\n"]}

package/dist/chunk-ZVDN3GRI.js

@@ -0,0 +1,49 @@
+import { isValidElement, cloneElement } from 'react';
+
+// src/internal/asChild.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && typeof ref === "object") {
+        ref.current = value;
+      }
+    }
+  };
+}
+function renderAsChild(displayName, children, props, options = {}) {
+  if (!isValidElement(children)) {
+    throw new Error(`${displayName}: asChild requires a single valid React element as children`);
+  }
+  const child = children;
+  const childProps = child.props;
+  const { ref, ...ours } = props;
+  const merged = { ...ours };
+  if (typeof props.className === "string" || typeof childProps.className === "string") {
+    merged.className = [childProps.className, props.className].filter(Boolean).join(" ");
+  }
+  for (const [key, handler] of Object.entries(ours)) {
+    if (!key.startsWith("on") || typeof handler !== "function") continue;
+    if (options.replace?.includes(key)) continue;
+    const theirs = childProps[key];
+    if (typeof theirs !== "function") continue;
+    merged[key] = (event, ...rest) => {
+      theirs(event, ...rest);
+      const prevented = event?.defaultPrevented;
+      if (!prevented) {
+        handler(event, ...rest);
+      }
+    };
+  }
+  if (ref) {
+    merged.ref = mergeRefs(ref, childProps.ref);
+  } else if (childProps.ref) {
+    merged.ref = childProps.ref;
+  }
+  return cloneElement(child, merged);
+}
+
+export { renderAsChild };
+//# sourceMappingURL=chunk-ZVDN3GRI.js.map
+//# sourceMappingURL=chunk-ZVDN3GRI.js.map

package/dist/chunk-ZVDN3GRI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/asChild.ts"],"names":[],"mappings":";;;AAQO,SAAS,aAAgB,IAAA,EAAyC;AACvE,EAAA,OAAO,CAAC,KAAA,KAAoB;AAC1B,IAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,MAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,QAAA,GAAA,CAAI,KAAK,CAAA;AAAA,MACX,CAAA,MAAA,IAAW,GAAA,IAAO,OAAO,GAAA,KAAQ,QAAA,EAAU;AACzC,QAAC,IAA8B,OAAA,GAAU,KAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CAAA;AACF;AA0BO,SAAS,cACd,WAAA,EACA,QAAA,EACA,KAAA,EACA,OAAA,GAA0B,EAAC,EACb;AACd,EAAA,IAAI,CAAC,cAAA,CAAe,QAAQ,CAAA,EAAG;AAC7B,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,EAAG,WAAW,CAAA,2DAAA,CAA6D,CAAA;AAAA,EAC7F;AAEA,EAAA,MAAM,KAAA,GAAQ,QAAA;AACd,EAAA,MAAM,aAAa,KAAA,CAAM,KAAA;AAEzB,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AACzB,EAAA,MAAM,MAAA,GAAuB,EAAE,GAAG,IAAA,EAAK;AAEvC,EAAA,IAAI,OAAO,KAAA,CAAM,SAAA,KAAc,YAAY,OAAO,UAAA,CAAW,cAAc,QAAA,EAAU;AACnF,IAAA,MAAA,CAAO,SAAA,GAAY,CAAC,UAAA,CAAW,SAAA,EAAW,KAAA,CAAM,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,EACrF;AAEA,EAAA,KAAA,MAAW,CAAC,GAAA,EAAK,OAAO,KAAK,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA,EAAG;AACjD,IAAA,IAAI,CAAC,GAAA,CAAI,UAAA,CAAW,IAAI,CAAA,IAAK,OAAO,YAAY,UAAA,EAAY;AAC5D,IAAA,IAAI,OAAA,CAAQ,OAAA,EAAS,QAAA,CAAS,GAAG,CAAA,EAAG;AACpC,IAAA,MAAM,MAAA,GAAS,WAAW,GAAG,CAAA;AAC7B,IAAA,IAAI,OAAO,WAAW,UAAA,EAAY;AAElC,IAAA,MAAA,CAAO,GAAG,CAAA,GAAI,CAAC,KAAA,EAAA,GAAmB,IAAA,KAAoB;AACpD,MAAC,MAAA,CAAwC,KAAA,EAAO,GAAG,IAAI,CAAA;AACvD,MAAA,MAAM,YAAa,KAAA,EAAiD,gBAAA;AACpE,MAAA,IAAI,CAAC,SAAA,EAAW;AACd,QAAC,OAAA,CAAyC,KAAA,EAAO,GAAG,IAAI,CAAA;AAAA,MAC1D;AAAA,IACF,CAAA;AAAA,EACF;AAEA,EAAA,IAAI,GAAA,EAAK;AACP,IAAA,MAAA,CAAO,GAAA,GAAM,SAAA,CAAU,GAAA,EAAK,UAAA,CAAW,GAAG,CAAA;AAAA,EAC5C,CAAA,MAAA,IAAW,WAAW,GAAA,EAAK;AACzB,IAAA,MAAA,CAAO,MAAM,UAAA,CAAW,GAAA;AAAA,EAC1B;AAEA,EAAA,OAAO,YAAA,CAAa,OAAO,MAAM,CAAA;AACnC","file":"chunk-ZVDN3GRI.js","sourcesContent":["import { cloneElement, isValidElement, type ReactElement, type ReactNode, type Ref } from 'react';\n\ntype UnknownProps = Record<string, unknown>;\n\n/**\n * Compose two refs into one, so a subcomponent can attach its own ref to a\n * child that already carries the consumer's.\n */\nexport function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): Ref<T> {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref && typeof ref === 'object') {\n        (ref as { current: T | null }).current = value;\n      }\n    }\n  };\n}\n\n/**\n * Shared implementation of the `asChild` pattern.\n *\n * Renders `children` in place of the component's own element, merging our props\n * into it rather than replacing them:\n *\n * - `className` is concatenated, the child's first.\n * - Every `on*` handler is composed: the child's runs first, and ours is skipped\n *   if the child called `preventDefault()`. Passing an `onClick` to the child\n *   therefore augments the behaviour instead of silently replacing it. Handlers\n *   listed in `options.replace` are the exception: ours replaces the child's.\n * - Refs are merged, so a component that needs its own ref does not clobber one\n *   the consumer supplied.\n *\n * @param displayName Used in the error message, e.g. 'Modal.Body'.\n */\nexport interface AsChildOptions {\n  /**\n   * Handlers that replace the child's instead of composing with it. Used when\n   * the control is inert: a disabled control must not run the child's handler.\n   */\n  replace?: readonly string[];\n}\n\nexport function renderAsChild(\n  displayName: string,\n  children: ReactNode,\n  props: UnknownProps,\n  options: AsChildOptions = {},\n): ReactElement {\n  if (!isValidElement(children)) {\n    throw new Error(`${displayName}: asChild requires a single valid React element as children`);\n  }\n\n  const child = children as ReactElement<UnknownProps & { ref?: Ref<unknown> }>;\n  const childProps = child.props;\n  // `ref` travels inside props (React 19) and is merged, never read.\n  const { ref, ...ours } = props as UnknownProps & { ref?: Ref<unknown> };\n  const merged: UnknownProps = { ...ours };\n\n  if (typeof props.className === 'string' || typeof childProps.className === 'string') {\n    merged.className = [childProps.className, props.className].filter(Boolean).join(' ');\n  }\n\n  for (const [key, handler] of Object.entries(ours)) {\n    if (!key.startsWith('on') || typeof handler !== 'function') continue;\n    if (options.replace?.includes(key)) continue;\n    const theirs = childProps[key];\n    if (typeof theirs !== 'function') continue;\n\n    merged[key] = (event: unknown, ...rest: unknown[]) => {\n      (theirs as (...args: unknown[]) => void)(event, ...rest);\n      const prevented = (event as { defaultPrevented?: boolean } | null)?.defaultPrevented;\n      if (!prevented) {\n        (handler as (...args: unknown[]) => void)(event, ...rest);\n      }\n    };\n  }\n\n  if (ref) {\n    merged.ref = mergeRefs(ref, childProps.ref);\n  } else if (childProps.ref) {\n    merged.ref = childProps.ref;\n  }\n\n  return cloneElement(child, merged);\n}\n"]}

package/dist/combobox.css

@@ -0,0 +1,280 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+
+/* src/internal/AriaField.module.css */
+@layer components {
+  .AriaField_field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+    font-family: var(--font-family-body);
+  }
+  .AriaField_label {
+    font-size: var(--field-label-font-size);
+    font-weight: var(--field-label-font-weight);
+    color: var(--field-label-fg);
+  }
+  .AriaField_required {
+    margin-inline-start: var(--field-required-gap);
+    color: var(--field-required-fg);
+  }
+  .AriaField_description {
+    margin: 0;
+    font-size: var(--field-description-font-size);
+    color: var(--field-description-fg);
+  }
+  .AriaField_error {
+    margin: 0;
+    font-size: var(--field-error-font-size);
+    color: var(--field-error-fg);
+  }
+}
+
+/* src/listbox/Listbox.module.css */
+@layer components {
+  .Listbox_list {
+    display: flex;
+    flex-direction: column;
+    max-block-size: var(--listbox-max-height);
+    padding: var(--listbox-padding);
+    overflow: auto;
+    border: var(--size-hairline) solid var(--listbox-border);
+    border-radius: var(--listbox-radius);
+    background-color: var(--listbox-bg);
+    color: var(--listbox-fg);
+    font-family: var(--listbox-font-family);
+    font-size: var(--listbox-font-size);
+    outline: none;
+    &[data-focus-visible] {
+      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);
+      outline-offset: var(--listbox-focus-ring-offset);
+    }
+  }
+  .Listbox_check {
+    flex: none;
+    visibility: hidden;
+    color: var(--listbox-item-check);
+  }
+  .Listbox_item {
+    display: flex;
+    align-items: center;
+    gap: var(--listbox-item-gap);
+    padding-block: var(--listbox-item-padding-block);
+    padding-inline: var(--listbox-item-padding-inline);
+    border-radius: var(--listbox-item-radius);
+    color: var(--listbox-item-fg);
+    cursor: default;
+    outline: none;
+    &[data-hovered],
+    &[data-focused] {
+      background-color: var(--listbox-item-bg-focus);
+    }
+    &[data-selected] {
+      background-color: var(--listbox-item-bg-selected);
+      .Listbox_check {
+        visibility: visible;
+      }
+    }
+    &[data-disabled] {
+      color: var(--listbox-item-fg-disabled);
+      cursor: not-allowed;
+    }
+  }
+  .Listbox_itemBody {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  .Listbox_itemLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .Listbox_itemDescription {
+    color: var(--listbox-item-fg-muted);
+    font-size: var(--listbox-item-description-font-size);
+  }
+  .Listbox_empty {
+    padding: var(--listbox-empty-padding);
+    color: var(--listbox-empty-fg);
+  }
+}
+
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* src/spinner/Spinner.module.css */
+@layer components {
+  .Spinner_spinner {
+    --_size: var(--spinner-size-md);
+    --_track: var(--spinner-track);
+    --_indicator: var(--spinner-indicator);
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    vertical-align: middle;
+    &[data-size=sm] {
+      --_size: var(--spinner-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--spinner-size-lg);
+    }
+    &[data-size=inherit] {
+      --_size: 1em;
+    }
+    &[data-tone=inherit] {
+      --_track: transparent;
+      --_indicator: currentcolor;
+    }
+  }
+  .Spinner_ring {
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--spinner-width) solid var(--_track);
+    border-block-start-color: var(--_indicator);
+    border-radius: var(--radius-full);
+    animation: Spinner_spin var(--spinner-duration) linear infinite;
+  }
+  @keyframes Spinner_spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Spinner_ring {
+      animation: none;
+    }
+  }
+}
+
+/* src/combobox/Combobox.module.css */
+@layer components {
+  .Combobox_root {
+    --_height: var(--combobox-height-md);
+    --_font-size: var(--combobox-font-size-md);
+    --_border: var(--combobox-border-default);
+    font-family: var(--combobox-font-family);
+    &[data-size=sm] {
+      --_height: var(--combobox-height-sm);
+      --_font-size: var(--combobox-font-size-sm);
+    }
+    &[data-size=lg] {
+      --_height: var(--combobox-height-lg);
+      --_font-size: var(--combobox-font-size-lg);
+    }
+    &[data-invalid] {
+      --_border: var(--combobox-border-invalid);
+    }
+  }
+  .Combobox_control {
+    display: grid;
+    align-items: center;
+    & > * {
+      grid-area: 1 / 1;
+    }
+  }
+  .Combobox_input {
+    inline-size: 100%;
+    min-block-size: var(--_height);
+    padding-block: 0;
+    padding-inline: var(--combobox-padding-inline) var(--combobox-icon-size);
+    border: var(--size-hairline) solid var(--_border);
+    border-radius: var(--combobox-radius);
+    background-color: var(--combobox-bg);
+    color: var(--combobox-fg);
+    font-size: var(--_font-size);
+    transition: border-color var(--combobox-motion-duration) var(--motion-easing-standard);
+    &::placeholder {
+      color: var(--combobox-placeholder);
+    }
+    &[data-focused] {
+      border-color: var(--combobox-border-focus);
+      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);
+      outline-offset: var(--combobox-focus-ring-offset);
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-hovered]:not([data-focused], [data-disabled]) {
+      border-color: var(--combobox-border-hover);
+    }
+  }
+  .Combobox_button {
+    display: grid;
+    place-items: center;
+    inline-size: var(--combobox-icon-size);
+    block-size: var(--_height);
+    padding: 0;
+    border: none;
+    border-radius: var(--combobox-radius);
+    background-color: transparent;
+    color: var(--combobox-icon);
+    justify-self: end;
+    cursor: pointer;
+    &[data-focus-visible] {
+      outline: var(--combobox-focus-ring-width) solid var(--combobox-focus-ring);
+      outline-offset: calc(-1 * var(--combobox-focus-ring-width));
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  }
+  .Combobox_popover {
+    inline-size: var(--trigger-width);
+    padding-block-start: var(--combobox-gap);
+    animation: Combobox_fade var(--combobox-popover-duration) var(--motion-easing-standard);
+    &[data-placement=top] {
+      padding-block: 0 var(--combobox-gap);
+    }
+  }
+  .Combobox_list {
+    box-shadow: var(--combobox-popover-shadow);
+  }
+  @keyframes Combobox_fade {
+    from {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Combobox_popover {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=combobox.css.map */

package/dist/combobox.css.map

@@ -0,0 +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 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 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 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 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 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 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"]}