@pearpages/pulp-react 0.2.2 → 0.3.0

package/dist/segmented-control.js

@@ -0,0 +1,5 @@
+"use client";export { SegmentedControl } from './chunk-Y7KC2FDU.js';
+import './chunk-QJG5ILK5.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=segmented-control.js.map
+//# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control.js.map

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

package/dist/select.js

@@ -1,6 +1,6 @@
-export { Select } from './chunk-OFKSU77Y.js';
-import './chunk-M5VL22MY.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Select } from './chunk-ZEVQQQOA.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=select.js.map
 //# sourceMappingURL=select.js.map

package/dist/sheet.css

@@ -69,5 +69,33 @@
     --modal-height-sheet: var(--sheet-height);
     --modal-animation-translate-sheet: var(--sheet-motion-translate);
   }
+  .Sheet_content[data-draggable] {
+    translate: 0 var(--_drag, 0);
+    transition: translate var(--sheet-handle-snap-duration) var(--motion-easing-standard);
+    &[data-dragging] {
+      transition: none;
+    }
+  }
+  .Sheet_handle {
+    display: grid;
+    flex: none;
+    place-items: center;
+    block-size: var(--sheet-handle-hit-height);
+    cursor: grab;
+    touch-action: none;
+    &::before {
+      inline-size: var(--sheet-handle-width);
+      block-size: var(--sheet-handle-height);
+      border-radius: var(--sheet-handle-radius);
+      background: var(--sheet-handle-bg);
+      content: "";
+    }
+    [data-dragging] > & {
+      cursor: grabbing;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      display: none;
+    }
+  }
 }
 /*# sourceMappingURL=sheet.css.map */

package/dist/sheet.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dialog/Dialog.module.css","../src/sheet/Sheet.module.css"],"sourcesContent":["/*\n * The vendor (@pearpages/modals) reads --modal-* custom properties. This class\n * goes on the portal element pulp owns, so every dialog inherits pulp's\n * --dialog-* tokens and the vendor's :root defaults never apply.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --modal-bg: var(--dialog-surface);\n    --modal-surface-elevated: var(--dialog-surface);\n    --modal-surface-subtle: var(--dialog-surface-subtle);\n    --modal-color: var(--dialog-fg);\n    --modal-text-secondary: var(--dialog-fg-muted);\n    --modal-text-muted: var(--dialog-fg-muted);\n    --modal-backdrop-bg: var(--dialog-backdrop);\n    --modal-border-primary-color: var(--dialog-border);\n    --modal-border-hover-color: var(--dialog-border-hover);\n    --modal-border-focus-color: var(--dialog-focus);\n    --modal-border-accent-color: var(--dialog-border);\n    --modal-radius: var(--dialog-radius);\n    --modal-radius-md: var(--dialog-radius);\n    --modal-radius-sm: var(--radius-control);\n    --modal-button-radius: var(--radius-control);\n    --modal-shadow: var(--dialog-shadow);\n    --modal-padding: var(--dialog-padding);\n    --modal-spacing-xs: var(--space-1);\n    --modal-spacing-sm: var(--space-2);\n    --modal-spacing-md: var(--dialog-gap);\n    --modal-spacing-lg: var(--space-4);\n    --modal-spacing-xl: var(--space-5);\n    --modal-font-family: var(--dialog-font-family);\n    --modal-font-family-mono: var(--font-family-mono);\n    --modal-font-size-title: var(--dialog-title-font-size);\n    --modal-font-size-title-mobile: var(--dialog-title-font-size);\n    --modal-font-weight-title: var(--dialog-title-font-weight);\n    --modal-font-size-description: var(--dialog-description-font-size);\n    --modal-font-size-description-mobile: var(--dialog-description-font-size);\n    --modal-font-size-button: var(--font-size-sm);\n    --modal-close-bg: var(--dialog-close-bg);\n    --modal-close-hover-bg: var(--dialog-close-bg-hover);\n    --modal-close-text: var(--dialog-close-fg);\n    --modal-close-hover-text: var(--dialog-close-fg-hover);\n    --modal-interactive-hover: var(--color-action-secondary-hover);\n    --modal-interactive-active: var(--color-action-secondary-hover);\n    --modal-interactive-focus: var(--color-action-primary-quiet);\n    --modal-transition-duration: var(--dialog-motion-duration);\n    --modal-transition-easing: var(--dialog-motion-easing);\n    --modal-outline-width: var(--focus-ring-width);\n    --modal-outline-offset: var(--focus-ring-offset);\n    --modal-button-focus-color: var(--dialog-focus);\n    --modal-button-primary-bg: var(--color-action-primary);\n    --modal-button-primary-border: var(--color-action-primary);\n    --modal-button-primary-color: var(--color-text-on-action);\n    --modal-button-primary-hover-bg: var(--color-action-primary-hover);\n    --modal-button-primary-hover-border: var(--color-action-primary-hover);\n    --modal-button-primary-active-bg: var(--color-action-primary-active);\n    --modal-button-primary-active-border: var(--color-action-primary-active);\n    --modal-button-secondary-bg: var(--color-action-secondary);\n    --modal-button-secondary-border: var(--color-border-default);\n    --modal-button-secondary-color: var(--color-text-default);\n    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-hover-border: var(--color-border-strong);\n    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-active-border: var(--color-border-strong);\n  }\n}\n","/*\n * The vendor (@pearpages/modals) docks the dialog and sizes it from three variables it declares on\n * :root. This class sits on the dialog element itself, so its own declarations beat the inherited\n * :root defaults whatever the cascade layer or import order: no specificity fight with the\n * vendor's unlayered rules, which only *read* these. Colour, type and motion timing come from\n * Dialog's mapping on the portal root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .content {\n    --modal-width-sheet: var(--sheet-width);\n    --modal-height-sheet: var(--sheet-height);\n    --modal-animation-translate-sheet: var(--sheet-motion-translate);\n  }\n}\n"],"mappings":";AAMA;AAEA;AACE,GAACA;AACC,gBAAY,IAAI;AAChB,8BAA0B,IAAI;AAC9B,4BAAwB,IAAI;AAC5B,mBAAe,IAAI;AACnB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,kCAA8B,IAAI;AAClC,gCAA4B,IAAI;AAChC,gCAA4B,IAAI;AAChC,iCAA6B,IAAI;AACjC,oBAAgB,IAAI;AACpB,uBAAmB,IAAI;AACvB,uBAAmB,IAAI;AACvB,2BAAuB,IAAI;AAC3B,oBAAgB,IAAI;AACpB,qBAAiB,IAAI;AACrB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,8BAA0B,IAAI;AAC9B,6BAAyB,IAAI;AAC7B,oCAAgC,IAAI;AACpC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,0CAAsC,IAAI;AAC1C,8BAA0B,IAAI;AAC9B,sBAAkB,IAAI;AACtB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,8BAA0B,IAAI;AAC9B,+BAA2B,IAAI;AAC/B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,iCAA6B,IAAI;AACjC,+BAA2B,IAAI;AAC/B,2BAAuB,IAAI;AAC3B,4BAAwB,IAAI;AAC5B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,kCAA8B,IAAI;AAClC,qCAAiC,IAAI;AACrC,yCAAqC,IAAI;AACzC,sCAAkC,IAAI;AACtC,0CAAsC,IAAI;AAC1C,iCAA6B,IAAI;AACjC,qCAAiC,IAAI;AACrC,oCAAgC,IAAI;AACpC,uCAAmC,IAAI;AACvC,2CAAuC,IAAI;AAC3C,wCAAoC,IAAI;AACxC,4CAAwC,IAAI;AAC9C;AACF;;;AC3DA;AAEA;AACE,GAACC;AACC,yBAAqB,IAAI;AACzB,0BAAsB,IAAI;AAC1B,uCAAmC,IAAI;AACzC;AACF;","names":["root","content"]}
+{"version":3,"sources":["../src/dialog/Dialog.module.css","../src/sheet/Sheet.module.css"],"sourcesContent":["/*\n * The vendor (@pearpages/modals) reads --modal-* custom properties. This class\n * goes on the portal element pulp owns, so every dialog inherits pulp's\n * --dialog-* tokens and the vendor's :root defaults never apply.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --modal-bg: var(--dialog-surface);\n    --modal-surface-elevated: var(--dialog-surface);\n    --modal-surface-subtle: var(--dialog-surface-subtle);\n    --modal-color: var(--dialog-fg);\n    --modal-text-secondary: var(--dialog-fg-muted);\n    --modal-text-muted: var(--dialog-fg-muted);\n    --modal-backdrop-bg: var(--dialog-backdrop);\n    --modal-border-primary-color: var(--dialog-border);\n    --modal-border-hover-color: var(--dialog-border-hover);\n    --modal-border-focus-color: var(--dialog-focus);\n    --modal-border-accent-color: var(--dialog-border);\n    --modal-radius: var(--dialog-radius);\n    --modal-radius-md: var(--dialog-radius);\n    --modal-radius-sm: var(--radius-control);\n    --modal-button-radius: var(--radius-control);\n    --modal-shadow: var(--dialog-shadow);\n    --modal-padding: var(--dialog-padding);\n    --modal-spacing-xs: var(--space-1);\n    --modal-spacing-sm: var(--space-2);\n    --modal-spacing-md: var(--dialog-gap);\n    --modal-spacing-lg: var(--space-4);\n    --modal-spacing-xl: var(--space-5);\n    --modal-font-family: var(--dialog-font-family);\n    --modal-font-family-mono: var(--font-family-mono);\n    --modal-font-size-title: var(--dialog-title-font-size);\n    --modal-font-size-title-mobile: var(--dialog-title-font-size);\n    --modal-font-weight-title: var(--dialog-title-font-weight);\n    --modal-font-size-description: var(--dialog-description-font-size);\n    --modal-font-size-description-mobile: var(--dialog-description-font-size);\n    --modal-font-size-button: var(--font-size-sm);\n    --modal-close-bg: var(--dialog-close-bg);\n    --modal-close-hover-bg: var(--dialog-close-bg-hover);\n    --modal-close-text: var(--dialog-close-fg);\n    --modal-close-hover-text: var(--dialog-close-fg-hover);\n    --modal-interactive-hover: var(--color-action-secondary-hover);\n    --modal-interactive-active: var(--color-action-secondary-hover);\n    --modal-interactive-focus: var(--color-action-primary-quiet);\n    --modal-transition-duration: var(--dialog-motion-duration);\n    --modal-transition-easing: var(--dialog-motion-easing);\n    --modal-outline-width: var(--focus-ring-width);\n    --modal-outline-offset: var(--focus-ring-offset);\n    --modal-button-focus-color: var(--dialog-focus);\n    --modal-button-primary-bg: var(--color-action-primary);\n    --modal-button-primary-border: var(--color-action-primary);\n    --modal-button-primary-color: var(--color-text-on-action);\n    --modal-button-primary-hover-bg: var(--color-action-primary-hover);\n    --modal-button-primary-hover-border: var(--color-action-primary-hover);\n    --modal-button-primary-active-bg: var(--color-action-primary-active);\n    --modal-button-primary-active-border: var(--color-action-primary-active);\n    --modal-button-secondary-bg: var(--color-action-secondary);\n    --modal-button-secondary-border: var(--color-border-default);\n    --modal-button-secondary-color: var(--color-text-default);\n    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-hover-border: var(--color-border-strong);\n    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-active-border: var(--color-border-strong);\n  }\n}\n","/*\n * The vendor (@pearpages/modals) docks the dialog and sizes it from three variables it declares on\n * :root. This class sits on the dialog element itself, so its own declarations beat the inherited\n * :root defaults whatever the cascade layer or import order: no specificity fight with the\n * vendor's unlayered rules, which only *read* these. Colour, type and motion timing come from\n * Dialog's mapping on the portal root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .content {\n    --modal-width-sheet: var(--sheet-width);\n    --modal-height-sheet: var(--sheet-height);\n    --modal-animation-translate-sheet: var(--sheet-motion-translate);\n  }\n\n  /*\n   * Drag to dismiss (bottom sheets). The vendor moves the sheet with `transform`; the drag uses\n   * the separate `translate` property, so the two never fight. --_drag is set by the handle while\n   * the pointer is down: the one per-instance value, like Progress's --_value.\n   */\n  .content[data-draggable] {\n    translate: 0 var(--_drag, 0);\n    transition: translate var(--sheet-handle-snap-duration) var(--motion-easing-standard);\n\n    &[data-dragging] {\n      transition: none;\n    }\n  }\n\n  .handle {\n    display: grid;\n    flex: none;\n    place-items: center;\n    block-size: var(--sheet-handle-hit-height);\n    cursor: grab;\n    touch-action: none;\n\n    &::before {\n      inline-size: var(--sheet-handle-width);\n      block-size: var(--sheet-handle-height);\n      border-radius: var(--sheet-handle-radius);\n      background: var(--sheet-handle-bg);\n      content: \"\";\n    }\n\n    [data-dragging] > & {\n      cursor: grabbing;\n    }\n\n    /* Following the finger is motion: without it there is no handle to offer. */\n    @media (prefers-reduced-motion: reduce) {\n      display: none;\n    }\n  }\n}\n"],"mappings":";AAMA;AAEA;AACE,GAACA;AACC,gBAAY,IAAI;AAChB,8BAA0B,IAAI;AAC9B,4BAAwB,IAAI;AAC5B,mBAAe,IAAI;AACnB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,kCAA8B,IAAI;AAClC,gCAA4B,IAAI;AAChC,gCAA4B,IAAI;AAChC,iCAA6B,IAAI;AACjC,oBAAgB,IAAI;AACpB,uBAAmB,IAAI;AACvB,uBAAmB,IAAI;AACvB,2BAAuB,IAAI;AAC3B,oBAAgB,IAAI;AACpB,qBAAiB,IAAI;AACrB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,8BAA0B,IAAI;AAC9B,6BAAyB,IAAI;AAC7B,oCAAgC,IAAI;AACpC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,0CAAsC,IAAI;AAC1C,8BAA0B,IAAI;AAC9B,sBAAkB,IAAI;AACtB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,8BAA0B,IAAI;AAC9B,+BAA2B,IAAI;AAC/B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,iCAA6B,IAAI;AACjC,+BAA2B,IAAI;AAC/B,2BAAuB,IAAI;AAC3B,4BAAwB,IAAI;AAC5B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,kCAA8B,IAAI;AAClC,qCAAiC,IAAI;AACrC,yCAAqC,IAAI;AACzC,sCAAkC,IAAI;AACtC,0CAAsC,IAAI;AAC1C,iCAA6B,IAAI;AACjC,qCAAiC,IAAI;AACrC,oCAAgC,IAAI;AACpC,uCAAmC,IAAI;AACvC,2CAAuC,IAAI;AAC3C,wCAAoC,IAAI;AACxC,4CAAwC,IAAI;AAC9C;AACF;;;AC3DA;AAEA;AACE,GAACC;AACC,yBAAqB,IAAI;AACzB,0BAAsB,IAAI;AAC1B,uCAAmC,IAAI;AACzC;AAOA,GAXCA,aAWO,CAAC;AACP,eAAW,EAAE,IAAI,OAAO,EAAE;AAC1B,gBAAY,UAAU,IAAI,8BAA8B,IAAI;AAE5D,KAAC,CAAC;AACA,kBAAY;AACd;AACF;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,gBAAY,IAAI;AAChB,YAAQ;AACR,kBAAc;AAEd,KAAC;AACC,mBAAa,IAAI;AACjB,kBAAY,IAAI;AAChB,qBAAe,IAAI;AACnB,kBAAY,IAAI;AAChB,eAAS;AACX;AAEA,KAAC,eAAe,EAAE;AAChB,cAAQ;AACV;AAGA,YAAO,wBAAyB;AAC9B,eAAS;AACX;AACF;AACF;","names":["root","content","handle"]}

package/dist/sheet.d.ts

@@ -14,6 +14,13 @@ interface SheetContentProps extends Omit<ComponentProps<typeof Dialog.Content>,
      * @default 'end'
      */
     placement?: SheetPlacement;
+    /**
+     * `placement="bottom"` only: a grab handle at the top of the sheet that can be dragged down to
+     * close it (past a quarter of the sheet's height, or with a flick). Pointer and touch only, and
+     * off under `prefers-reduced-motion`; Escape, the backdrop and `Sheet.Close` are unchanged.
+     * @default true
+     */
+    dragToDismiss?: boolean;
 }
 /**
  * A dialog docked to an edge of the viewport: a side panel for detail or settings that keeps the
@@ -28,7 +35,7 @@ interface SheetContentProps extends Omit<ComponentProps<typeof Dialog.Content>,
  *
  * @status experimental
  * @category Overlays
- * @accessibility Dialog's: `role="dialog"` with `aria-modal`, named by `Sheet.Title` and described by `Sheet.Description`; focus moves in on open, is trapped, and returns to the trigger on close; Escape and the backdrop dismiss it; the page behind is inert. Docking changes the layout only, never the semantics.
+ * @accessibility The drag handle of a bottom sheet is a pointer and touch shortcut, hidden from assistive technology and not focusable: it adds no keyboard stop, and closing by keyboard stays Escape or `Sheet.Close`, so always render a `Sheet.Close` in a sheet that can be dragged. Otherwise Dialog's: `role="dialog"` with `aria-modal`, named by `Sheet.Title` and described by `Sheet.Description`; focus moves in on open, is trapped, and returns to the trigger on close; Escape and the backdrop dismiss it; the page behind is inert. Docking changes the layout only, never the semantics.
  * @do Always render a `Sheet.Title`.
  * @do Dock to `end` for detail and settings beside the page, and to `bottom` for choices on a narrow screen.
  * @dont Use it for a short confirmation; a centred Dialog reads as more urgent and takes less room.
@@ -50,7 +57,7 @@ declare namespace Sheet {
  * The docked dialog element. Dialog's `Content`, with `placement` and the class that maps pulp's
  * `--sheet-*` tokens onto the vendor's sheet variables.
  */
-declare function SheetContent({ placement, className, ...rest }: SheetContentProps): react.JSX.Element;
+declare function SheetContent({ placement, dragToDismiss, className, children, ...rest }: SheetContentProps): react.JSX.Element;
 declare namespace SheetContent {
     var displayName: string;
 }

package/dist/sheet.js

@@ -1,4 +1,4 @@
-export { Sheet } from './chunk-TJJBCS3N.js';
+"use client";export { Sheet } from './chunk-7O6FTCZL.js';
 import './chunk-55QUKGK2.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=sheet.js.map

package/dist/slider.js

@@ -1,4 +1,4 @@
-export { Slider } from './chunk-YBECKOVP.js';
+"use client";export { Slider } from './chunk-YBECKOVP.js';
 import './chunk-DGIXNUNI.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=slider.js.map

package/dist/switch.js

@@ -1,7 +1,7 @@
-export { Switch } from './chunk-DVZ46GQN.js';
-import './chunk-6BIEW4WJ.js';
-import './chunk-M5VL22MY.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Switch } from './chunk-CLE2QGCU.js';
+import './chunk-Q6SYKNZ5.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=switch.js.map
 //# sourceMappingURL=switch.js.map

package/dist/table.js

@@ -1,4 +1,4 @@
-export { Table } from './chunk-XGWFTFGR.js';
+"use client";export { Table } from './chunk-XGWFTFGR.js';
 import './chunk-CZBCGLEM.js';
 import './chunk-IB5UUE3S.js';
 import './chunk-MI4QUKQS.js';

package/dist/tabs.js

@@ -1,4 +1,4 @@
-export { Tabs } from './chunk-2IYYES7V.js';
+"use client";export { Tabs } from './chunk-2IYYES7V.js';
 import './chunk-I5OZ63W7.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=tabs.js.map

package/dist/text-field.css

@@ -73,5 +73,68 @@
   .TextField_field[data-invalid] .TextField_input {
     border-color: var(--text-field-border-invalid);
   }
+  .TextField_hiddenLabel {
+    position: absolute;
+    inline-size: var(--size-hairline);
+    block-size: var(--size-hairline);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .TextField_control {
+    --_slot: var(--text-field-height-md);
+    display: grid;
+    position: relative;
+    align-items: center;
+    .TextField_field[data-size=sm] & {
+      --_slot: var(--text-field-height-sm);
+    }
+    .TextField_field[data-size=lg] & {
+      --_slot: var(--text-field-height-lg);
+    }
+  }
+  .TextField_inControl {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+  .TextField_control[data-icon] .TextField_inControl {
+    padding-inline-start: calc(var(--text-field-padding-inline) + 1em + var(--text-field-icon-gap));
+  }
+  .TextField_control[data-clearable] .TextField_inControl {
+    padding-inline-end: var(--_slot);
+  }
+  .TextField_icon {
+    display: inline-flex;
+    grid-area: 1 / 1;
+    justify-self: start;
+    margin-inline-start: var(--text-field-padding-inline);
+    color: var(--text-field-icon-fg);
+    pointer-events: none;
+  }
+  .TextField_clear {
+    display: inline-flex;
+    grid-area: 1 / 1;
+    align-items: center;
+    justify-content: center;
+    justify-self: end;
+    inline-size: var(--_slot);
+    block-size: var(--_slot);
+    padding: 0;
+    border: 0;
+    border-radius: var(--text-field-radius);
+    background: transparent;
+    color: var(--text-field-icon-fg);
+    cursor: pointer;
+    &:hover {
+      color: var(--text-field-icon-fg-hover);
+    }
+    &:focus-visible {
+      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);
+      outline-offset: calc(-1 * var(--text-field-focus-ring-width));
+    }
+  }
 }
 /*# sourceMappingURL=text-field.css.map */

package/dist/text-field.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/Field.module.css","../src/text-field/TextField.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer reset, tokens, vendor, base, components, utilities;\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 * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    font-family: var(--text-field-font-family);\n  }\n\n  .input {\n    min-block-size: var(--text-field-height-md);\n    padding-block: 0;\n    padding-inline: var(--text-field-padding-inline);\n    border: 1px solid var(--text-field-border-default);\n    border-radius: var(--text-field-radius);\n    background-color: var(--text-field-bg);\n    color: var(--text-field-fg);\n    font-size: var(--text-field-font-size-md);\n    transition:\n      border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n      background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--text-field-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--text-field-border-focus);\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: var(--text-field-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--text-field-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .input {\n    min-block-size: var(--text-field-height-sm);\n    font-size: var(--text-field-font-size-sm);\n  }\n\n  .field[data-size=\"lg\"] .input {\n    min-block-size: var(--text-field-height-lg);\n    font-size: var(--text-field-font-size-lg);\n  }\n\n  .field[data-invalid] .input {\n    border-color: var(--text-field-border-invalid);\n  }\n}\n"],"mappings":";AAEA;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;;;AC3BA;AAEA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM,IAAI;AACtB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBACE,aAAa,IAAI,8BAA8B,IAAI,yBAAyB,EAC5E,iBAAiB,IAAI,8BAA8B,IAAI;AAEzD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GAzCCD,eAyCK,CAAC,cAAgB,CArCtBC;AAsCC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GA9CCD,eA8CK,CAAC,cAAgB,CA1CtBC;AA2CC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GAnDCD,eAmDK,CAAC,cAAc,CA/CpBC;AAgDC,kBAAc,IAAI;AACpB;AACF;","names":["field","label","required","description","error","field","input"]}
+{"version":3,"sources":["../src/field/Field.module.css","../src/text-field/TextField.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer reset, tokens, vendor, base, components, utilities;\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 * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    font-family: var(--text-field-font-family);\n  }\n\n  .input {\n    min-block-size: var(--text-field-height-md);\n    padding-block: 0;\n    padding-inline: var(--text-field-padding-inline);\n    border: 1px solid var(--text-field-border-default);\n    border-radius: var(--text-field-radius);\n    background-color: var(--text-field-bg);\n    color: var(--text-field-fg);\n    font-size: var(--text-field-font-size-md);\n    transition:\n      border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n      background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--text-field-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--text-field-border-focus);\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: var(--text-field-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--text-field-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .input {\n    min-block-size: var(--text-field-height-sm);\n    font-size: var(--text-field-font-size-sm);\n  }\n\n  .field[data-size=\"lg\"] .input {\n    min-block-size: var(--text-field-height-lg);\n    font-size: var(--text-field-font-size-lg);\n  }\n\n  .field[data-invalid] .input {\n    border-color: var(--text-field-border-invalid);\n  }\n\n  .hiddenLabel {\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  /* Only when there is an icon or a clear button: the input keeps its own box, they sit over its padding. */\n  .control {\n    --_slot: var(--text-field-height-md);\n\n    display: grid;\n    position: relative;\n    align-items: center;\n\n    .field[data-size=\"sm\"] & {\n      --_slot: var(--text-field-height-sm);\n    }\n\n    .field[data-size=\"lg\"] & {\n      --_slot: var(--text-field-height-lg);\n    }\n\n  }\n\n  /* The input inside .control: a class of its own, so these rules do not race the .input states above. */\n  .inControl {\n    grid-area: 1 / 1;\n    inline-size: 100%;\n\n    /* The browser's own clear control would be a second, unnamed one. */\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n  }\n\n  .control[data-icon] .inControl {\n    padding-inline-start: calc(var(--text-field-padding-inline) + 1em + var(--text-field-icon-gap));\n  }\n\n  .control[data-clearable] .inControl {\n    padding-inline-end: var(--_slot);\n  }\n\n  .icon {\n    display: inline-flex;\n    grid-area: 1 / 1;\n    justify-self: start;\n    margin-inline-start: var(--text-field-padding-inline);\n    color: var(--text-field-icon-fg);\n    pointer-events: none;\n  }\n\n  .clear {\n    display: inline-flex;\n    grid-area: 1 / 1;\n    align-items: center;\n    justify-content: center;\n    justify-self: end;\n    inline-size: var(--_slot);\n    block-size: var(--_slot);\n    padding: 0;\n    border: 0;\n    border-radius: var(--text-field-radius);\n    background: transparent;\n    color: var(--text-field-icon-fg);\n    cursor: pointer;\n\n    &:hover {\n      color: var(--text-field-icon-fg-hover);\n    }\n\n    &:focus-visible {\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: calc(-1 * var(--text-field-focus-ring-width));\n    }\n  }\n}\n"],"mappings":";AAEA;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;;;AC3BA;AAEA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM,IAAI;AACtB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBACE,aAAa,IAAI,8BAA8B,IAAI,yBAAyB,EAC5E,iBAAiB,IAAI,8BAA8B,IAAI;AAEzD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GAzCCD,eAyCK,CAAC,cAAgB,CArCtBC;AAsCC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GA9CCD,eA8CK,CAAC,cAAgB,CA1CtBC;AA2CC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GAnDCD,eAmDK,CAAC,cAAc,CA/CpBC;AAgDC,kBAAc,IAAI;AACpB;AAEA,GAACC;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACf;AAGA,GAACC;AACC,aAAS,IAAI;AAEb,aAAS;AACT,cAAU;AACV,iBAAa;AAEb,KAxEDH,eAwEO,CAAC,cAAgB;AACrB,eAAS,IAAI;AACf;AAEA,KA5EDA,eA4EO,CAAC,cAAgB;AACrB,eAAS,IAAI;AACf;AAEF;AAGA,GAACI;AACC,eAAW,EAAE,EAAE;AACf,iBAAa;AAGb,KAAC;AACC,eAAS;AACX;AACF;AAEA,GA5BCD,iBA4BO,CAAC,WAAW,CAVnBC;AAWC,0BAAsB,KAAK,IAAI,6BAA6B,EAAE,IAAI,EAAE,IAAI;AAC1E;AAEA,GAhCCD,iBAgCO,CAAC,gBAAgB,CAdxBC;AAeC,wBAAoB,IAAI;AAC1B;AAEA,GAACC;AACC,aAAS;AACT,eAAW,EAAE,EAAE;AACf,kBAAc;AACd,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACX,oBAAgB;AAClB;AAEA,GAACC;AACC,aAAS;AACT,eAAW,EAAE,EAAE;AACf,iBAAa;AACb,qBAAiB;AACjB,kBAAc;AACd,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,mBAAe,IAAI;AACnB,gBAAY;AACZ,WAAO,IAAI;AACX,YAAQ;AAER,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AACF;AACF;","names":["field","label","required","description","error","field","input","hiddenLabel","control","inControl","icon","clear"]}

package/dist/text-field.d.ts

@@ -12,6 +12,18 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
      * `data-invalid`) and the message is announced as an alert.
      */
     error?: ReactNode;
+    /** Keeps the label for assistive technology only. For a search box that a heading or its place in the page already names. @default false */
+    hideLabel?: boolean;
+    /** A decorative glyph inside the field, before the text. `type="search"` gets the Search glyph unless you pass another (or `null`). */
+    iconStart?: ReactNode;
+    /**
+     * Adds a clear button that appears once the field has a value. Called when it
+     * is pressed and when Escape is pressed with a value. Controlled: set your
+     * value to `''` here. Uncontrolled: the input is emptied for you.
+     */
+    onClear?: () => void;
+    /** The clear button's name, for other languages. @default 'Clear' */
+    clearLabel?: string;
     /** @default 'md' */
     size?: TextFieldSize;
     /** The `<input>` element. */
@@ -29,13 +41,14 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
  *
  * @status stable
  * @category Forms
- * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies.
+ * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies. `hideLabel` hides the label visually, never from assistive technology. The leading icon is decorative. The clear button is a real `button` named by `clearLabel`, after the input in the tab order, present only while there is a value; pressing it (or Escape in the field) empties the field and leaves focus in the input. `type="search"` gives the input the `searchbox` role; wrap the form in `<search>` or `role="search"` yourself when it is the page's search.
  * @do Always pass `label`; use a visible one.
  * Prefer `error` text that says how to fix the value.
+ * @do For a search box: `type="search"`, `hideLabel` if a heading names it, and `onClear`.
  * @dont Use `placeholder` as the label.
  * Use it for multi-line text; use Textarea.
  */
-declare function TextField({ label, description, error, size, required, disabled, readOnly, id, className, ref, 'aria-describedby': describedBy, ...rest }: TextFieldProps): react.JSX.Element;
+declare function TextField({ label, description, error, hideLabel, iconStart, onClear, clearLabel, size, type, value, defaultValue, onChange, onKeyDown, required, disabled, readOnly, id, className, ref, 'aria-describedby': describedBy, ...rest }: TextFieldProps): react.JSX.Element;
 declare namespace TextField {
     var displayName: string;
 }

package/dist/text-field.js

@@ -1,6 +1,6 @@
-export { TextField } from './chunk-IFIQLIA3.js';
-import './chunk-M5VL22MY.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { TextField } from './chunk-S632WN4W.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=text-field.js.map
 //# sourceMappingURL=text-field.js.map

package/dist/textarea.js

@@ -1,6 +1,6 @@
-export { Textarea } from './chunk-5PYLJQJX.js';
-import './chunk-M5VL22MY.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Textarea } from './chunk-VS2HPJIX.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=textarea.js.map
 //# sourceMappingURL=textarea.js.map

package/dist/toast.css

@@ -160,6 +160,24 @@
       }
     }
   }
+  .Button_button[data-tone=danger] {
+    &[data-variant=primary] {
+      background-color: var(--button-danger-bg);
+      color: var(--button-danger-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-active);
+      }
+    }
+    &:is([data-variant=secondary], [data-variant=ghost]) {
+      color: var(--button-danger-text);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-quiet-bg-hover);
+      }
+    }
+  }
   .Button_label {
     display: inline-block;
   }

package/dist/toast.css.map

@@ -1 +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","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css","../src/toast/Toast.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\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 reset, tokens, vendor, base, components, utilities;\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 reset, tokens, vendor, base, components, utilities;\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 reset, tokens, vendor, base, components, utilities;\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    -webkit-user-select: none;\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","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .region {\n    --_top: auto;\n    --_end: var(--toast-offset);\n    --_bottom: var(--toast-offset);\n    --_start: auto;\n\n    position: fixed;\n    z-index: var(--toast-layer);\n    inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n    inline-size: min(var(--toast-width), 100vw);\n    padding: 0;\n    pointer-events: none;\n\n    &[data-placement=\"top-end\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n    }\n\n    &[data-placement=\"top-center\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n      --_start: 0;\n      --_end: 0;\n\n      margin-inline: auto;\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--toast-gap);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .item {\n    pointer-events: auto;\n    animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n  }\n\n  .toast {\n    border-radius: var(--toast-radius);\n    box-shadow: var(--toast-shadow);\n  }\n\n  @keyframes enter {\n    from {\n      opacity: 0;\n      translate: 0 var(--space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss","region","list","item","toast","enter"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css","../src/toast/Toast.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\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 reset, tokens, vendor, base, components, utilities;\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 reset, tokens, vendor, base, components, utilities;\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 reset, tokens, vendor, base, components, utilities;\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    -webkit-user-select: none;\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  /* tone=\"danger\", after the variants so it wins at equal specificity plus one attribute. */\n  .button[data-tone=\"danger\"] {\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-danger-bg);\n      color: var(--button-danger-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-active);\n      }\n    }\n\n    &:is([data-variant=\"secondary\"], [data-variant=\"ghost\"]) {\n      color: var(--button-danger-text);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-quiet-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .region {\n    --_top: auto;\n    --_end: var(--toast-offset);\n    --_bottom: var(--toast-offset);\n    --_start: auto;\n\n    position: fixed;\n    z-index: var(--toast-layer);\n    inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n    inline-size: min(var(--toast-width), 100vw);\n    padding: 0;\n    pointer-events: none;\n\n    &[data-placement=\"top-end\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n    }\n\n    &[data-placement=\"top-center\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n      --_start: 0;\n      --_end: 0;\n\n      margin-inline: auto;\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--toast-gap);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .item {\n    pointer-events: auto;\n    animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n  }\n\n  .toast {\n    border-radius: var(--toast-radius);\n    box-shadow: var(--toast-shadow);\n  }\n\n  @keyframes enter {\n    from {\n      opacity: 0;\n      translate: 0 var(--space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss","region","list","item","toast","enter"]}

package/dist/toast.d.ts

@@ -19,6 +19,7 @@ interface ToastProviderProps {
  * region; `useToast()` adds notifications to it. Timers pause while the
  * region is hovered or holds focus, Escape dismisses the focused toast, and
  * error toasts stay until dismissed. Each toast is an Alert.
+ * `toast.undo(message, onUndo)` is the shorthand for a reversible action.
  *
  * @status stable
  * @category Feedback
@@ -40,21 +41,38 @@ interface ToastOptions {
     tone?: AlertTone;
     /** Milliseconds before auto-dismiss; `Infinity` keeps it until dismissed. Errors default to `Infinity`. */
     duration?: number;
+    /** One button inside the toast. Pressing it runs `onClick` and dismisses the toast. It never takes focus. */
     action?: {
         label: string;
         onClick: () => void;
     };
 }
+interface ToastUndoOptions extends Pick<ToastOptions, 'description' | 'tone'> {
+    /** The button's label, for other languages. @default 'Undo' */
+    label?: string;
+    /** Longer than an ordinary toast by default (8 s): there is something to read, decide and reach. */
+    duration?: number;
+}
+interface ToastFunction {
+    /** Shows a toast and returns its id. */
+    (options: ToastOptions): string;
+    /**
+     * The named case for a reversible action: "Place removed" with an Undo
+     * button. Pressing it runs `onUndo` and dismisses; letting it time out
+     * does nothing, so do the work first and undo it on request.
+     */
+    undo: (message: ReactNode, onUndo: () => void, options?: ToastUndoOptions) => string;
+}
 interface ToastItem extends ToastOptions {
     id: string;
 }
 interface ToastContextValue {
-    /** Shows a toast and returns its id. */
-    toast: (options: ToastOptions) => string;
+    /** Shows a toast and returns its id. `toast.undo(message, onUndo)` is the reversible-action shorthand. */
+    toast: ToastFunction;
     dismiss: (id: string) => void;
     dismissAll: () => void;
 }
 /** The toast API. Must be used inside `ToastProvider`. */
 declare function useToast(): ToastContextValue;
 
-export { type ToastContextValue, type ToastItem, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, useToast };
+export { type ToastContextValue, type ToastFunction, type ToastItem, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastUndoOptions, useToast };

package/dist/toast.js

@@ -1,11 +1,11 @@
-export { ToastProvider, useToast } from './chunk-U3N3G2UA.js';
-import './chunk-N4C3NQIN.js';
-import './chunk-MF66ICX6.js';
-import './chunk-5TTYVQ6Q.js';
+"use client";export { ToastProvider, useToast } from './chunk-FFCEY76B.js';
+import './chunk-A7TMFEQ2.js';
+import './chunk-56RSH7GQ.js';
+import './chunk-DE67ECD7.js';
 import './chunk-ZL5MMRLG.js';
-import './chunk-ZVDN3GRI.js';
 import './chunk-IB5UUE3S.js';
 import './chunk-O5LII5XP.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=toast.js.map
 //# sourceMappingURL=toast.js.map

package/dist/tooltip.js

@@ -1,5 +1,5 @@
-export { Tooltip } from './chunk-XWPXW46D.js';
+"use client";export { Tooltip } from './chunk-GWTHITZO.js';
 import './chunk-U6QRAD73.js';
-import './chunk-ZVDN3GRI.js';
+import './chunk-QJG5ILK5.js';
 //# sourceMappingURL=tooltip.js.map
 //# sourceMappingURL=tooltip.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pearpages/pulp-react",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "pulp React components. Accessible, token-driven, CSS modules, one entry per component.",
   "license": "MIT",
   "author": "Pere Pages <hello@pearpages.com> (https://pearpages.com)",
@@ -23,6 +23,30 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./empty-state": {
+      "types": "./dist/empty-state.d.ts",
+      "import": "./dist/empty-state.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/segmented-control.d.ts",
+      "import": "./dist/segmented-control.js"
+    },
+    "./chip": {
+      "types": "./dist/chip.d.ts",
+      "import": "./dist/chip.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js"
+    },
+    "./link": {
+      "types": "./dist/link.d.ts",
+      "import": "./dist/link.js"
+    },
+    "./divider": {
+      "types": "./dist/divider.d.ts",
+      "import": "./dist/divider.js"
+    },
     "./sheet": {
       "types": "./dist/sheet.d.ts",
       "import": "./dist/sheet.js"
@@ -172,6 +196,12 @@
       "import": "./dist/button.js"
     },
     "./styles.css": "./dist/index.css",
+    "./empty-state.css": "./dist/empty-state.css",
+    "./segmented-control.css": "./dist/segmented-control.css",
+    "./chip.css": "./dist/chip.css",
+    "./avatar.css": "./dist/avatar.css",
+    "./link.css": "./dist/link.css",
+    "./divider.css": "./dist/divider.css",
     "./sheet.css": "./dist/sheet.css",
     "./pagination.css": "./dist/pagination.css",
     "./table.css": "./dist/table.css",
@@ -215,7 +245,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@pearpages/pulp-tokens": "^0.2.1"
+    "@pearpages/pulp-tokens": "^0.3.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
@@ -237,7 +267,7 @@
     "typescript": "^5.9.3",
     "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
-    "@pearpages/pulp-tokens": "0.2.1"
+    "@pearpages/pulp-tokens": "0.3.0"
   },
   "peerDependenciesMeta": {
     "@pearpages/pulp-tokens": {
@@ -249,10 +279,10 @@
     "@internationalized/date": "^3.12.4",
     "@pearpages/modals": "^0.3.0",
     "react-aria-components": "^1.21.1",
-    "@pearpages/pulp-icons": "^0.1.0"
+    "@pearpages/pulp-icons": "^0.2.0"
   },
   "scripts": {
-    "build": "tsup && node scripts/manifest.mjs",
+    "build": "tsup && node scripts/client-entries.mjs && node scripts/manifest.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "test": "vitest",
@@ -260,7 +290,7 @@
     "test:dist": "vitest run --config vitest.dist.config.ts",
     "manifest": "node scripts/manifest.mjs",
     "scaffold": "node scripts/scaffold-component.mjs",
-    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints styles.css button.css text-field.css card.css tabs.css dialog.css text.css heading.css icon.css visually-hidden.css stack.css inline.css field.css icon-button.css checkbox.css switch.css radio.css textarea.css select.css spinner.css badge.css alert.css toast.css progress.css skeleton.css tooltip.css popover.css accordion.css menu.css combobox.css listbox.css picker.css calendar.css date-picker.css slider.css table.css pagination.css sheet.css component-manifest.json",
+    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints styles.css button.css text-field.css card.css tabs.css dialog.css text.css heading.css icon.css visually-hidden.css stack.css inline.css field.css icon-button.css checkbox.css switch.css radio.css textarea.css select.css spinner.css badge.css alert.css toast.css progress.css skeleton.css tooltip.css popover.css accordion.css menu.css combobox.css listbox.css picker.css calendar.css date-picker.css slider.css table.css pagination.css sheet.css divider.css link.css avatar.css chip.css segmented-control.css empty-state.css component-manifest.json",
     "check:size": "size-limit"
   }
 }

package/dist/chunk-5TTYVQ6Q.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/Button.module.css","../src/button/Button.tsx"],"names":["button","label"],"mappings":"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","file":"chunk-5TTYVQ6Q.js","sourcesContent":["/*\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 reset, tokens, vendor, base, components, utilities;\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    -webkit-user-select: none;\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","import { Children, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react';\nimport { Icon } from '../icon';\nimport { renderAsChild } from '../internal/asChild';\nimport { Spinner } from '../spinner';\nimport { classes } from '../internal/classes';\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps<E extends HTMLElement = HTMLButtonElement> extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Visual emphasis. One `primary` per view; `secondary` for the rest;\n   * `ghost` for actions that sit inside other content.\n   * @default 'primary'\n   */\n  variant?: ButtonVariant;\n  /** @default 'md' */\n  size?: ButtonSize;\n  /**\n   * Shows a spinner, sets `aria-busy` and `aria-disabled`, and blocks\n   * activation. The element stays focusable so focus is not lost mid-action,\n   * and the label stays in place so the button keeps its width.\n   * @default false\n   */\n  loading?: boolean;\n  /** Decorative element before the label. Hidden from assistive technology. */\n  iconStart?: ReactNode;\n  /** Decorative element after the label. Hidden from assistive technology. */\n  iconEnd?: ReactNode;\n  /**\n   * Render the single child element instead of a `<button>`, merging the\n   * button's props into it. Use it to style a router `<Link>` or an `<a>` as a\n   * button. Disabled and loading states then use `aria-disabled`, and the\n   * child's own `onClick` does not run while the control is inert.\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * The rendered element. With `asChild` that is the child's element, so pass\n   * the type parameter: `<Button<HTMLAnchorElement> asChild ref={anchorRef}>`.\n   */\n  ref?: Ref<E>;\n  children: ReactNode;\n}\n\nconst BLOCK = (event: MouseEvent) => event.preventDefault();\n\nconst DEV = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n/** True when some text exists anywhere in the children tree. */\nfunction hasText(node: ReactNode): boolean {\n  return Children.toArray(node).some((child) => {\n    if (typeof child === 'string') return child.trim().length > 0;\n    if (typeof child === 'number') return true;\n    if (isValidElement<{ children?: ReactNode }>(child)) return hasText(child.props.children);\n    return false;\n  });\n}\n\n/**\n * The one action component. Variants map to emphasis, not colour: one\n * `primary` per view, `secondary` for the rest, `ghost` inside other content.\n * Every value comes from `--button-*` tokens, so a brand restyles it without\n * touching the component. State is exposed as `data-variant`, `data-size` and\n * `data-loading` for styling, tests and agents alike.\n *\n * @status stable\n * @category Actions\n * @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.\n * @do One `primary` per view.\n * Use `asChild` for links that look like buttons, keeping the `a` semantics.\n * @dont Use `loading` on a button that is not the one that started the work.\n * Rely on colour to tell variants apart; the label carries the meaning.\n */\nexport function Button<E extends HTMLElement = HTMLButtonElement>({\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  iconStart,\n  iconEnd,\n  asChild = false,\n  className,\n  disabled = false,\n  type,\n  onClick,\n  ref,\n  children,\n  ...rest\n}: ButtonProps<E>) {\n  // Inert: must not activate. `disabled` on a real <button> also removes it\n  // from the tab order, which is right for \"disabled\" and wrong for \"loading\":\n  // the element the user just pressed must keep focus. So loading (and every\n  // asChild state) uses aria-disabled and blocks activation in the handler.\n  const inert = disabled || loading;\n  const nativeDisabled = !asChild && disabled;\n\n  if (DEV && !hasText(asChild ? (children as { props?: { children?: ReactNode } }).props?.children : children)) {\n    if (!rest['aria-label'] && !rest['aria-labelledby']) {\n      console.warn('Button: no text content and no aria-label. Icon-only buttons need an accessible name.');\n    }\n  }\n\n  const props = {\n    ...rest,\n    ref,\n    className: classes(styles.button, className),\n    'data-variant': variant,\n    'data-size': size,\n    'data-loading': loading ? '' : undefined,\n    'aria-busy': loading || undefined,\n    disabled: nativeDisabled || undefined,\n    'aria-disabled': inert && !nativeDisabled ? true : undefined,\n    type: asChild ? undefined : (type ?? 'button'),\n    onClick: inert ? BLOCK : onClick,\n  };\n\n  const decorate = (label: ReactNode) => (\n    <>\n      {loading && <Spinner decorative size=\"inherit\" tone=\"inherit\" />}\n      {iconStart && <Icon size=\"inherit\">{iconStart}</Icon>}\n      <span className={styles.label}>{label}</span>\n      {iconEnd && <Icon size=\"inherit\">{iconEnd}</Icon>}\n    </>\n  );\n\n  if (asChild) {\n    const child = children as { props?: { children?: ReactNode } };\n    // The helper merges the forwarded ref with the child's; nothing reads it.\n    // eslint-disable-next-line react-hooks/refs -- forwarded, not read\n    return renderAsChild('Button', children, { ...props, children: decorate(child.props?.children) }, {\n      // An inert control must not run the child's handler either.\n      replace: inert ? ['onClick'] : [],\n    });\n  }\n\n  return <button {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}>{decorate(children)}</button>;\n}\n\nButton.displayName = 'Button';\n"]}