@pearpages/pulp-react 0.0.0

package/dist/menu.d.ts

@@ -0,0 +1,76 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes, Ref, HTMLAttributes } from 'react';
+import { F as FloatingPlacement } from './floating-Bw-LN_QT.js';
+import '@floating-ui/react-dom';
+
+type MenuPlacement = FloatingPlacement;
+interface MenuProps {
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default 'bottom-start' */
+    placement?: MenuPlacement;
+    children: ReactNode;
+}
+/**
+ * A list of actions opened from a button, following the WAI-ARIA menu
+ * button pattern: Down/Up arrow on the trigger opens and focuses the first
+ * or last item, arrows move with wraparound, Home and End jump, typing
+ * jumps to the next item starting with that letter, Enter, Space or click
+ * selects and closes, Escape and Tab close and return focus. Compose with
+ * `Menu.Trigger`, `Menu.Content`, `Menu.Item` and `Menu.Separator`.
+ *
+ * @status stable
+ * @category Overlays
+ * @accessibility The WAI-ARIA menu button pattern: the trigger has `aria-haspopup="menu"` and `aria-expanded`; the popup is `role="menu"` named by the trigger with `menuitem` children. Down/Up opens to the first/last item, arrows wrap, Home/End jump, typing jumps, Enter/Space/click select and close, Escape and Tab close and return focus.
+ * @do Use `tone="danger"` for destructive items and put them after a separator.
+ * @dont Put form controls or links that navigate inside a menu; those want Popover or a navigation list.
+ * Use it for navigation between pages.
+ */
+declare function Menu({ open, defaultOpen, onOpenChange, placement, children }: MenuProps): react.JSX.Element;
+declare namespace Menu {
+    var displayName: string;
+    var Trigger: typeof MenuTrigger;
+    var Content: typeof MenuContent;
+    var Item: typeof MenuItem;
+    var Separator: typeof MenuSeparator;
+}
+interface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+}
+declare function MenuTrigger({ asChild, onClick, onKeyDown, ref, children, ...rest }: MenuTriggerProps): react.JSX.Element;
+declare namespace MenuTrigger {
+    var displayName: string;
+}
+interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+declare function MenuContent({ className, onKeyDown, ref, children, ...rest }: MenuContentProps): react.ReactPortal | null;
+declare namespace MenuContent {
+    var displayName: string;
+}
+type MenuItemTone = 'default' | 'danger';
+interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
+    /** Called when the item is chosen; the menu closes afterwards. */
+    onSelect?: () => void;
+    /** @default 'default' */
+    tone?: MenuItemTone;
+    /** Leading glyph, decorative. */
+    icon?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+}
+declare function MenuItem({ onSelect, tone, icon, disabled, className, onClick, ref, children, ...rest }: MenuItemProps): react.JSX.Element;
+declare namespace MenuItem {
+    var displayName: string;
+}
+declare function MenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare namespace MenuSeparator {
+    var displayName: string;
+}
+
+export { Menu, type MenuItemTone, type MenuPlacement, type MenuProps };

package/dist/menu.js

@@ -0,0 +1,9 @@
+export { Menu } from './chunk-GTTXRDXV.js';
+import './chunk-I5OZ63W7.js';
+import './chunk-NAYFLTK6.js';
+import './chunk-U6QRAD73.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=menu.js.map
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"menu.js"}

package/dist/pagination.css

@@ -0,0 +1,212 @@
+/* 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/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/button/Button.module.css */
+@layer components {
+  .Button_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--button-gap);
+    min-block-size: var(--button-height-md);
+    padding-block: 0;
+    padding-inline: var(--button-padding-inline-md);
+    border: 1px solid transparent;
+    border-radius: var(--button-radius);
+    font-family: var(--button-font-family);
+    font-size: var(--button-font-size-md);
+    font-weight: var(--button-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--button-motion-duration) var(--motion-easing-standard),
+      border-color var(--button-motion-duration) var(--motion-easing-standard),
+      color var(--button-motion-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);
+      outline-offset: var(--button-focus-ring-offset);
+    }
+    &:disabled,
+    &[aria-disabled=true] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-loading] {
+      cursor: progress;
+    }
+    &[data-size=sm] {
+      min-block-size: var(--button-height-sm);
+      padding-inline: var(--button-padding-inline-sm);
+      font-size: var(--button-font-size-sm);
+    }
+    &[data-size=lg] {
+      min-block-size: var(--button-height-lg);
+      padding-inline: var(--button-padding-inline-lg);
+      font-size: var(--button-font-size-lg);
+    }
+    &[data-variant=primary] {
+      background-color: var(--button-primary-bg);
+      color: var(--button-primary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-active);
+      }
+    }
+    &[data-variant=secondary] {
+      background-color: var(--button-secondary-bg);
+      border-color: var(--button-secondary-border);
+      color: var(--button-secondary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-secondary-bg-hover);
+      }
+    }
+    &[data-variant=ghost] {
+      background-color: transparent;
+      color: var(--button-ghost-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-ghost-bg-hover);
+      }
+    }
+  }
+  .Button_label {
+    display: inline-block;
+  }
+}
+
+/* src/icon-button/IconButton.module.css */
+@layer components {
+  .IconButton_iconButton[data-icon-only] {
+    gap: 0;
+    inline-size: var(--icon-button-size-md);
+    padding-inline: 0;
+    &[data-size=sm] {
+      inline-size: var(--icon-button-size-sm);
+    }
+    &[data-size=lg] {
+      inline-size: var(--icon-button-size-lg);
+    }
+  }
+}
+
+/* src/pagination/Pagination.module.css */
+@layer components {
+  .Pagination_root {
+    --_size: var(--pagination-ellipsis-size-md);
+    --_font-size: var(--pagination-font-size-md);
+    font-family: var(--pagination-font-family);
+    &[data-size=sm] {
+      --_size: var(--pagination-ellipsis-size-sm);
+      --_font-size: var(--pagination-font-size-sm);
+    }
+  }
+  .Pagination_list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--pagination-gap);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .Pagination_page {
+    min-inline-size: var(--_size);
+    padding-inline: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .Pagination_ellipsis {
+    display: grid;
+    place-items: center;
+    min-inline-size: var(--_size);
+    block-size: var(--_size);
+    color: var(--pagination-ellipsis-fg);
+    font-size: var(--_font-size);
+  }
+}
+/*# sourceMappingURL=pagination.css.map */

package/dist/pagination.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/pagination/Pagination.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 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. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer components {\n  .root {\n    --_size: var(--pagination-ellipsis-size-md);\n    --_font-size: var(--pagination-font-size-md);\n\n    font-family: var(--pagination-font-family);\n\n    &[data-size=\"sm\"] {\n      --_size: var(--pagination-ellipsis-size-sm);\n      --_font-size: var(--pagination-font-size-sm);\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--pagination-gap);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .page {\n    min-inline-size: var(--_size);\n    padding-inline: 0;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ellipsis {\n    display: grid;\n    place-items: center;\n    min-inline-size: var(--_size);\n    block-size: var(--_size);\n    color: var(--pagination-ellipsis-fg);\n    font-size: var(--_font-size);\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","root","list","page","ellipsis"]}

package/dist/pagination.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref } from 'react';
+
+type PaginationSize = 'sm' | 'md';
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** The current page, 1-based. */
+    page: number;
+    /** Total number of pages. */
+    count: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current one. @default 1 */
+    siblings?: number;
+    /** Pages always shown at each end. @default 1 */
+    boundaries?: number;
+    /** Render pages as links (server-side or router pagination) instead of buttons. */
+    getHref?: (page: number) => string;
+    /** @default 'md' */
+    size?: PaginationSize;
+    /** The landmark's name. @default 'Pagination' */
+    'aria-label'?: string;
+    /** @default 'Previous page' */
+    previousLabel?: string;
+    /** @default 'Next page' */
+    nextLabel?: string;
+    /** Accessible name of a page control. @default (n) => `Page ${n}` */
+    pageLabel?: (page: number) => string;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * Page controls in a `nav` landmark: previous, numbered pages with the
+ * current one marked `aria-current="page"`, and next. Distant pages
+ * collapse into an ellipsis. Buttons by default; `getHref` renders links so
+ * the pages are crawlable and open in new tabs. Built from Button and
+ * IconButton, so it needs no keyboard model of its own.
+ *
+ * @status experimental
+ * @category Navigation
+ * @accessibility A `nav` landmark named by `aria-label`; the current page carries `aria-current="page"`; previous and next are IconButtons with names; ellipses are hidden from assistive technology. With `getHref` the controls are links.
+ * @do Use `getHref` when pages have URLs so they can be opened in new tabs and crawled.
+ * Keep `siblings` at 1 on narrow screens.
+ * @dont Disable the whole component while a page loads; disable only what cannot be pressed.
+ */
+declare function Pagination({ page, count, onPageChange, siblings, boundaries, getHref, size, 'aria-label': ariaLabel, previousLabel, nextLabel, pageLabel, className, ref, ...rest }: PaginationProps): react.JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+
+type PaginationItem = number | 'start-ellipsis' | 'end-ellipsis';
+/** Which pages to show: boundaries at both ends, siblings around the current page, ellipses for the rest. */
+declare function paginationRange(page: number, count: number, siblings: number, boundaries: number): PaginationItem[];
+
+export { Pagination, type PaginationItem, type PaginationProps, type PaginationSize, paginationRange };

package/dist/pagination.js

@@ -0,0 +1,10 @@
+export { Pagination, paginationRange } from './chunk-K5QGGQOV.js';
+import './chunk-FXRSZUDH.js';
+import './chunk-KPQGS4PG.js';
+import './chunk-I4KC4V6A.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=pagination.js.map
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"pagination.js"}

package/dist/picker.css

@@ -0,0 +1,209 @@
+/* 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/picker/Picker.module.css */
+@layer components {
+  .Picker_root {
+    --_height: var(--picker-height-md);
+    --_font-size: var(--picker-font-size-md);
+    --_border: var(--picker-border-default);
+    font-family: var(--picker-font-family);
+    &[data-size=sm] {
+      --_height: var(--picker-height-sm);
+      --_font-size: var(--picker-font-size-sm);
+    }
+    &[data-size=lg] {
+      --_height: var(--picker-height-lg);
+      --_font-size: var(--picker-font-size-lg);
+    }
+    &[data-invalid] {
+      --_border: var(--picker-border-invalid);
+    }
+  }
+  .Picker_trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--picker-gap);
+    inline-size: 100%;
+    min-block-size: var(--_height);
+    padding-block: 0;
+    padding-inline: var(--picker-padding-inline);
+    border: var(--size-hairline) solid var(--_border);
+    border-radius: var(--picker-radius);
+    background-color: var(--picker-bg);
+    color: var(--picker-fg);
+    font-family: inherit;
+    font-size: var(--_font-size);
+    text-align: start;
+    cursor: pointer;
+    transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);
+    &[data-focus-visible] {
+      border-color: var(--picker-border-focus);
+      outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);
+      outline-offset: var(--picker-focus-ring-offset);
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-hovered]:not([data-focus-visible], [data-disabled]) {
+      border-color: var(--picker-border-hover);
+    }
+  }
+  .Picker_value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &[data-placeholder] {
+      color: var(--picker-placeholder);
+    }
+  }
+  .Picker_chevron {
+    flex: none;
+    color: var(--picker-icon);
+  }
+  .Picker_popover {
+    inline-size: var(--trigger-width);
+    padding-block-start: var(--picker-gap);
+    animation: Picker_fade var(--picker-popover-duration) var(--motion-easing-standard);
+    &[data-placement=top] {
+      padding-block: 0 var(--picker-gap);
+    }
+  }
+  .Picker_list {
+    box-shadow: var(--picker-popover-shadow);
+  }
+  @keyframes Picker_fade {
+    from {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Picker_popover {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=picker.css.map */

package/dist/picker.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/picker/Picker.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","/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer components {\n  .root {\n    --_height: var(--picker-height-md);\n    --_font-size: var(--picker-font-size-md);\n    --_border: var(--picker-border-default);\n\n    font-family: var(--picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--picker-height-sm);\n      --_font-size: var(--picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--picker-height-lg);\n      --_font-size: var(--picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--picker-border-invalid); }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--picker-gap);\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--picker-radius);\n    background-color: var(--picker-bg);\n    color: var(--picker-fg);\n    font-family: inherit;\n    font-size: var(--_font-size);\n    text-align: start;\n    cursor: pointer;\n    transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-visible] {\n      border-color: var(--picker-border-focus);\n      outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n      outline-offset: var(--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-visible], [data-disabled]) {\n      border-color: var(--picker-border-hover);\n    }\n  }\n\n  .value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-placeholder] {\n      color: var(--picker-placeholder);\n    }\n  }\n\n  .chevron {\n    flex: none;\n    color: var(--picker-icon);\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--picker-gap);\n    animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--picker-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--picker-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","trigger","value","chevron","popover","list","fade"]}

package/dist/picker.d.ts

@@ -0,0 +1,57 @@
+import * as react from 'react';
+import { ReactNode, Ref } from 'react';
+import { L as ListboxItem } from './ListboxOptions-DLsT-dkV.js';
+
+type PickerItem = ListboxItem;
+type PickerSize = 'sm' | 'md' | 'lg';
+interface PickerProps {
+    /** Visible label. Always rendered. */
+    label: ReactNode;
+    description?: ReactNode;
+    /** Presence marks the control invalid and announces the message. */
+    error?: ReactNode;
+    /** The options. Ids are the values. */
+    items: readonly PickerItem[];
+    /** Selected id (controlled). `null` is "nothing selected". */
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    /** Shown in the control until a value is chosen. @default 'Select…' */
+    placeholder?: string;
+    /** Shown when `items` is empty. @default 'No options' */
+    emptyMessage?: ReactNode;
+    /** @default 'md' */
+    size?: PickerSize;
+    /** @default false */
+    required?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Submitted with a form through a hidden native select. */
+    name?: string;
+    autoFocus?: boolean;
+    /** Applied to the field wrapper, not the button. */
+    className?: string;
+    /** The trigger `<button>`. */
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * A single-choice select with rich options (a description line, consistent
+ * styling in every browser), on React Aria's select (decision record 001):
+ * a button opens a listbox, arrows and typing move, Enter chooses, Escape
+ * closes, and a hidden native select carries the value in forms. For a
+ * plain list of words, the native `Select` is the default; for several
+ * choices at once, use Listbox.
+ *
+ * @status experimental
+ * @category Forms
+ * @accessibility A `button` named by the label with `aria-haspopup="listbox"` and `aria-expanded`; the popup is a `listbox` with selected and disabled options; a hidden native select carries `name` and value for forms. Arrows open and move, typing jumps, Enter chooses, Escape closes and returns focus.
+ * @do Use a `description` line on options when the label alone is ambiguous.
+ * Prefer the native Select for a plain list of words.
+ * @dont Use `placeholder` as the only label.
+ */
+declare function Picker({ label, description, error, items, value, defaultValue, onChange, placeholder, emptyMessage, size, required, disabled, name, autoFocus, className, ref, }: PickerProps): react.JSX.Element;
+declare namespace Picker {
+    var displayName: string;
+}
+
+export { Picker, type PickerItem, type PickerProps, type PickerSize };