@zyncat/ui 0.11.0 → 0.13.0

package/dist/checkbox.css

@@ -1,177 +1,182 @@
-/* Checkbox - on/off + indeterminate; native input hidden, box painted from :has()-set flags read via calc(). */
+@layer zyncat.tokens, zyncat.components;
 
-.cbx {
-  --cbx-fill: linear-gradient(180deg, var(--accent), var(--accent-hover));
-  --cbx-on: var(--accent);
-  --cbx-off: var(--border-strong);
-  --cbx-ring: var(--ring-accent);
-  --cbx-size: var(--control-box);
-  --cbx-radius: var(--radius-sm);
-  --tick-len: 14px; /* needs a unit so the calc() dashoffset is a valid <length>; ~ the polyline path length */
-  --fill: 0;
-  --tick: 0;
-  --dash: 0;
-  --press: 1;
+@layer zyncat.components {
+  /* Checkbox - on/off + indeterminate; native input hidden, box painted from :has()-set flags read via calc(). */
 
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--space-2);
-  padding: var(--space-2);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  transition: background-color var(--duration-base) var(--ease-standard);
+  .cbx {
+    --cbx-fill: linear-gradient(180deg, var(--accent), var(--accent-hover));
+    --cbx-on: var(--accent);
+    --cbx-off: var(--border-strong);
+    --cbx-ring: var(--ring-accent);
+    --cbx-size: var(--control-box);
+    --cbx-radius: var(--radius-sm);
+    --cbx-tick-len: 14px; /* needs a unit so the calc() dashoffset is a valid <length>; ~ the polyline path length */
+    --cbx-checked: 0;
+    --cbx-tick: 0;
+    --cbx-dash: 0;
+    --cbx-press: 1;
 
-  /* later rule wins, so indeterminate beats checked */
-  &:has(:checked) {
-    --fill: 1;
-    --tick: 1;
-  }
-  &:has(:indeterminate) {
-    --fill: 1;
-    --tick: 0;
-    --dash: 1;
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--duration-base) var(--ease-standard);
+
+    /* later rule wins, so indeterminate beats checked */
+    &:has(:checked) {
+      --cbx-checked: 1;
+      --cbx-tick: 1;
+    }
+    &:has(:indeterminate) {
+      --cbx-checked: 1;
+      --cbx-tick: 0;
+      --cbx-dash: 1;
+    }
+
+    &:not(.cbx--disabled):hover {
+      background: var(--neutral-wash);
+    }
+    /* accent the empty box on hover */
+    &:not(.cbx--disabled):hover:not(:has(:checked, :indeterminate)) {
+      --cbx-off: var(--cbx-on);
+    }
+    &:not(.cbx--disabled):active {
+      --cbx-press: 0.88;
+    }
+    &:has(:focus-visible) .cbx__box {
+      box-shadow: var(--cbx-ring);
+    }
   }
 
-  &:not(.cbx--disabled):hover {
-    background: var(--neutral-wash);
+  .cbx__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    overflow: hidden;
   }
-  /* accent the empty box on hover */
-  &:not(.cbx--disabled):hover:not(:has(:checked, :indeterminate)) {
-    --cbx-off: var(--cbx-on);
+
+  .cbx__box {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: var(--cbx-size);
+    height: var(--cbx-size);
+    margin-top: calc((var(--leading-body) - var(--cbx-size)) / 2);
+    border: var(--border-hairline) solid
+      color-mix(in oklab, var(--cbx-on) calc(var(--cbx-checked) * 100%), var(--cbx-off));
+    border-radius: var(--cbx-radius);
+    background: var(--bg-surface);
+    transform: scale(var(--cbx-press));
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard),
+      transform var(--duration-base) var(--ease-spring);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+
+      /* inner corner = outer radius - border, so the fill reaches the corners (no --bg-inset showing) */
+      border-radius: calc(var(--cbx-radius) - var(--border-hairline));
+      background: var(--cbx-fill);
+      opacity: var(--cbx-checked);
+      transform: scale(calc(0.4 + 0.6 * var(--cbx-checked)));
+      transition:
+        transform var(--duration-base) var(--ease-spring),
+        opacity var(--duration-fast) var(--ease-standard);
+    }
   }
-  &:not(.cbx--disabled):active {
-    --press: 0.88;
+
+  /* stagger lives in the delay: draw-on waits a beat (calc - --cbx-tick), retract fires immediately */
+  .cbx__mark {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: var(--text-on-accent);
+    pointer-events: none;
   }
-  &:has(:focus-visible) .cbx__box {
-    box-shadow: var(--cbx-ring);
+  .cbx__tick {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: var(--cbx-tick-len);
+    stroke-dashoffset: calc(var(--cbx-tick-len) * (1 - var(--cbx-tick)));
+    transition: stroke-dashoffset var(--duration-base) var(--ease-entrance) calc(var(--cbx-tick) * var(--duration-fast));
   }
-}
-
-.cbx__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  overflow: hidden;
-}
 
-.cbx__box {
-  position: relative;
-  flex: none;
-  display: grid;
-  place-items: center;
-  width: var(--cbx-size);
-  height: var(--cbx-size);
-  margin-top: calc((var(--leading-body) - var(--cbx-size)) / 2);
-  border: var(--border-hairline) solid color-mix(in oklab, var(--cbx-on) calc(var(--fill) * 100%), var(--cbx-off));
-  border-radius: var(--cbx-radius);
-  background: var(--bg-inset);
-  transform: scale(var(--press));
-  transition:
-    border-color var(--duration-fast) var(--ease-standard),
-    background-color var(--duration-fast) var(--ease-standard),
-    box-shadow var(--duration-fast) var(--ease-standard),
-    transform var(--duration-base) var(--ease-spring);
-
-  &::before {
-    content: '';
+  .cbx__dash {
     position: absolute;
-    inset: 0;
-
-    /* inner corner = outer radius - border, so the fill reaches the corners (no --bg-inset showing) */
-    border-radius: calc(var(--cbx-radius) - var(--border-hairline));
-    background: var(--cbx-fill);
-    opacity: var(--fill);
-    transform: scale(calc(0.4 + 0.6 * var(--fill)));
+    width: 56%;
+    height: 2px;
+    border-radius: var(--border-hairline);
+    background: var(--text-on-accent);
+    pointer-events: none;
+    opacity: var(--cbx-dash);
+    transform: scaleX(var(--cbx-dash));
     transition:
       transform var(--duration-base) var(--ease-spring),
       opacity var(--duration-fast) var(--ease-standard);
   }
-}
 
-/* stagger lives in the delay: draw-on waits a beat (calc - --tick), retract fires immediately */
-.cbx__mark {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
-  color: var(--text-on-accent);
-  pointer-events: none;
-}
-.cbx__tick {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: var(--tick-len);
-  stroke-dashoffset: calc(var(--tick-len) * (1 - var(--tick)));
-  transition: stroke-dashoffset var(--duration-base) var(--ease-entrance) calc(var(--tick) * var(--duration-fast));
-}
-
-.cbx__dash {
-  position: absolute;
-  width: 56%;
-  height: 2px;
-  border-radius: var(--border-hairline);
-  background: var(--text-on-accent);
-  pointer-events: none;
-  opacity: var(--dash);
-  transform: scaleX(var(--dash));
-  transition:
-    transform var(--duration-base) var(--ease-spring),
-    opacity var(--duration-fast) var(--ease-standard);
-}
-
-.cbx__text {
-  display: grid;
-  gap: var(--space-1);
-}
-.cbx__label {
-  font: var(--type-label);
-  color: var(--text-strong);
-}
-.cbx__desc {
-  font: var(--type-caption);
-  color: var(--text-muted);
-}
-
-.cbx--sm {
-  --cbx-size: var(--space-4);
-  & .cbx__label {
-    font: var(--type-caption);
-    font-weight: var(--weight-medium);
+  .cbx__text {
+    display: grid;
+    gap: var(--space-1);
+  }
+  .cbx__label {
+    font: var(--type-label);
     color: var(--text-strong);
   }
-  & .cbx__box {
-    margin-top: calc((var(--leading-caption) - var(--cbx-size)) / 2);
+  .cbx__desc {
+    font: var(--type-caption);
+    color: var(--text-muted);
   }
-}
 
-.cbx--error {
-  --cbx-fill: linear-gradient(180deg, var(--danger), var(--danger));
-  --cbx-on: var(--danger);
-  --cbx-off: var(--danger);
-  --cbx-ring: var(--ring-danger);
-}
+  .cbx--sm {
+    --cbx-size: var(--space-4);
+    & .cbx__label {
+      font: var(--type-caption);
+      font-weight: var(--weight-medium);
+      color: var(--text-strong);
+    }
+    & .cbx__box {
+      margin-top: calc((var(--leading-caption) - var(--cbx-size)) / 2);
+    }
+  }
 
-/* disabled leaves the state flags untouched, so the mark still matches checked state */
-.cbx--disabled {
-  cursor: not-allowed;
-  --cbx-fill: var(--border-strong);
-  --cbx-on: var(--border-default);
-  --cbx-off: var(--border-subtle);
-  & .cbx__box {
-    background: var(--bg-muted);
+  .cbx--error {
+    --cbx-fill: linear-gradient(180deg, var(--danger), var(--danger));
+    --cbx-on: var(--danger);
+    --cbx-off: var(--danger);
+    --cbx-ring: var(--ring-danger);
   }
-  & .cbx__label,
-  & .cbx__desc {
-    color: var(--text-disabled);
+
+  /* disabled leaves the state flags untouched, so the mark still matches checked state */
+  .cbx--disabled {
+    cursor: not-allowed;
+    --cbx-fill: var(--border-strong);
+    --cbx-on: var(--border-default);
+    --cbx-off: var(--border-subtle);
+    & .cbx__box {
+      background: var(--bg-muted);
+    }
+    & .cbx__label,
+    & .cbx__desc {
+      color: var(--text-disabled);
+    }
   }
 }

package/dist/checkbox.js

@@ -1,5 +1,5 @@
-'use client';export { Checkbox } from './chunk-QDK66S4G.js';
-import './chunk-NNXJCLTV.js';
+'use client';export { Checkbox } from './chunk-I45AU6KH.js';
+import './chunk-RJFGWJ4W.js';
 import './chunk-QGNC7LH5.js';
 //# sourceMappingURL=checkbox.js.map
 //# sourceMappingURL=checkbox.js.map

package/dist/{chunk-AMFGY56I.js → chunk-227ZW4V7.js}

@@ -1,10 +1,10 @@
-'use client';import { ModalShell } from './chunk-WFHRAKN3.js';
-import { ovCloneTrigger, OverlayPortal } from './chunk-U4MHX3KH.js';
-import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-NGTA34V2.js';
-import { animate, startDrag } from './chunk-YGCVWGUG.js';
+'use client';import { ModalShell } from './chunk-FONOS5RN.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-VAXCXZ53.js';
+import { Presence } from './chunk-DDRSMHN4.js';
+import { resolveMotionTiming } from './chunk-TUTXXC3W.js';
+import { startDrag, animate, set } from './chunk-IJS7TPGV.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
 import './sheet.css';
 import { useRef, useId, Fragment, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -13,6 +13,7 @@ var SM = UIMotion;
 var DISMISS_RATIO = 0.4;
 var DISMISS_VELOCITY = 500;
 var INTENT_PX = 4;
+var TOUCH_INTENT_PX = 8;
 var STRETCH_MAX = 0.06;
 function findScrollable(node, stop) {
   let el = node instanceof Element ? node : null;
@@ -38,6 +39,7 @@ function useSheetDrag({
 }) {
   const axis = side === "bottom" ? "y" : "x";
   const savedUserSelect = useRef(null);
+  const span = useRef(1);
   function suspendSelection() {
     const sel = window.getSelection();
     if (sel) sel.removeAllRanges();
@@ -51,19 +53,19 @@ function useSheetDrag({
   }
   useEffect(() => restoreSelection, []);
   function paint(el, travel, stretch) {
-    const span = sheetSpan(el, side);
-    el.style.translate = axis === "y" ? `0px ${travel}px` : `${travel}px 0px`;
-    el.style.scale = axis === "y" ? `1 ${stretch}` : `${stretch} 1`;
+    const stretched = axis === "y" ? [1, stretch] : [stretch, 1];
+    set(el, { x: [axis === "y" ? 0 : travel], y: [axis === "y" ? travel : 0], scale: [stretched] });
     const scrim = sheetScrim(el);
-    if (scrim) scrim.style.opacity = String(1 - Math.min(Math.max(travel / span, 0), 1));
+    if (scrim) set(scrim, { opacity: [1 - Math.min(Math.max(travel / span.current, 0), 1)] });
   }
   function onPointerDown(e) {
-    if (e.button !== 0) return;
+    if (e.button !== 0 || !e.isPrimary) return;
     const startX = e.clientX, startY = e.clientY;
+    const intent = e.pointerType === "touch" ? TOUCH_INTENT_PX : INTENT_PX;
     const scrollable = findScrollable(e.target, panelRef.current);
     const onMove = (ev) => {
       const dx = ev.clientX - startX, dy = ev.clientY - startY;
-      if (Math.max(Math.abs(dx), Math.abs(dy)) < INTENT_PX) return;
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < intent) return;
       cleanup();
       const along = axis === "y" ? dy : dx;
       const cross = axis === "y" ? dx : dy;
@@ -72,6 +74,8 @@ function useSheetDrag({
         if (along < 0) return;
         if (axis === "y" ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;
       }
+      if (!panelRef.current) return;
+      span.current = sheetSpan(panelRef.current, side);
       suspendSelection();
       startDrag(ev, { onMove: onDrag, onEnd: onDragEnd });
     };
@@ -88,32 +92,28 @@ function useSheetDrag({
     const el = panelRef.current;
     if (!el) return;
     const o = info.offset[axis];
-    const span = sheetSpan(el, side);
-    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span, 1) * STRETCH_MAX : 1);
+    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span.current, 1) * STRETCH_MAX : 1);
   }
   function onDragEnd(info) {
     restoreSelection();
     const el = panelRef.current;
     if (!el) return;
-    const span = sheetSpan(el, side);
-    if (info.offset[axis] > span * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {
+    if (info.offset[axis] > span.current * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {
       requestClose();
       return;
     }
-    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: SM.t.settle });
+    const settle = { ...SM.t.settle, release: true };
+    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: settle });
     const scrim = sheetScrim(el);
-    if (scrim) animate(scrim, { opacity: [1], timing: SM.t.settle });
+    if (scrim) animate(scrim, { opacity: [1], timing: settle });
   }
-  return enabled ? { onPointerDown } : {};
+  return enabled ? { onPointerDown, "data-drag": "" } : {};
 }
 var SHEET_TIMING = {
   open: { duration: "slow", ease: "entrance" },
   close: { duration: "base", ease: "exit" }
 };
-function sheetSlide(slot, side, at) {
-  const frames = at.map((ratio) => ratio * sheetSpan(slot, side));
-  return side === "bottom" ? { y: frames } : { x: frames };
-}
+var SHEET_REST_SCALE = [[1, 1]];
 function SheetShell({
   side,
   panelId,
@@ -121,6 +121,7 @@ function SheetShell({
   container,
   requestClose,
   htmlProps,
+  timings,
   animate: animate2,
   exit,
   children
@@ -130,6 +131,7 @@ function SheetShell({
   return /* @__PURE__ */ jsx(
     ModalShell,
     {
+      timings,
       animate: animate2,
       exit,
       layerClass: "overlay-layer--sheet-" + side,
@@ -149,6 +151,7 @@ function Sheet({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   side = "right",
   dismissible = true,
   container = null,
@@ -163,17 +166,22 @@ function Sheet({
   const panelId = id || "sheet-" + autoId;
   const close = () => setOpen(false);
   const timings = resolveMotionTiming(animation, SHEET_TIMING);
+  const axis = side === "bottom" ? "y" : "x";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    ovCloneTrigger(trigger, {
+      open,
+      onPress: () => setOpen(true),
+      panelId,
+      haspopup: "dialog",
+      triggerRef,
+      activateOn
+    }),
     /* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
       SheetShell,
       {
-        animate: (slot) => {
-          const play = animate(slot, { ...sheetSlide(slot, side, [1, 0]), timing: timings.open });
-          play.finished.then(() => play.stop());
-          return play;
-        },
-        exit: (slot) => animate(slot, { ...sheetSlide(slot, side, [1]), timing: timings.close }),
+        timings,
+        animate: { [axis]: ["100%", 0], timing: { ...timings.open, release: true } },
+        exit: { [axis]: ["100%"], scale: SHEET_REST_SCALE, timing: timings.close },
         side,
         panelId,
         dismissible,
@@ -188,5 +196,5 @@ function Sheet({
 }
 
 export { Sheet };
-//# sourceMappingURL=chunk-AMFGY56I.js.map
-//# sourceMappingURL=chunk-AMFGY56I.js.map
+//# sourceMappingURL=chunk-227ZW4V7.js.map
+//# sourceMappingURL=chunk-227ZW4V7.js.map

package/dist/chunk-227ZW4V7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/sheet/use-sheet-drag.ts","../src/components/composites/sheet/Sheet.tsx"],"names":["animate","useRef"],"mappings":"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","file":"chunk-227ZW4V7.js","sourcesContent":["'use client';\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react';\n\nimport { animate, set, startDrag, type PanInfo } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\n\nconst SM = UIMotion;\n\nconst DISMISS_RATIO = 0.4;\nconst DISMISS_VELOCITY = 500;\nconst INTENT_PX = 4;\nconst TOUCH_INTENT_PX = 8;\nconst STRETCH_MAX = 0.06;\n\nfunction findScrollable(node: EventTarget | null, stop: HTMLElement | null): HTMLElement | null {\n  let el = node instanceof Element ? node : null;\n  while (el && el !== stop) {\n    const s = getComputedStyle(el);\n    if (\n      /(auto|scroll)/.test(s.overflowY + s.overflowX) &&\n      (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)\n    )\n      return el as HTMLElement;\n    el = el.parentElement;\n  }\n  return null;\n}\n\nfunction sheetScrim(panel: HTMLElement | null): HTMLElement | null {\n  return panel?.parentElement?.querySelector<HTMLElement>('.overlay-scrim') ?? null;\n}\n\nfunction sheetSpan(panel: HTMLElement, side: 'right' | 'bottom'): number {\n  return side === 'bottom' ? panel.offsetHeight : panel.offsetWidth;\n}\n\nexport function useSheetDrag({\n  side,\n  panelRef,\n  enabled,\n  requestClose,\n}: {\n  side: 'right' | 'bottom';\n  panelRef: RefObject<HTMLElement>;\n  enabled: boolean;\n  requestClose: () => void;\n}) {\n  const axis = side === 'bottom' ? 'y' : 'x';\n  const savedUserSelect = useRef<string | null>(null);\n  const span = useRef(1);\n\n  function suspendSelection() {\n    const sel = window.getSelection();\n    if (sel) sel.removeAllRanges();\n    savedUserSelect.current = document.body.style.userSelect;\n    document.body.style.userSelect = 'none';\n  }\n  function restoreSelection() {\n    if (savedUserSelect.current === null) return;\n    document.body.style.userSelect = savedUserSelect.current;\n    savedUserSelect.current = null;\n  }\n  useEffect(() => restoreSelection, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  function paint(el: HTMLElement, travel: number, stretch: number) {\n    const stretched: [number, number] = axis === 'y' ? [1, stretch] : [stretch, 1];\n    set(el, { x: [axis === 'y' ? 0 : travel], y: [axis === 'y' ? travel : 0], scale: [stretched] });\n    const scrim = sheetScrim(el);\n    if (scrim) set(scrim, { opacity: [1 - Math.min(Math.max(travel / span.current, 0), 1)] });\n  }\n\n  function onPointerDown(e: ReactPointerEvent) {\n    if (e.button !== 0 || !e.isPrimary) return;\n    const startX = e.clientX,\n      startY = e.clientY;\n    const intent = e.pointerType === 'touch' ? TOUCH_INTENT_PX : INTENT_PX;\n    const scrollable = findScrollable(e.target, panelRef.current);\n\n    const onMove = (ev: PointerEvent) => {\n      const dx = ev.clientX - startX,\n        dy = ev.clientY - startY;\n      if (Math.max(Math.abs(dx), Math.abs(dy)) < intent) return;\n      cleanup();\n      const along = axis === 'y' ? dy : dx;\n      const cross = axis === 'y' ? dx : dy;\n      if (Math.abs(along) <= Math.abs(cross)) return;\n      if (scrollable) {\n        if (along < 0) return;\n        if (axis === 'y' ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;\n      }\n      if (!panelRef.current) return;\n      span.current = sheetSpan(panelRef.current, side);\n      suspendSelection();\n      startDrag(ev, { onMove: onDrag, onEnd: onDragEnd });\n    };\n\n    const cleanup = () => {\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', cleanup);\n      window.removeEventListener('pointercancel', cleanup);\n    };\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', cleanup);\n    window.addEventListener('pointercancel', cleanup);\n  }\n\n  function onDrag(info: PanInfo) {\n    const el = panelRef.current;\n    if (!el) return;\n    const o = info.offset[axis];\n    paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span.current, 1) * STRETCH_MAX : 1);\n  }\n\n  function onDragEnd(info: PanInfo) {\n    restoreSelection();\n    const el = panelRef.current;\n    if (!el) return;\n    if (info.offset[axis] > span.current * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {\n      requestClose();\n      return;\n    }\n    const settle = { ...SM.t.settle, release: true };\n    animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: settle });\n    const scrim = sheetScrim(el);\n    if (scrim) animate(scrim, { opacity: [1], timing: settle });\n  }\n\n  return enabled ? { onPointerDown, 'data-drag': '' } : {};\n}\n","'use client';\n\nimport './sheet.css';\n\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { resolveMotionTiming, type MotionTimings } from '../../../motion/motion-timing';\nimport { Presence } from '../../../motion/presence';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport type { MotionSpecs } from '../../../motion/use-motion';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport type { ActivateOn } from '../../internal/utils/activation';\nimport { useSheetDrag } from './use-sheet-drag';\n\nconst SHEET_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'exit' },\n} as const;\n\nconst SHEET_REST_SCALE: [number, number][] = [[1, 1]];\n\nexport interface SheetProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. Default false. */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Cloned to open the sheet. */\n  trigger?: ReactElement | null;\n  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */\n  activateOn?: ActivateOn;\n\n  /** Edge the sheet slides in from. Default 'right'. */\n  side?: 'right' | 'bottom';\n\n  /** Scrim/Esc dismissal + drag-to-edge. Default true. */\n  dismissible?: boolean;\n\n  /** Dock inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the sheet panel. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'exit' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */\n  children: ReactNode;\n}\n\nfunction SheetShell({\n  side,\n  panelId,\n  dismissible,\n  container,\n  requestClose,\n  htmlProps,\n  timings,\n  animate,\n  exit,\n  children,\n}: {\n  side: 'right' | 'bottom';\n  panelId: string;\n  dismissible: boolean;\n  container?: HTMLElement | null;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  timings: MotionTimings;\n  children: ReactNode;\n} & MotionSpecs) {\n  const panelRef = useRef<HTMLElement>(null);\n  const dragProps = useSheetDrag({ side, panelRef, enabled: dismissible, requestClose });\n  return (\n    <ModalShell\n      timings={timings}\n      animate={animate}\n      exit={exit}\n      layerClass={'overlay-layer--sheet-' + side}\n      panelClass={'overlay-panel--sheet-' + side}\n      panelId={panelId}\n      dismissible={dismissible}\n      container={container}\n      requestClose={requestClose}\n      panelRef={panelRef}\n      panelProps={{ ...htmlProps, ...dragProps }}\n    >\n      {children}\n    </ModalShell>\n  );\n}\n\nexport function Sheet({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  activateOn,\n  side = 'right',\n  dismissible = true,\n  container = null,\n  id,\n  htmlProps,\n  animation,\n  children,\n}: SheetProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'sheet-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, SHEET_TIMING);\n  const axis = side === 'bottom' ? 'y' : 'x';\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, {\n        open,\n        onPress: () => setOpen(true),\n        panelId,\n        haspopup: 'dialog',\n        triggerRef,\n        activateOn,\n      })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <SheetShell\n              key=\"sheet\"\n              timings={timings}\n              animate={{ [axis]: ['100%', 0], timing: { ...timings.open, release: true } }}\n              exit={{ [axis]: ['100%'], scale: SHEET_REST_SCALE, timing: timings.close }}\n              side={side}\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n              htmlProps={htmlProps}\n            >\n              {children}\n            </SheetShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/{chunk-2ERBBFZS.js → chunk-3MPF7FZV.js}

@@ -8,5 +8,5 @@ function IconSlot({ size = "md", children }) {
 }
 
 export { IconSlot };
-//# sourceMappingURL=chunk-2ERBBFZS.js.map
-//# sourceMappingURL=chunk-2ERBBFZS.js.map
+//# sourceMappingURL=chunk-3MPF7FZV.js.map
+//# sourceMappingURL=chunk-3MPF7FZV.js.map

package/dist/chunk-3MPF7FZV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/internal/icon/IconSlot.tsx"],"names":[],"mappings":";;;;AAQO,SAAS,QAAA,CAAS,EAAE,IAAA,GAAO,IAAA,EAAM,UAAS,EAA8C;AAC7F,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,2BAAQ,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,qBAAA,EAAwB,IAAI,IAAK,QAAA,EAAS,CAAA;AACpE","file":"chunk-3MPF7FZV.js","sourcesContent":["'use client';\n\nimport './icon.css';\n\nimport type { ReactNode } from 'react';\n\nimport type { IconSize } from './Icon';\n\nexport function IconSlot({ size = 'md', children }: { size?: IconSize; children?: ReactNode }) {\n  if (!children) return null;\n  return <span className={`icon-slot icon-slot--${size}`}>{children}</span>;\n}\n"]}