@pearpages/pulp-react 0.2.1 → 0.3.0

package/dist/calendar.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/calendar/Calendar.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Calendar_root {
     display: inline-flex;

package/dist/calendar.css.map

@@ -1 +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"]}
+{"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 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","/*\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 reset, tokens, vendor, base, components, utilities;\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;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;;;AChBA;AAEA;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.js

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

package/dist/card.css

@@ -1,4 +1,5 @@
 /* src/card/Card.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Card_card {
     --_pad: var(--card-padding-md);

package/dist/card.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/card/Card.module.css"],"sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer components {\n  .card {\n    --_pad: var(--card-padding-md);\n\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n    border: 1px solid transparent;\n    border-radius: var(--card-radius);\n    background-color: var(--card-bg);\n    color: var(--card-fg);\n    text-decoration: none;\n    transition:\n      border-color var(--card-motion-duration) var(--motion-easing-standard),\n      box-shadow var(--card-motion-duration) var(--motion-easing-standard),\n      translate var(--card-motion-duration) var(--motion-easing-standard);\n\n    &[data-padding=\"sm\"] {\n      --_pad: var(--card-padding-sm);\n    }\n\n    &[data-padding=\"lg\"] {\n      --_pad: var(--card-padding-lg);\n    }\n\n    &[data-variant=\"raised\"] {\n      box-shadow: var(--card-shadow);\n    }\n\n    &[data-variant=\"outlined\"] {\n      border-color: var(--card-border);\n    }\n\n    &[data-variant=\"sunken\"] {\n      background-color: var(--card-bg-sunken);\n    }\n\n    &[data-interactive] {\n      cursor: pointer;\n\n      &:hover {\n        border-color: var(--card-border-hover);\n        translate: 0 -1px;\n      }\n\n      &:focus-visible {\n        outline: var(--card-focus-ring-width) solid var(--card-focus-ring);\n        outline-offset: var(--card-focus-ring-offset);\n      }\n    }\n  }\n\n  .header,\n  .body,\n  .footer {\n    padding: var(--_pad);\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--card-gap);\n    border-block-end: 1px solid var(--card-divider);\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--card-gap);\n    border-block-start: 1px solid var(--card-divider);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACjB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,qBAAiB;AACjB;AAAA,MACE,aAAa,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACtE,WAAW,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACpE,UAAU,IAAI,wBAAwB,IAAI;AAE5C,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,cAAQ;AAER,OAAC;AACC,sBAAc,IAAI;AAClB,mBAAW,EAAE;AACf;AAEA,OAAC;AACC,iBAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,wBAAgB,IAAI;AACtB;AACF;AACF;AAEA,GAACC;AAAA,EACD,CAACC;AAAA,EACD,CAACC;AACC,aAAS,IAAI;AACf;AAEA,GANCF;AAOC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAClC;AAEA,GAZCC;AAaC,UAAM;AACR;AAEA,GAfCC;AAgBC,aAAS;AACT,eAAW;AACX,iBAAa;AACb,SAAK,IAAI;AACT,wBAAoB,IAAI,MAAM,IAAI;AACpC;AACF;","names":["card","header","body","footer"]}
+{"version":3,"sources":["../src/card/Card.module.css"],"sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .card {\n    --_pad: var(--card-padding-md);\n\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n    border: 1px solid transparent;\n    border-radius: var(--card-radius);\n    background-color: var(--card-bg);\n    color: var(--card-fg);\n    text-decoration: none;\n    transition:\n      border-color var(--card-motion-duration) var(--motion-easing-standard),\n      box-shadow var(--card-motion-duration) var(--motion-easing-standard),\n      translate var(--card-motion-duration) var(--motion-easing-standard);\n\n    &[data-padding=\"sm\"] {\n      --_pad: var(--card-padding-sm);\n    }\n\n    &[data-padding=\"lg\"] {\n      --_pad: var(--card-padding-lg);\n    }\n\n    &[data-variant=\"raised\"] {\n      box-shadow: var(--card-shadow);\n    }\n\n    &[data-variant=\"outlined\"] {\n      border-color: var(--card-border);\n    }\n\n    &[data-variant=\"sunken\"] {\n      background-color: var(--card-bg-sunken);\n    }\n\n    &[data-interactive] {\n      cursor: pointer;\n\n      &:hover {\n        border-color: var(--card-border-hover);\n        translate: 0 -1px;\n      }\n\n      &:focus-visible {\n        outline: var(--card-focus-ring-width) solid var(--card-focus-ring);\n        outline-offset: var(--card-focus-ring-offset);\n      }\n    }\n  }\n\n  .header,\n  .body,\n  .footer {\n    padding: var(--_pad);\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--card-gap);\n    border-block-end: 1px solid var(--card-divider);\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--card-gap);\n    border-block-start: 1px solid var(--card-divider);\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACjB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,qBAAiB;AACjB;AAAA,MACE,aAAa,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACtE,WAAW,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACpE,UAAU,IAAI,wBAAwB,IAAI;AAE5C,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,cAAQ;AAER,OAAC;AACC,sBAAc,IAAI;AAClB,mBAAW,EAAE;AACf;AAEA,OAAC;AACC,iBAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,wBAAgB,IAAI;AACtB;AACF;AACF;AAEA,GAACC;AAAA,EACD,CAACC;AAAA,EACD,CAACC;AACC,aAAS,IAAI;AACf;AAEA,GANCF;AAOC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAClC;AAEA,GAZCC;AAaC,UAAM;AACR;AAEA,GAfCC;AAgBC,aAAS;AACT,eAAW;AACX,iBAAa;AACb,SAAK,IAAI;AACT,wBAAoB,IAAI,MAAM,IAAI;AACpC;AACF;","names":["card","header","body","footer"]}

package/dist/card.js

@@ -1,5 +1,5 @@
-export { Card } from './chunk-MRQWUCBA.js';
-import './chunk-ZVDN3GRI.js';
+export { Card } from './chunk-HPQ462R5.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=card.js.map
 //# sourceMappingURL=card.js.map

package/dist/checkbox.css

@@ -1,4 +1,5 @@
 /* src/field/Field.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Field_field {
     display: flex;
@@ -27,6 +28,7 @@
 }
 
 /* src/checkbox/Checkbox.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Checkbox_checkbox {
     --_size: var(--checkbox-size-md);

package/dist/checkbox.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/Field.module.css","../src/checkbox/Checkbox.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--checkbox-*). Size and invalid state are resolved\n * into private custom properties on the root, so the input has one rule per\n * property and no selector ordering to maintain.\n */\n\n@layer components {\n  .checkbox {\n    --_size: var(--checkbox-size-md);\n    --_border: var(--checkbox-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--checkbox-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--checkbox-size-lg); }\n    &[data-invalid] { --_border: var(--checkbox-border-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--checkbox-gap);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--checkbox-radius);\n    background-color: var(--checkbox-bg);\n    appearance: none;\n    cursor: pointer;\n    transition:\n      background-color var(--checkbox-motion-duration) var(--motion-easing-standard),\n      border-color var(--checkbox-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) * 0.3);\n      block-size: calc(var(--_size) * 0.55);\n      border-style: solid;\n      border-color: var(--checkbox-check);\n      border-width: 0 var(--checkbox-check-width) var(--checkbox-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n\n    &:checked,\n    &:indeterminate {\n      border-color: var(--checkbox-bg-checked);\n      background-color: var(--checkbox-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &:indeterminate::after {\n      inline-size: calc(var(--_size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--checkbox-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n\n    &:focus-visible {\n      outline: var(--checkbox-focus-ring-width) solid var(--checkbox-focus-ring);\n      outline-offset: var(--checkbox-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked, :indeterminate) {\n      border-color: var(--checkbox-border-hover);\n    }\n\n    &:hover:not(:disabled):is(:checked, :indeterminate) {\n      border-color: var(--checkbox-bg-checked-hover);\n      background-color: var(--checkbox-bg-checked-hover);\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;ACzBA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA4B;AAC/D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,mBAAe;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBACE,iBAAiB,IAAI,4BAA4B,IAAI,yBAAyB,EAC9E,aAAa,IAAI,4BAA4B,IAAI;AAGnD,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,oBAAc;AACd,oBAAc,IAAI;AAClB,oBAAc,EAAE,IAAI,wBAAwB,IAAI,wBAAwB;AACxE,cAAQ;AACR,iBAAW,EAAE;AACb,eAAS;AACX;AAEA,KAAC;AAAA,IACD,CAAC;AACC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AAEtB,OAAC;AACC,iBAAS;AACX;AACF;AAEA,KAAC,cAAc;AACb,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY;AACZ,oBAAc,EAAE,EAAE,IAAI;AACtB,cAAQ;AACR,iBAAW,EAAE;AACf;AAEA,KAAC;AACC,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW,UAAU;AAC/B,oBAAc,IAAI;AACpB;AAEA,KAAC,MAAM,KAAK,UAAU,IAAI,UAAU;AAClC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","checkbox","row","input"]}
+{"version":3,"sources":["../src/field/Field.module.css","../src/checkbox/Checkbox.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 * Every value is a token (--checkbox-*). Size and invalid state are resolved\n * into private custom properties on the root, so the input has one rule per\n * property and no selector ordering to maintain.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .checkbox {\n    --_size: var(--checkbox-size-md);\n    --_border: var(--checkbox-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--checkbox-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--checkbox-size-lg); }\n    &[data-invalid] { --_border: var(--checkbox-border-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--checkbox-gap);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--checkbox-radius);\n    background-color: var(--checkbox-bg);\n    appearance: none;\n    cursor: pointer;\n    transition:\n      background-color var(--checkbox-motion-duration) var(--motion-easing-standard),\n      border-color var(--checkbox-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) * 0.3);\n      block-size: calc(var(--_size) * 0.55);\n      border-style: solid;\n      border-color: var(--checkbox-check);\n      border-width: 0 var(--checkbox-check-width) var(--checkbox-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n\n    &:checked,\n    &:indeterminate {\n      border-color: var(--checkbox-bg-checked);\n      background-color: var(--checkbox-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &:indeterminate::after {\n      inline-size: calc(var(--_size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--checkbox-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n\n    &:focus-visible {\n      outline: var(--checkbox-focus-ring-width) solid var(--checkbox-focus-ring);\n      outline-offset: var(--checkbox-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked, :indeterminate) {\n      border-color: var(--checkbox-border-hover);\n    }\n\n    &:hover:not(:disabled):is(:checked, :indeterminate) {\n      border-color: var(--checkbox-bg-checked-hover);\n      background-color: var(--checkbox-bg-checked-hover);\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,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA4B;AAC/D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,mBAAe;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBACE,iBAAiB,IAAI,4BAA4B,IAAI,yBAAyB,EAC9E,aAAa,IAAI,4BAA4B,IAAI;AAGnD,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,oBAAc;AACd,oBAAc,IAAI;AAClB,oBAAc,EAAE,IAAI,wBAAwB,IAAI,wBAAwB;AACxE,cAAQ;AACR,iBAAW,EAAE;AACb,eAAS;AACX;AAEA,KAAC;AAAA,IACD,CAAC;AACC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AAEtB,OAAC;AACC,iBAAS;AACX;AACF;AAEA,KAAC,cAAc;AACb,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY;AACZ,oBAAc,EAAE,EAAE,IAAI;AACtB,cAAQ;AACR,iBAAW,EAAE;AACf;AAEA,KAAC;AACC,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW,UAAU;AAC/B,oBAAc,IAAI;AACpB;AAEA,KAAC,MAAM,KAAK,UAAU,IAAI,UAAU;AAClC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","checkbox","row","input"]}

package/dist/checkbox.js

@@ -1,7 +1,7 @@
-export { Checkbox } from './chunk-DWE374JX.js';
-import './chunk-BBV4L5WO.js';
-import './chunk-2PXTVZ7H.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Checkbox } from './chunk-UMK4D234.js';
+import './chunk-Q6SYKNZ5.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=checkbox.js.map
 //# sourceMappingURL=checkbox.js.map

package/dist/chip.css

@@ -0,0 +1,95 @@
+/* src/chip/Chip.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Chip_root {
+    --_bg: var(--chip-neutral-bg);
+    --_bg-hover: var(--chip-neutral-bg-hover);
+    --_fg: var(--chip-neutral-fg);
+    --_border: var(--chip-neutral-border);
+    --_selected-bg: var(--chip-neutral-selected-bg);
+    --_selected-fg: var(--chip-neutral-selected-fg);
+    --_height: var(--chip-height-md);
+    --_padding: var(--chip-padding-x-md);
+    display: inline-flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    min-block-size: var(--_height);
+    max-inline-size: 100%;
+    border: var(--chip-border-width) solid var(--_border);
+    border-radius: var(--chip-radius);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-family: var(--font-family-body);
+    font-size: var(--chip-font-size-md);
+    font-weight: var(--chip-weight);
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+    &[data-tone=action] {
+      --_bg: var(--chip-action-bg);
+      --_bg-hover: var(--chip-action-bg-hover);
+      --_fg: var(--chip-action-fg);
+      --_border: var(--chip-action-border);
+      --_selected-bg: var(--chip-action-selected-bg);
+      --_selected-fg: var(--chip-action-selected-fg);
+    }
+    &[data-size=sm] {
+      --_height: var(--chip-height-sm);
+      --_padding: var(--chip-padding-x-sm);
+      font-size: var(--chip-font-size-sm);
+    }
+    &[data-size=lg] {
+      --_height: var(--chip-height-lg);
+      --_padding: var(--chip-padding-x-lg);
+      font-size: var(--chip-font-size-lg);
+    }
+    &[data-selected] {
+      border-color: var(--_selected-bg);
+      background: var(--_selected-bg);
+      color: var(--_selected-fg);
+    }
+    &[data-disabled] {
+      opacity: 0.55;
+    }
+  }
+  .Chip_label,
+  .Chip_remove {
+    display: inline-flex;
+    align-items: center;
+    border: 0;
+    border-radius: var(--chip-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    &:is(button) {
+      cursor: pointer;
+    }
+    &:is(button):disabled {
+      cursor: not-allowed;
+    }
+    &:focus-visible {
+      outline: var(--chip-focus-ring-width) solid var(--chip-focus-ring);
+      outline-offset: var(--chip-focus-ring-offset);
+    }
+  }
+  .Chip_label {
+    min-inline-size: 0;
+    padding-block: 0;
+    padding-inline: var(--_padding);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:not(:last-child) {
+      padding-inline-end: var(--chip-gap);
+    }
+  }
+  .Chip_root:not([data-selected], [data-disabled]) button.Chip_label:hover {
+    background: var(--_bg-hover);
+  }
+  .Chip_remove {
+    flex: none;
+    justify-content: center;
+    inline-size: var(--_height);
+    padding: 0;
+  }
+}
+/*# sourceMappingURL=chip.css.map */

package/dist/chip.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip/Chip.module.css"],"sourcesContent":["/* Every value is a token: --chip-* in packages/tokens/tokens/component/chip.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_bg: var(--chip-neutral-bg);\n    --_bg-hover: var(--chip-neutral-bg-hover);\n    --_fg: var(--chip-neutral-fg);\n    --_border: var(--chip-neutral-border);\n    --_selected-bg: var(--chip-neutral-selected-bg);\n    --_selected-fg: var(--chip-neutral-selected-fg);\n    --_height: var(--chip-height-md);\n    --_padding: var(--chip-padding-x-md);\n\n    display: inline-flex;\n    align-items: stretch;\n    box-sizing: border-box;\n    min-block-size: var(--_height);\n    max-inline-size: 100%;\n    border: var(--chip-border-width) solid var(--_border);\n    border-radius: var(--chip-radius);\n    background: var(--_bg);\n    color: var(--_fg);\n    font-family: var(--font-family-body);\n    font-size: var(--chip-font-size-md);\n    font-weight: var(--chip-weight);\n    line-height: 1;\n    white-space: nowrap;\n    vertical-align: middle;\n\n    &[data-tone='action'] {\n      --_bg: var(--chip-action-bg);\n      --_bg-hover: var(--chip-action-bg-hover);\n      --_fg: var(--chip-action-fg);\n      --_border: var(--chip-action-border);\n      --_selected-bg: var(--chip-action-selected-bg);\n      --_selected-fg: var(--chip-action-selected-fg);\n    }\n\n    &[data-size='sm'] {\n      --_height: var(--chip-height-sm);\n      --_padding: var(--chip-padding-x-sm);\n\n      font-size: var(--chip-font-size-sm);\n    }\n\n    &[data-size='lg'] {\n      --_height: var(--chip-height-lg);\n      --_padding: var(--chip-padding-x-lg);\n\n      font-size: var(--chip-font-size-lg);\n    }\n\n    &[data-selected] {\n      border-color: var(--_selected-bg);\n      background: var(--_selected-bg);\n      color: var(--_selected-fg);\n    }\n\n    &[data-disabled] {\n      opacity: 0.55;\n    }\n  }\n\n  /* The two controls are transparent: the pill is painted once, on the root. */\n  .label,\n  .remove {\n    display: inline-flex;\n    align-items: center;\n    border: 0;\n    border-radius: var(--chip-radius);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n\n    &:is(button) {\n      cursor: pointer;\n    }\n\n    &:is(button):disabled {\n      cursor: not-allowed;\n    }\n\n    &:focus-visible {\n      outline: var(--chip-focus-ring-width) solid var(--chip-focus-ring);\n      outline-offset: var(--chip-focus-ring-offset);\n    }\n  }\n\n  .label {\n    min-inline-size: 0;\n    padding-block: 0;\n    padding-inline: var(--_padding);\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    /* With a remove button the label gives up its end padding to it. */\n    &:not(:last-child) {\n      padding-inline-end: var(--chip-gap);\n    }\n  }\n\n  /* On the label, not `.root:has(.label:hover)`: Firefox 120, the support floor, has no :has(). */\n  .root:not([data-selected], [data-disabled]) button.label:hover {\n    background: var(--_bg-hover);\n  }\n\n  .remove {\n    flex: none;\n    justify-content: center;\n\n    /* A square as tall as the chip, so the target is never smaller than the chip itself. */\n    inline-size: var(--_height);\n    padding: 0;\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,oBAAgB,IAAI;AACpB,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACf,gBAAY,IAAI;AAEhB,aAAS;AACT,iBAAa;AACb,gBAAY;AACZ,oBAAgB,IAAI;AACpB,qBAAiB;AACjB,YAAQ,IAAI,qBAAqB,MAAM,IAAI;AAC3C,mBAAe,IAAI;AACnB,gBAAY,IAAI;AAChB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,iBAAa;AACb,oBAAgB;AAEhB,KAAC,CAAC;AACA,aAAO,IAAI;AACX,mBAAa,IAAI;AACjB,aAAO,IAAI;AACX,iBAAW,IAAI;AACf,sBAAgB,IAAI;AACpB,sBAAgB,IAAI;AACtB;AAEA,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,kBAAY,IAAI;AAEhB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,kBAAY,IAAI;AAEhB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,oBAAc,IAAI;AAClB,kBAAY,IAAI;AAChB,aAAO,IAAI;AACb;AAEA,KAAC,CAAC;AACA,eAAS;AACX;AACF;AAGA,GAACC;AAAA,EACD,CAACC;AACC,aAAS;AACT,iBAAa;AACb,YAAQ;AACR,mBAAe,IAAI;AACnB,gBAAY;AACZ,WAAO;AACP,UAAM;AAEN,KAAC,IAAI;AACH,cAAQ;AACV;AAEA,KAAC,IAAI,OAAO;AACV,cAAQ;AACV;AAEA,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GAxBCD;AAyBC,qBAAiB;AACjB,mBAAe;AACf,oBAAgB,IAAI;AACpB,cAAU;AACV,mBAAe;AAGf,KAAC,KAAK;AACJ,0BAAoB,IAAI;AAC1B;AACF;AAGA,GAnGCD,SAmGI,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,MAAM,CAtCjDC,UAsCuD;AACtD,gBAAY,IAAI;AAClB;AAEA,GAzCCC;AA0CC,UAAM;AACN,qBAAiB;AAGjB,iBAAa,IAAI;AACjB,aAAS;AACX;AACF;","names":["root","label","remove"]}

package/dist/chip.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, Ref, ReactNode } from 'react';
+
+type ChipSize = 'sm' | 'md' | 'lg';
+type ChipTone = 'neutral' | 'action';
+interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Controlled pressed state. Passing it (or `defaultSelected`, or `onSelectedChange`) makes the chip a toggle. */
+    selected?: boolean;
+    /** Uncontrolled initial pressed state. */
+    defaultSelected?: boolean;
+    /** Called with the next state when the chip is pressed. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Adds a remove button after the label: a second button beside the chip, never inside it. */
+    onRemove?: () => void;
+    /** The remove button is named "`removeLabel` + the chip's label" ("Remove Vegan"). @default 'Remove' */
+    removeLabel?: string;
+    /** `sm` is 24px high, the minimum target size. @default 'md' */
+    size?: ChipSize;
+    /** `action` takes the brand's colour; a selected chip is filled in either tone. @default 'neutral' */
+    tone?: ChipTone;
+    /** The `button` that carries the label, or the `span` when the chip neither toggles nor has an `onClick`. */
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+}
+/**
+ * A small pill for a choice or a value the user controls: a filter that
+ * toggles (`selected`), a tag that can be removed (`onRemove`), or both. The
+ * label is a button only when pressing it does something.
+ *
+ * @status experimental
+ * @category Actions
+ * @accessibility A toggle chip is a native `button` with `aria-pressed`, so Space and Enter work and the state is announced. The remove control is a second `button`, a sibling of the first (a button inside a button is invalid HTML and unreachable by keyboard), named by `removeLabel` plus the chip's own label through `aria-labelledby`: "Remove Vegan", not "Remove" six times. The pair is wrapped in a `role="group"` named by the label only when there are two controls. `disabled` disables both. After removing a chip, move focus yourself (to the next chip or the input): the button that had it is gone.
+ * @do Use a group of toggle chips for filters where several can be on at once.
+ * @do Keep the label to a word or two; a chip does not wrap.
+ * @dont Use a chip that does nothing as a label or a status: that is a Badge.
+ * @dont Use chips for one choice out of several; that is a SegmentedControl or a RadioGroup.
+ */
+declare function Chip({ selected, defaultSelected, onSelectedChange, onRemove, removeLabel, size, tone, disabled, className, onClick, ref, children, ...rest }: ChipProps): react.JSX.Element;
+declare namespace Chip {
+    var displayName: string;
+}
+
+export { Chip, type ChipProps };

package/dist/chip.js

@@ -0,0 +1,4 @@
+"use client";export { Chip } from './chunk-OKA2PLDV.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=chip.js.map
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

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

package/dist/{chunk-7DS4I7OJ.js → chunk-2E2ESMS2.js}

@@ -26,5 +26,5 @@ function Stack({ as = "div", gap = 3, align, justify, className, ref, children,
 Stack.displayName = "Stack";
 
 export { Stack };
-//# sourceMappingURL=chunk-7DS4I7OJ.js.map
-//# sourceMappingURL=chunk-7DS4I7OJ.js.map
+//# sourceMappingURL=chunk-2E2ESMS2.js.map
+//# sourceMappingURL=chunk-2E2ESMS2.js.map

package/dist/chunk-2E2ESMS2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stack/Stack.module.css","../src/stack/Stack.tsx"],"names":["stack"],"mappings":";;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAKG,KAAA,EAAAA;AAAA,CAAA;;;AC4BI,SAAS,KAAA,CAAM,EAAE,EAAA,GAAK,KAAA,EAAO,GAAA,GAAM,CAAA,EAAG,KAAA,EAAO,OAAA,EAAS,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,MAAK,EAAe;AAC5G,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAA;AAAA;AAAA,MAEA,MAAM,IAAA,CAAK,IAAA,KAAS,OAAO,IAAA,IAAQ,EAAA,KAAO,OAAO,MAAA,GAAS,MAAA,CAAA;AAAA,MAC1D,SAAA,EAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,UAAA,EAAY,GAAA;AAAA,MACZ,YAAA,EAAc,KAAA;AAAA,MACd,cAAA,EAAgB;AAAA,KAElB;AAAA,IACA;AAAA,GACF;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-2E2ESMS2.js","sourcesContent":["/* Every value is a token (--stack-gap-*). Gap, alignment and justification are data attributes. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stack-gap-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    &[data-gap=\"1\"] { gap: var(--stack-gap-1); }\n    &[data-gap=\"2\"] { gap: var(--stack-gap-2); }\n    &[data-gap=\"3\"] { gap: var(--stack-gap-3); }\n    &[data-gap=\"4\"] { gap: var(--stack-gap-4); }\n    &[data-gap=\"5\"] { gap: var(--stack-gap-5); }\n    &[data-gap=\"6\"] { gap: var(--stack-gap-6); }\n    &[data-gap=\"7\"] { gap: var(--stack-gap-7); }\n    &[data-gap=\"8\"] { gap: var(--stack-gap-8); }\n    &[data-align=\"start\"] { align-items: flex-start; }\n    &[data-align=\"center\"] { align-items: center; }\n    &[data-align=\"end\"] { align-items: flex-end; }\n    &[data-align=\"stretch\"] { align-items: stretch; }\n    &[data-justify=\"start\"] { justify-content: flex-start; }\n    &[data-justify=\"center\"] { justify-content: center; }\n    &[data-justify=\"end\"] { justify-content: flex-end; }\n    &[data-justify=\"between\"] { justify-content: space-between; }\n  }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Stack.module.css';\n\nexport type StackGap = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\nexport type StackAlign = 'start' | 'center' | 'end' | 'stretch';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between';\nexport type StackElement = 'div' | 'section' | 'nav' | 'ul' | 'ol' | 'li';\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n  /** @default 'div' */\n  as?: StackElement;\n  /** Step on the spacing scale (`--space-1` … `--space-8`). @default 3 */\n  gap?: StackGap;\n  align?: StackAlign;\n  justify?: StackJustify;\n\n  ref?: Ref<HTMLElement>;\n  children: ReactNode;\n}\n\n/**\n * A flex column whose gap is a step on the spacing scale, so consumers\n * compose layout from tokens instead of writing padding and margins.\n * Rendered as `ul`/`ol` it keeps `role=\"list\"` explicitly, because Safari\n * stops announcing a list once `list-style` is removed.\n *\n * @status stable\n * @category Layout\n * @accessibility Layout only: no role unless rendered as `ul`/`ol`, where `role=\"list\"` is kept explicitly because Safari drops list semantics without markers.\n * @do Use `as=\"ul\"` for a list of like items so the count is announced.\n * @dont Use it to space unrelated regions; it is one flex column.\n */\nexport function Stack({ as = 'div', gap = 3, align, justify, className, ref, children, ...rest }: StackProps) {\n  return createElement(\n    as,\n    {\n      ...rest,\n      ref,\n      // Safari drops list semantics when list-style is none; say it explicitly.\n      role: rest.role ?? (as === 'ul' || as === 'ol' ? 'list' : undefined),\n      className: classes(styles.stack, className),\n      'data-gap': gap,\n      'data-align': align,\n      'data-justify': justify,\n\n    },\n    children,\n  );\n}\n\nStack.displayName = 'Stack';\n"]}

package/dist/{chunk-FH54XQ35.js → chunk-2IYYES7V.js}

@@ -121,5 +121,5 @@ Tabs.Tab = TabsTab;
 Tabs.Panel = TabsPanel;
 
 export { Tabs };
-//# sourceMappingURL=chunk-FH54XQ35.js.map
-//# sourceMappingURL=chunk-FH54XQ35.js.map
+//# sourceMappingURL=chunk-2IYYES7V.js.map
+//# sourceMappingURL=chunk-2IYYES7V.js.map

package/dist/chunk-2IYYES7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/Tabs.module.css","../src/tabs/Tabs.tsx"],"names":["root","list","tab","panel"],"mappings":"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","file":"chunk-2IYYES7V.js","sourcesContent":["/* Every value is a token (--tabs-*). The indicator is a logical border on the active tab, so vertical orientation just flips the side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: row;\n    }\n  }\n\n  .list {\n    display: flex;\n    gap: var(--tabs-gap);\n    border-block-end: 1px solid var(--tabs-list-border);\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: column;\n      border-block-end: none;\n      border-inline-end: 1px solid var(--tabs-list-border);\n    }\n  }\n\n  .tab {\n    position: relative;\n    padding-block: var(--tabs-tab-padding-block);\n    padding-inline: var(--tabs-tab-padding-inline);\n    border: none;\n    border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;\n    background-color: transparent;\n    color: var(--tabs-tab-fg);\n    font-size: var(--tabs-tab-font-size);\n    font-weight: var(--tabs-tab-font-weight);\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    transition:\n      color var(--tabs-motion-duration) var(--motion-easing-standard),\n      background-color var(--tabs-motion-duration) var(--motion-easing-standard);\n\n    /* Indicator: a transparent border always present, coloured when active, so nothing shifts. */\n    border-block-end: 2px solid transparent;\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: calc(-1 * var(--tabs-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-state=\"active\"] {\n      color: var(--tabs-tab-fg-active);\n      border-block-end-color: var(--tabs-tab-indicator);\n    }\n\n    &:hover:not(:disabled, [data-state=\"active\"]) {\n      color: var(--tabs-tab-fg-hover);\n      background-color: var(--tabs-tab-bg-hover);\n    }\n  }\n\n  .list[data-orientation=\"vertical\"] .tab {\n    border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);\n    border-block-end: none;\n    border-inline-end: 2px solid transparent;\n    text-align: start;\n\n    &[data-state=\"active\"] {\n      border-inline-end-color: var(--tabs-tab-indicator);\n    }\n  }\n\n  .panel {\n    padding-block: var(--tabs-panel-padding-block);\n    color: var(--tabs-panel-fg);\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: var(--tabs-focus-ring-offset);\n    }\n  }\n\n  .root[data-orientation=\"vertical\"] .panel {\n    padding-block: 0;\n    padding-inline-start: var(--tabs-tab-padding-inline);\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { classes } from '../internal/classes';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Tabs.module.css';\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\nexport type TabsActivation = 'automatic' | 'manual';\n\ninterface TabsContextValue {\n  value: string;\n  setValue: (value: string) => void;\n  orientation: TabsOrientation;\n  activation: TabsActivation;\n  baseId: string;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabs(component: string): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) throw new Error(`${component} must be rendered inside <Tabs>`);\n  return context;\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  /** Controlled selected tab. */\n  value?: string;\n  /** Initially selected tab when uncontrolled. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Layout and arrow-key axis. @default 'horizontal' */\n  orientation?: TabsOrientation;\n  /**\n   * `automatic` selects a tab when it receives focus (arrow keys); `manual`\n   * moves focus only and selects on Enter, Space or click.\n   * @default 'automatic'\n   */\n  activation?: TabsActivation;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * Tabbed sections following the WAI-ARIA Tabs pattern. Compose with\n * `Tabs.List`, `Tabs.Tab` and `Tabs.Panel`; ids and ARIA relationships are\n * wired automatically. One tab stop: arrows move between tabs, Home and End\n * jump to the ends, disabled tabs are skipped. State on the DOM:\n * `data-orientation`, `data-state=\"active|inactive\"`.\n *\n * @status stable\n * @category Navigation\n * @accessibility The WAI-ARIA Tabs pattern: `tablist` with `aria-orientation`, `tab`s carrying `aria-selected` and `aria-controls`, `tabpanel`s labelled by their tab. One tab stop: arrows move (and select with automatic activation), Home/End jump, disabled tabs are skipped.\n * @do Use `activation=\"manual\"` when switching a tab is expensive.\n * Name the `Tabs.List` with `aria-label`.\n * @dont Use tabs for sequential steps; use a stepper pattern.\n * Put a link inside a tab.\n */\nexport function Tabs({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'horizontal',\n  activation = 'automatic',\n  className,\n  ref,\n  children,\n  ...rest\n}: TabsProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? '');\n  const controlled = value !== undefined;\n  const current = controlled ? value : uncontrolled;\n  const setValue = useCallback(\n    (next: string) => {\n      if (!controlled) setUncontrolled(next);\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n  const baseId = useId();\n\n  return (\n    <TabsContext.Provider value={{ value: current, setValue, orientation, activation, baseId }}>\n      <div {...rest} ref={ref} className={classes(styles.root, className)} data-orientation={orientation}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\ninterface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction TabsList({ className, ref, onKeyDown, children, ...rest }: TabsListProps) {\n  const { orientation, activation, setValue } = useTabs('Tabs.List');\n  const rove = useRovingFocus({\n    orientation,\n    selector: '[role=\"tab\"]',\n    onFocusItem: (item) => {\n      if (activation === 'automatic' && item.dataset.value !== undefined) setValue(item.dataset.value);\n    },\n  });\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={classes(styles.list, className)}\n      data-orientation={orientation}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (!event.defaultPrevented) rove(event);\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface TabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  /** Identifies the tab; the panel with the same value belongs to it. */\n  value: string;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction TabsTab({ value, disabled, className, onClick, ref, children, ...rest }: TabsTabProps) {\n  const tabs = useTabs('Tabs.Tab');\n  const selected = tabs.value === value;\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={`${tabs.baseId}-tab-${value}`}\n      aria-selected={selected}\n      aria-controls={`${tabs.baseId}-panel-${value}`}\n      tabIndex={selected ? 0 : -1}\n      disabled={disabled}\n      className={classes(styles.tab, className)}\n      data-value={value}\n      data-state={selected ? 'active' : 'inactive'}\n      data-disabled={disabled ? '' : undefined}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) tabs.setValue(value);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\ninterface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  ref?: Ref<HTMLDivElement>;\n  children?: ReactNode;\n}\n\nfunction TabsPanel({ value, className, ref, children, ...rest }: TabsPanelProps) {\n  const tabs = useTabs('Tabs.Panel');\n  const selected = tabs.value === value;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"tabpanel\"\n      id={`${tabs.baseId}-panel-${value}`}\n      aria-labelledby={`${tabs.baseId}-tab-${value}`}\n      hidden={!selected}\n      tabIndex={0}\n      className={classes(styles.panel, className)}\n      data-state={selected ? 'active' : 'inactive'}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabs.displayName = 'Tabs';\nTabsList.displayName = 'Tabs.List';\nTabsTab.displayName = 'Tabs.Tab';\nTabsPanel.displayName = 'Tabs.Panel';\n\nTabs.List = TabsList;\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\n"]}

package/dist/{chunk-XDVS7HX7.js → chunk-2NVC3C7K.js}

@@ -1,4 +1,4 @@
-import { Field, useField } from './chunk-2PXTVZ7H.js';
+import { Field, useField } from './chunk-SXMORGSG.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { createContext, useId, useState, useCallback, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -96,5 +96,5 @@ RadioGroup.displayName = "RadioGroup";
 Radio.displayName = "Radio";
 
 export { Radio, RadioGroup };
-//# sourceMappingURL=chunk-XDVS7HX7.js.map
-//# sourceMappingURL=chunk-XDVS7HX7.js.map
+//# sourceMappingURL=chunk-2NVC3C7K.js.map
+//# sourceMappingURL=chunk-2NVC3C7K.js.map

package/dist/chunk-2NVC3C7K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/Radio.module.css","../src/radio/Radio.tsx"],"names":["group","items","radio","label","input"],"mappings":"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","file":"chunk-2NVC3C7K.js","sourcesContent":["/* Every value is a token (--radio-*). The input draws itself; the dot is its ::after. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .group {\n    --_size: var(--radio-size-md);\n    --_border: var(--radio-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--radio-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--radio-size-lg); }\n    &[data-invalid] { --_border: var(--radio-border-invalid); }\n  }\n\n  .items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--radio-group-gap);\n\n    &[data-orientation=\"horizontal\"] {\n      flex-flow: row wrap;\n      gap: var(--radio-group-gap) var(--space-4);\n    }\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--radio-gap);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    color: var(--field-label-fg);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--radio-radius);\n    background-color: var(--radio-bg);\n    appearance: none;\n    cursor: inherit;\n    transition: border-color var(--radio-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) / 2);\n      block-size: calc(var(--_size) / 2);\n      border-radius: var(--radio-radius);\n      background-color: var(--radio-dot);\n      scale: 0;\n      transition: scale var(--radio-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      border-color: var(--radio-border-checked);\n\n      &::after {\n        scale: 1;\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--radio-focus-ring-width) solid var(--radio-focus-ring);\n      outline-offset: var(--radio-focus-ring-offset);\n    }\n\n    &:disabled {\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      border-color: var(--radio-border-hover);\n    }\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { Field, useField } from '../field';\nimport { classes } from '../internal/classes';\nimport styles from './Radio.module.css';\n\nexport type RadioSize = 'sm' | 'md' | 'lg';\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\ninterface RadioGroupContextValue {\n  name: string;\n  value: string | undefined;\n  setValue: (value: string) => void;\n  size: RadioSize;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  /** Visible group label. */\n  label: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  /** Form field name shared by the radios. Generated when omitted. */\n  name?: string;\n  /** Controlled selected value. */\n  value?: string;\n  /** Initially selected value when uncontrolled. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** @default 'vertical' */\n  orientation?: RadioGroupOrientation;\n  /** @default 'md' */\n  size?: RadioSize;\n  disabled?: boolean;\n  required?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * A set of native radios under one label. The group is labelled by\n * reference (`aria-labelledby`) and described through Field, so description\n * and error apply to the whole set. Keyboard is the browser's own: arrows\n * move and select within the group. Controlled or uncontrolled by `value`.\n *\n * @status stable\n * @category Forms\n * @accessibility A `radiogroup` labelled by reference through Field and described by its description and error. Native radios: arrows move and select within the group, Tab leaves it.\n * @do Use it for two to five exclusive options that should all be visible.\n * @dont Preselect a consequential choice; leave the group empty and mark it required.\n */\nexport function RadioGroup({\n  label,\n  description,\n  error,\n  name,\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  size = 'md',\n  disabled = false,\n  required = false,\n  id,\n  className,\n  ref,\n  children,\n  ...rest\n}: RadioGroupProps) {\n  const autoName = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : uncontrolled;\n  const setValue = useCallback(\n    (next: string) => {\n      if (!controlled) setUncontrolled(next);\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n  const invalid = error !== undefined && error !== null && error !== false && error !== '';\n\n  return (\n    <RadioGroupContext.Provider value={{ name: name ?? autoName, value: current, setValue, size }}>\n      <Field id={id} invalid={invalid} disabled={disabled} required={required} className={classes(styles.group, className)} data-size={size}>\n        <Field.Label as=\"span\">{label}</Field.Label>\n        <RadioGroupItems {...rest} ref={ref} orientation={orientation}>\n          {children}\n        </RadioGroupItems>\n        {description && <Field.Description>{description}</Field.Description>}\n        {invalid && <Field.Error>{error}</Field.Error>}\n      </Field>\n    </RadioGroupContext.Provider>\n  );\n}\n\ninterface RadioGroupItemsProps extends HTMLAttributes<HTMLDivElement> {\n  orientation: RadioGroupOrientation;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction RadioGroupItems({ orientation, className, ref, children, ...rest }: RadioGroupItemsProps) {\n  const field = useField();\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      id={field.id}\n      role=\"radiogroup\"\n      aria-labelledby={field.labelId}\n      aria-describedby={field.describedBy}\n      aria-invalid={field.invalid || undefined}\n      aria-required={field.required || undefined}\n      className={classes(styles.items, className)}\n      data-orientation={orientation}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface RadioProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'onChange'> {\n  /** The value this radio contributes to the group. */\n  value: string;\n  /** Visible label beside the radio. */\n  label: ReactNode;\n  /** The `<input>` element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Applied to the wrapping label, not the input. */\n  className?: string;\n}\n\n/** One option of a RadioGroup. Must be rendered inside `RadioGroup`. */\n/**\n * One option of a RadioGroup: a native radio with its own visible label.\n *\n * @status stable\n * @category Forms\n * @accessibility A native `input type=\"radio\"` labelled by its visible text; the group semantics, description and error come from RadioGroup.\n * @do Render it only inside RadioGroup.\n * @dont Disable a single radio without saying why in its label or the group description.\n */\nexport function Radio({ value, label, disabled, className, ref, ...rest }: RadioProps) {\n  const group = useContext(RadioGroupContext);\n  const field = useField();\n  if (!group) throw new Error('Radio must be rendered inside <RadioGroup>');\n  const checked = group.value === value;\n  return (\n    <label className={classes(styles.radio, className)} data-checked={checked ? '' : undefined} data-disabled={disabled || field.disabled ? '' : undefined}>\n      <input\n        {...rest}\n        ref={ref}\n        type=\"radio\"\n        className={styles.input}\n        name={group.name}\n        value={value}\n        checked={checked}\n        onChange={() => group.setValue(value)}\n        disabled={disabled || field.disabled}\n        required={field.required}\n      />\n      <span className={styles.label}>{label}</span>\n    </label>\n  );\n}\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"]}

package/dist/{chunk-IDNGNQNV.js → chunk-55QUKGK2.js}

@@ -37,5 +37,5 @@ Dialog.Body = ModalBody;
 Dialog.Footer = ModalFooter;
 
 export { Dialog, DialogSystem };
-//# sourceMappingURL=chunk-IDNGNQNV.js.map
-//# sourceMappingURL=chunk-IDNGNQNV.js.map
+//# sourceMappingURL=chunk-55QUKGK2.js.map
+//# sourceMappingURL=chunk-55QUKGK2.js.map

package/dist/chunk-55QUKGK2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog/Dialog.module.css","../src/dialog/Dialog.tsx"],"names":["root","VendorSystem","VendorModal"],"mappings":";;;;;;;AAAA,IAAA,cAAA,GAAA;AAAA,EASG,IAAA,EAAAA;AAAA,CAAA;AC2BI,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,GAAG,MAAK,EAAsB;AAIrE,EAAA,MAAM,CAAC,SAAS,CAAA,GAAI,QAAA,CAAqC,MAAM;AAC7D,IAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,MAAA;AAC5C,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,IAAA,OAAA,CAAQ,SAAA,GAAY,eAAO,IAAQ;AACnC,IAAA,OAAA,CAAQ,QAAQ,WAAA,GAAc,EAAA;AAC9B,IAAA,OAAO,OAAA;AAAA,EACT,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,QAAA,CAAS,IAAA,CAAK,OAAO,SAAS,CAAA;AAC9B,IAAA,OAAO,MAAM,UAAU,MAAA,EAAO;AAAA,EAChC,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAACC,WAAA,EAAA,EAAc,GAAG,IAAA,EAAM,WACrB,QAAA,EACH,CAAA;AAEJ;AAoBO,SAAS,OAAO,KAAA,EAAoB;AACzC,EAAA,uBAAO,GAAA,CAACC,KAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACjC;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AACrB,MAAA,CAAO,OAAA,GAAU,YAAA;AACjB,MAAA,CAAO,OAAA,GAAU,YAAA;AACjB,MAAA,CAAO,MAAA,GAAS,WAAA;AAChB,MAAA,CAAO,KAAA,GAAQ,UAAA;AACf,MAAA,CAAO,WAAA,GAAc,gBAAA;AACrB,MAAA,CAAO,KAAA,GAAQ,UAAA;AACf,MAAA,CAAO,IAAA,GAAO,SAAA;AACd,MAAA,CAAO,MAAA,GAAS,WAAA","file":"chunk-55QUKGK2.js","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","import { useEffect, useState, type ComponentProps, type ReactNode } from 'react';\nimport {\n  Modal as VendorModal,\n  ModalBody,\n  ModalClose,\n  ModalContent,\n  ModalDescription,\n  ModalFooter,\n  ModalHeader,\n  ModalSystem as VendorSystem,\n  ModalTitle,\n  ModalTrigger,\n  type ModalProps,\n} from '@pearpages/modals';\nimport styles from './Dialog.module.css';\n\nexport type DialogProps = ModalProps;\n\nexport interface DialogSystemProps extends Omit<ComponentProps<typeof VendorSystem>, 'container'> {\n  children: ReactNode;\n}\n\n/**\n * Mount once near the app root. Owns the portal element every dialog renders\n * into and sets the vendor's `--modal-*` variables on it from pulp's\n * `--dialog-*` tokens, so backdrop, surface, type and motion follow the\n * current brand and scheme. Because the variables sit on an ancestor of the\n * dialog, they win over the vendor stylesheet regardless of cascade layers\n * or import order.\n *\n * @status stable\n * @category Overlays\n * @accessibility Renders nothing visible itself; the portal element it owns is where every dialog mounts, so the vendor's focus trap and `inert` handling apply to the rest of the page.\n * @do Mount it once, near the app root, inside any providers dialogs need.\n * @dont Nest it; one system serves every dialog.\n */\nexport function DialogSystem({ children, ...rest }: DialogSystemProps) {\n  // Created detached during the first render (no DOM mutation yet, so it is\n  // safe to do here and needs no state update); attached and removed in the\n  // effect. Undefined on the server, where the vendor falls back to its default.\n  const [container] = useState<HTMLDivElement | undefined>(() => {\n    if (typeof document === 'undefined') return undefined;\n    const element = document.createElement('div');\n    element.className = styles.root ?? '';\n    element.dataset.pulpDialogs = '';\n    return element;\n  });\n\n  useEffect(() => {\n    if (!container) return;\n    document.body.append(container);\n    return () => container.remove();\n  }, [container]);\n\n  return (\n    <VendorSystem {...rest} container={container}>\n      {children}\n    </VendorSystem>\n  );\n}\n\n/**\n * An accessible modal dialog: focus trap, inert page, Escape and backdrop\n * dismissal, stacking. Built on `@pearpages/modals`; pulp adds the theming and\n * the compound API (`Dialog.Trigger`, `Dialog.Content`, `Dialog.Header`,\n * `Dialog.Title`, `Dialog.Description`, `Dialog.Close`, `Dialog.Body`,\n * `Dialog.Footer`). The trigger is a sibling of the dialog, not a child: a\n * dialog's children render only while it is open. Use pulp's `Button` for\n * actions. Requires `DialogSystem` above it and the vendor stylesheet\n * `@pearpages/modals/styles.css`.\n *\n * @status stable\n * @category Overlays\n * @accessibility `role=\"dialog\"` with `aria-modal`, named by `Dialog.Title` and described by `Dialog.Description`; focus moves in on open and back to the trigger on close; the page behind is inert; Escape and the backdrop close it. Provided by `@pearpages/modals`.\n * @do Always render a `Dialog.Title`.\n * Put the destructive action last in `Dialog.Footer` and make the safe one the default focus.\n * @dont Open a dialog from inside a Menu or Popover that stays open.\n * Use it for content that does not need the page blocked; use Popover.\n */\nexport function Dialog(props: DialogProps) {\n  return <VendorModal {...props} />;\n}\n\nDialog.displayName = 'Dialog';\nDialog.Trigger = ModalTrigger;\nDialog.Content = ModalContent;\nDialog.Header = ModalHeader;\nDialog.Title = ModalTitle;\nDialog.Description = ModalDescription;\nDialog.Close = ModalClose;\nDialog.Body = ModalBody;\nDialog.Footer = ModalFooter;\n"]}

package/dist/{chunk-DVM37MEK.js → chunk-56RSH7GQ.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-VSDEQHG4.js';
-import { Icon } from './chunk-ASNTNTJW.js';
+import { Button } from './chunk-DE67ECD7.js';
+import { Icon } from './chunk-O5LII5XP.js';
 import { classes } from './chunk-MI4QUKQS.js';
 import { isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -34,5 +34,5 @@ function IconButton({
 IconButton.displayName = "IconButton";
 
 export { IconButton };
-//# sourceMappingURL=chunk-DVM37MEK.js.map
-//# sourceMappingURL=chunk-DVM37MEK.js.map
+//# sourceMappingURL=chunk-56RSH7GQ.js.map
+//# sourceMappingURL=chunk-56RSH7GQ.js.map

package/dist/chunk-56RSH7GQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-button/IconButton.module.css","../src/icon-button/IconButton.tsx"],"names":["iconButton"],"mappings":";;;;;;;AAAA,IAAA,kBAAA,GAAA;AAAA,EAKG,UAAA,EAAAA;AAAA,CAAA;ACsBI,SAAS,UAAA,CAAsD;AAAA,EACpE,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,mBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA;AAAA,MACA,YAAA,EAAY,KAAA;AAAA,MACZ,OAAO,KAAA,IAAS,KAAA;AAAA,MAChB,gBAAA,EAAe,EAAA;AAAA,MACf,SAAA,EAAW,OAAA,CAAQ,kBAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA,OAAA,IAAW,eAAe,QAAQ,CAAA,GAAI,aAAa,QAAA,EAAU,MAAA,EAAW,KAAK,CAAA,GAAI;AAAA;AAAA,GACpF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-56RSH7GQ.js","sourcesContent":["/* 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","import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps<E extends HTMLElement = HTMLButtonElement>\n  extends Omit<ButtonProps<E>, 'children' | 'iconStart' | 'iconEnd'> {\n  /** The accessible name. Required: an icon alone is not a name. Also used as the tooltip unless `title` is given. */\n  label: string;\n  /** The glyph, for instance from `@pearpages/pulp-icons`. */\n  icon: ReactNode;\n  /** With `asChild`: the element to render (a link, for instance). Its own children are replaced by the icon. */\n  children?: ReactElement;\n}\n\n/**\n * A square Button that shows only an icon and therefore *requires* a name.\n * Everything else (variants, sizes, loading, asChild) is Button's; the\n * `--icon-button-size-*` tokens make it square.\n *\n * @status stable\n * @category Actions\n * @accessibility A Button with `aria-label` from the required `label`; `title` shows it as a tooltip. Everything else is Button's.\n * @do Write the label as the action (\"Close\", \"Add item\").\n * @dont Use the icon's name as the label.\n */\nexport function IconButton<E extends HTMLElement = HTMLButtonElement>({\n  label,\n  icon,\n  title,\n  className,\n  asChild = false,\n  children,\n  ...rest\n}: IconButtonProps<E>) {\n  const glyph = <Icon size=\"inherit\">{icon}</Icon>;\n  return (\n    <Button\n      {...rest}\n      asChild={asChild}\n      aria-label={label}\n      title={title ?? label}\n      data-icon-only=\"\"\n      className={classes(styles.iconButton, className)}\n    >\n      {asChild && isValidElement(children) ? cloneElement(children, undefined, glyph) : glyph}\n    </Button>\n  );\n}\n\nIconButton.displayName = 'IconButton';\n"]}

package/dist/chunk-5TYCIBLW.js

@@ -0,0 +1,27 @@
+import { Stack } from './chunk-2E2ESMS2.js';
+import { Heading } from './chunk-F3S5BHX2.js';
+import { Text } from './chunk-LKWZZIRZ.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/empty-state/EmptyState.module.css
+var EmptyState_default = {
+  root: "EmptyState_root",
+  text: "EmptyState_text",
+  icon: "EmptyState_icon"
+};
+function EmptyState({ title, description, icon, action, tone = "neutral", headingLevel = 3, className, ref, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes(EmptyState_default.root, className), "data-tone": tone, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: EmptyState_default.icon, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 1, align: "center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: headingLevel, size: "md", className: EmptyState_default.text, children: title }),
+      description != null && /* @__PURE__ */ jsx(Text, { tone: "muted", align: "center", className: EmptyState_default.text, children: description })
+    ] }),
+    action
+  ] }) });
+}
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };
+//# sourceMappingURL=chunk-5TYCIBLW.js.map
+//# sourceMappingURL=chunk-5TYCIBLW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/empty-state/EmptyState.module.css","../src/empty-state/EmptyState.tsx"],"names":["root","text","icon"],"mappings":";;;;;;;AAAA,IAAA,kBAAA,GAAA;AAAA,EAKG,IAAA,EAAAA,iBAAAA;AAAA,EAKA,IAAA,EAAAC,iBAAAA;AAAA,EAKA,IAAA,EAAAC;AAAA,CAAA;ACwBI,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,WAAA,EAAa,MAAM,MAAA,EAAQ,IAAA,GAAO,SAAA,EAAW,YAAA,GAAe,CAAA,EAAG,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAoB;AAC7I,EAAA,2BACG,KAAA,EAAA,EAAK,GAAG,MAAM,GAAA,EAAU,SAAA,EAAW,QAAQ,kBAAA,CAAO,IAAA,EAAM,SAAS,CAAA,EAAG,aAAW,IAAA,EAC9E,QAAA,kBAAA,IAAA,CAAC,SAAM,GAAA,EAAK,CAAA,EAAG,OAAM,QAAA,EAClB,QAAA,EAAA;AAAA,IAAA,IAAA,IAAQ,IAAA,wBACN,MAAA,EAAA,EAAK,SAAA,EAAW,mBAAO,IAAA,EAAM,aAAA,EAAY,QACvC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,oBAEF,IAAA,CAAC,KAAA,EAAA,EAAM,GAAA,EAAK,CAAA,EAAG,OAAM,QAAA,EACnB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAO,YAAA,EAAc,IAAA,EAAK,MAAK,SAAA,EAAW,kBAAA,CAAO,MACvD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MACC,WAAA,IAAe,IAAA,oBACd,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,KAAA,EAAM,QAAA,EAAS,SAAA,EAAW,kBAAA,CAAO,IAAA,EACjD,QAAA,EAAA,WAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-5TYCIBLW.js","sourcesContent":["/* Every value is a token: --empty-state-* in packages/tokens/tokens/component/empty-state.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    box-sizing: border-box;\n    padding: var(--empty-state-padding);\n  }\n\n  .text {\n    text-align: center;\n    text-wrap: balance;\n  }\n\n  .icon {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--empty-state-icon-size);\n    block-size: var(--empty-state-icon-size);\n    border-radius: var(--empty-state-icon-radius);\n    background: var(--empty-state-icon-neutral-bg);\n    color: var(--empty-state-icon-neutral-fg);\n    font-size: var(--empty-state-icon-glyph-size);\n\n    .root[data-tone='error'] & {\n      background: var(--empty-state-icon-error-bg);\n      color: var(--empty-state-icon-error-fg);\n    }\n  }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Heading, type HeadingLevel } from '../heading';\nimport { classes } from '../internal/classes';\nimport { Stack } from '../stack';\nimport { Text } from '../text';\nimport styles from './EmptyState.module.css';\n\nexport type EmptyStateTone = 'neutral' | 'error';\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** What is missing, or what went wrong, in a few words. Rendered as a heading. */\n  title: ReactNode;\n  /** One or two sentences: why it is empty and what to do about it. */\n  description?: ReactNode;\n  /** A glyph, shown in a tinted disc. Decorative: the title carries the meaning. */\n  icon?: ReactNode;\n  /** One control: a Button, or a Link. For an error, the retry. */\n  action?: ReactNode;\n  /** `error` tints the icon with the error colours. It does not announce anything: see the accessibility notes. @default 'neutral' */\n  tone?: EmptyStateTone;\n  /** The heading's outline level, from where the empty state sits in the page. @default 3 */\n  headingLevel?: HeadingLevel;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * What a list, a search or a page shows instead of its content: nothing yet,\n * nothing found, or it failed to load. An icon, a title, a sentence and one\n * action, centred. Composes Heading, Text and Stack, so the type follows the\n * brand without tokens of its own.\n *\n * @status experimental\n * @category Feedback\n * @accessibility The title is a real heading at `headingLevel`, so the empty region shows up in the outline; pick the level from the page, as with Heading. The icon is `aria-hidden`. Nothing is announced on its own: an empty state that is there when the page loads is just content. When it **replaces** content after the user did something (a search with no results, a failed reload), pass `role=\"status\"` (or `role=\"alert\"` for an error that needs attention) so it is read out; do not put `role=\"alert\"` on one that renders with the page. The action is whatever you pass, with its own semantics.\n * @do Say what to do next in the description, and make the action that next step.\n * @do Use `tone=\"error\"` with a retry action when loading failed.\n * @dont Use it for a validation error or a transient message; that is a Field error, an Alert or a Toast.\n * @dont Offer several actions; an empty state has one way forward.\n */\nexport function EmptyState({ title, description, icon, action, tone = 'neutral', headingLevel = 3, className, ref, ...rest }: EmptyStateProps) {\n  return (\n    <div {...rest} ref={ref} className={classes(styles.root, className)} data-tone={tone}>\n      <Stack gap={4} align=\"center\">\n        {icon != null && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <Stack gap={1} align=\"center\">\n          <Heading level={headingLevel} size=\"md\" className={styles.text}>\n            {title}\n          </Heading>\n          {description != null && (\n            <Text tone=\"muted\" align=\"center\" className={styles.text}>\n              {description}\n            </Text>\n          )}\n        </Stack>\n        {action}\n      </Stack>\n    </div>\n  );\n}\n\nEmptyState.displayName = 'EmptyState';\n"]}

package/dist/chunk-7O6FTCZL.js

@@ -0,0 +1,101 @@
+import { Dialog } from './chunk-55QUKGK2.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { useRef } from 'react';
+import { useModalId, useModalStack } from '@pearpages/modals';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/sheet/drag.ts
+var DISMISS_DISTANCE_RATIO = 0.25;
+var DISMISS_DISTANCE_FALLBACK_PX = 120;
+var DISMISS_VELOCITY_PX_PER_S = 500;
+function shouldDismiss({
+  offsetY,
+  velocityY,
+  panelHeight,
+  distanceRatio = DISMISS_DISTANCE_RATIO,
+  distanceFallbackPx = DISMISS_DISTANCE_FALLBACK_PX,
+  velocityThreshold = DISMISS_VELOCITY_PX_PER_S
+}) {
+  if (offsetY <= 0) return false;
+  const distanceThreshold = panelHeight > 0 ? panelHeight * distanceRatio : distanceFallbackPx;
+  return offsetY > distanceThreshold || velocityY > velocityThreshold;
+}
+function releaseVelocity(samples, windowMs = 100) {
+  const last = samples[samples.length - 1];
+  if (!last) return 0;
+  const first = samples.find((sample) => last.time - sample.time <= windowMs) ?? last;
+  const elapsed = last.time - first.time;
+  return elapsed > 0 ? (last.y - first.y) / elapsed * 1e3 : 0;
+}
+
+// src/sheet/Sheet.module.css
+var Sheet_default = {
+  content: "Sheet_content",
+  handle: "Sheet_handle"
+};
+function Sheet(props) {
+  return /* @__PURE__ */ jsx(Dialog, { ...props });
+}
+function SheetContent({ placement = "end", dragToDismiss = true, className, children, ...rest }) {
+  const draggable = placement === "bottom" && dragToDismiss;
+  return /* @__PURE__ */ jsxs(Dialog.Content, { ...rest, placement, className: classes(Sheet_default.content, className), "data-draggable": draggable ? "" : void 0, children: [
+    draggable && /* @__PURE__ */ jsx(SheetHandle, {}),
+    children
+  ] });
+}
+function SheetHandle() {
+  const id = useModalId();
+  const { close } = useModalStack();
+  const drag = useRef(null);
+  const onPointerDown = (event) => {
+    const panel = event.currentTarget.closest('[role="dialog"]');
+    if (!panel || event.button !== 0) return;
+    if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { startY: event.clientY, panel, samples: [{ time: performance.now(), y: event.clientY }] };
+    panel.dataset.dragging = "";
+  };
+  const onPointerMove = (event) => {
+    if (!drag.current) return;
+    drag.current.samples.push({ time: performance.now(), y: event.clientY });
+    drag.current.panel.style.setProperty("--_drag", `${Math.max(0, event.clientY - drag.current.startY)}px`);
+  };
+  const end = (event, cancelled) => {
+    const current = drag.current;
+    if (!current) return;
+    drag.current = null;
+    current.samples.push({ time: performance.now(), y: event.clientY });
+    delete current.panel.dataset.dragging;
+    const dismiss = !cancelled && shouldDismiss({ offsetY: event.clientY - current.startY, velocityY: releaseVelocity(current.samples), panelHeight: current.panel.offsetHeight });
+    if (dismiss) {
+      close(id);
+    } else {
+      current.panel.style.removeProperty("--_drag");
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: Sheet_default.handle,
+      "aria-hidden": "true",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: (event) => end(event, false),
+      onPointerCancel: (event) => end(event, true)
+    }
+  );
+}
+Sheet.displayName = "Sheet";
+SheetContent.displayName = "Sheet.Content";
+Sheet.Trigger = Dialog.Trigger;
+Sheet.Content = SheetContent;
+Sheet.Header = Dialog.Header;
+Sheet.Title = Dialog.Title;
+Sheet.Description = Dialog.Description;
+Sheet.Close = Dialog.Close;
+Sheet.Body = Dialog.Body;
+Sheet.Footer = Dialog.Footer;
+
+export { Sheet };
+//# sourceMappingURL=chunk-7O6FTCZL.js.map
+//# sourceMappingURL=chunk-7O6FTCZL.js.map