@pearpages/pulp-react 0.0.0

package/dist/picker.js

@@ -0,0 +1,8 @@
+export { Picker } from './chunk-J5S2HVHO.js';
+import './chunk-4HRNRTXI.js';
+import './chunk-YUHS5S5Y.js';
+import './chunk-T76YSNTZ.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=picker.js.map
+//# sourceMappingURL=picker.js.map

package/dist/picker.js.map

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

package/dist/popover.css

@@ -0,0 +1,48 @@
+/* src/internal/floating.css */
+@property --_gap { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+/* src/popover/Popover.module.css */
+@layer components {
+  .Popover_content {
+    --_gap: var(--popover-gap);
+    position: fixed;
+    z-index: var(--popover-layer);
+    inset-block-start: var(--_y);
+    inset-inline-start: var(--_x);
+    display: flex;
+    flex-direction: column;
+    gap: var(--popover-gap);
+    inline-size: var(--popover-width);
+    max-inline-size: calc(100vw - 2 * var(--space-4));
+    padding: var(--popover-padding);
+    border: var(--size-hairline) solid var(--popover-border);
+    border-radius: var(--popover-radius);
+    background-color: var(--popover-bg);
+    color: var(--popover-fg);
+    font-family: var(--font-family-body);
+    box-shadow: var(--popover-shadow);
+    animation: Popover_fade var(--popover-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      outline: var(--popover-focus-ring-width) solid var(--popover-focus-ring);
+      outline-offset: var(--popover-focus-ring-offset);
+    }
+  }
+  .Popover_title {
+    margin: 0;
+    font-family: var(--font-family-display);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--font-line-height-tight);
+  }
+  @keyframes Popover_fade {
+    from {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Popover_content {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=popover.css.map */

package/dist/popover.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/floating.css","../src/popover/Popover.module.css"],"sourcesContent":["/*\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 (--popover-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .content {\n    --_gap: var(--popover-gap);\n\n    position: fixed;\n    z-index: var(--popover-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    display: flex;\n    flex-direction: column;\n    gap: var(--popover-gap);\n    inline-size: var(--popover-width);\n    max-inline-size: calc(100vw - 2 * var(--space-4));\n    padding: var(--popover-padding);\n    border: var(--size-hairline) solid var(--popover-border);\n    border-radius: var(--popover-radius);\n    background-color: var(--popover-bg);\n    color: var(--popover-fg);\n    font-family: var(--font-family-body);\n    box-shadow: var(--popover-shadow);\n    animation: fade var(--popover-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--popover-focus-ring-width) solid var(--popover-focus-ring);\n      outline-offset: var(--popover-focus-ring-offset);\n    }\n  }\n\n  .title {\n    margin: 0;\n    font-family: var(--font-family-display);\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-semibold);\n    line-height: var(--font-line-height-tight);\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":";AAQA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AACjB,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,aAAK,IAAI,oBAAoB,IAAI;AAE5C,KAAC;AACC,eAAS,IAAI,4BAA4B,MAAM,IAAI;AACnD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAACC;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACnB;AAEA,aAhBaC;AAiBX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA1CDF;AA2CG,iBAAW;AACb;AACF;AACF;","names":["content","title","fade"]}

package/dist/popover.d.ts

@@ -0,0 +1,68 @@
+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 PopoverPlacement = FloatingPlacement;
+interface PopoverProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred side; flips when there is no room. @default 'bottom-start' */
+    placement?: PopoverPlacement;
+    children: ReactNode;
+}
+/**
+ * A non-modal layer anchored to its trigger: a small form, a filter, a
+ * detail panel. The page stays interactive; Escape, a click outside or
+ * `Popover.Close` dismiss it and focus returns to the trigger. Compose with
+ * `Popover.Trigger`, `Popover.Content` and `Popover.Close`. For anything that
+ * must block the page, use Dialog.
+ *
+ * @status stable
+ * @category Overlays
+ * @accessibility A non-modal `role="dialog"` named by `title` (or `aria-label`); the trigger has `aria-haspopup="dialog"` and `aria-expanded`. Focus moves to the first focusable element on open and back to the trigger on close; Escape and a click outside dismiss it.
+ * @do Give it a `title` or `aria-label`.
+ * Use `Popover.Close` inside forms so a keyboard user has a clear exit.
+ * @dont Put a long form or a destructive confirmation in it; use Dialog.
+ * Open it on hover; that is Tooltip.
+ */
+declare function Popover({ open, defaultOpen, onOpenChange, placement, children }: PopoverProps): react.JSX.Element;
+declare namespace Popover {
+    var displayName: string;
+    var Trigger: typeof PopoverTrigger;
+    var Content: typeof PopoverContent;
+    var Close: typeof PopoverClose;
+}
+interface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render the child element as the trigger instead of a plain button. @default false */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+}
+declare function PopoverTrigger({ asChild, onClick, ref, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
+declare namespace PopoverTrigger {
+    var displayName: string;
+}
+interface PopoverContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Rendered as the dialog's heading and used as its accessible name. Otherwise pass `aria-label`. */
+    title?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+declare function PopoverContent({ title, className, ref, children, ...rest }: PopoverContentProps): react.ReactPortal | null;
+declare namespace PopoverContent {
+    var displayName: string;
+}
+interface PopoverCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    children: ReactNode;
+}
+declare function PopoverClose({ asChild, onClick, children, ...rest }: PopoverCloseProps): react.JSX.Element;
+declare namespace PopoverClose {
+    var displayName: string;
+}
+
+export { Popover, type PopoverPlacement, type PopoverProps };

package/dist/popover.js

@@ -0,0 +1,7 @@
+export { Popover } from './chunk-N7L66GMG.js';
+import './chunk-NAYFLTK6.js';
+import './chunk-U6QRAD73.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=popover.js.map
+//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

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

package/dist/progress.css

@@ -0,0 +1,83 @@
+/* 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/progress/Progress.module.css */
+@layer components {
+  .Progress_progress {
+    --_height: var(--progress-height-md);
+    --_indicator: var(--progress-indicator-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--progress-gap);
+    font-family: var(--font-family-body);
+    &[data-size=sm] {
+      --_height: var(--progress-height-sm);
+    }
+    &[data-tone=success] {
+      --_indicator: var(--progress-indicator-success);
+    }
+    &[data-tone=warning] {
+      --_indicator: var(--progress-indicator-warning);
+    }
+    &[data-tone=error] {
+      --_indicator: var(--progress-indicator-error);
+    }
+  }
+  .Progress_header {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-3);
+    font-size: var(--progress-label-font-size);
+  }
+  .Progress_label {
+    color: var(--progress-label-fg);
+  }
+  .Progress_value {
+    color: var(--progress-value-fg);
+    font-variant-numeric: tabular-nums;
+  }
+  .Progress_track {
+    overflow: hidden;
+    block-size: var(--_height);
+    border-radius: var(--progress-radius);
+    background-color: var(--progress-track);
+  }
+  .Progress_indicator {
+    block-size: 100%;
+    inline-size: var(--_value, 0%);
+    border-radius: var(--progress-radius);
+    background-color: var(--_indicator);
+    transition: inline-size var(--progress-duration) var(--motion-easing-standard);
+  }
+  .Progress_progress[data-indeterminate] .Progress_indicator {
+    inline-size: 40%;
+    animation: Progress_slide calc(4 * var(--progress-duration)) var(--motion-easing-standard) infinite;
+  }
+  @keyframes Progress_slide {
+    from {
+      translate: -100% 0;
+    }
+    to {
+      translate: 250% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Progress_progress[data-indeterminate] .Progress_indicator {
+      inline-size: 50%;
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=progress.css.map */

package/dist/progress.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/progress/Progress.module.css"],"sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--progress-*). The fill width is the per-instance --_value custom property. */\n\n@layer components {\n  .progress {\n    --_height: var(--progress-height-md);\n    --_indicator: var(--progress-indicator-primary);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-gap);\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_height: var(--progress-height-sm); }\n    &[data-tone=\"success\"] { --_indicator: var(--progress-indicator-success); }\n    &[data-tone=\"warning\"] { --_indicator: var(--progress-indicator-warning); }\n    &[data-tone=\"error\"] { --_indicator: var(--progress-indicator-error); }\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--space-3);\n    font-size: var(--progress-label-font-size);\n  }\n\n  .label {\n    color: var(--progress-label-fg);\n  }\n\n  .value {\n    color: var(--progress-value-fg);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .track {\n    overflow: hidden;\n    block-size: var(--_height);\n    border-radius: var(--progress-radius);\n    background-color: var(--progress-track);\n  }\n\n  .indicator {\n    block-size: 100%;\n    inline-size: var(--_value, 0%);\n    border-radius: var(--progress-radius);\n    background-color: var(--_indicator);\n    transition: inline-size var(--progress-duration) var(--motion-easing-standard);\n  }\n\n  .progress[data-indeterminate] .indicator {\n    inline-size: 40%;\n    animation: slide calc(4 * var(--progress-duration)) var(--motion-easing-standard) infinite;\n  }\n\n  @keyframes slide {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 250% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress[data-indeterminate] .indicator {\n      inline-size: 50%;\n      animation: none;\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;;;ACZA;AACE,GAACC;AACC,eAAW,IAAI;AACf,kBAAc,IAAI;AAElB,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAuB;AAC1D,KAAC,CAAC;AAAuB,oBAAc,IAAI;AAA+B;AAC1E,KAAC,CAAC;AAAuB,oBAAc,IAAI;AAA+B;AAC1E,KAAC,CAAC;AAAqB,oBAAc,IAAI;AAA6B;AACxE;AAEA,GAACC;AACC,aAAS;AACT,qBAAiB;AACjB,SAAK,IAAI;AACT,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,WAAO,IAAI;AACb;AAEA,GAACC;AACC,WAAO,IAAI;AACX,0BAAsB;AACxB;AAEA,GAACC;AACC,cAAU;AACV,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACxB;AAEA,GAACC;AACC,gBAAY;AACZ,iBAAa,IAAI,QAAQ,EAAE;AAC3B,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY,YAAY,IAAI,qBAAqB,IAAI;AACvD;AAEA,GA9CCL,iBA8CQ,CAAC,oBAAoB,CAR7BK;AASC,iBAAa;AACb,eAAW,eAAM,KAAK,EAAE,EAAE,IAAI,sBAAsB,IAAI,0BAA0B;AACpF;AAEA,aAHaC;AAIX;AACE,iBAAW,MAAM;AACnB;AAEA;AACE,iBAAW,KAAK;AAClB;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA9DDN,iBA8DU,CAAC,oBAAoB,CAxB/BK;AAyBG,mBAAa;AACb,iBAAW;AACb;AACF;AACF;","names":["root","progress","header","label","value","track","indicator","slide"]}

package/dist/progress.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+
+type ProgressTone = 'primary' | 'success' | 'warning' | 'error';
+type ProgressSize = 'sm' | 'md';
+interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Current value; omit for indeterminate. */
+    value?: number;
+    /** @default 100 */
+    max?: number;
+    /** Required: what is progressing. Visible unless `hideLabel`. */
+    label: ReactNode;
+    /** Keep the label for assistive technology only. @default false */
+    hideLabel?: boolean;
+    /** Human-readable value ("3 of 10 files"); defaults to a percentage. */
+    valueText?: string;
+    /** @default 'primary' */
+    tone?: ProgressTone;
+    /** @default 'md' */
+    size?: ProgressSize;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A determinate or indeterminate progress bar. The bar is `role="progressbar"`
+ * labelled by the visible (or visually hidden) label; the fill width is the
+ * one place in the library that carries a per-instance inline value, set as
+ * a custom property. Indeterminate motion stops under reduced motion.
+ *
+ * @status stable
+ * @category Feedback
+ * @accessibility `role="progressbar"` labelled by the required `label` (visible or visually hidden), with `aria-valuenow`/`aria-valuemin`/`aria-valuemax` when determinate and `aria-valuetext` from `valueText`. Indeterminate bars omit `aria-valuenow`.
+ * @do Set `valueText` when the percentage is not the meaningful reading ("3 of 5 files").
+ * @dont Use it for an unknown wait shorter than a few seconds; use Spinner.
+ */
+declare function Progress({ value, max, label, hideLabel, valueText, tone, size, className, ref, ...rest }: ProgressProps): react.JSX.Element;
+declare namespace Progress {
+    var displayName: string;
+}
+
+export { Progress, type ProgressProps, type ProgressSize, type ProgressTone };

package/dist/progress.js

@@ -0,0 +1,5 @@
+export { Progress } from './chunk-75GTNRBH.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=progress.js.map
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

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

package/dist/radio.css

@@ -0,0 +1,107 @@
+/* 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/radio/Radio.module.css */
+@layer components {
+  .Radio_group {
+    --_size: var(--radio-size-md);
+    --_border: var(--radio-border);
+    font-family: var(--font-family-body);
+    &[data-size=sm] {
+      --_size: var(--radio-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--radio-size-lg);
+    }
+    &[data-invalid] {
+      --_border: var(--radio-border-invalid);
+    }
+  }
+  .Radio_items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--radio-group-gap);
+    &[data-orientation=horizontal] {
+      flex-flow: row wrap;
+      gap: var(--radio-group-gap) var(--space-4);
+    }
+  }
+  .Radio_radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--radio-gap);
+    cursor: pointer;
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  }
+  .Radio_label {
+    font-size: var(--field-label-font-size);
+    color: var(--field-label-fg);
+  }
+  .Radio_input {
+    display: grid;
+    flex: none;
+    place-content: center;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    margin: 0;
+    border: var(--size-hairline) solid var(--_border);
+    border-radius: var(--radio-radius);
+    background-color: var(--radio-bg);
+    appearance: none;
+    cursor: inherit;
+    transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);
+    &::after {
+      content: "";
+      inline-size: calc(var(--_size) / 2);
+      block-size: calc(var(--_size) / 2);
+      border-radius: var(--radio-radius);
+      background-color: var(--radio-dot);
+      scale: 0;
+      transition: scale var(--radio-motion-duration) var(--motion-easing-standard);
+    }
+    &:checked {
+      border-color: var(--radio-border-checked);
+      &::after {
+        scale: 1;
+      }
+    }
+    &:focus-visible {
+      outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);
+      outline-offset: var(--radio-focus-ring-offset);
+    }
+    &:disabled {
+      opacity: 0.55;
+    }
+    &:hover:not(:disabled, :checked) {
+      border-color: var(--radio-border-hover);
+    }
+  }
+}
+/*# sourceMappingURL=radio.css.map */

package/dist/radio.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/radio/Radio.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","/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer components {\n  .group {\n    --_size: var(--radio-size-md);\n    --_border: var(--radio-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n    &[data-invalid] { --_border: var(--radio-border-invalid); }\n  }\n\n  .items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--radio-group-gap);\n\n    &[data-orientation=\"horizontal\"] {\n      flex-flow: row wrap;\n      gap: var(--radio-group-gap) var(--space-4);\n    }\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--radio-gap);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    color: var(--field-label-fg);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--radio-radius);\n    background-color: var(--radio-bg);\n    appearance: none;\n    cursor: inherit;\n    transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) / 2);\n      block-size: calc(var(--_size) / 2);\n      border-radius: var(--radio-radius);\n      background-color: var(--radio-dot);\n      scale: 0;\n      transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      border-color: var(--radio-border-checked);\n\n      &::after {\n        scale: 1;\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n      outline-offset: var(--radio-focus-ring-offset);\n    }\n\n    &:disabled {\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      border-color: var(--radio-border-hover);\n    }\n  }\n}\n"],"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;;;AC7BA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAkB;AACnD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAkB;AACnD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAAyB;AAC5D;AAEA,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AAET,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,WAAK,IAAI,mBAAmB,IAAI;AAClC;AACF;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,YAAQ;AAER,KAAC,CAAC;AACA,cAAQ;AACV;AACF;AAEA,GAACC;AACC,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,mBAAe;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBAAY,aAAa,IAAI,yBAAyB,IAAI;AAG1D,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,qBAAe,IAAI;AACnB,wBAAkB,IAAI;AACtB,aAAO;AACP,kBAAY,MAAM,IAAI,yBAAyB,IAAI;AACrD;AAEA,KAAC;AACC,oBAAc,IAAI;AAElB,OAAC;AACC,eAAO;AACT;AACF;AAEA,KAAC;AACC,eAAS,IAAI,0BAA0B,MAAM,IAAI;AACjD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AACF;","names":["field","label","required","description","error","group","items","radio","label","input"]}

package/dist/radio.d.ts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, Ref, HTMLAttributes } from 'react';
+
+type RadioSize = 'sm' | 'md' | 'lg';
+type RadioGroupOrientation = 'vertical' | 'horizontal';
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /** Visible group label. */
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    /** Form field name shared by the radios. Generated when omitted. */
+    name?: string;
+    /** Controlled selected value. */
+    value?: string;
+    /** Initially selected value when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** @default 'vertical' */
+    orientation?: RadioGroupOrientation;
+    /** @default 'md' */
+    size?: RadioSize;
+    disabled?: boolean;
+    required?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+/**
+ * A set of native radios under one label. The group is labelled by
+ * reference (`aria-labelledby`) and described through Field, so description
+ * and error apply to the whole set. Keyboard is the browser's own: arrows
+ * move and select within the group. Controlled or uncontrolled by `value`.
+ *
+ * @status stable
+ * @category Forms
+ * @accessibility A `radiogroup` labelled by reference through Field and described by its description and error. Native radios: arrows move and select within the group, Tab leaves it.
+ * @do Use it for two to five exclusive options that should all be visible.
+ * @dont Preselect a consequential choice; leave the group empty and mark it required.
+ */
+declare function RadioGroup({ label, description, error, name, value, defaultValue, onValueChange, orientation, size, disabled, required, id, className, ref, children, ...rest }: RadioGroupProps): react.JSX.Element;
+declare namespace RadioGroup {
+    var displayName: string;
+}
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'onChange'> {
+    /** The value this radio contributes to the group. */
+    value: string;
+    /** Visible label beside the radio. */
+    label: ReactNode;
+    /** The `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+    /** Applied to the wrapping label, not the input. */
+    className?: string;
+}
+/** One option of a RadioGroup. Must be rendered inside `RadioGroup`. */
+/**
+ * One option of a RadioGroup: a native radio with its own visible label.
+ *
+ * @status stable
+ * @category Forms
+ * @accessibility A native `input type="radio"` labelled by its visible text; the group semantics, description and error come from RadioGroup.
+ * @do Render it only inside RadioGroup.
+ * @dont Disable a single radio without saying why in its label or the group description.
+ */
+declare function Radio({ value, label, disabled, className, ref, ...rest }: RadioProps): react.JSX.Element;
+declare namespace Radio {
+    var displayName: string;
+}
+
+export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type RadioSize };

package/dist/radio.js

@@ -0,0 +1,6 @@
+export { Radio, RadioGroup } from './chunk-XDVS7HX7.js';
+import './chunk-2PXTVZ7H.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=radio.js.map
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

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

package/dist/select.css

@@ -0,0 +1,98 @@
+/* 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/select/Select.module.css */
+@layer components {
+  .Select_field {
+    --_height: var(--select-height-md);
+    --_font-size: var(--select-font-size-md);
+    --_border: var(--select-border-default);
+    font-family: var(--select-font-family);
+    &[data-size=sm] {
+      --_height: var(--select-height-sm);
+      --_font-size: var(--select-font-size-sm);
+    }
+    &[data-size=lg] {
+      --_height: var(--select-height-lg);
+      --_font-size: var(--select-font-size-lg);
+    }
+    &[data-invalid] {
+      --_border: var(--select-border-invalid);
+    }
+  }
+  .Select_control {
+    display: grid;
+    align-items: center;
+    & > * {
+      grid-area: 1 / 1;
+    }
+    &::after {
+      content: "";
+      inline-size: var(--space-2);
+      block-size: var(--space-2);
+      margin-inline-end: var(--select-chevron-inset);
+      border-inline-end: var(--select-chevron-width) solid var(--select-chevron);
+      border-block-end: var(--select-chevron-width) solid var(--select-chevron);
+      justify-self: end;
+      rotate: 45deg;
+      translate: 0 -25%;
+      pointer-events: none;
+      grid-area: 1 / 1;
+    }
+  }
+  .Select_select {
+    inline-size: 100%;
+    min-block-size: var(--_height);
+    padding-block: 0;
+    padding-inline: var(--select-padding-inline) var(--select-chevron-gap);
+    border: var(--size-hairline) solid var(--_border);
+    border-radius: var(--select-radius);
+    background-color: var(--select-bg);
+    color: var(--select-fg);
+    font-size: var(--_font-size);
+    appearance: none;
+    cursor: pointer;
+    transition: border-color var(--select-motion-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      border-color: var(--select-border-focus);
+      outline: var(--select-focus-ring-width) solid var(--select-focus-ring);
+      outline-offset: var(--select-focus-ring-offset);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &:hover:not(:disabled, :focus-visible) {
+      border-color: var(--select-border-hover);
+    }
+    &:has(option[value=""]:checked) {
+      color: var(--select-placeholder);
+    }
+  }
+}
+/*# sourceMappingURL=select.css.map */

package/dist/select.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/select/Select.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 (--select-*). The chevron is the wrapper's ::after,\n * sharing the select's grid cell. Size and invalid state resolve into private\n * custom properties on the root.\n */\n\n@layer components {\n  .field {\n    --_height: var(--select-height-md);\n    --_font-size: var(--select-font-size-md);\n    --_border: var(--select-border-default);\n\n    font-family: var(--select-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--select-height-sm);\n      --_font-size: var(--select-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--select-height-lg);\n      --_font-size: var(--select-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--select-border-invalid); }\n  }\n\n  .control {\n    display: grid;\n    align-items: center;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n\n    &::after {\n      content: \"\";\n      inline-size: var(--space-2);\n      block-size: var(--space-2);\n      margin-inline-end: var(--select-chevron-inset);\n      border-inline-end: var(--select-chevron-width) solid var(--select-chevron);\n      border-block-end: var(--select-chevron-width) solid var(--select-chevron);\n      justify-self: end;\n      rotate: 45deg;\n      translate: 0 -25%;\n      pointer-events: none;\n      grid-area: 1 / 1;\n    }\n  }\n\n  .select {\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--select-padding-inline) var(--select-chevron-gap);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--select-radius);\n    background-color: var(--select-bg);\n    color: var(--select-fg);\n    font-size: var(--_font-size);\n    appearance: none;\n    cursor: pointer;\n    transition: border-color var(--select-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      border-color: var(--select-border-focus);\n      outline: var(--select-focus-ring-width) solid var(--select-focus-ring);\n      outline-offset: var(--select-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--select-border-hover);\n    }\n\n    &:has(option[value=\"\"]:checked) {\n      color: var(--select-placeholder);\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,eAAW,IAAI;AACf,kBAAc,IAAI;AAClB,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA0B;AAC7D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AAEb,MAAE,EAAE;AACF,iBAAW,EAAE,EAAE;AACjB;AAEA,KAAC;AACC,eAAS;AACT,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,yBAAmB,IAAI;AACvB,yBAAmB,IAAI,wBAAwB,MAAM,IAAI;AACzD,wBAAkB,IAAI,wBAAwB,MAAM,IAAI;AACxD,oBAAc;AACd,cAAQ;AACR,iBAAW,EAAE;AACb,sBAAgB;AAChB,iBAAW,EAAE,EAAE;AACjB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI,yBAAyB,IAAI;AACjD,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBAAY;AACZ,YAAQ;AACR,gBAAY,aAAa,IAAI,0BAA0B,IAAI;AAE3D,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AAEA,KAAC,KAAK,MAAM,CAAC,SAAS;AACpB,aAAO,IAAI;AACb;AACF;AACF;","names":["field","label","required","description","error","field","control","select"]}

package/dist/select.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { SelectHTMLAttributes, ReactNode, Ref } from 'react';
+
+type SelectSize = 'sm' | 'md' | 'lg';
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Visible label. Always rendered. */
+    label: ReactNode;
+    description?: ReactNode;
+    /** Presence marks the control invalid and announces the message. */
+    error?: ReactNode;
+    /** @default 'md' */
+    size?: SelectSize;
+    /** An empty first option shown until a value is chosen. */
+    placeholder?: string;
+    /** The `<select>` element. */
+    ref?: Ref<HTMLSelectElement>;
+    /** Applied to the wrapper, not the select. */
+    className?: string;
+    /** `<option>` and `<optgroup>` elements. */
+    children: ReactNode;
+}
+/**
+ * A native `<select>` on top of Field: the browser's own popup, keyboard and
+ * assistive-technology support, with the closed control drawn from
+ * `--select-*` tokens. For rich options or multi-select, a listbox component
+ * comes later on a headless layer; this one stays native on purpose.
+ *
+ * @status stable
+ * @category Forms
+ * @accessibility A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.
+ * @do Use it for a plain list of words; it is the most robust choice on every platform.
+ * @dont Use it for options that need a description or an icon; use Picker.
+ */
+declare function Select({ label, description, error, size, placeholder, required, disabled, id, className, ref, children, 'aria-describedby': describedBy, ...rest }: SelectProps): react.JSX.Element;
+declare namespace Select {
+    var displayName: string;
+}
+
+export { Select, type SelectProps, type SelectSize };

package/dist/select.js

@@ -0,0 +1,6 @@
+export { Select } from './chunk-OGIQRHNF.js';
+import './chunk-2PXTVZ7H.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

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