@pearpages/pulp-react 0.0.0

package/dist/inline.d.ts

@@ -0,0 +1,322 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref, ReactNode } from 'react';
+
+type InlineGap = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type InlineAlign = 'start' | 'center' | 'end' | 'stretch';
+type InlineJustify = 'start' | 'center' | 'end' | 'between';
+type InlineElement = 'div' | 'section' | 'nav' | 'ul' | 'ol' | 'li';
+interface InlineProps extends HTMLAttributes<HTMLElement> {
+    /** @default 'div' */
+    as?: InlineElement;
+    /** Step on the spacing scale (`--space-1` … `--space-8`). @default 3 */
+    gap?: InlineGap;
+    align?: InlineAlign;
+    justify?: InlineJustify;
+    /** Wrap onto new lines when the row overflows. @default true */
+    wrap?: boolean;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+/**
+ * A flex row whose gap is a step on the spacing scale, so consumers
+ * compose layout from tokens instead of writing padding and margins.
+ * Rendered as `ul`/`ol` it keeps `role="list"` explicitly, because Safari
+ * stops announcing a list once `list-style` is removed.
+ *
+ * @status stable
+ * @category Layout
+ * @accessibility Layout only: no role unless rendered as `ul`/`ol`, where `role="list"` is kept explicitly because Safari drops list semantics without markers.
+ * @do Use `as="ul"` for a list of like items so the count is announced.
+ * @dont Use it to space unrelated regions; it is one flex row.
+ */
+declare function Inline({ as, gap, align, justify, wrap, className, ref, children, ...rest }: InlineProps): react.DetailedReactHTMLElement<{
+    ref: Ref<HTMLElement> | undefined;
+    role: react.AriaRole | undefined;
+    className: string;
+    'data-gap': InlineGap;
+    'data-align': InlineAlign | undefined;
+    'data-justify': InlineJustify | undefined;
+    'data-wrap': string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: react.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: react.ChangeEventHandler<HTMLElement, Element> | undefined;
+    onChangeCapture?: react.ChangeEventHandler<HTMLElement, Element> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: react.InputEventHandler<HTMLElement> | undefined;
+    onInput?: react.InputEventHandler<HTMLElement> | undefined;
+    onInputCapture?: react.InputEventHandler<HTMLElement> | undefined;
+    onReset?: react.ReactEventHandler<HTMLElement> | undefined;
+    onResetCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSubmit?: react.SubmitEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: react.SubmitEventHandler<HTMLElement> | undefined;
+    onInvalid?: react.ReactEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: react.UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: react.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+}, HTMLElement>;
+declare namespace Inline {
+    var displayName: string;
+}
+
+export { Inline, type InlineAlign, type InlineElement, type InlineGap, type InlineJustify, type InlineProps };

package/dist/inline.js

@@ -0,0 +1,4 @@
+export { Inline } from './chunk-AWQHULJC.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=inline.js.map
+//# sourceMappingURL=inline.js.map

package/dist/inline.js.map

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

package/dist/listbox.css

@@ -0,0 +1,95 @@
+/* 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/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);
+  }
+}
+/*# sourceMappingURL=listbox.css.map */

package/dist/listbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/listbox/Listbox.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","/*\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"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACbA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,oBAAgB,IAAI;AACpB,aAAS,IAAI;AACb,cAAU;AACV,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,aAAS;AAET,KAAC,CAAC;AACA,eAAS,IAAI,4BAA4B,MAAM,IAAI;AACnD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,UAAM;AACN,gBAAY;AACZ,WAAO,IAAI;AACb;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,YAAQ;AACR,aAAS;AAET,KAAC,CAAC;AAAA,IACF,CAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AAEtB,OAzBHD;AA0BK,oBAAY;AACd;AACF;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AACF;AAEA,GAACE;AACC,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACnB;AAEA,GAACC;AACC,cAAU;AACV,mBAAe;AACf,iBAAa;AACf;AAEA,GAACC;AACC,WAAO,IAAI;AACX,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,aAAS,IAAI;AACb,WAAO,IAAI;AACb;AACF;","names":["icon","list","check","item","itemBody","itemLabel","itemDescription","empty"]}

package/dist/listbox.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { ReactNode, Ref } from 'react';
+import { L as ListboxItem } from './ListboxOptions-DLsT-dkV.js';
+
+type ListboxSelectionMode = 'single' | 'multiple';
+interface ListboxProps {
+    /** The options, in order. Ids are the values. */
+    items: readonly ListboxItem[];
+    /** @default 'single' */
+    selectionMode?: ListboxSelectionMode;
+    /** Selected ids (controlled). An array in both modes; single mode holds at most one. */
+    value?: readonly string[];
+    /** @default [] */
+    defaultValue?: readonly string[];
+    onChange?: (value: string[]) => void;
+    /** @default false */
+    disabled?: boolean;
+    /** Shown when `items` is empty. @default 'No options' */
+    emptyMessage?: ReactNode;
+    /** The list's accessible name. Pass `aria-labelledby` instead when a visible heading names it. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    id?: string;
+    className?: string;
+    /** The list element (`role="listbox"`). */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A visible list of options with single or multiple selection, on React
+ * Aria's listbox (decision record 001): arrow keys move, Space toggles,
+ * typing jumps, Shift and Ctrl/Cmd extend a multiple selection, Ctrl/Cmd+A
+ * selects all. For a list that opens from a control, use Picker; for one
+ * that filters as you type, use Combobox. Both render these options.
+ *
+ * @status experimental
+ * @category Forms
+ * @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.
+ * @do Give it a name: `aria-label`, or `aria-labelledby` pointing at a visible heading.
+ * Use `selectionMode="multiple"` for several choices; a group of Checkboxes works too and needs no explanation.
+ * @dont Show more than a screen of options; filter with Combobox.
+ */
+declare function Listbox({ items, selectionMode, value, defaultValue, onChange, disabled, emptyMessage, className, ref, ...rest }: ListboxProps): react.JSX.Element;
+declare namespace Listbox {
+    var displayName: string;
+}
+
+export { Listbox, ListboxItem, type ListboxProps, type ListboxSelectionMode };

package/dist/listbox.js

@@ -0,0 +1,7 @@
+export { Listbox } from './chunk-TVI5AXLE.js';
+import './chunk-CZBCGLEM.js';
+import './chunk-T76YSNTZ.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=listbox.js.map
+//# sourceMappingURL=listbox.js.map

package/dist/listbox.js.map

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

package/dist/menu.css

@@ -0,0 +1,102 @@
+/* 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/floating.css */
+@property --_gap { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+/* src/menu/Menu.module.css */
+@layer components {
+  .Menu_content {
+    --_gap: var(--menu-gap);
+    position: fixed;
+    z-index: var(--menu-layer);
+    inset-block-start: var(--_y);
+    inset-inline-start: var(--_x);
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--menu-min-width);
+    max-inline-size: calc(100vw - 2 * var(--space-4));
+    padding: var(--menu-padding);
+    border: var(--size-hairline) solid var(--menu-border);
+    border-radius: var(--menu-radius);
+    background-color: var(--menu-bg);
+    color: var(--menu-fg);
+    font-family: var(--font-family-body);
+    box-shadow: var(--menu-shadow);
+    animation: Menu_fade var(--menu-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring);
+      outline-offset: var(--menu-focus-ring-offset);
+    }
+  }
+  .Menu_item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    inline-size: 100%;
+    padding-block: var(--menu-item-padding-block);
+    padding-inline: var(--menu-item-padding-inline);
+    border: none;
+    border-radius: var(--menu-item-radius);
+    background-color: transparent;
+    color: var(--menu-item-fg);
+    font-size: var(--menu-item-font-size);
+    text-align: start;
+    cursor: pointer;
+    &[data-tone=danger] {
+      color: var(--menu-item-fg-danger);
+    }
+    &[data-disabled] {
+      color: var(--menu-item-fg-muted);
+      cursor: not-allowed;
+    }
+    &:focus-visible {
+      outline: none;
+      background-color: var(--menu-item-bg-active);
+    }
+    &:hover:not([data-disabled]) {
+      background-color: var(--menu-item-bg-active);
+    }
+  }
+  .Menu_label {
+    flex: 1;
+  }
+  .Menu_separator {
+    block-size: var(--size-hairline);
+    margin-block: var(--menu-padding);
+    background-color: var(--menu-separator);
+  }
+  @keyframes Menu_fade {
+    from {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Menu_content {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=menu.css.map */

package/dist/menu.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/floating.css","../src/menu/Menu.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","/*\n * Registers the gap the floating hook reads. An unregistered custom property\n * computes to its specified text (\"calc(0.25rem * 2)\"), which no number\n * parser can use; a registered <length> computes to pixels (\"8px\"). Browsers\n * without @property (Firefox before 128) fall back to a gap of 0.\n * Outside the components layer on purpose: registration is not cascaded.\n */\n\n@property --_gap {\n  syntax: \"<length>\";\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- a registered <length> needs a unit in its initial value */\n  initial-value: 0px;\n}\n","/* Every value is a token (--menu-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .content {\n    --_gap: var(--menu-gap);\n\n    position: fixed;\n    z-index: var(--menu-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    display: flex;\n    flex-direction: column;\n    min-inline-size: var(--menu-min-width);\n    max-inline-size: calc(100vw - 2 * var(--space-4));\n    padding: var(--menu-padding);\n    border: var(--size-hairline) solid var(--menu-border);\n    border-radius: var(--menu-radius);\n    background-color: var(--menu-bg);\n    color: var(--menu-fg);\n    font-family: var(--font-family-body);\n    box-shadow: var(--menu-shadow);\n    animation: fade var(--menu-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring);\n      outline-offset: var(--menu-focus-ring-offset);\n    }\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    inline-size: 100%;\n    padding-block: var(--menu-item-padding-block);\n    padding-inline: var(--menu-item-padding-inline);\n    border: none;\n    border-radius: var(--menu-item-radius);\n    background-color: transparent;\n    color: var(--menu-item-fg);\n    font-size: var(--menu-item-font-size);\n    text-align: start;\n    cursor: pointer;\n\n    &[data-tone=\"danger\"] {\n      color: var(--menu-item-fg-danger);\n    }\n\n    &[data-disabled] {\n      color: var(--menu-item-fg-muted);\n      cursor: not-allowed;\n    }\n\n    &:focus-visible {\n      outline: none;\n      background-color: var(--menu-item-bg-active);\n    }\n\n    &:hover:not([data-disabled]) {\n      background-color: var(--menu-item-bg-active);\n    }\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .separator {\n    block-size: var(--size-hairline);\n    margin-block: var(--menu-padding);\n    background-color: var(--menu-separator);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .content {\n      animation: none;\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACZA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AACE,GAACC;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,aAAS;AACT,oBAAgB;AAChB,qBAAiB,IAAI;AACrB,qBAAiB,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACtC,aAAS,IAAI;AACb,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,eAAW,UAAK,IAAI,iBAAiB,IAAI;AAEzC,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,iBAAa;AACb,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBAAY;AACZ,YAAQ;AAER,KAAC,CAAC;AACA,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AAEA,KAAC;AACC,eAAS;AACT,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,CAAC;AACX,wBAAkB,IAAI;AACxB;AACF;AAEA,GAACC;AACC,UAAM;AACR;AAEA,GAACC;AACC,gBAAY,IAAI;AAChB,kBAAc,IAAI;AAClB,sBAAkB,IAAI;AACxB;AAEA,aApDaC;AAqDX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA7EDJ;AA8EG,iBAAW;AACb;AACF;AACF;","names":["icon","content","item","label","separator","fade"]}