@pearpages/pulp-react 0.0.0

package/dist/skeleton.css

@@ -0,0 +1,59 @@
+/* src/skeleton/Skeleton.module.css */
+@layer components {
+  .Skeleton_skeleton {
+    --_size: var(--skeleton-circle-md);
+    display: block;
+    inline-size: 100%;
+    border-radius: var(--skeleton-radius);
+    background-color: var(--skeleton-base);
+    background-image:
+      linear-gradient(
+        90deg,
+        var(--skeleton-base),
+        var(--skeleton-highlight),
+        var(--skeleton-base));
+    background-size: 200% 100%;
+    animation: Skeleton_shimmer calc(6 * var(--skeleton-duration)) linear infinite;
+    &[data-shape=text] {
+      block-size: var(--skeleton-text-height);
+    }
+    &[data-shape=rect] {
+      block-size: var(--skeleton-circle-lg);
+    }
+    &[data-shape=circle] {
+      inline-size: var(--_size);
+      block-size: var(--_size);
+      border-radius: var(--radius-full);
+    }
+    &[data-size=sm] {
+      --_size: var(--skeleton-circle-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--skeleton-circle-lg);
+    }
+    &[data-last] {
+      inline-size: 60%;
+    }
+  }
+  .Skeleton_lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skeleton-gap);
+    inline-size: 100%;
+  }
+  @keyframes Skeleton_shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Skeleton_skeleton {
+      animation: none;
+      background-image: none;
+    }
+  }
+}
+/*# sourceMappingURL=skeleton.css.map */

package/dist/skeleton.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/Skeleton.module.css"],"sourcesContent":["/* Every value is a token (--skeleton-*). Shimmer is a moving background-image; off under reduced motion. */\n\n@layer components {\n  .skeleton {\n    --_size: var(--skeleton-circle-md);\n\n    display: block;\n    inline-size: 100%;\n    border-radius: var(--skeleton-radius);\n    background-color: var(--skeleton-base);\n    background-image: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-highlight), var(--skeleton-base));\n    background-size: 200% 100%;\n    animation: shimmer calc(6 * var(--skeleton-duration)) linear infinite;\n\n    &[data-shape=\"text\"] {\n      block-size: var(--skeleton-text-height);\n    }\n\n    &[data-shape=\"rect\"] {\n      block-size: var(--skeleton-circle-lg);\n    }\n\n    &[data-shape=\"circle\"] {\n      inline-size: var(--_size);\n      block-size: var(--_size);\n      border-radius: var(--radius-full);\n    }\n\n    &[data-size=\"sm\"] { --_size: var(--skeleton-circle-sm); }\n    &[data-size=\"lg\"] { --_size: var(--skeleton-circle-lg); }\n\n    &[data-last] {\n      inline-size: 60%;\n    }\n  }\n\n  .lines {\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-gap);\n    inline-size: 100%;\n  }\n\n  @keyframes shimmer {\n    from {\n      background-position: 200% 0;\n    }\n\n    to {\n      background-position: -200% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton {\n      animation: none;\n      background-image: none;\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS,IAAI;AAEb,aAAS;AACT,iBAAa;AACb,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB;AAAA,MAAkB;AAAA,QAAgB,KAAK;AAAA,QAAE,IAAI,gBAAgB;AAAA,QAAE,IAAI,qBAAqB;AAAA,QAAE,IAAI;AAC9F,qBAAiB,KAAK;AACtB,eAAW,iBAAQ,KAAK,EAAE,EAAE,IAAI,sBAAsB,OAAO;AAE7D,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,qBAAe,IAAI;AACrB;AAEA,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAuB;AACxD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAuB;AAExD,KAAC,CAAC;AACA,mBAAa;AACf;AACF;AAEA,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa;AACf;AAEA,aA/BaC;AAgCX;AACE,2BAAqB,KAAK;AAC5B;AAEA;AACE,2BAAqB,MAAM;AAC7B;AACF;AAEA,UAAO,wBAAyB;AAC9B,KAnDDF;AAoDG,iBAAW;AACX,wBAAkB;AACpB;AACF;AACF;","names":["skeleton","lines","shimmer"]}

package/dist/skeleton.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref } from 'react';
+
+type SkeletonShape = 'text' | 'rect' | 'circle';
+type SkeletonSize = 'sm' | 'md' | 'lg';
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** @default 'text' */
+    shape?: SkeletonShape;
+    /** Number of text lines; the last is shorter. @default 1 */
+    lines?: number;
+    /** Circle diameter, from the control scale. @default 'md' */
+    size?: SkeletonSize;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * A placeholder for content that is loading. Decorative: hidden from
+ * assistive technology, so mark the *container* `aria-busy` and announce
+ * the loaded state there. Width for text and rect is the consumer's (pass
+ * a `className`); the shimmer runs only when motion is allowed.
+ *
+ * @status stable
+ * @category Feedback
+ * @accessibility `aria-hidden`: a placeholder has nothing to announce. Mark the container `aria-busy` while loading and clear it when content arrives; the shimmer stops under reduced motion.
+ * @do Match the shape of the content it stands in for.
+ * Set `aria-busy` on the region, not on the skeleton.
+ * @dont Show it for content that arrives in under a few hundred milliseconds.
+ * Animate it when the user prefers reduced motion; the CSS already stops it.
+ */
+declare function Skeleton({ shape, lines, size, className, ref, ...rest }: SkeletonProps): react.JSX.Element;
+declare namespace Skeleton {
+    var displayName: string;
+}
+
+export { Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonSize };

package/dist/skeleton.js

@@ -0,0 +1,4 @@
+export { Skeleton } from './chunk-ASOQ2MVR.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=skeleton.js.map
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

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

package/dist/slider.css

@@ -0,0 +1,126 @@
+/* src/internal/AriaField.module.css */
+@layer components {
+  .AriaField_field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+    font-family: var(--font-family-body);
+  }
+  .AriaField_label {
+    font-size: var(--field-label-font-size);
+    font-weight: var(--field-label-font-weight);
+    color: var(--field-label-fg);
+  }
+  .AriaField_required {
+    margin-inline-start: var(--field-required-gap);
+    color: var(--field-required-fg);
+  }
+  .AriaField_description {
+    margin: 0;
+    font-size: var(--field-description-font-size);
+    color: var(--field-description-fg);
+  }
+  .AriaField_error {
+    margin: 0;
+    font-size: var(--field-error-font-size);
+    color: var(--field-error-fg);
+  }
+}
+
+/* src/slider/Slider.module.css */
+@layer components {
+  .Slider_root {
+    --_thumb: var(--slider-thumb-size);
+    display: flex;
+    flex-direction: column;
+    gap: var(--slider-gap);
+    inline-size: 100%;
+    font-family: var(--slider-font-family);
+    &[data-orientation=vertical] {
+      inline-size: auto;
+      block-size: var(--slider-track-length);
+    }
+  }
+  .Slider_header {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--slider-gap);
+  }
+  .Slider_hidden {
+    position: absolute;
+    inline-size: var(--size-hairline);
+    block-size: var(--size-hairline);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .Slider_output {
+    color: var(--slider-output-fg);
+    font-family: var(--slider-output-font-family);
+    font-size: var(--slider-output-font-size);
+    font-variant-numeric: tabular-nums;
+  }
+  .Slider_track {
+    position: relative;
+    block-size: var(--slider-track-hit-size);
+    .Slider_root[data-orientation=vertical] & {
+      inline-size: var(--slider-track-hit-size);
+      block-size: 100%;
+    }
+  }
+  .Slider_root[data-disabled] .Slider_track {
+    opacity: 0.55;
+  }
+  .Slider_rail {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 100%;
+    block-size: var(--slider-track-size);
+    overflow: hidden;
+    border-radius: var(--slider-track-radius);
+    background-color: var(--slider-track-bg);
+    translate: 0 -50%;
+    .Slider_root[data-orientation=vertical] & {
+      inset-block-start: 0;
+      inset-inline-start: 50%;
+      inline-size: var(--slider-track-size);
+      block-size: 100%;
+      translate: -50% 0;
+    }
+  }
+  .Slider_fill {
+    position: absolute;
+    block-size: 100%;
+    background-color: var(--slider-fill);
+    .Slider_root[data-orientation=vertical] & {
+      inline-size: 100%;
+    }
+  }
+  .Slider_thumb {
+    inset-block-start: 50%;
+    inline-size: var(--_thumb);
+    block-size: var(--_thumb);
+    border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
+    border-radius: var(--slider-thumb-radius);
+    background-color: var(--slider-thumb-bg);
+    box-shadow: var(--slider-thumb-shadow);
+    cursor: grab;
+    transition: border-color var(--slider-motion-duration) var(--motion-easing-standard);
+    .Slider_root[data-orientation=vertical] & {
+      inset-block-start: auto;
+      inset-inline-start: 50%;
+    }
+    &[data-hovered],
+    &[data-dragging] {
+      border-color: var(--slider-thumb-border-hover);
+    }
+    &[data-dragging] {
+      cursor: grabbing;
+    }
+    &[data-focus-visible] {
+      outline: var(--slider-focus-ring-width) solid var(--slider-focus-ring);
+      outline-offset: var(--slider-focus-ring-offset);
+    }
+  }
+}
+/*# sourceMappingURL=slider.css.map */

package/dist/slider.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/AriaField.module.css","../src/slider/Slider.module.css"],"sourcesContent":["/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--slider-*); the label and description read\n * --field-*. React Aria positions the thumbs and the fill (its inline\n * values); the rail is the visible track inside a larger pointer target.\n * State: data-orientation and data-disabled on the root; data-dragging,\n * data-hovered, data-focus-visible on a thumb.\n */\n\n@layer components {\n  .root {\n    --_thumb: var(--slider-thumb-size);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--slider-gap);\n    inline-size: 100%;\n    font-family: var(--slider-font-family);\n\n    &[data-orientation=\"vertical\"] {\n      inline-size: auto;\n      block-size: var(--slider-track-length);\n    }\n\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--slider-gap);\n  }\n\n  .hidden {\n    position: absolute;\n    inline-size: var(--size-hairline);\n    block-size: var(--size-hairline);\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .output {\n    color: var(--slider-output-fg);\n    font-family: var(--slider-output-font-family);\n    font-size: var(--slider-output-font-size);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .track {\n    position: relative;\n    block-size: var(--slider-track-hit-size);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: var(--slider-track-hit-size);\n      block-size: 100%;\n    }\n  }\n\n  /* Disabled dims the track, not the label and output, so the text keeps its contrast. */\n  .root[data-disabled] .track {\n    opacity: 0.55;\n  }\n\n  .rail {\n    position: absolute;\n    inset-block-start: 50%;\n    inline-size: 100%;\n    block-size: var(--slider-track-size);\n    overflow: hidden;\n    border-radius: var(--slider-track-radius);\n    background-color: var(--slider-track-bg);\n    translate: 0 -50%;\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      inline-size: var(--slider-track-size);\n      block-size: 100%;\n      translate: -50% 0;\n    }\n  }\n\n  .fill {\n    position: absolute;\n    block-size: 100%;\n    background-color: var(--slider-fill);\n\n    .root[data-orientation=\"vertical\"] & {\n      inline-size: 100%;\n    }\n  }\n\n  .thumb {\n    inset-block-start: 50%;\n    inline-size: var(--_thumb);\n    block-size: var(--_thumb);\n    border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);\n    border-radius: var(--slider-thumb-radius);\n    background-color: var(--slider-thumb-bg);\n    box-shadow: var(--slider-thumb-shadow);\n    cursor: grab;\n    transition: border-color var(--slider-motion-duration) var(--motion-easing-standard);\n\n    .root[data-orientation=\"vertical\"] & {\n      inset-block-start: auto;\n      inset-inline-start: 50%;\n    }\n\n    &[data-hovered],\n    &[data-dragging] {\n      border-color: var(--slider-thumb-border-hover);\n    }\n\n    &[data-dragging] {\n      cursor: grabbing;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--slider-focus-ring-width) solid var(--slider-focus-ring);\n      outline-offset: var(--slider-focus-ring-offset);\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa,IAAI;AACnB;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;;;ACxBA;AACE,GAACC;AACC,cAAU,IAAI;AAEd,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,iBAAa;AACb,iBAAa,IAAI;AAEjB,KAAC,CAAC;AACA,mBAAa;AACb,kBAAY,IAAI;AAClB;AAEF;AAEA,GAACC;AACC,aAAS;AACT,qBAAiB;AACjB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACf;AAEA,GAACC;AACC,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,0BAAsB;AACxB;AAEA,GAACC;AACC,cAAU;AACV,gBAAY,IAAI;AAEhB,KA1CDJ,WA0CM,CAAC,2BAA6B;AACjC,mBAAa,IAAI;AACjB,kBAAY;AACd;AACF;AAGA,GAjDCA,WAiDI,CAAC,eAAe,CAXpBI;AAYC,aAAS;AACX;AAEA,GAACC;AACC,cAAU;AACV,uBAAmB;AACnB,iBAAa;AACb,gBAAY,IAAI;AAChB,cAAU;AACV,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,eAAW,EAAE;AAEb,KA/DDL,WA+DM,CAAC,2BAA6B;AACjC,yBAAmB;AACnB,0BAAoB;AACpB,mBAAa,IAAI;AACjB,kBAAY;AACZ,iBAAW,KAAK;AAClB;AACF;AAEA,GAACM;AACC,cAAU;AACV,gBAAY;AACZ,sBAAkB,IAAI;AAEtB,KA7EDN,WA6EM,CAAC,2BAA6B;AACjC,mBAAa;AACf;AACF;AAEA,GAACO;AACC,uBAAmB;AACnB,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ,IAAI,6BAA6B,MAAM,IAAI;AACnD,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY,IAAI;AAChB,YAAQ;AACR,gBAAY,aAAa,IAAI,0BAA0B,IAAI;AAE3D,KA7FDP,WA6FM,CAAC,2BAA6B;AACjC,yBAAmB;AACnB,0BAAoB;AACtB;AAEA,KAAC,CAAC;AAAA,IACF,CAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,cAAQ;AACV;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AACF;AACF;","names":["field","label","required","description","error","root","header","hidden","output","track","rail","fill","thumb"]}

package/dist/slider.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ReactNode, Ref } from 'react';
+
+type SliderValue = number | [number, number];
+type SliderOrientation = 'horizontal' | 'vertical';
+interface SliderProps<T extends SliderValue = number> {
+    /** Visible label. Always rendered; `hideLabel` keeps it for assistive technology only. */
+    label: ReactNode;
+    /** @default false */
+    hideLabel?: boolean;
+    description?: ReactNode;
+    /** One number, or a `[start, end]` pair for a range with two thumbs. */
+    value?: T;
+    defaultValue?: T;
+    /** Called on every change while dragging or pressing arrows. */
+    onChange?: (value: T) => void;
+    /** Called once when the drag ends or the key is released. */
+    onChangeEnd?: (value: T) => void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** How the value reads in the output and to assistive technology, for instance `{ style: 'percent' }` or `{ style: 'currency', currency: 'EUR' }`. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Names for the two thumbs of a range. @default ['Minimum', 'Maximum'] */
+    thumbLabels?: readonly [string, string];
+    /** Show the formatted value next to the label. @default true */
+    showOutput?: boolean;
+    /** @default 'horizontal' */
+    orientation?: SliderOrientation;
+    /** @default false */
+    disabled?: boolean;
+    /** Submitted with a form; a range submits two inputs with this name. */
+    name?: string;
+    className?: string;
+    /** The group element. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Picks a number, or a range, on a track: React Aria's slider (decision
+ * record 001) provides the hidden range inputs, arrow, Page Up/Down, Home and
+ * End keys, drag with a thumb that stays under the pointer, and
+ * `aria-valuetext` in the formatted form. The output element shows the
+ * same text, so what a screen reader hears is what sighted users see.
+ *
+ * @status experimental
+ * @category Forms
+ * @accessibility A `group` named by the label containing one hidden `input type="range"` per thumb (named by `thumbLabels` for a range) with `aria-valuetext` in the formatted form; the `output` element shows the same text. Arrows step, Page Up/Down step by ten, Home/End jump; thumbs drag with mouse or touch.
+ * @do Set `formatOptions` so the spoken value matches the unit ("40%", "€200").
+ * Use `hideLabel` only when a visible heading already names it.
+ * @dont Use it for precise values; provide a numeric field alongside.
+ * Use a `step` so small the keyboard cannot reach the ends in reasonable time.
+ */
+declare function Slider<T extends SliderValue = number>({ label, hideLabel, description, value, defaultValue, onChange, onChangeEnd, min, max, step, formatOptions, thumbLabels, showOutput, orientation, disabled, name, className, ref, }: SliderProps<T>): react.JSX.Element;
+declare namespace Slider {
+    var displayName: string;
+}
+
+export { Slider, type SliderOrientation, type SliderProps, type SliderValue };

package/dist/slider.js

@@ -0,0 +1,5 @@
+export { Slider } from './chunk-P5C2U5ZF.js';
+import './chunk-YUHS5S5Y.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=slider.js.map
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

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

package/dist/spinner.css

@@ -0,0 +1,60 @@
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* src/spinner/Spinner.module.css */
+@layer components {
+  .Spinner_spinner {
+    --_size: var(--spinner-size-md);
+    --_track: var(--spinner-track);
+    --_indicator: var(--spinner-indicator);
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    vertical-align: middle;
+    &[data-size=sm] {
+      --_size: var(--spinner-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--spinner-size-lg);
+    }
+    &[data-size=inherit] {
+      --_size: 1em;
+    }
+    &[data-tone=inherit] {
+      --_track: transparent;
+      --_indicator: currentcolor;
+    }
+  }
+  .Spinner_ring {
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--spinner-width) solid var(--_track);
+    border-block-start-color: var(--_indicator);
+    border-radius: var(--radius-full);
+    animation: Spinner_spin var(--spinner-duration) linear infinite;
+  }
+  @keyframes Spinner_spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Spinner_ring {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=spinner.css.map */

package/dist/spinner.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.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 (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n"],"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,aAAS,IAAI;AACb,cAAU,IAAI;AACd,kBAAc,IAAI;AAElB,aAAS;AACT,UAAM;AACN,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAoB;AACrD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAoB;AACrD,KAAC,CAAC;AAAuB,eAAS;AAAK;AAEvC,KAAC,CAAC;AACA,gBAAU;AACV,oBAAc;AAChB;AACF;AAEA,GAACC;AACC,iBAAa;AACb,gBAAY;AACZ,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,8BAA0B,IAAI;AAC9B,mBAAe,IAAI;AACnB,eAAW,aAAK,IAAI,oBAAoB,OAAO;AACjD;AAEA,aAHaC;AAIX;AACE,cAAQ;AACV;AACF;AAEA,UAAO,wBAAyB;AAC9B,KAhBDD;AAiBG,iBAAW;AACb;AACF;AACF;","names":["root","spinner","ring","spin"]}

package/dist/spinner.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref } from 'react';
+
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'inherit';
+type SpinnerTone = 'default' | 'inherit';
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** `inherit` follows the surrounding font size, for spinners inside controls. @default 'md' */
+    size?: SpinnerSize;
+    /** `inherit` draws with the surrounding text colour, for coloured controls. @default 'default' */
+    tone?: SpinnerTone;
+    /** Announced to assistive technology (`role="status"`). @default 'Loading' */
+    label?: string;
+    /** Hide from assistive technology: the parent already announces busy. @default false */
+    decorative?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * An indeterminate progress indicator. Announces its label as a status
+ * unless `decorative`, in which case the parent is responsible (Button sets
+ * `aria-busy`). Under reduced motion the ring stops but keeps its coloured
+ * quarter, so it still reads as "in progress".
+ *
+ * @status stable
+ * @category Feedback
+ * @accessibility `role="status"` with a visually hidden label ("Loading" by default) unless `decorative`, in which case the parent announces busy. Under reduced motion the ring stops but keeps its coloured quarter.
+ * @do Use `decorative` inside a control that already sets `aria-busy`.
+ * @dont Show several spinners for one operation.
+ */
+declare function Spinner({ size, tone, label, decorative, className, ref, ...rest }: SpinnerProps): react.JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+
+export { Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone };

package/dist/spinner.js

@@ -0,0 +1,5 @@
+export { Spinner } from './chunk-I4KC4V6A.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=spinner.js.map
+//# sourceMappingURL=spinner.js.map

package/dist/spinner.js.map

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

package/dist/stack.css

@@ -0,0 +1,60 @@
+/* src/stack/Stack.module.css */
+@layer components {
+  .Stack_stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    &[data-gap="1"] {
+      gap: var(--stack-gap-1);
+    }
+    &[data-gap="2"] {
+      gap: var(--stack-gap-2);
+    }
+    &[data-gap="3"] {
+      gap: var(--stack-gap-3);
+    }
+    &[data-gap="4"] {
+      gap: var(--stack-gap-4);
+    }
+    &[data-gap="5"] {
+      gap: var(--stack-gap-5);
+    }
+    &[data-gap="6"] {
+      gap: var(--stack-gap-6);
+    }
+    &[data-gap="7"] {
+      gap: var(--stack-gap-7);
+    }
+    &[data-gap="8"] {
+      gap: var(--stack-gap-8);
+    }
+    &[data-align=start] {
+      align-items: flex-start;
+    }
+    &[data-align=center] {
+      align-items: center;
+    }
+    &[data-align=end] {
+      align-items: flex-end;
+    }
+    &[data-align=stretch] {
+      align-items: stretch;
+    }
+    &[data-justify=start] {
+      justify-content: flex-start;
+    }
+    &[data-justify=center] {
+      justify-content: center;
+    }
+    &[data-justify=end] {
+      justify-content: flex-end;
+    }
+    &[data-justify=between] {
+      justify-content: space-between;
+    }
+  }
+}
+/*# sourceMappingURL=stack.css.map */

package/dist/stack.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stack/Stack.module.css"],"sourcesContent":["/* Every value is a token (--stack-gap-*). Gap, alignment and justification are data attributes. */\n\n@layer components {\n  .stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stack-gap-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    &[data-gap=\"1\"] { gap: var(--stack-gap-1); }\n    &[data-gap=\"2\"] { gap: var(--stack-gap-2); }\n    &[data-gap=\"3\"] { gap: var(--stack-gap-3); }\n    &[data-gap=\"4\"] { gap: var(--stack-gap-4); }\n    &[data-gap=\"5\"] { gap: var(--stack-gap-5); }\n    &[data-gap=\"6\"] { gap: var(--stack-gap-6); }\n    &[data-gap=\"7\"] { gap: var(--stack-gap-7); }\n    &[data-gap=\"8\"] { gap: var(--stack-gap-8); }\n    &[data-align=\"start\"] { align-items: flex-start; }\n    &[data-align=\"center\"] { align-items: center; }\n    &[data-align=\"end\"] { align-items: flex-end; }\n    &[data-align=\"stretch\"] { align-items: stretch; }\n    &[data-justify=\"start\"] { justify-content: flex-start; }\n    &[data-justify=\"center\"] { justify-content: center; }\n    &[data-justify=\"end\"] { justify-content: flex-end; }\n    &[data-justify=\"between\"] { justify-content: space-between; }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,YAAQ;AACR,aAAS;AACT,gBAAY;AAEZ,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAsB,mBAAa;AAAY;AACjD,KAAC,CAAC;AAAuB,mBAAa;AAAQ;AAC9C,KAAC,CAAC;AAAoB,mBAAa;AAAU;AAC7C,KAAC,CAAC;AAAwB,mBAAa;AAAS;AAChD,KAAC,CAAC;AAAwB,uBAAiB;AAAY;AACvD,KAAC,CAAC;AAAyB,uBAAiB;AAAQ;AACpD,KAAC,CAAC;AAAsB,uBAAiB;AAAU;AACnD,KAAC,CAAC;AAA0B,uBAAiB;AAAe;AAC9D;AACF;","names":["stack"]}