@pearpages/pulp-react 0.0.0

package/dist/chunk-P5C2U5ZF.js

@@ -0,0 +1,73 @@
+import { AriaField_default } from './chunk-YUHS5S5Y.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { Slider as Slider$1, Label, SliderOutput, SliderTrack, SliderFill, SliderThumb, Text } from 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/slider/Slider.module.css
+var Slider_default = {
+  root: "Slider_root",
+  header: "Slider_header",
+  hidden: "Slider_hidden",
+  output: "Slider_output",
+  track: "Slider_track",
+  rail: "Slider_rail",
+  fill: "Slider_fill",
+  thumb: "Slider_thumb"
+};
+function Slider({
+  label,
+  hideLabel = false,
+  description,
+  value,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  formatOptions,
+  thumbLabels = ["Minimum", "Maximum"],
+  showOutput = true,
+  orientation = "horizontal",
+  disabled = false,
+  name,
+  className,
+  ref
+}) {
+  const range = Array.isArray(value ?? defaultValue);
+  return /* @__PURE__ */ jsxs(
+    Slider$1,
+    {
+      ref,
+      className: classes(Slider_default.root, className),
+      "data-range": range ? "" : void 0,
+      value,
+      defaultValue: defaultValue ?? (range ? [min, max] : min),
+      onChange,
+      onChangeEnd,
+      minValue: min,
+      maxValue: max,
+      step,
+      formatOptions,
+      orientation,
+      isDisabled: disabled,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: Slider_default.header, children: [
+          /* @__PURE__ */ jsx(Label, { className: classes(AriaField_default.label, hideLabel && Slider_default.hidden), children: label }),
+          showOutput && /* @__PURE__ */ jsx(SliderOutput, { className: Slider_default.output })
+        ] }),
+        /* @__PURE__ */ jsxs(SliderTrack, { className: Slider_default.track, children: [
+          /* @__PURE__ */ jsx("span", { className: Slider_default.rail, "aria-hidden": "true", children: /* @__PURE__ */ jsx(SliderFill, { className: Slider_default.fill }) }),
+          /* @__PURE__ */ jsx(SliderThumb, { index: 0, className: Slider_default.thumb, "aria-label": range ? thumbLabels[0] : void 0, name }),
+          range && /* @__PURE__ */ jsx(SliderThumb, { index: 1, className: Slider_default.thumb, "aria-label": thumbLabels[1], name })
+        ] }),
+        description && /* @__PURE__ */ jsx(Text, { slot: "description", className: AriaField_default.description, children: description })
+      ]
+    }
+  );
+}
+Slider.displayName = "Slider";
+
+export { Slider };
+//# sourceMappingURL=chunk-P5C2U5ZF.js.map
+//# sourceMappingURL=chunk-P5C2U5ZF.js.map

package/dist/chunk-P5C2U5ZF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/Slider.module.css","../src/slider/Slider.tsx"],"names":["root","header","hidden","output","track","rail","fill","thumb","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderFill","AriaSliderThumb","AriaText"],"mappings":"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","file":"chunk-P5C2U5ZF.js","sourcesContent":["/*\n * Every value is a token (--slider-*); the label and description read\n * --field-*. React Aria positions the thumbs and the fill (its inline\n * values); the rail is the visible track inside a larger pointer target.\n * State: data-orientation and data-disabled on the root; data-dragging,\n * data-hovered, data-focus-visible on a thumb.\n */\n\n@layer components {\n  .root {\n    --_thumb: var(--slider-thumb-size);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--slider-gap);\n    inline-size: 100%;\n    font-family: var(--slider-font-family);\n\n    &[data-orientation=\"vertical\"] {\n      inline-size: auto;\n      block-size: var(--slider-track-length);\n    }\n\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--slider-gap);\n  }\n\n  .hidden {\n    position: absolute;\n    inline-size: var(--size-hairline);\n    block-size: var(--size-hairline);\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .output {\n    color: var(--slider-output-fg);\n    font-family: var(--slider-output-font-family);\n    font-size: var(--slider-output-font-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .track {\n    position: relative;\n    block-size: var(--slider-track-hit-size);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: var(--slider-track-hit-size);\n      block-size: 100%;\n    }\n  }\n\n  /* Disabled dims the track, not the label and output, so the text keeps its contrast. */\n  .root[data-disabled] .track {\n    opacity: 0.55;\n  }\n\n  .rail {\n    position: absolute;\n    inset-block-start: 50%;\n    inline-size: 100%;\n    block-size: var(--slider-track-size);\n    overflow: hidden;\n    border-radius: var(--slider-track-radius);\n    background-color: var(--slider-track-bg);\n    translate: 0 -50%;\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      inline-size: var(--slider-track-size);\n      block-size: 100%;\n      translate: -50% 0;\n    }\n  }\n\n  .fill {\n    position: absolute;\n    block-size: 100%;\n    background-color: var(--slider-fill);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: 100%;\n    }\n  }\n\n  .thumb {\n    inset-block-start: 50%;\n    inline-size: var(--_thumb);\n    block-size: var(--_thumb);\n    border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);\n    border-radius: var(--slider-thumb-radius);\n    background-color: var(--slider-thumb-bg);\n    box-shadow: var(--slider-thumb-shadow);\n    cursor: grab;\n    transition: border-color var(--slider-motion-duration) var(--motion-easing-standard);\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: auto;\n      inset-inline-start: 50%;\n    }\n\n    &[data-hovered],\n    &[data-dragging] {\n      border-color: var(--slider-thumb-border-hover);\n    }\n\n    &[data-dragging] {\n      cursor: grabbing;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--slider-focus-ring-width) solid var(--slider-focus-ring);\n      outline-offset: var(--slider-focus-ring-offset);\n    }\n  }\n}\n","import type { ReactNode, Ref } from 'react';\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderFill as AriaSliderFill,\n  SliderOutput as AriaSliderOutput,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  Text as AriaText,\n} from 'react-aria-components';\nimport { classes } from '../internal/classes';\nimport fieldStyles from '../internal/AriaField.module.css';\nimport styles from './Slider.module.css';\n\nexport type SliderValue = number | [number, number];\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\nexport interface SliderProps<T extends SliderValue = number> {\n  /** Visible label. Always rendered; `hideLabel` keeps it for assistive technology only. */\n  label: ReactNode;\n  /** @default false */\n  hideLabel?: boolean;\n  description?: ReactNode;\n  /** One number, or a `[start, end]` pair for a range with two thumbs. */\n  value?: T;\n  defaultValue?: T;\n  /** Called on every change while dragging or pressing arrows. */\n  onChange?: (value: T) => void;\n  /** Called once when the drag ends or the key is released. */\n  onChangeEnd?: (value: T) => void;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** @default 1 */\n  step?: number;\n  /** How the value reads in the output and to assistive technology, for instance `{ style: 'percent' }` or `{ style: 'currency', currency: 'EUR' }`. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** Names for the two thumbs of a range. @default ['Minimum', 'Maximum'] */\n  thumbLabels?: readonly [string, string];\n  /** Show the formatted value next to the label. @default true */\n  showOutput?: boolean;\n  /** @default 'horizontal' */\n  orientation?: SliderOrientation;\n  /** @default false */\n  disabled?: boolean;\n  /** Submitted with a form; a range submits two inputs with this name. */\n  name?: string;\n  className?: string;\n  /** The group element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Picks a number, or a range, on a track: React Aria's slider (decision\n * record 001) provides the hidden range inputs, arrow, Page Up/Down, Home and\n * End keys, drag with a thumb that stays under the pointer, and\n * `aria-valuetext` in the formatted form. The output element shows the\n * same text, so what a screen reader hears is what sighted users see.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label containing one hidden `input type=\"range\"` per thumb (named by `thumbLabels` for a range) with `aria-valuetext` in the formatted form; the `output` element shows the same text. Arrows step, Page Up/Down step by ten, Home/End jump; thumbs drag with mouse or touch.\n * @do Set `formatOptions` so the spoken value matches the unit (\"40%\", \"€200\").\n * Use `hideLabel` only when a visible heading already names it.\n * @dont Use it for precise values; provide a numeric field alongside.\n * Use a `step` so small the keyboard cannot reach the ends in reasonable time.\n */\nexport function Slider<T extends SliderValue = number>({\n  label,\n  hideLabel = false,\n  description,\n  value,\n  defaultValue,\n  onChange,\n  onChangeEnd,\n  min = 0,\n  max = 100,\n  step = 1,\n  formatOptions,\n  thumbLabels = ['Minimum', 'Maximum'],\n  showOutput = true,\n  orientation = 'horizontal',\n  disabled = false,\n  name,\n  className,\n  ref,\n}: SliderProps<T>) {\n  const range = Array.isArray(value ?? defaultValue);\n  return (\n    <AriaSlider\n      ref={ref}\n      className={classes(styles.root, className)}\n      data-range={range ? '' : undefined}\n      value={value as number | number[] | undefined}\n      defaultValue={(defaultValue ?? (range ? [min, max] : min)) as number | number[]}\n      onChange={onChange as ((value: number | number[]) => void) | undefined}\n      onChangeEnd={onChangeEnd as ((value: number | number[]) => void) | undefined}\n      minValue={min}\n      maxValue={max}\n      step={step}\n      formatOptions={formatOptions}\n      orientation={orientation}\n      isDisabled={disabled}\n    >\n      <div className={styles.header}>\n        <AriaLabel className={classes(fieldStyles.label, hideLabel && styles.hidden)}>{label}</AriaLabel>\n        {showOutput && <AriaSliderOutput className={styles.output} />}\n      </div>\n      <AriaSliderTrack className={styles.track}>\n        <span className={styles.rail} aria-hidden=\"true\">\n          <AriaSliderFill className={styles.fill} />\n        </span>\n        <AriaSliderThumb index={0} className={styles.thumb} aria-label={range ? thumbLabels[0] : undefined} name={name} />\n        {range && <AriaSliderThumb index={1} className={styles.thumb} aria-label={thumbLabels[1]} name={name} />}\n      </AriaSliderTrack>\n      {description && (\n        <AriaText slot=\"description\" className={fieldStyles.description}>\n          {description}\n        </AriaText>\n      )}\n    </AriaSlider>\n  );\n}\n\nSlider.displayName = 'Slider';\n"]}

package/dist/chunk-PM4YO67Q.js

@@ -0,0 +1,53 @@
+import { IconButton } from './chunk-FXRSZUDH.js';
+import { Icon } from './chunk-ASNTNTJW.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { Close, Warning, Check, Info } from '@pearpages/pulp-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/alert/Alert.module.css
+var Alert_default = {
+  alert: "Alert_alert",
+  icon: "Alert_icon",
+  body: "Alert_body",
+  title: "Alert_title",
+  content: "Alert_content",
+  action: "Alert_action",
+  dismiss: "Alert_dismiss"
+};
+var DEFAULT_ICON = {
+  info: /* @__PURE__ */ jsx(Info, {}),
+  success: /* @__PURE__ */ jsx(Check, {}),
+  warning: /* @__PURE__ */ jsx(Warning, {}),
+  error: /* @__PURE__ */ jsx(Warning, {})
+};
+function Alert({
+  tone = "info",
+  title,
+  icon,
+  action,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  live,
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  const mode = live ?? (tone === "error" ? "assertive" : "polite");
+  const role = mode === "off" ? void 0 : mode === "assertive" ? "alert" : "status";
+  const glyph = icon === void 0 ? DEFAULT_ICON[tone] : icon;
+  return /* @__PURE__ */ jsxs("div", { ...rest, ref, role, className: classes(Alert_default.alert, className), "data-tone": tone, children: [
+    glyph && /* @__PURE__ */ jsx(Icon, { size: "md", className: Alert_default.icon, children: glyph }),
+    /* @__PURE__ */ jsxs("div", { className: Alert_default.body, children: [
+      title && /* @__PURE__ */ jsx("p", { className: Alert_default.title, children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: Alert_default.content, children }),
+      action && /* @__PURE__ */ jsx("div", { className: Alert_default.action, children: action })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", label: dismissLabel, icon: /* @__PURE__ */ jsx(Close, {}), onClick: onDismiss, className: Alert_default.dismiss })
+  ] });
+}
+Alert.displayName = "Alert";
+
+export { Alert };
+//# sourceMappingURL=chunk-PM4YO67Q.js.map
+//# sourceMappingURL=chunk-PM4YO67Q.js.map

package/dist/chunk-PM4YO67Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/alert/Alert.module.css","../src/alert/Alert.tsx"],"names":["alert","icon","body","title","content","action","dismiss"],"mappings":";;;;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,aAAAA;AAAA,EAyCA,IAAA,EAAAC,YAAAA;AAAA,EAKA,IAAA,EAAAC,YAAAA;AAAA,EAQA,KAAA,EAAAC,aAAAA;AAAA,EAMA,OAAA,EAAAC,eAAAA;AAAA,EAIA,MAAA,EAAAC,cAAAA;AAAA,EAOA,OAAA,EAAAC;AAAA,CAAA;ACzCH,IAAM,YAAA,GAA6C;AAAA,EACjD,IAAA,sBAAO,IAAA,EAAA,EAAK,CAAA;AAAA,EACZ,OAAA,sBAAU,KAAA,EAAA,EAAM,CAAA;AAAA,EAChB,OAAA,sBAAU,OAAA,EAAA,EAAQ,CAAA;AAAA,EAClB,KAAA,sBAAQ,OAAA,EAAA,EAAQ;AAClB,CAAA;AAeO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,IAAA,GAAO,IAAA,KAAS,IAAA,KAAS,OAAA,GAAU,WAAA,GAAc,QAAA,CAAA;AACvD,EAAA,MAAM,OAAO,IAAA,KAAS,KAAA,GAAQ,MAAA,GAAY,IAAA,KAAS,cAAc,OAAA,GAAU,QAAA;AAC3E,EAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,MAAA,GAAY,YAAA,CAAa,IAAI,CAAA,GAAI,IAAA;AAExD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,GAAA,EAAU,IAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,CAAA,EAAG,aAAW,IAAA,EAC1F,QAAA,EAAA;AAAA,IAAA,KAAA,wBACE,IAAA,EAAA,EAAK,IAAA,EAAK,MAAK,SAAA,EAAW,aAAA,CAAO,MAC/B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,IAAA,EACpB,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,aAAA,CAAO,OAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC5C,4BAAY,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,SAAU,QAAA,EAAS,CAAA;AAAA,MACtD,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,CAAO,QAAS,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,6BACC,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,MAAK,IAAA,EAAK,KAAA,EAAO,YAAA,EAAc,IAAA,sBAAO,KAAA,EAAA,EAAM,CAAA,EAAI,SAAS,SAAA,EAAW,SAAA,EAAW,cAAO,OAAA,EAAS;AAAA,GAAA,EAE/H,CAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-PM4YO67Q.js","sourcesContent":["/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Check, Close, Info, Warning } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\nimport { classes } from '../internal/classes';\nimport styles from './Alert.module.css';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'error';\nexport type AlertLive = 'polite' | 'assertive' | 'off';\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** @default 'info' */\n  tone?: AlertTone;\n  title?: ReactNode;\n  /** Replaces the tone's default glyph; `null` shows none. */\n  icon?: ReactNode | null;\n  /** Buttons or links placed under the body. */\n  action?: ReactNode;\n  /** Renders a dismiss button that calls this. */\n  onDismiss?: () => void;\n  /** @default 'Dismiss' */\n  dismissLabel?: string;\n  /**\n   * How assistive technology announces it: `assertive` (`role=\"alert\"`),\n   * `polite` (`role=\"status\"`) or `off` (no live role, for content present at\n   * page load or inside another live region). Defaults to assertive for\n   * `error`, polite otherwise.\n   */\n  live?: AlertLive;\n  ref?: Ref<HTMLDivElement>;\n  children?: ReactNode;\n}\n\nconst DEFAULT_ICON: Record<AlertTone, ReactNode> = {\n  info: <Info />,\n  success: <Check />,\n  warning: <Warning />,\n  error: <Warning />,\n};\n\n/**\n * An inline message with a tone. Tint, accent and title colour come from\n * the status tokens; the body keeps the default text colour so long\n * messages stay readable. Toast renders one Alert per notification.\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"alert\"` for `tone=\"error\"` (assertive), `role=\"status\"` otherwise (polite); `live=\"off\"` opts out. The glyph is decorative; the tone is carried by the title and text, never by colour alone.\n * @do Give it a `title` when the body is more than one sentence.\n * Use `onDismiss` for messages the user can act on and clear.\n * @dont Announce errors through both an Alert and a Toast.\n * Use it as a page-level banner for marketing copy.\n */\nexport function Alert({\n  tone = 'info',\n  title,\n  icon,\n  action,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  live,\n  className,\n  ref,\n  children,\n  ...rest\n}: AlertProps) {\n  const mode = live ?? (tone === 'error' ? 'assertive' : 'polite');\n  const role = mode === 'off' ? undefined : mode === 'assertive' ? 'alert' : 'status';\n  const glyph = icon === undefined ? DEFAULT_ICON[tone] : icon;\n\n  return (\n    <div {...rest} ref={ref} role={role} className={classes(styles.alert, className)} data-tone={tone}>\n      {glyph && (\n        <Icon size=\"md\" className={styles.icon}>\n          {glyph}\n        </Icon>\n      )}\n      <div className={styles.body}>\n        {title && <p className={styles.title}>{title}</p>}\n        {children && <div className={styles.content}>{children}</div>}\n        {action && <div className={styles.action}>{action}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton variant=\"ghost\" size=\"sm\" label={dismissLabel} icon={<Close />} onClick={onDismiss} className={styles.dismiss} />\n      )}\n    </div>\n  );\n}\n\nAlert.displayName = 'Alert';\n"]}

package/dist/chunk-Q6J6BMSB.js

@@ -0,0 +1,86 @@
+import { Spinner } from './chunk-I4KC4V6A.js';
+import { isPresent, AriaFieldLabel, AriaFieldDescription, AriaFieldError, ariaFieldClass } from './chunk-4HRNRTXI.js';
+import { renderOption, renderEmpty, listClass } from './chunk-T76YSNTZ.js';
+import { Icon } from './chunk-ASNTNTJW.js';
+import { useFilter, ComboBox, Input, Button, Popover, ListBox } from 'react-aria-components';
+import { ChevronDown } from '@pearpages/pulp-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/combobox/Combobox.module.css
+var Combobox_default = {
+  root: "Combobox_root",
+  control: "Combobox_control",
+  input: "Combobox_input",
+  button: "Combobox_button",
+  popover: "Combobox_popover",
+  list: "Combobox_list"
+};
+function Combobox({
+  label,
+  description,
+  error,
+  items,
+  value,
+  defaultValue,
+  onChange,
+  inputValue,
+  defaultInputValue,
+  onInputChange,
+  filter = "contains",
+  loading = false,
+  emptyMessage = "No results",
+  loadingMessage = "Loading\u2026",
+  allowsCustomValue = false,
+  menuTrigger = "input",
+  placeholder,
+  size = "md",
+  required = false,
+  disabled = false,
+  readOnly = false,
+  name,
+  autoFocus,
+  className,
+  ref
+}) {
+  const { contains, startsWith } = useFilter({ sensitivity: "base" });
+  const invalid = isPresent(error);
+  const collection = filter === "none" ? { items } : { defaultItems: items, defaultFilter: filter === "startsWith" ? startsWith : contains };
+  return /* @__PURE__ */ jsxs(
+    ComboBox,
+    {
+      ...collection,
+      className: ariaFieldClass(Combobox_default.root, className),
+      "data-size": size,
+      "data-loading": loading ? "" : void 0,
+      selectedKey: value,
+      defaultSelectedKey: defaultValue,
+      onSelectionChange: (key) => onChange?.(key === null ? null : String(key)),
+      inputValue,
+      defaultInputValue,
+      onInputChange,
+      allowsCustomValue,
+      allowsEmptyCollection: true,
+      menuTrigger,
+      isRequired: required,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: invalid,
+      name,
+      children: [
+        /* @__PURE__ */ jsx(AriaFieldLabel, { required, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: Combobox_default.control, children: [
+          /* @__PURE__ */ jsx(Input, { ref, className: Combobox_default.input, placeholder, autoFocus }),
+          /* @__PURE__ */ jsx(Button, { className: Combobox_default.button, children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "inherit", tone: "inherit", decorative: true }) : /* @__PURE__ */ jsx(Icon, { size: "inherit", children: /* @__PURE__ */ jsx(ChevronDown, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx(AriaFieldDescription, { children: description }),
+        /* @__PURE__ */ jsx(AriaFieldError, { children: error }),
+        /* @__PURE__ */ jsx(Popover, { className: Combobox_default.popover, placement: "bottom start", children: /* @__PURE__ */ jsx(ListBox, { className: listClass(Combobox_default.list), renderEmptyState: () => renderEmpty(loading ? loadingMessage : emptyMessage), children: renderOption }) })
+      ]
+    }
+  );
+}
+Combobox.displayName = "Combobox";
+
+export { Combobox };
+//# sourceMappingURL=chunk-Q6J6BMSB.js.map
+//# sourceMappingURL=chunk-Q6J6BMSB.js.map

package/dist/chunk-Q6J6BMSB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/combobox/Combobox.module.css","../src/combobox/Combobox.tsx"],"names":["root","control","input","button","popover","list","AriaComboBox","AriaInput","AriaButton","AriaPopover","AriaListBox"],"mappings":"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","file":"chunk-Q6J6BMSB.js","sourcesContent":["/*\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","import type { ReactNode, Ref } from 'react';\nimport {\n  Button as AriaButton,\n  ComboBox as AriaComboBox,\n  Input as AriaInput,\n  ListBox as AriaListBox,\n  Popover as AriaPopover,\n  useFilter,\n} from 'react-aria-components';\nimport { ChevronDown } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { listClass, renderEmpty, renderOption, type ListboxItem } from '../listbox/ListboxOptions';\nimport { Spinner } from '../spinner';\nimport styles from './Combobox.module.css';\n\nexport type ComboboxItem = ListboxItem;\nexport type ComboboxSize = 'sm' | 'md' | 'lg';\n/** `contains` and `startsWith` filter `items` as the user types; `none` shows `items` as given (you filtered them, typically after a fetch). */\nexport type ComboboxFilter = 'contains' | 'startsWith' | 'none';\n\nexport interface ComboboxProps {\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  /** The options. With `filter=\"none\"` they are shown as given. */\n  items: readonly ComboboxItem[];\n  /** Selected id (controlled). `null` is \"nothing selected\". */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  /** The text in the input (controlled). Pair with `onInputChange` to fetch options as the user types. */\n  inputValue?: string;\n  defaultInputValue?: string;\n  onInputChange?: (text: string) => void;\n  /** @default 'contains' */\n  filter?: ComboboxFilter;\n  /** Keeps the list open with a spinner in the control while options load. @default false */\n  loading?: boolean;\n  /** Shown in the open list when no option matches. @default 'No results' */\n  emptyMessage?: ReactNode;\n  /** Announced while `loading`. @default 'Loading…' */\n  loadingMessage?: ReactNode;\n  /** Let the typed text stand as the value even when it matches no option. @default false */\n  allowsCustomValue?: boolean;\n  /** When the list opens: on focus, on typing, or only from the button and arrow keys. @default 'input' */\n  menuTrigger?: 'focus' | 'input' | 'manual';\n  placeholder?: string;\n  /** @default 'md' */\n  size?: ComboboxSize;\n  /** @default false */\n  required?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  readOnly?: boolean;\n  /** Submitted with a form: the selected id (or the text with `allowsCustomValue`). */\n  name?: string;\n  autoFocus?: boolean;\n  /** Applied to the field wrapper, not the input. */\n  className?: string;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A text input that suggests options as the user types, on React Aria's\n * combobox (decision record 001): the list is announced through\n * `aria-activedescendant`, arrows move, Enter selects, Escape closes and\n * then clears. Static lists filter themselves; for async options, control\n * `inputValue`, fetch, and pass the results with `filter=\"none\"` and\n * `loading` while they arrive. Options look the same as Listbox's.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `combobox` input with `aria-autocomplete=\"list\"`; the open list is a `listbox` announced through `aria-activedescendant`, so focus stays in the input. Arrows move, Enter selects, Escape closes and then clears. Loading and empty states are announced from inside the list.\n * @do Use `filter=\"none\"` with controlled `inputValue` for server-side search.\n * Keep `loading` true until the results for the current text arrive.\n * @dont Use it for fewer than five fixed options; use Picker or the native Select.\n * Set `menuTrigger=\"focus\"` on a long list; opening on every focus is noisy.\n */\nexport function Combobox({\n  label,\n  description,\n  error,\n  items,\n  value,\n  defaultValue,\n  onChange,\n  inputValue,\n  defaultInputValue,\n  onInputChange,\n  filter = 'contains',\n  loading = false,\n  emptyMessage = 'No results',\n  loadingMessage = 'Loading…',\n  allowsCustomValue = false,\n  menuTrigger = 'input',\n  placeholder,\n  size = 'md',\n  required = false,\n  disabled = false,\n  readOnly = false,\n  name,\n  autoFocus,\n  className,\n  ref,\n}: ComboboxProps) {\n  const { contains, startsWith } = useFilter({ sensitivity: 'base' });\n  const invalid = isPresent(error);\n  // `items` means \"already filtered\"; `defaultItems` lets React Aria filter.\n  const collection = filter === 'none' ? { items } : { defaultItems: items, defaultFilter: filter === 'startsWith' ? startsWith : contains };\n\n  return (\n    <AriaComboBox\n      {...collection}\n      className={ariaFieldClass(styles.root, className)}\n      data-size={size}\n      data-loading={loading ? '' : undefined}\n      selectedKey={value}\n      defaultSelectedKey={defaultValue}\n      onSelectionChange={(key) => onChange?.(key === null ? null : String(key))}\n      inputValue={inputValue}\n      defaultInputValue={defaultInputValue}\n      onInputChange={onInputChange}\n      allowsCustomValue={allowsCustomValue}\n      allowsEmptyCollection\n      menuTrigger={menuTrigger}\n      isRequired={required}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isInvalid={invalid}\n      name={name}\n    >\n      <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n      <div className={styles.control}>\n        <AriaInput ref={ref} className={styles.input} placeholder={placeholder} autoFocus={autoFocus} />\n        <AriaButton className={styles.button}>\n          {loading ? (\n            <Spinner size=\"inherit\" tone=\"inherit\" decorative />\n          ) : (\n            <Icon size=\"inherit\">\n              <ChevronDown />\n            </Icon>\n          )}\n        </AriaButton>\n      </div>\n      <AriaFieldDescription>{description}</AriaFieldDescription>\n      <AriaFieldError>{error}</AriaFieldError>\n      <AriaPopover className={styles.popover} placement=\"bottom start\">\n        <AriaListBox className={listClass(styles.list)} renderEmptyState={() => renderEmpty(loading ? loadingMessage : emptyMessage)}>\n          {renderOption}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaComboBox>\n  );\n}\n\nCombobox.displayName = 'Combobox';\n"]}

package/dist/chunk-T76YSNTZ.js

@@ -0,0 +1,33 @@
+import { Icon } from './chunk-ASNTNTJW.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { ListBoxItem, Text } from 'react-aria-components';
+import { Check } from '@pearpages/pulp-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/listbox/Listbox.module.css
+var Listbox_default = {
+  list: "Listbox_list",
+  check: "Listbox_check",
+  item: "Listbox_item",
+  itemBody: "Listbox_itemBody",
+  itemLabel: "Listbox_itemLabel",
+  itemDescription: "Listbox_itemDescription",
+  empty: "Listbox_empty"
+};
+function renderOption(item) {
+  return /* @__PURE__ */ jsxs(ListBoxItem, { id: item.id, textValue: item.label, isDisabled: item.disabled, className: Listbox_default.item, children: [
+    /* @__PURE__ */ jsx(Icon, { size: "inherit", className: Listbox_default.check, children: /* @__PURE__ */ jsx(Check, {}) }),
+    /* @__PURE__ */ jsxs("span", { className: Listbox_default.itemBody, children: [
+      /* @__PURE__ */ jsx(Text, { slot: "label", className: Listbox_default.itemLabel, children: item.label }),
+      item.description && /* @__PURE__ */ jsx(Text, { slot: "description", className: Listbox_default.itemDescription, children: item.description })
+    ] })
+  ] });
+}
+function renderEmpty(message) {
+  return /* @__PURE__ */ jsx("div", { className: Listbox_default.empty, children: message });
+}
+var listClass = (...extra) => classes(Listbox_default.list, ...extra);
+
+export { listClass, renderEmpty, renderOption };
+//# sourceMappingURL=chunk-T76YSNTZ.js.map
+//# sourceMappingURL=chunk-T76YSNTZ.js.map

package/dist/chunk-T76YSNTZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/listbox/Listbox.module.css","../src/listbox/ListboxOptions.tsx"],"names":["list","check","item","itemBody","itemLabel","itemDescription","empty","AriaListBoxItem","AriaText"],"mappings":";;;;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAQG,IAAA,EAAAA,cAAAA;AAAA,EAoBA,KAAA,EAAAC,eAAAA;AAAA,EAMA,IAAA,EAAAC,cAAAA;AAAA,EA8BA,QAAA,EAAAC,kBAAAA;AAAA,EAMA,SAAA,EAAAC,mBAAAA;AAAA,EAMA,eAAA,EAAAC,yBAAAA;AAAA,EAKA,KAAA,EAAAC;AAAA,CAAA;AC1DI,SAAS,aAAa,IAAA,EAAmB;AAC9C,EAAA,uBACE,IAAA,CAACC,WAAA,EAAA,EAAgB,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,KAAA,EAAO,UAAA,EAAY,IAAA,CAAK,QAAA,EAAU,SAAA,EAAW,gBAAO,IAAA,EAChG,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,SAAA,EAAU,SAAA,EAAW,gBAAO,KAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,SAAM,CAAA,EACT,CAAA;AAAA,oBACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,eAAA,CAAO,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAACC,QAAS,IAAA,EAAK,OAAA,EAAQ,WAAW,eAAA,CAAO,SAAA,EACtC,eAAK,KAAA,EACR,CAAA;AAAA,MACC,IAAA,CAAK,WAAA,oBACJ,GAAA,CAACA,IAAA,EAAA,EAAS,IAAA,EAAK,eAAc,SAAA,EAAW,eAAA,CAAO,eAAA,EAC5C,QAAA,EAAA,IAAA,CAAK,WAAA,EACR;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;AAEO,SAAS,YAAY,OAAA,EAAoB;AAC9C,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAA,CAAO,OAAQ,QAAA,EAAA,OAAA,EAAQ,CAAA;AAChD;AAGO,IAAM,YAAY,CAAA,GAAI,KAAA,KAAoD,QAAQ,eAAA,CAAO,IAAA,EAAM,GAAG,KAAK","file":"chunk-T76YSNTZ.js","sourcesContent":["/*\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","import type { ReactNode } from 'react';\nimport { ListBoxItem as AriaListBoxItem, Text as AriaText } from 'react-aria-components';\nimport { Check } from '@pearpages/pulp-icons';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './Listbox.module.css';\n\n/** One option. `id` is the value; `label` is what the user sees and types against. */\nexport interface ListboxItem {\n  id: string;\n  label: string;\n  /** A second, muted line under the label. */\n  description?: string;\n  /** @default false */\n  disabled?: boolean;\n}\n\n/**\n * The option renderer shared by Listbox, Combobox and Picker, so the three\n * agree on what an option looks like and read the same `--listbox-item-*`\n * tokens. React Aria adds the state (`data-selected`, `data-focused`,\n * `data-disabled`); the tick is always in the DOM and shown by CSS.\n */\nexport function renderOption(item: ListboxItem) {\n  return (\n    <AriaListBoxItem id={item.id} textValue={item.label} isDisabled={item.disabled} className={styles.item}>\n      <Icon size=\"inherit\" className={styles.check}>\n        <Check />\n      </Icon>\n      <span className={styles.itemBody}>\n        <AriaText slot=\"label\" className={styles.itemLabel}>\n          {item.label}\n        </AriaText>\n        {item.description && (\n          <AriaText slot=\"description\" className={styles.itemDescription}>\n            {item.description}\n          </AriaText>\n        )}\n      </span>\n    </AriaListBoxItem>\n  );\n}\n\nexport function renderEmpty(message: ReactNode) {\n  return <div className={styles.empty}>{message}</div>;\n}\n\n/** The list class, for Combobox and Picker to put the list inside their popovers. */\nexport const listClass = (...extra: Array<string | false | null | undefined>) => classes(styles.list, ...extra);\n"]}

package/dist/chunk-TGMDOQCL.js

@@ -0,0 +1,53 @@
+import { Field } from './chunk-2PXTVZ7H.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/textarea/Textarea.module.css
+var Textarea_default = {
+  field: "Textarea_field",
+  textarea: "Textarea_textarea"
+};
+function Textarea({
+  label,
+  description,
+  error,
+  size = "md",
+  resize = "vertical",
+  autoGrow = false,
+  rows = 3,
+  required,
+  disabled,
+  readOnly,
+  id,
+  className,
+  ref,
+  "aria-describedby": describedBy,
+  ...rest
+}) {
+  const invalid = error !== void 0 && error !== null && error !== false && error !== "";
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      id,
+      invalid,
+      disabled: Boolean(disabled),
+      required: Boolean(required),
+      className: classes(Textarea_default.field, className),
+      "data-size": size,
+      "data-resize": resize,
+      "data-auto-grow": autoGrow ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: label }),
+        /* @__PURE__ */ jsx(Field.Control, { "aria-describedby": describedBy, children: /* @__PURE__ */ jsx("textarea", { ...rest, ref, rows, readOnly, className: Textarea_default.textarea }) }),
+        description && /* @__PURE__ */ jsx(Field.Description, { children: description }),
+        invalid && /* @__PURE__ */ jsx(Field.Error, { children: error })
+      ]
+    }
+  );
+}
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+//# sourceMappingURL=chunk-TGMDOQCL.js.map
+//# sourceMappingURL=chunk-TGMDOQCL.js.map

package/dist/chunk-TGMDOQCL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/textarea/Textarea.module.css","../src/textarea/Textarea.tsx"],"names":["field","textarea"],"mappings":";;;;;AAAA,IAAA,gBAAA,GAAA;AAAA,EAGG,KAAA,EAAAA,gBAAAA;AAAA,EAIA,QAAA,EAAAC;AAAA,CAAA;AC+BI,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,UAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,CAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA,kBAAA,EAAoB,WAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAkB;AAChB,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,gBAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,gBAAA,EAAgB,WAAW,EAAA,GAAK,MAAA;AAAA,MAChC,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,CAAM,KAAA,EAAN,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BACnB,KAAA,CAAM,OAAA,EAAN,EAAc,kBAAA,EAAkB,aAC/B,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAU,GAAG,IAAA,EAAM,KAAU,IAAA,EAAY,QAAA,EAAoB,SAAA,EAAW,gBAAA,CAAO,UAAU,CAAA,EAC5F,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,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-TGMDOQCL.js","sourcesContent":["/* Every value is a token (--textarea-*). Label, description and error come from Field. */\n\n@layer components {\n  .field {\n    font-family: var(--textarea-font-family);\n  }\n\n  .textarea {\n    min-block-size: var(--textarea-min-height);\n    padding-block: var(--textarea-padding-block);\n    padding-inline: var(--textarea-padding-inline);\n    border: var(--size-hairline) solid var(--textarea-border-default);\n    border-radius: var(--textarea-radius);\n    background-color: var(--textarea-bg);\n    color: var(--textarea-fg);\n    font-size: var(--textarea-font-size-md);\n    line-height: var(--textarea-line-height);\n    resize: vertical;\n    transition:\n      border-color var(--textarea-motion-duration) var(--motion-easing-standard),\n      background-color var(--textarea-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--textarea-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--textarea-border-focus);\n      outline: var(--textarea-focus-ring-width) solid var(--textarea-focus-ring);\n      outline-offset: var(--textarea-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--textarea-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .textarea { font-size: var(--textarea-font-size-sm); }\n  .field[data-size=\"lg\"] .textarea { font-size: var(--textarea-font-size-lg); }\n  .field[data-resize=\"none\"] .textarea { resize: none; }\n  .field[data-resize=\"both\"] .textarea { resize: both; }\n  .field[data-auto-grow] .textarea { field-sizing: content; }\n  .field[data-invalid] .textarea { border-color: var(--textarea-border-invalid); }\n}\n","import type { ReactNode, Ref, TextareaHTMLAttributes } from 'react';\nimport { Field } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Textarea.module.css';\n\nexport type TextareaSize = 'sm' | 'md' | 'lg';\nexport type TextareaResize = 'vertical' | 'none' | 'both';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\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?: TextareaSize;\n  /** @default 'vertical' */\n  resize?: TextareaResize;\n  /** Grow with the content (`field-sizing: content`, where supported). @default false */\n  autoGrow?: boolean;\n  /** The `<textarea>` element. */\n  ref?: Ref<HTMLTextAreaElement>;\n  /** Applied to the wrapper, not the textarea. */\n  className?: string;\n}\n\n/**\n * A multi-line text input on top of Field. Same contract as TextField;\n * its own `--textarea-*` tokens so it can diverge. `rows` sets the initial\n * height; `autoGrow` follows the content in browsers that support\n * `field-sizing`, and falls back to `rows` elsewhere.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `textarea` wired through Field; `autoGrow` uses `field-sizing: content` where supported and falls back to `rows`.\n * @do Set `rows` to the typical length of the answer.\n * @dont Disable `resize` without giving the field enough rows.\n */\nexport function Textarea({\n  label,\n  description,\n  error,\n  size = 'md',\n  resize = 'vertical',\n  autoGrow = false,\n  rows = 3,\n  required,\n  disabled,\n  readOnly,\n  id,\n  className,\n  ref,\n  'aria-describedby': describedBy,\n  ...rest\n}: TextareaProps) {\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      data-resize={resize}\n      data-auto-grow={autoGrow ? '' : undefined}\n      data-readonly={readOnly ? '' : undefined}\n    >\n      <Field.Label>{label}</Field.Label>\n      <Field.Control aria-describedby={describedBy}>\n        <textarea {...rest} ref={ref} rows={rows} readOnly={readOnly} className={styles.textarea} />\n      </Field.Control>\n      {description && <Field.Description>{description}</Field.Description>}\n      {invalid && <Field.Error>{error}</Field.Error>}\n    </Field>\n  );\n}\n\nTextarea.displayName = 'Textarea';\n"]}

package/dist/chunk-TVI5AXLE.js

@@ -0,0 +1,41 @@
+import { selectionToIds } from './chunk-CZBCGLEM.js';
+import { renderOption, renderEmpty, listClass } from './chunk-T76YSNTZ.js';
+import { ListBox } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+function Listbox({
+  items,
+  selectionMode = "single",
+  value,
+  defaultValue = [],
+  onChange,
+  disabled = false,
+  emptyMessage = "No options",
+  className,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ...rest,
+      ref,
+      className: listClass(className),
+      items,
+      selectionMode,
+      selectedKeys: value,
+      defaultSelectedKeys: defaultValue,
+      onSelectionChange: (selection) => onChange?.(selectionToIds(selection, () => items.filter((item) => !item.disabled).map((item) => item.id))),
+      disabledKeys: disabled ? items.map((item) => item.id) : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-selection-mode": selectionMode,
+      renderEmptyState: () => renderEmpty(emptyMessage),
+      children: renderOption
+    }
+  );
+}
+Listbox.displayName = "Listbox";
+
+export { Listbox };
+//# sourceMappingURL=chunk-TVI5AXLE.js.map
+//# sourceMappingURL=chunk-TVI5AXLE.js.map

package/dist/chunk-TVI5AXLE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/listbox/Listbox.tsx"],"names":["AriaListBox"],"mappings":";;;;;AA4CO,SAAS,OAAA,CAAQ;AAAA,EACtB,KAAA;AAAA,EACA,aAAA,GAAgB,QAAA;AAAA,EAChB,KAAA;AAAA,EACA,eAAe,EAAC;AAAA,EAChB,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,YAAA;AAAA,EACf,SAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,UAAU,SAAS,CAAA;AAAA,MAC9B,KAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA,EAAc,KAAA;AAAA,MACd,mBAAA,EAAqB,YAAA;AAAA,MACrB,iBAAA,EAAmB,CAAC,SAAA,KAAc,QAAA,GAAW,eAAe,SAAA,EAAW,MAAM,MAAM,MAAA,CAAO,CAAC,SAAS,CAAC,IAAA,CAAK,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,EAAE,CAAC,CAAC,CAAA;AAAA,MAC3I,YAAA,EAAc,WAAW,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS,IAAA,CAAK,EAAE,CAAA,GAAI,MAAA;AAAA,MACxD,eAAA,EAAe,WAAW,EAAA,GAAK,MAAA;AAAA,MAC/B,qBAAA,EAAqB,aAAA;AAAA,MACrB,gBAAA,EAAkB,MAAM,WAAA,CAAY,YAAY,CAAA;AAAA,MAE/C,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-TVI5AXLE.js","sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { ListBox as AriaListBox } from 'react-aria-components';\nimport { selectionToIds } from '../internal/selection';\nimport { listClass, renderEmpty, renderOption, type ListboxItem } from './ListboxOptions';\n\nexport type ListboxSelectionMode = 'single' | 'multiple';\n\nexport interface ListboxProps {\n  /** The options, in order. Ids are the values. */\n  items: readonly ListboxItem[];\n  /** @default 'single' */\n  selectionMode?: ListboxSelectionMode;\n  /** Selected ids (controlled). An array in both modes; single mode holds at most one. */\n  value?: readonly string[];\n  /** @default [] */\n  defaultValue?: readonly string[];\n  onChange?: (value: string[]) => void;\n  /** @default false */\n  disabled?: boolean;\n  /** Shown when `items` is empty. @default 'No options' */\n  emptyMessage?: ReactNode;\n  /** The list's accessible name. Pass `aria-labelledby` instead when a visible heading names it. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  id?: string;\n  className?: string;\n  /** The list element (`role=\"listbox\"`). */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A visible list of options with single or multiple selection, on React\n * Aria's listbox (decision record 001): arrow keys move, Space toggles,\n * typing jumps, Shift and Ctrl/Cmd extend a multiple selection, Ctrl/Cmd+A\n * selects all. For a list that opens from a control, use Picker; for one\n * that filters as you type, use Combobox. Both render these options.\n *\n * @status experimental\n * @category Forms\n * @accessibility `role=\"listbox\"` (with `aria-multiselectable` when multiple) named by `aria-label` or `aria-labelledby`; options carry `aria-selected` and `aria-disabled`. One tab stop: arrows move, Space toggles, typing jumps, Shift and Ctrl/Cmd extend, Ctrl/Cmd+A selects all.\n * @do Give it a name: `aria-label`, or `aria-labelledby` pointing at a visible heading.\n * Use `selectionMode=\"multiple\"` for several choices; a group of Checkboxes works too and needs no explanation.\n * @dont Show more than a screen of options; filter with Combobox.\n */\nexport function Listbox({\n  items,\n  selectionMode = 'single',\n  value,\n  defaultValue = [],\n  onChange,\n  disabled = false,\n  emptyMessage = 'No options',\n  className,\n  ref,\n  ...rest\n}: ListboxProps) {\n  return (\n    <AriaListBox\n      {...rest}\n      ref={ref}\n      className={listClass(className)}\n      items={items}\n      selectionMode={selectionMode}\n      selectedKeys={value}\n      defaultSelectedKeys={defaultValue}\n      onSelectionChange={(selection) => onChange?.(selectionToIds(selection, () => items.filter((item) => !item.disabled).map((item) => item.id)))}\n      disabledKeys={disabled ? items.map((item) => item.id) : undefined}\n      data-disabled={disabled ? '' : undefined}\n      data-selection-mode={selectionMode}\n      renderEmptyState={() => renderEmpty(emptyMessage)}\n    >\n      {renderOption}\n    </AriaListBox>\n  );\n}\n\nListbox.displayName = 'Listbox';\n"]}

package/dist/chunk-U6QRAD73.js

@@ -0,0 +1,22 @@
+import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react-dom';
+
+// src/internal/floating.ts
+function useFloatingPosition({ open, placement = "bottom-start" }) {
+  const { refs, x, y, placement: resolved, isPositioned } = useFloating({
+    open,
+    placement,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(({ elements }) => parseFloat(getComputedStyle(elements.floating).getPropertyValue("--_gap")) || 0),
+      flip(),
+      shift({ padding: 8 })
+    ]
+  });
+  const positionStyle = { "--_x": `${Math.round(x)}px`, "--_y": `${Math.round(y)}px` };
+  return { refs, positionStyle, placement: resolved, isPositioned };
+}
+
+export { useFloatingPosition };
+//# sourceMappingURL=chunk-U6QRAD73.js.map
+//# sourceMappingURL=chunk-U6QRAD73.js.map

package/dist/chunk-U6QRAD73.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/floating.ts"],"names":[],"mappings":";;;AAqBO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,SAAA,GAAY,gBAAe,EAAqD;AAC1H,EAAA,MAAM,EAAE,MAAM,CAAA,EAAG,CAAA,EAAG,WAAW,QAAA,EAAU,YAAA,KAAiB,WAAA,CAAY;AAAA,IACpE,IAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,EAAU,OAAA;AAAA,IACV,oBAAA,EAAsB,UAAA;AAAA,IACtB,UAAA,EAAY;AAAA,MACV,MAAA,CAAO,CAAC,EAAE,QAAA,OAAe,UAAA,CAAW,gBAAA,CAAiB,QAAA,CAAS,QAAQ,CAAA,CAAE,gBAAA,CAAiB,QAAQ,CAAC,KAAK,CAAC,CAAA;AAAA,MACxG,IAAA,EAAK;AAAA,MACL,KAAA,CAAM,EAAE,OAAA,EAAS,CAAA,EAAG;AAAA;AACtB,GACD,CAAA;AACD,EAAA,MAAM,aAAA,GAAgB,EAAE,MAAA,EAAQ,CAAA,EAAG,KAAK,KAAA,CAAM,CAAC,CAAC,CAAA,EAAA,CAAA,EAAM,QAAQ,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,CAAC,CAAC,CAAA,EAAA,CAAA,EAAK;AACnF,EAAA,OAAO,EAAE,IAAA,EAAM,aAAA,EAAe,SAAA,EAAW,UAAU,YAAA,EAAa;AAClE","file":"chunk-U6QRAD73.js","sourcesContent":["import { autoUpdate, flip, offset, shift, useFloating, type Placement } from '@floating-ui/react-dom';\nimport type { CSSProperties } from 'react';\nimport './floating.css';\n\nexport type FloatingPlacement = Extract<\n  Placement,\n  'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n>;\n\n/**\n * Positions a floating element next to a reference: flips when there is no\n * room, shifts to stay in the viewport, updates on scroll and resize. The\n * gap is read from the floating element's `--_gap` custom property, so it is\n * a token, not a number in code; `floating.css` registers the property so\n * the computed value is a pixel length and not the token's `calc()` text. Returns the position as two custom\n * properties (`--_x`, `--_y`): the one per-instance inline value overlays\n * need, consumed by `inset-*` in the stylesheet.\n *\n * Positioning is delegated to @floating-ui/react-dom; CSS anchor positioning\n * replaces it once the browser floor includes it.\n */\nexport function useFloatingPosition({ open, placement = 'bottom-start' }: { open: boolean; placement?: FloatingPlacement }) {\n  const { refs, x, y, placement: resolved, isPositioned } = useFloating({\n    open,\n    placement,\n    strategy: 'fixed',\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(({ elements }) => parseFloat(getComputedStyle(elements.floating).getPropertyValue('--_gap')) || 0),\n      flip(),\n      shift({ padding: 8 }),\n    ],\n  });\n  const positionStyle = { '--_x': `${Math.round(x)}px`, '--_y': `${Math.round(y)}px` } as CSSProperties;\n  return { refs, positionStyle, placement: resolved, isPositioned };\n}\n"]}

package/dist/chunk-UX42PQLT.js

@@ -0,0 +1,76 @@
+import { calendarRootClass, CalendarGrid, fromDate, toDate } from './chunk-OXYP34CG.js';
+import { isPresent, AriaFieldLabel, AriaFieldDescription, AriaFieldError, ariaFieldClass } from './chunk-4HRNRTXI.js';
+import { Icon } from './chunk-ASNTNTJW.js';
+import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button, Popover, Dialog, Calendar as Calendar$1, I18nProvider } from 'react-aria-components';
+import { Calendar } from '@pearpages/pulp-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/date-picker/DatePicker.module.css
+var DatePicker_default = {
+  root: "DatePicker_root",
+  control: "DatePicker_control",
+  input: "DatePicker_input",
+  segment: "DatePicker_segment",
+  button: "DatePicker_button",
+  popover: "DatePicker_popover",
+  dialog: "DatePicker_dialog"
+};
+function DatePicker({
+  label,
+  description,
+  error,
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  isDateUnavailable,
+  locale,
+  size = "md",
+  required = false,
+  disabled = false,
+  readOnly = false,
+  name,
+  autoFocus,
+  className,
+  ref
+}) {
+  const invalid = isPresent(error);
+  const picker = /* @__PURE__ */ jsxs(
+    DatePicker$1,
+    {
+      ref,
+      className: ariaFieldClass(DatePicker_default.root, className),
+      "data-size": size,
+      value: toDate(value),
+      defaultValue: toDate(defaultValue),
+      onChange: (date) => onChange?.(fromDate(date)),
+      minValue: toDate(min) ?? void 0,
+      maxValue: toDate(max) ?? void 0,
+      isDateUnavailable: isDateUnavailable && ((date) => isDateUnavailable(fromDate(date) ?? "")),
+      isRequired: required,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: invalid,
+      name,
+      autoFocus,
+      granularity: "day",
+      children: [
+        /* @__PURE__ */ jsx(AriaFieldLabel, { required, children: label }),
+        /* @__PURE__ */ jsxs(Group, { className: DatePicker_default.control, children: [
+          /* @__PURE__ */ jsx(DateInput, { className: DatePicker_default.input, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { segment, className: DatePicker_default.segment }) }),
+          /* @__PURE__ */ jsx(Button, { className: DatePicker_default.button, children: /* @__PURE__ */ jsx(Icon, { size: "inherit", children: /* @__PURE__ */ jsx(Calendar, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx(AriaFieldDescription, { children: description }),
+        /* @__PURE__ */ jsx(AriaFieldError, { children: error }),
+        /* @__PURE__ */ jsx(Popover, { className: DatePicker_default.popover, placement: "bottom start", children: /* @__PURE__ */ jsx(Dialog, { className: DatePicker_default.dialog, children: /* @__PURE__ */ jsx(Calendar$1, { className: calendarRootClass, children: /* @__PURE__ */ jsx(CalendarGrid, {}) }) }) })
+      ]
+    }
+  );
+  return locale ? /* @__PURE__ */ jsx(I18nProvider, { locale, children: picker }) : picker;
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+//# sourceMappingURL=chunk-UX42PQLT.js.map
+//# sourceMappingURL=chunk-UX42PQLT.js.map

package/dist/chunk-UX42PQLT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date-picker/DatePicker.module.css","../src/date-picker/DatePicker.tsx"],"names":["root","control","input","segment","button","popover","dialog","AriaDatePicker","AriaGroup","AriaDateInput","AriaDateSegment","AriaButton","CalendarIcon","AriaPopover","AriaDialog","AriaCalendar"],"mappings":"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","file":"chunk-UX42PQLT.js","sourcesContent":["/*\n * Every value is a token (--date-picker-*); the calendar reads --calendar-*.\n * The control is a group drawn like a text field around the date segments.\n * React Aria writes the state: data-focus-within, data-hovered,\n * data-disabled, data-invalid on the group; data-placeholder, data-focused\n * on each segment.\n */\n\n@layer components {\n  .root {\n    --_height: var(--date-picker-height-md);\n    --_font-size: var(--date-picker-font-size-md);\n    --_border: var(--date-picker-border-default);\n\n    font-family: var(--date-picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--date-picker-height-sm);\n      --_font-size: var(--date-picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--date-picker-height-lg);\n      --_font-size: var(--date-picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--date-picker-border-invalid); }\n  }\n\n  .control {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--_height);\n    padding-inline-start: var(--date-picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--date-picker-radius);\n    background-color: var(--date-picker-bg);\n    color: var(--date-picker-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--date-picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-within] {\n      border-color: var(--date-picker-border-focus);\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: var(--date-picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-within], [data-disabled]) {\n      border-color: var(--date-picker-border-hover);\n    }\n  }\n\n  .input {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n\n  .segment {\n    padding-inline: var(--date-picker-segment-padding-inline);\n    border-radius: var(--date-picker-segment-radius);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    caret-color: transparent;\n\n    &[data-type=\"literal\"] {\n      padding-inline: 0;\n    }\n\n    &[data-placeholder] {\n      color: var(--date-picker-segment-fg-placeholder);\n    }\n\n    &[data-focused] {\n      background-color: var(--date-picker-segment-bg-focus);\n      color: var(--date-picker-fg);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--date-picker-icon-size);\n    block-size: calc(var(--_height) - 2 * var(--size-hairline));\n    padding: 0;\n    border: none;\n    border-radius: var(--date-picker-radius);\n    background-color: transparent;\n    color: var(--date-picker-icon);\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: calc(-1 * var(--date-picker-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    padding-block-start: var(--date-picker-gap);\n    animation: fade var(--date-picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--date-picker-gap);\n    }\n  }\n\n  .dialog {\n    border: var(--size-hairline) solid var(--date-picker-dialog-border);\n    border-radius: var(--date-picker-dialog-radius);\n    background-color: var(--date-picker-dialog-bg);\n    box-shadow: var(--date-picker-popover-shadow);\n    outline: none;\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","import type { ReactNode, Ref } from 'react';\nimport {\n  Button as AriaButton,\n  Calendar as AriaCalendar,\n  DateInput as AriaDateInput,\n  DatePicker as AriaDatePicker,\n  DateSegment as AriaDateSegment,\n  Dialog as AriaDialog,\n  Group as AriaGroup,\n  I18nProvider,\n  Popover as AriaPopover,\n} from 'react-aria-components';\nimport { Calendar as CalendarIcon } from '@pearpages/pulp-icons';\nimport { CalendarGrid, calendarRootClass } from '../calendar/CalendarGrid';\nimport { Icon } from '../icon';\nimport { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent } from '../internal/AriaField';\nimport { fromDate, toDate } from '../internal/dates';\nimport styles from './DatePicker.module.css';\n\nexport type DatePickerSize = 'sm' | 'md' | 'lg';\n\nexport interface DatePickerProps {\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  /** The date as `YYYY-MM-DD` (controlled). `null` is \"none\". */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  /** Earliest selectable date, `YYYY-MM-DD`. */\n  min?: string;\n  /** Latest selectable date, `YYYY-MM-DD`. */\n  max?: string;\n  /** Marks single dates as unavailable in the calendar. */\n  isDateUnavailable?: (date: string) => boolean;\n  /** BCP 47 tag. Segment order, month names and the first weekday follow it; defaults to the browser's. */\n  locale?: string;\n  /** @default 'md' */\n  size?: DatePickerSize;\n  /** @default false */\n  required?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  readOnly?: boolean;\n  /** Submitted with a form as `YYYY-MM-DD` through a hidden input. */\n  name?: string;\n  autoFocus?: boolean;\n  /** Applied to the field wrapper. */\n  className?: string;\n  /** The wrapper element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A date field with a calendar popover, on React Aria's date picker\n * (decision record 001): the date is typed segment by segment in the\n * user's locale order (arrows and digits, no free text to parse), and the\n * button opens the same month grid as Calendar. Dates cross the API as\n * ISO strings.\n *\n * @status experimental\n * @category Forms\n * @accessibility A `group` named by the label holding one `spinbutton` per date segment (day, month, year in the locale's order), a button that opens a `dialog` containing the Calendar grid, and a hidden input for forms. Arrows step a segment, digits type it, Escape closes the dialog and returns focus.\n * @do Pass `locale` when the app's language is not the browser's.\n * Use `min`/`max` for ranges the user cannot choose outside of.\n * @dont Parse the value yourself; it is always `YYYY-MM-DD`.\n * Use it for a date of birth decades away; the segments are faster than the calendar.\n */\nexport function DatePicker({\n  label,\n  description,\n  error,\n  value,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  isDateUnavailable,\n  locale,\n  size = 'md',\n  required = false,\n  disabled = false,\n  readOnly = false,\n  name,\n  autoFocus,\n  className,\n  ref,\n}: DatePickerProps) {\n  const invalid = isPresent(error);\n  const picker = (\n    <AriaDatePicker\n      ref={ref}\n      className={ariaFieldClass(styles.root, className)}\n      data-size={size}\n      value={toDate(value)}\n      defaultValue={toDate(defaultValue)}\n      onChange={(date) => onChange?.(fromDate(date))}\n      minValue={toDate(min) ?? undefined}\n      maxValue={toDate(max) ?? undefined}\n      isDateUnavailable={isDateUnavailable && ((date) => isDateUnavailable(fromDate(date) ?? ''))}\n      isRequired={required}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n      isInvalid={invalid}\n      name={name}\n      autoFocus={autoFocus}\n      granularity=\"day\"\n    >\n      <AriaFieldLabel required={required}>{label}</AriaFieldLabel>\n      <AriaGroup className={styles.control}>\n        <AriaDateInput className={styles.input}>{(segment) => <AriaDateSegment segment={segment} className={styles.segment} />}</AriaDateInput>\n        <AriaButton className={styles.button}>\n          <Icon size=\"inherit\">\n            <CalendarIcon />\n          </Icon>\n        </AriaButton>\n      </AriaGroup>\n      <AriaFieldDescription>{description}</AriaFieldDescription>\n      <AriaFieldError>{error}</AriaFieldError>\n      <AriaPopover className={styles.popover} placement=\"bottom start\">\n        <AriaDialog className={styles.dialog}>\n          <AriaCalendar className={calendarRootClass}>\n            <CalendarGrid />\n          </AriaCalendar>\n        </AriaDialog>\n      </AriaPopover>\n    </AriaDatePicker>\n  );\n  return locale ? <I18nProvider locale={locale}>{picker}</I18nProvider> : picker;\n}\n\nDatePicker.displayName = 'DatePicker';\n"]}