@pearpages/pulp-react 0.0.0

package/dist/stack.d.ts

@@ -0,0 +1,319 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref, ReactNode } from 'react';
+
+type StackGap = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+type StackJustify = 'start' | 'center' | 'end' | 'between';
+type StackElement = 'div' | 'section' | 'nav' | 'ul' | 'ol' | 'li';
+interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** @default 'div' */
+    as?: StackElement;
+    /** Step on the spacing scale (`--space-1` … `--space-8`). @default 3 */
+    gap?: StackGap;
+    align?: StackAlign;
+    justify?: StackJustify;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+/**
+ * A flex column 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 column.
+ */
+declare function Stack({ as, gap, align, justify, className, ref, children, ...rest }: StackProps): react.DetailedReactHTMLElement<{
+    ref: Ref<HTMLElement> | undefined;
+    role: react.AriaRole | undefined;
+    className: string;
+    'data-gap': StackGap;
+    'data-align': StackAlign | undefined;
+    'data-justify': StackJustify | 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 Stack {
+    var displayName: string;
+}
+
+export { Stack, type StackAlign, type StackElement, type StackGap, type StackJustify, type StackProps };

package/dist/stack.js

@@ -0,0 +1,4 @@
+export { Stack } from './chunk-7DS4I7OJ.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=stack.js.map
+//# sourceMappingURL=stack.js.map

package/dist/stack.js.map

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

package/dist/switch.css

@@ -0,0 +1,97 @@
+/* src/field/Field.module.css */
+@layer components {
+  .Field_field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+  }
+  .Field_label {
+    font-size: var(--field-label-font-size);
+    font-weight: var(--field-label-font-weight);
+    color: var(--field-label-fg);
+  }
+  .Field_required {
+    margin-inline-start: var(--field-required-gap);
+    color: var(--field-required-fg);
+  }
+  .Field_description {
+    margin: 0;
+    font-size: var(--field-description-font-size);
+    color: var(--field-description-fg);
+  }
+  .Field_error {
+    margin: 0;
+    font-size: var(--field-error-font-size);
+    color: var(--field-error-fg);
+  }
+}
+
+/* src/switch/Switch.module.css */
+@layer components {
+  .Switch_switch {
+    --_size: var(--switch-size-md);
+    --_track: var(--switch-track-bg);
+    font-family: var(--font-family-body);
+    &[data-size=sm] {
+      --_size: var(--switch-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--switch-size-lg);
+    }
+    &[data-invalid] {
+      --_track: var(--switch-track-invalid);
+    }
+  }
+  .Switch_row {
+    display: flex;
+    align-items: center;
+    gap: var(--switch-gap);
+  }
+  .Switch_input {
+    --_inset: calc(2 * var(--switch-thumb-inset));
+    position: relative;
+    flex: none;
+    inline-size: calc(2 * var(--_size));
+    block-size: var(--_size);
+    margin: 0;
+    border: none;
+    border-radius: var(--switch-radius);
+    background-color: var(--_track);
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--switch-motion-duration) var(--motion-easing-standard);
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block-start: var(--_inset);
+      inset-inline-start: var(--_inset);
+      inline-size: calc(var(--_size) - 2 * var(--_inset));
+      block-size: calc(var(--_size) - 2 * var(--_inset));
+      border-radius: var(--switch-radius);
+      background-color: var(--switch-thumb);
+      transition: translate var(--switch-motion-duration) var(--motion-easing-standard);
+    }
+    &:checked {
+      background-color: var(--switch-track-bg-checked);
+      &::before {
+        translate: var(--_size) 0;
+        background-color: var(--switch-thumb-checked);
+      }
+    }
+    &:focus-visible {
+      outline: var(--switch-focus-ring-width) solid var(--switch-focus-ring);
+      outline-offset: var(--switch-focus-ring-offset);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &:hover:not(:disabled, :checked) {
+      background-color: var(--switch-track-bg-hover);
+    }
+    &:hover:not(:disabled):checked {
+      background-color: var(--switch-track-bg-checked-hover);
+    }
+  }
+}
+/*# sourceMappingURL=switch.css.map */

package/dist/switch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/switch/Switch.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\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 (--switch-*). The input is the track; its ::before\n * is the thumb. Size and invalid state resolve into private custom\n * properties on the root.\n */\n\n@layer components {\n  .switch {\n    --_size: var(--switch-size-md);\n    --_track: var(--switch-track-bg);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--switch-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--switch-size-lg); }\n    &[data-invalid] { --_track: var(--switch-track-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--switch-gap);\n  }\n\n  .input {\n    --_inset: calc(2 * var(--switch-thumb-inset));\n\n    position: relative;\n    flex: none;\n    inline-size: calc(2 * var(--_size));\n    block-size: var(--_size);\n    margin: 0;\n    border: none;\n    border-radius: var(--switch-radius);\n    background-color: var(--_track);\n    appearance: none;\n    cursor: pointer;\n    transition: background-color var(--switch-motion-duration) var(--motion-easing-standard);\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-block-start: var(--_inset);\n      inset-inline-start: var(--_inset);\n      inline-size: calc(var(--_size) - 2 * var(--_inset));\n      block-size: calc(var(--_size) - 2 * var(--_inset));\n      border-radius: var(--switch-radius);\n      background-color: var(--switch-thumb);\n      transition: translate var(--switch-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      background-color: var(--switch-track-bg-checked);\n\n      &::before {\n        translate: var(--_size) 0;\n        background-color: var(--switch-thumb-checked);\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--switch-focus-ring-width) solid var(--switch-focus-ring);\n      outline-offset: var(--switch-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      background-color: var(--switch-track-bg-hover);\n    }\n\n    &:hover:not(:disabled):checked {\n      background-color: var(--switch-track-bg-checked-hover);\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;ACzBA;AACE,GAACC;AACC,aAAS,IAAI;AACb,cAAU,IAAI;AAEd,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAmB;AACpD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAmB;AACpD,KAAC,CAAC;AAAgB,gBAAU,IAAI;AAAyB;AAC3D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;AAEA,GAACC;AACC,cAAU,KAAK,EAAE,EAAE,IAAI;AAEvB,cAAU;AACV,UAAM;AACN,iBAAa,KAAK,EAAE,EAAE,IAAI;AAC1B,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,0BAA0B,IAAI;AAE/D,KAAC;AACC,eAAS;AACT,gBAAU;AACV,yBAAmB,IAAI;AACvB,0BAAoB,IAAI;AACxB,mBAAa,KAAK,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI;AACzC,kBAAY,KAAK,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI;AACxC,qBAAe,IAAI;AACnB,wBAAkB,IAAI;AACtB,kBAAY,UAAU,IAAI,0BAA0B,IAAI;AAC1D;AAEA,KAAC;AACC,wBAAkB,IAAI;AAEtB,OAAC;AACC,mBAAW,IAAI,SAAS;AACxB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC;AACC,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,UAAU;AACpB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","switch","row","input"]}

package/dist/switch.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { T as ToggleSize } from './ToggleField-C-qKSgHh.js';
+
+type SwitchSize = ToggleSize;
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Visible label beside the switch. */
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    /** @default 'md' */
+    size?: SwitchSize;
+    /** The `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+    /** Applied to the wrapper, not the input. */
+    className?: string;
+}
+/**
+ * An on/off control: a native checkbox with `role="switch"`, so assistive
+ * technology announces on and off, and the browser handles keyboard, forms
+ * and state. Use it for settings that take effect immediately; use Checkbox
+ * for choices submitted with a form. Drawn with `--switch-*` tokens.
+ *
+ * @status stable
+ * @category Forms
+ * @accessibility A native checkbox with `role="switch"`, so on and off are announced; Space toggles; label, description and error wire through Field.
+ * @do Use it for settings that apply immediately.
+ * @dont Use it inside a form that needs a submit; use Checkbox.
+ */
+declare function Switch({ label, description, error, size, required, disabled, id, className, ref, 'aria-describedby': describedBy, ...rest }: SwitchProps): react.JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
+
+export { Switch, type SwitchProps, type SwitchSize };

package/dist/switch.js

@@ -0,0 +1,7 @@
+export { Switch } from './chunk-OUFAFINB.js';
+import './chunk-BBV4L5WO.js';
+import './chunk-2PXTVZ7H.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

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

package/dist/table.css

@@ -0,0 +1,188 @@
+/* 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/table/Table.module.css */
+@layer components {
+  .Table_container {
+    overflow: auto;
+    border: var(--size-hairline) solid var(--table-border);
+    border-radius: var(--table-radius);
+    background-color: var(--table-bg);
+    color: var(--table-fg);
+    font-family: var(--table-font-family);
+    font-size: var(--table-font-size);
+  }
+  .Table_table {
+    --_padding-block: var(--table-cell-padding-block-default);
+    inline-size: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    outline: none;
+    &[data-density=compact] {
+      --_padding-block: var(--table-cell-padding-block-compact);
+    }
+    &[data-focus-visible] {
+      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);
+      outline-offset: calc(-1 * var(--table-focus-ring-width));
+    }
+  }
+  .Table_header {
+    background-color: var(--table-header-bg);
+  }
+  .Table_container[data-sticky-header] .Table_header {
+    position: sticky;
+    inset-block-start: 0;
+  }
+  .Table_column {
+    padding-block: var(--_padding-block);
+    padding-inline: var(--table-cell-padding-inline);
+    border-block-end: var(--size-hairline) solid var(--table-border);
+    color: var(--table-header-fg);
+    font-size: var(--table-header-font-size);
+    font-weight: var(--table-header-font-weight);
+    text-align: start;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    outline: none;
+    &[data-align=end] {
+      text-align: end;
+    }
+    &[data-allows-sorting] {
+      cursor: pointer;
+    }
+    &[data-allows-sorting]::after {
+      content: "";
+      display: inline-block;
+      inline-size: var(--table-header-sort-indicator-size);
+      block-size: var(--table-header-sort-indicator-size);
+      margin-inline-start: var(--table-header-sort-indicator-size);
+      border-inline-end: var(--table-header-sort-indicator-width) solid currentcolor;
+      border-block-end: var(--table-header-sort-indicator-width) solid currentcolor;
+      rotate: -135deg;
+      translate: 0 25%;
+      opacity: 0;
+      transition: opacity var(--table-motion-duration) var(--motion-easing-standard);
+    }
+    &[data-hovered]::after {
+      opacity: 0.5;
+    }
+    &[data-sort-direction] {
+      color: var(--table-header-fg-active);
+    }
+    &[data-sort-direction]::after {
+      color: var(--table-header-sort-indicator);
+      opacity: 1;
+    }
+    &[data-sort-direction=descending]::after {
+      rotate: 45deg;
+      translate: 0 -25%;
+    }
+    &[data-focus-visible] {
+      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);
+      outline-offset: calc(-1 * var(--table-focus-ring-width));
+    }
+  }
+  .Table_row {
+    outline: none;
+    transition: background-color var(--table-motion-duration) var(--motion-easing-standard);
+    &[data-hovered] {
+      background-color: var(--table-row-bg-hover);
+    }
+    &[data-selected] {
+      background-color: var(--table-row-bg-selected);
+    }
+    &[data-disabled] {
+      color: var(--table-row-fg-disabled);
+    }
+    &[data-focus-visible] {
+      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);
+      outline-offset: calc(-1 * var(--table-focus-ring-width));
+    }
+  }
+  .Table_cell {
+    padding-block: var(--_padding-block);
+    padding-inline: var(--table-cell-padding-inline);
+    outline: none;
+    &[data-align=end] {
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+    &[data-focus-visible] {
+      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);
+      outline-offset: calc(-1 * var(--table-focus-ring-width));
+    }
+  }
+  .Table_body .Table_row:not(:last-child) .Table_cell {
+    border-block-end: var(--size-hairline) solid var(--table-border);
+  }
+  .Table_selectColumn,
+  .Table_selectCell {
+    inline-size: var(--table-select-size);
+    padding-inline-end: 0;
+  }
+  .Table_selectBox {
+    display: grid;
+    place-content: center;
+    inline-size: var(--table-select-size);
+    block-size: var(--table-select-size);
+    border: var(--size-hairline) solid var(--table-select-border);
+    border-radius: var(--table-select-radius);
+    background-color: var(--table-select-bg);
+    transition: background-color var(--table-motion-duration) var(--motion-easing-standard), border-color var(--table-motion-duration) var(--motion-easing-standard);
+    &::after {
+      content: "";
+      inline-size: calc(var(--table-select-size) * 0.3);
+      block-size: calc(var(--table-select-size) * 0.55);
+      border-style: solid;
+      border-color: var(--table-select-check);
+      border-width: 0 var(--table-select-check-width) var(--table-select-check-width) 0;
+      rotate: 45deg;
+      translate: 0 -10%;
+      opacity: 0;
+    }
+  }
+  .Table_select {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--table-select-size);
+    block-size: var(--table-select-size);
+    cursor: pointer;
+    &[data-focus-visible] .Table_selectBox {
+      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);
+      outline-offset: var(--table-focus-ring-offset);
+    }
+    &[data-selected] .Table_selectBox,
+    &[data-indeterminate] .Table_selectBox {
+      border-color: var(--table-select-bg-checked);
+      background-color: var(--table-select-bg-checked);
+      &::after {
+        opacity: 1;
+      }
+    }
+    &[data-indeterminate] .Table_selectBox::after {
+      inline-size: calc(var(--table-select-size) * 0.55);
+      block-size: 0;
+      border-width: 0 0 var(--table-select-check-width);
+      rotate: 0deg;
+      translate: 0 0;
+    }
+  }
+  .Table_empty {
+    padding: var(--table-empty-padding);
+    color: var(--table-empty-fg);
+    text-align: center;
+  }
+}
+/*# sourceMappingURL=table.css.map */