@pearpages/pulp-react 0.0.0

package/dist/badge.css

@@ -0,0 +1,89 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+
+/* src/badge/Badge.module.css */
+@layer components {
+  .Badge_badge {
+    --_bg: var(--badge-neutral-subtle-bg);
+    --_fg: var(--badge-neutral-subtle-fg);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--badge-gap);
+    padding-block: var(--badge-padding-block);
+    padding-inline: var(--badge-padding-inline-md);
+    border-radius: var(--badge-radius);
+    background-color: var(--_bg);
+    color: var(--_fg);
+    font-size: var(--badge-font-size-md);
+    font-weight: var(--badge-font-weight);
+    line-height: var(--badge-line-height);
+    white-space: nowrap;
+    &[data-size=sm] {
+      padding-inline: var(--badge-padding-inline-sm);
+      font-size: var(--badge-font-size-sm);
+    }
+    &[data-tone=neutral][data-variant=solid] {
+      --_bg: var(--badge-neutral-solid-bg);
+      --_fg: var(--badge-neutral-solid-fg);
+    }
+    &[data-tone=neutral][data-variant=subtle] {
+      --_bg: var(--badge-neutral-subtle-bg);
+      --_fg: var(--badge-neutral-subtle-fg);
+    }
+    &[data-tone=info][data-variant=solid] {
+      --_bg: var(--badge-info-solid-bg);
+      --_fg: var(--badge-info-solid-fg);
+    }
+    &[data-tone=info][data-variant=subtle] {
+      --_bg: var(--badge-info-subtle-bg);
+      --_fg: var(--badge-info-subtle-fg);
+    }
+    &[data-tone=success][data-variant=solid] {
+      --_bg: var(--badge-success-solid-bg);
+      --_fg: var(--badge-success-solid-fg);
+    }
+    &[data-tone=success][data-variant=subtle] {
+      --_bg: var(--badge-success-subtle-bg);
+      --_fg: var(--badge-success-subtle-fg);
+    }
+    &[data-tone=warning][data-variant=solid] {
+      --_bg: var(--badge-warning-solid-bg);
+      --_fg: var(--badge-warning-solid-fg);
+    }
+    &[data-tone=warning][data-variant=subtle] {
+      --_bg: var(--badge-warning-subtle-bg);
+      --_fg: var(--badge-warning-subtle-fg);
+    }
+    &[data-tone=error][data-variant=solid] {
+      --_bg: var(--badge-error-solid-bg);
+      --_fg: var(--badge-error-solid-fg);
+    }
+    &[data-tone=error][data-variant=subtle] {
+      --_bg: var(--badge-error-subtle-bg);
+      --_fg: var(--badge-error-subtle-fg);
+    }
+  }
+}
+/*# sourceMappingURL=badge.css.map */

package/dist/badge.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/badge/Badge.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer components {\n  .badge {\n    --_bg: var(--badge-neutral-subtle-bg);\n    --_fg: var(--badge-neutral-subtle-fg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--badge-gap);\n    padding-block: var(--badge-padding-block);\n    padding-inline: var(--badge-padding-inline-md);\n    border-radius: var(--badge-radius);\n    background-color: var(--_bg);\n    color: var(--_fg);\n    font-size: var(--badge-font-size-md);\n    font-weight: var(--badge-font-weight);\n    line-height: var(--badge-line-height);\n    white-space: nowrap;\n\n    &[data-size=\"sm\"] {\n      padding-inline: var(--badge-padding-inline-sm);\n      font-size: var(--badge-font-size-sm);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-neutral-solid-bg);\n      --_fg: var(--badge-neutral-solid-fg);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-neutral-subtle-bg);\n      --_fg: var(--badge-neutral-subtle-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-info-solid-bg);\n      --_fg: var(--badge-info-solid-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-info-subtle-bg);\n      --_fg: var(--badge-info-subtle-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-success-solid-bg);\n      --_fg: var(--badge-success-solid-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-success-subtle-bg);\n      --_fg: var(--badge-success-subtle-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-warning-solid-bg);\n      --_fg: var(--badge-warning-solid-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-warning-subtle-bg);\n      --_fg: var(--badge-warning-subtle-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-error-solid-bg);\n      --_fg: var(--badge-error-solid-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-error-subtle-bg);\n      --_fg: var(--badge-error-subtle-fg);\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;AClBA;AACE,GAACC;AACC,WAAO,IAAI;AACX,WAAO,IAAI;AAEX,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACT,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa;AAEb,KAAC,CAAC;AACA,sBAAgB,IAAI;AACpB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,eAAiB,CAAC;AAClB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,kBAAoB,CAAC;AACrB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AAEA,KAAC,CAAC,gBAAkB,CAAC;AACnB,aAAO,IAAI;AACX,aAAO,IAAI;AACb;AACF;AACF;","names":["icon","badge"]}

package/dist/badge.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+
+type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+type BadgeVariant = 'solid' | 'subtle';
+type BadgeSize = 'sm' | 'md';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Meaning, not colour: `neutral` for counts and tags. @default 'neutral' */
+    tone?: BadgeTone;
+    /** `solid` fills with the tone; `subtle` tints and uses the tone as text. @default 'subtle' */
+    variant?: BadgeVariant;
+    /** @default 'md' */
+    size?: BadgeSize;
+    /** Leading glyph, decorative. */
+    icon?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+    children: ReactNode;
+}
+/**
+ * A small label for status, counts and tags. Tone and variant resolve
+ * through `--badge-*` onto the status tokens, whose contrast is proven by
+ * the token tests. Not interactive: for a removable chip, compose with a
+ * Button.
+ *
+ * @status stable
+ * @category Feedback
+ * @accessibility Plain text: no role, no interaction. Every tone × variant pair meets WCAG AA, proven by the token tests. Tone is reinforced by the text, not only by colour.
+ * @do Keep the text to one or two words.
+ * Pair a leading icon with text, never alone.
+ * @dont Make it clickable; compose a Button for a removable chip.
+ * Use tone alone to convey meaning; say it in the text.
+ */
+declare function Badge({ tone, variant, size, icon, className, ref, children, ...rest }: BadgeProps): react.JSX.Element;
+declare namespace Badge {
+    var displayName: string;
+}
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant };

package/dist/badge.js

@@ -0,0 +1,5 @@
+export { Badge } from './chunk-6I26MMQF.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=badge.js.map
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

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

package/dist/button.css

@@ -0,0 +1,162 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* src/spinner/Spinner.module.css */
+@layer components {
+  .Spinner_spinner {
+    --_size: var(--spinner-size-md);
+    --_track: var(--spinner-track);
+    --_indicator: var(--spinner-indicator);
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    vertical-align: middle;
+    &[data-size=sm] {
+      --_size: var(--spinner-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--spinner-size-lg);
+    }
+    &[data-size=inherit] {
+      --_size: 1em;
+    }
+    &[data-tone=inherit] {
+      --_track: transparent;
+      --_indicator: currentcolor;
+    }
+  }
+  .Spinner_ring {
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--spinner-width) solid var(--_track);
+    border-block-start-color: var(--_indicator);
+    border-radius: var(--radius-full);
+    animation: Spinner_spin var(--spinner-duration) linear infinite;
+  }
+  @keyframes Spinner_spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Spinner_ring {
+      animation: none;
+    }
+  }
+}
+
+/* src/button/Button.module.css */
+@layer components {
+  .Button_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--button-gap);
+    min-block-size: var(--button-height-md);
+    padding-block: 0;
+    padding-inline: var(--button-padding-inline-md);
+    border: 1px solid transparent;
+    border-radius: var(--button-radius);
+    font-family: var(--button-font-family);
+    font-size: var(--button-font-size-md);
+    font-weight: var(--button-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--button-motion-duration) var(--motion-easing-standard),
+      border-color var(--button-motion-duration) var(--motion-easing-standard),
+      color var(--button-motion-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);
+      outline-offset: var(--button-focus-ring-offset);
+    }
+    &:disabled,
+    &[aria-disabled=true] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-loading] {
+      cursor: progress;
+    }
+    &[data-size=sm] {
+      min-block-size: var(--button-height-sm);
+      padding-inline: var(--button-padding-inline-sm);
+      font-size: var(--button-font-size-sm);
+    }
+    &[data-size=lg] {
+      min-block-size: var(--button-height-lg);
+      padding-inline: var(--button-padding-inline-lg);
+      font-size: var(--button-font-size-lg);
+    }
+    &[data-variant=primary] {
+      background-color: var(--button-primary-bg);
+      color: var(--button-primary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-active);
+      }
+    }
+    &[data-variant=secondary] {
+      background-color: var(--button-secondary-bg);
+      border-color: var(--button-secondary-border);
+      color: var(--button-secondary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-secondary-bg-hover);
+      }
+    }
+    &[data-variant=ghost] {
+      background-color: transparent;
+      color: var(--button-ghost-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-ghost-bg-hover);
+      }
+    }
+  }
+  .Button_label {
+    display: inline-block;
+  }
+}
+/*# sourceMappingURL=button.css.map */

package/dist/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label"]}

package/dist/button.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual emphasis. One `primary` per view; `secondary` for the rest;
+     * `ghost` for actions that sit inside other content.
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /** @default 'md' */
+    size?: ButtonSize;
+    /**
+     * Shows a spinner, sets `aria-busy` and `aria-disabled`, and blocks
+     * activation. The element stays focusable so focus is not lost mid-action,
+     * and the label stays in place so the button keeps its width.
+     * @default false
+     */
+    loading?: boolean;
+    /** Decorative element before the label. Hidden from assistive technology. */
+    iconStart?: ReactNode;
+    /** Decorative element after the label. Hidden from assistive technology. */
+    iconEnd?: ReactNode;
+    /**
+     * Render the single child element instead of a `<button>`, merging the
+     * button's props into it. Use it to style a router `<Link>` or an `<a>` as a
+     * button. Disabled and loading states then use `aria-disabled`, and the
+     * child's own `onClick` does not run while the control is inert.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * The rendered element. With `asChild` that is the child's element, so pass
+     * the type parameter: `<Button<HTMLAnchorElement> asChild ref={anchorRef}>`.
+     */
+    ref?: Ref<E>;
+    children: ReactNode;
+}
+/**
+ * The one action component. Variants map to emphasis, not colour: one
+ * `primary` per view, `secondary` for the rest, `ghost` inside other content.
+ * Every value comes from `--button-*` tokens, so a brand restyles it without
+ * touching the component. State is exposed as `data-variant`, `data-size` and
+ * `data-loading` for styling, tests and agents alike.
+ *
+ * @status stable
+ * @category Actions
+ * @accessibility A native `button` (or the child element with `asChild`). `loading` sets `aria-disabled` and `aria-busy` and keeps focus; only `disabled` removes it from the tab order. Icon-only use warns in development: use IconButton, which requires a name.
+ * @do One `primary` per view.
+ * Use `asChild` for links that look like buttons, keeping the `a` semantics.
+ * @dont Use `loading` on a button that is not the one that started the work.
+ * Rely on colour to tell variants apart; the label carries the meaning.
+ */
+declare function Button<E extends HTMLElement = HTMLButtonElement>({ variant, size, loading, iconStart, iconEnd, asChild, className, disabled, type, onClick, ref, children, ...rest }: ButtonProps<E>): react.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/button.js

@@ -0,0 +1,8 @@
+export { Button } from './chunk-KPQGS4PG.js';
+import './chunk-I4KC4V6A.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

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

package/dist/calendar.css

@@ -0,0 +1,128 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+
+/* src/calendar/Calendar.module.css */
+@layer components {
+  .Calendar_root {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--calendar-gap);
+    padding: var(--calendar-padding);
+    background-color: var(--calendar-bg);
+    color: var(--calendar-fg);
+    font-family: var(--calendar-font-family);
+    font-size: var(--calendar-font-size);
+  }
+  .Calendar_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--calendar-gap);
+  }
+  .Calendar_heading {
+    margin: 0;
+    font-size: var(--calendar-heading-font-size);
+    font-weight: var(--calendar-heading-font-weight);
+  }
+  .Calendar_nav {
+    display: grid;
+    place-items: center;
+    inline-size: var(--calendar-nav-size);
+    block-size: var(--calendar-nav-size);
+    padding: 0;
+    border: none;
+    border-radius: var(--calendar-nav-radius);
+    background-color: transparent;
+    color: var(--calendar-nav-fg);
+    cursor: pointer;
+    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);
+    &[data-hovered] {
+      background-color: var(--calendar-nav-bg-hover);
+      color: var(--calendar-nav-fg-hover);
+    }
+    &[data-focus-visible] {
+      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);
+      outline-offset: var(--calendar-focus-ring-offset);
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+  }
+  .Calendar_grid {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  .Calendar_weekday {
+    inline-size: var(--calendar-cell-size);
+    padding: 0;
+    color: var(--calendar-weekday-fg);
+    font-size: var(--calendar-weekday-font-size);
+    font-weight: var(--calendar-weekday-font-weight);
+    text-align: center;
+  }
+  .Calendar_cell {
+    display: grid;
+    place-items: center;
+    inline-size: var(--calendar-cell-size);
+    block-size: var(--calendar-cell-size);
+    border-radius: var(--calendar-cell-radius);
+    color: var(--calendar-cell-fg);
+    cursor: pointer;
+    outline: none;
+    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);
+    &[data-outside-month] {
+      display: none;
+    }
+    &[data-today] {
+      color: var(--calendar-cell-fg-today);
+      font-weight: var(--calendar-heading-font-weight);
+    }
+    &[data-hovered] {
+      background-color: var(--calendar-cell-bg-hover);
+    }
+    &[data-selected] {
+      background-color: var(--calendar-cell-bg-selected);
+      color: var(--calendar-cell-fg-selected);
+      &[data-hovered] {
+        background-color: var(--calendar-cell-bg-selected-hover);
+      }
+    }
+    &[data-focus-visible] {
+      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);
+      outline-offset: var(--calendar-focus-ring-offset);
+    }
+    &[data-unavailable] {
+      color: var(--calendar-cell-fg-unavailable);
+      text-decoration: line-through;
+      cursor: not-allowed;
+    }
+    &[data-disabled] {
+      color: var(--calendar-cell-fg-unavailable);
+      cursor: not-allowed;
+    }
+  }
+}
+/*# sourceMappingURL=calendar.css.map */

package/dist/calendar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/calendar/Calendar.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/*\n * Every value is a token (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer components {\n  .root {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--calendar-gap);\n    padding: var(--calendar-padding);\n    background-color: var(--calendar-bg);\n    color: var(--calendar-fg);\n    font-family: var(--calendar-font-family);\n    font-size: var(--calendar-font-size);\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--calendar-gap);\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--calendar-heading-font-size);\n    font-weight: var(--calendar-heading-font-weight);\n  }\n\n  .nav {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-nav-size);\n    block-size: var(--calendar-nav-size);\n    padding: 0;\n    border: none;\n    border-radius: var(--calendar-nav-radius);\n    background-color: transparent;\n    color: var(--calendar-nav-fg);\n    cursor: pointer;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--calendar-nav-bg-hover);\n      color: var(--calendar-nav-fg-hover);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  .grid {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  .weekday {\n    inline-size: var(--calendar-cell-size);\n    padding: 0;\n    color: var(--calendar-weekday-fg);\n    font-size: var(--calendar-weekday-font-size);\n    font-weight: var(--calendar-weekday-font-weight);\n    text-align: center;\n  }\n\n  .cell {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-cell-size);\n    block-size: var(--calendar-cell-size);\n    border-radius: var(--calendar-cell-radius);\n    color: var(--calendar-cell-fg);\n    cursor: pointer;\n    outline: none;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &[data-today] {\n      color: var(--calendar-cell-fg-today);\n      font-weight: var(--calendar-heading-font-weight);\n    }\n\n    &[data-hovered] {\n      background-color: var(--calendar-cell-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--calendar-cell-bg-selected);\n      color: var(--calendar-cell-fg-selected);\n\n      &[data-hovered] {\n        background-color: var(--calendar-cell-bg-selected-hover);\n      }\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-unavailable] {\n      color: var(--calendar-cell-fg-unavailable);\n      text-decoration: line-through;\n      cursor: not-allowed;\n    }\n\n    /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n    &[data-disabled] {\n      color: var(--calendar-cell-fg-unavailable);\n      cursor: not-allowed;\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY;AACZ,eAAW,IAAI;AACf,oBAAgB;AAEhB,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAuB,iBAAW;AAAS;AAE7C,MAAE,EAAE;AACF,mBAAa;AACb,kBAAY;AACd;AACF;AACF;;;ACdA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,aAAS,IAAI;AACb,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACjB;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,qBAAiB;AACjB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB;AAClB,WAAO,IAAI;AACX,YAAQ;AACR,gBAAY,iBAAiB,IAAI,4BAA4B,IAAI;AAEjE,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,cAAQ;AACR,eAAS;AACX;AACF;AAEA,GAACC;AACC,qBAAiB;AACjB,oBAAgB;AAClB;AAEA,GAACC;AACC,iBAAa,IAAI;AACjB,aAAS;AACT,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY;AACd;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,YAAQ;AACR,aAAS;AACT,gBAAY,iBAAiB,IAAI,4BAA4B,IAAI;AAEjE,KAAC,CAAC;AACA,eAAS;AACX;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,mBAAa,IAAI;AACnB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACtB,aAAO,IAAI;AAEX,OAAC,CAAC;AACA,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC,CAAC;AACA,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,uBAAiB;AACjB,cAAQ;AACV;AAGA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,cAAQ;AACV;AACF;AACF;","names":["icon","root","header","heading","nav","grid","weekday","cell"]}

package/dist/calendar.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { Ref } from 'react';
+
+interface CalendarProps {
+    /** Selected date as `YYYY-MM-DD` (controlled). `null` is "none". */
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    /** Earliest selectable date, `YYYY-MM-DD`. */
+    min?: string;
+    /** Latest selectable date, `YYYY-MM-DD`. */
+    max?: string;
+    /** Marks single dates as unavailable (shown, not selectable). */
+    isDateUnavailable?: (date: string) => boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    readOnly?: boolean;
+    /** BCP 47 tag. Month names, weekday order and the first day of the week follow it; defaults to the browser's. */
+    locale?: string;
+    /** The grid's accessible name. @default 'Calendar' */
+    'aria-label'?: string;
+    id?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A month grid for choosing one date, on React Aria's calendar (decision
+ * record 001): arrows move by day and week, Page Up/Down by month, Home and
+ * End to the edges of the week, Enter or Space selects; every cell is
+ * announced with its full date and the grid is named by a visually hidden
+ * level-2 heading. Dates cross the API as ISO strings. For a date inside a
+ * form, DatePicker wraps this in a field with a popover.
+ *
+ * @status experimental
+ * @category Forms
+ * @accessibility The grid is `role="grid"` named by a visually hidden level-2 heading ("Calendar, September 2026"); each day is a button announced with its full date, today and selection state. Arrows move by day and week, Page Up/Down by month, Home/End to the week edges, Enter or Space selects.
+ * @do Pass `locale` when the app's language is not the browser's.
+ * Mark unavailable dates with `isDateUnavailable` rather than removing them.
+ * @dont Use it inside a form; use DatePicker, which adds the field and the popover.
+ * Set `min` after `max`; the vendor disables the whole grid.
+ */
+declare function Calendar({ value, defaultValue, onChange, min, max, isDateUnavailable, disabled, readOnly, locale, 'aria-label': ariaLabel, className, ref, ...rest }: CalendarProps): react.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+export { Calendar, type CalendarProps };

package/dist/calendar.js

@@ -0,0 +1,6 @@
+export { Calendar } from './chunk-5SBKZS56.js';
+import './chunk-OXYP34CG.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=calendar.js.map
+//# sourceMappingURL=calendar.js.map

package/dist/calendar.js.map

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

package/dist/card.css

@@ -0,0 +1,66 @@
+/* src/card/Card.module.css */
+@layer components {
+  .Card_card {
+    --_pad: var(--card-padding-md);
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    border: 1px solid transparent;
+    border-radius: var(--card-radius);
+    background-color: var(--card-bg);
+    color: var(--card-fg);
+    text-decoration: none;
+    transition:
+      border-color var(--card-motion-duration) var(--motion-easing-standard),
+      box-shadow var(--card-motion-duration) var(--motion-easing-standard),
+      translate var(--card-motion-duration) var(--motion-easing-standard);
+    &[data-padding=sm] {
+      --_pad: var(--card-padding-sm);
+    }
+    &[data-padding=lg] {
+      --_pad: var(--card-padding-lg);
+    }
+    &[data-variant=raised] {
+      box-shadow: var(--card-shadow);
+    }
+    &[data-variant=outlined] {
+      border-color: var(--card-border);
+    }
+    &[data-variant=sunken] {
+      background-color: var(--card-bg-sunken);
+    }
+    &[data-interactive] {
+      cursor: pointer;
+      &:hover {
+        border-color: var(--card-border-hover);
+        translate: 0 -1px;
+      }
+      &:focus-visible {
+        outline: var(--card-focus-ring-width) solid var(--card-focus-ring);
+        outline-offset: var(--card-focus-ring-offset);
+      }
+    }
+  }
+  .Card_header,
+  .Card_body,
+  .Card_footer {
+    padding: var(--_pad);
+  }
+  .Card_header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--card-gap);
+    border-block-end: 1px solid var(--card-divider);
+  }
+  .Card_body {
+    flex: 1;
+  }
+  .Card_footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--card-gap);
+    border-block-start: 1px solid var(--card-divider);
+  }
+}
+/*# sourceMappingURL=card.css.map */