@zyncat/ui 0.9.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/alert.js +1 -1
- package/dist/button.css +10 -2
- package/dist/button.d.ts +2 -6
- package/dist/button.js +1 -1
- package/dist/{chunk-U5QQZC3U.js → chunk-2F5PITAO.js} +2 -6
- package/dist/chunk-2F5PITAO.js.map +1 -0
- package/dist/{chunk-EQ32F2QJ.js → chunk-62P3KD57.js} +5 -5
- package/dist/chunk-62P3KD57.js.map +1 -0
- package/dist/{chunk-W5YM2FV4.js → chunk-FTOAUJL5.js} +9 -6
- package/dist/chunk-FTOAUJL5.js.map +1 -0
- package/dist/{chunk-FLO4A6BI.js → chunk-K5X2GCXU.js} +54 -52
- package/dist/chunk-K5X2GCXU.js.map +1 -0
- package/dist/{chunk-Q5B7JTSR.js → chunk-OMHQ4U4J.js} +8 -8
- package/dist/chunk-OMHQ4U4J.js.map +1 -0
- package/dist/{chunk-GY7JOPUQ.js → chunk-RCONNA7I.js} +5 -5
- package/dist/chunk-RCONNA7I.js.map +1 -0
- package/dist/{chunk-GLT5IKQY.js → chunk-UXONUUPI.js} +9 -5
- package/dist/chunk-UXONUUPI.js.map +1 -0
- package/dist/{chunk-7RNRLIKT.js → chunk-Y7AJQVWJ.js} +3 -3
- package/dist/{chunk-7RNRLIKT.js.map → chunk-Y7AJQVWJ.js.map} +1 -1
- package/dist/{chunk-LDC3RIYA.js → chunk-ZCOUPPTI.js} +3 -3
- package/dist/{chunk-LDC3RIYA.js.map → chunk-ZCOUPPTI.js.map} +1 -1
- package/dist/date-field.js +6 -6
- package/dist/date-range-field.js +7 -7
- package/dist/datetime-field.js +6 -6
- package/dist/dialog.css +3 -0
- package/dist/dialog.d.ts +4 -1
- package/dist/dialog.js +7 -5
- package/dist/dialog.js.map +1 -1
- package/dist/modal.css +9 -0
- package/dist/modal.d.ts +35 -0
- package/dist/modal.js +63 -0
- package/dist/modal.js.map +1 -0
- package/dist/motion-devtools.js +1 -1
- package/dist/multi-select.js +4 -4
- package/dist/overlay.css +3 -0
- package/dist/pagination.js +1 -1
- package/dist/popover.d.ts +10 -3
- package/dist/popover.js +4 -4
- package/dist/select.js +4 -4
- package/dist/sheet.d.ts +4 -1
- package/dist/sheet.js +4 -4
- package/dist/table.js +1 -1
- package/dist/toast.js +1 -1
- package/llms.txt +31 -7
- package/package.json +16 -11
- package/src/components/composites/dialog/Dialog.tsx +30 -23
- package/src/components/composites/dialog/dialog.css +3 -0
- package/src/components/composites/modal/Modal.tsx +95 -0
- package/src/components/composites/modal/modal.css +9 -0
- package/src/components/composites/popover/Popover.tsx +12 -3
- package/src/components/composites/select/core/trigger.tsx +8 -12
- package/src/components/composites/sheet/Sheet.tsx +10 -1
- package/src/components/internal/overlay/layer.tsx +3 -3
- package/src/components/internal/overlay/modal.tsx +45 -36
- package/src/components/internal/overlay/overlay.css +3 -0
- package/src/components/internal/overlay/position.ts +8 -3
- package/src/components/primitives/button/Button.tsx +0 -16
- package/src/components/primitives/button/button.css +10 -2
- package/dist/chunk-EQ32F2QJ.js.map +0 -1
- package/dist/chunk-FLO4A6BI.js.map +0 -1
- package/dist/chunk-GLT5IKQY.js.map +0 -1
- package/dist/chunk-GY7JOPUQ.js.map +0 -1
- package/dist/chunk-Q5B7JTSR.js.map +0 -1
- package/dist/chunk-U5QQZC3U.js.map +0 -1
- package/dist/chunk-W5YM2FV4.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
'use client';import { ModalShell } from './chunk-
|
|
2
|
-
import { ovCloneTrigger, OverlayPortal } from './chunk-
|
|
1
|
+
'use client';import { ModalShell } from './chunk-K5X2GCXU.js';
|
|
2
|
+
import { ovCloneTrigger, OverlayPortal } from './chunk-RCONNA7I.js';
|
|
3
3
|
import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
|
|
4
4
|
import { Presence } from './chunk-356HZMT4.js';
|
|
5
5
|
import { animate, startDrag } from './chunk-YGCVWGUG.js';
|
|
@@ -118,6 +118,7 @@ function SheetShell({
|
|
|
118
118
|
side,
|
|
119
119
|
panelId,
|
|
120
120
|
dismissible,
|
|
121
|
+
container,
|
|
121
122
|
requestClose,
|
|
122
123
|
htmlProps,
|
|
123
124
|
animate: animate2,
|
|
@@ -135,6 +136,7 @@ function SheetShell({
|
|
|
135
136
|
panelClass: "overlay-panel--sheet-" + side,
|
|
136
137
|
panelId,
|
|
137
138
|
dismissible,
|
|
139
|
+
container,
|
|
138
140
|
requestClose,
|
|
139
141
|
panelRef,
|
|
140
142
|
panelProps: { ...htmlProps, ...dragProps },
|
|
@@ -149,6 +151,7 @@ function Sheet({
|
|
|
149
151
|
trigger = null,
|
|
150
152
|
side = "right",
|
|
151
153
|
dismissible = true,
|
|
154
|
+
container = null,
|
|
152
155
|
id,
|
|
153
156
|
htmlProps,
|
|
154
157
|
animation,
|
|
@@ -162,7 +165,7 @@ function Sheet({
|
|
|
162
165
|
const timings = resolveMotionTiming(animation, SHEET_TIMING);
|
|
163
166
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
164
167
|
ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
|
|
165
|
-
/* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
|
|
168
|
+
/* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
|
|
166
169
|
SheetShell,
|
|
167
170
|
{
|
|
168
171
|
animate: (slot) => {
|
|
@@ -174,6 +177,7 @@ function Sheet({
|
|
|
174
177
|
side,
|
|
175
178
|
panelId,
|
|
176
179
|
dismissible,
|
|
180
|
+
container,
|
|
177
181
|
requestClose: close,
|
|
178
182
|
htmlProps,
|
|
179
183
|
children
|
|
@@ -184,5 +188,5 @@ function Sheet({
|
|
|
184
188
|
}
|
|
185
189
|
|
|
186
190
|
export { Sheet };
|
|
187
|
-
//# sourceMappingURL=chunk-
|
|
188
|
-
//# sourceMappingURL=chunk-
|
|
191
|
+
//# sourceMappingURL=chunk-UXONUUPI.js.map
|
|
192
|
+
//# sourceMappingURL=chunk-UXONUUPI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/composites/sheet/use-sheet-drag.ts","../src/components/composites/sheet/Sheet.tsx"],"names":["animate","useRef"],"mappings":";;;;;;;;;;;AAMA,IAAM,EAAA,GAAK,QAAA;AAEX,IAAM,aAAA,GAAgB,GAAA;AACtB,IAAM,gBAAA,GAAmB,GAAA;AACzB,IAAM,SAAA,GAAY,CAAA;AAClB,IAAM,WAAA,GAAc,IAAA;AAEpB,SAAS,cAAA,CAAe,MAA0B,IAAA,EAA8C;AAC9F,EAAA,IAAI,EAAA,GAAK,IAAA,YAAgB,OAAA,GAAU,IAAA,GAAO,IAAA;AAC1C,EAAA,OAAO,EAAA,IAAM,OAAO,IAAA,EAAM;AACxB,IAAA,MAAM,CAAA,GAAI,iBAAiB,EAAE,CAAA;AAC7B,IAAA,IACE,eAAA,CAAgB,IAAA,CAAK,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,SAAS,CAAA,KAC7C,EAAA,CAAG,YAAA,GAAe,EAAA,CAAG,YAAA,IAAgB,EAAA,CAAG,cAAc,EAAA,CAAG,WAAA,CAAA;AAE1D,MAAA,OAAO,EAAA;AACT,IAAA,EAAA,GAAK,EAAA,CAAG,aAAA;AAAA,EACV;AACA,EAAA,OAAO,IAAA;AACT;AAEA,SAAS,WAAW,KAAA,EAA+C;AACjE,EAAA,OAAO,KAAA,EAAO,aAAA,EAAe,aAAA,CAA2B,gBAAgB,CAAA,IAAK,IAAA;AAC/E;AAEO,SAAS,SAAA,CAAU,OAAoB,IAAA,EAAkC;AAC9E,EAAA,OAAO,IAAA,KAAS,QAAA,GAAW,KAAA,CAAM,YAAA,GAAe,KAAA,CAAM,WAAA;AACxD;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,MAAM,IAAA,GAAO,IAAA,KAAS,QAAA,GAAW,GAAA,GAAM,GAAA;AACvC,EAAA,MAAM,eAAA,GAAkB,OAAsB,IAAI,CAAA;AAElD,EAAA,SAAS,gBAAA,GAAmB;AAC1B,IAAA,MAAM,GAAA,GAAM,OAAO,YAAA,EAAa;AAChC,IAAA,IAAI,GAAA,MAAS,eAAA,EAAgB;AAC7B,IAAA,eAAA,CAAgB,OAAA,GAAU,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,UAAA;AAC9C,IAAA,QAAA,CAAS,IAAA,CAAK,MAAM,UAAA,GAAa,MAAA;AAAA,EACnC;AACA,EAAA,SAAS,gBAAA,GAAmB;AAC1B,IAAA,IAAI,eAAA,CAAgB,YAAY,IAAA,EAAM;AACtC,IAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,UAAA,GAAa,eAAA,CAAgB,OAAA;AACjD,IAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAAA,EAC5B;AACA,EAAA,SAAA,CAAU,MAAM,gBAAA,EAAkB,EAAE,CAAA;AAEpC,EAAA,SAAS,KAAA,CAAM,EAAA,EAAiB,MAAA,EAAgB,OAAA,EAAiB;AAC/D,IAAA,MAAM,IAAA,GAAO,SAAA,CAAU,EAAA,EAAI,IAAI,CAAA;AAC/B,IAAA,EAAA,CAAG,KAAA,CAAM,YAAY,IAAA,KAAS,GAAA,GAAM,OAAO,MAAM,CAAA,EAAA,CAAA,GAAO,GAAG,MAAM,CAAA,MAAA,CAAA;AACjE,IAAA,EAAA,CAAG,KAAA,CAAM,QAAQ,IAAA,KAAS,GAAA,GAAM,KAAK,OAAO,CAAA,CAAA,GAAK,GAAG,OAAO,CAAA,EAAA,CAAA;AAC3D,IAAA,MAAM,KAAA,GAAQ,WAAW,EAAE,CAAA;AAC3B,IAAA,IAAI,KAAA,EAAO,KAAA,CAAM,KAAA,CAAM,OAAA,GAAU,OAAO,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,IAAI,MAAA,GAAS,IAAA,EAAM,CAAC,CAAA,EAAG,CAAC,CAAC,CAAA;AAAA,EACrF;AAEA,EAAA,SAAS,cAAc,CAAA,EAAsB;AAC3C,IAAA,IAAI,CAAA,CAAE,WAAW,CAAA,EAAG;AACpB,IAAA,MAAM,MAAA,GAAS,CAAA,CAAE,OAAA,EACf,MAAA,GAAS,CAAA,CAAE,OAAA;AACb,IAAA,MAAM,UAAA,GAAa,cAAA,CAAe,CAAA,CAAE,MAAA,EAAQ,SAAS,OAAO,CAAA;AAE5D,IAAA,MAAM,MAAA,GAAS,CAAC,EAAA,KAAqB;AACnC,MAAA,MAAM,KAAK,EAAA,CAAG,OAAA,GAAU,MAAA,EACtB,EAAA,GAAK,GAAG,OAAA,GAAU,MAAA;AACpB,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAI,EAAE,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,EAAE,CAAC,CAAA,GAAI,SAAA,EAAW;AACtD,MAAA,OAAA,EAAQ;AACR,MAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,GAAA,GAAM,EAAA,GAAK,EAAA;AAClC,MAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,GAAA,GAAM,EAAA,GAAK,EAAA;AAClC,MAAA,IAAI,KAAK,GAAA,CAAI,KAAK,KAAK,IAAA,CAAK,GAAA,CAAI,KAAK,CAAA,EAAG;AACxC,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,IAAI,QAAQ,CAAA,EAAG;AACf,QAAA,IAAI,SAAS,GAAA,GAAM,UAAA,CAAW,YAAY,CAAA,GAAI,UAAA,CAAW,aAAa,CAAA,EAAG;AAAA,MAC3E;AACA,MAAA,gBAAA,EAAiB;AACjB,MAAA,SAAA,CAAU,IAAI,EAAE,MAAA,EAAQ,MAAA,EAAQ,KAAA,EAAO,WAAW,CAAA;AAAA,IACpD,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,MAAA,CAAO,mBAAA,CAAoB,eAAe,MAAM,CAAA;AAChD,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,OAAO,CAAA;AAC/C,MAAA,MAAA,CAAO,mBAAA,CAAoB,iBAAiB,OAAO,CAAA;AAAA,IACrD,CAAA;AACA,IAAA,MAAA,CAAO,gBAAA,CAAiB,eAAe,MAAM,CAAA;AAC7C,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,OAAO,CAAA;AAC5C,IAAA,MAAA,CAAO,gBAAA,CAAiB,iBAAiB,OAAO,CAAA;AAAA,EAClD;AAEA,EAAA,SAAS,OAAO,IAAA,EAAe;AAC7B,IAAA,MAAM,KAAK,QAAA,CAAS,OAAA;AACpB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,MAAM,CAAA,GAAI,IAAA,CAAK,MAAA,CAAO,IAAI,CAAA;AAC1B,IAAA,MAAM,IAAA,GAAO,SAAA,CAAU,EAAA,EAAI,IAAI,CAAA;AAC/B,IAAA,KAAA,CAAM,IAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,CAAC,GAAG,CAAA,GAAI,CAAA,GAAI,CAAA,GAAI,IAAA,CAAK,IAAI,CAAC,CAAA,GAAI,MAAM,CAAC,CAAA,GAAI,cAAc,CAAC,CAAA;AAAA,EAChF;AAEA,EAAA,SAAS,UAAU,IAAA,EAAe;AAChC,IAAA,gBAAA,EAAiB;AACjB,IAAA,MAAM,KAAK,QAAA,CAAS,OAAA;AACpB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,MAAM,IAAA,GAAO,SAAA,CAAU,EAAA,EAAI,IAAI,CAAA;AAC/B,IAAA,IAAI,IAAA,CAAK,MAAA,CAAO,IAAI,CAAA,GAAI,IAAA,GAAO,iBAAiB,IAAA,CAAK,QAAA,CAAS,IAAI,CAAA,GAAI,gBAAA,EAAkB;AACtF,MAAA,YAAA,EAAa;AACb,MAAA;AAAA,IACF;AACA,IAAA,OAAA,CAAQ,EAAA,EAAI,EAAE,CAAA,EAAG,CAAC,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAC,CAAA,EAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAA,EAAQ,EAAA,CAAG,CAAA,CAAE,MAAA,EAAQ,CAAA;AACpE,IAAA,MAAM,KAAA,GAAQ,WAAW,EAAE,CAAA;AAC3B,IAAA,IAAI,KAAA,EAAO,OAAA,CAAQ,KAAA,EAAO,EAAE,OAAA,EAAS,CAAC,CAAC,CAAA,EAAG,MAAA,EAAQ,EAAA,CAAG,CAAA,CAAE,MAAA,EAAQ,CAAA;AAAA,EACjE;AAEA,EAAA,OAAO,OAAA,GAAU,EAAE,aAAA,EAAc,GAAI,EAAC;AACxC;AC9GA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,MAAA;AACnC,CAAA;AAiCA,SAAS,UAAA,CAAW,IAAA,EAAmB,IAAA,EAA0B,EAAA,EAAqB;AACpF,EAAA,MAAM,MAAA,GAAS,GAAG,GAAA,CAAI,CAAC,UAAU,KAAA,GAAQ,SAAA,CAAU,IAAA,EAAM,IAAI,CAAC,CAAA;AAC9D,EAAA,OAAO,IAAA,KAAS,WAAW,EAAE,CAAA,EAAG,QAAO,GAAI,EAAE,GAAG,MAAA,EAAO;AACzD;AAEA,SAAS,UAAA,CAAW;AAAA,EAClB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,EAAAA,QAAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAQiB;AACf,EAAA,MAAM,QAAA,GAAWC,OAAoB,IAAI,CAAA;AACzC,EAAA,MAAM,SAAA,GAAY,aAAa,EAAE,IAAA,EAAM,UAAU,OAAA,EAAS,WAAA,EAAa,cAAc,CAAA;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAASD,QAAAA;AAAA,MACT,IAAA;AAAA,MACA,YAAY,uBAAA,GAA0B,IAAA;AAAA,MACtC,YAAY,uBAAA,GAA0B,IAAA;AAAA,MACtC,OAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA,EAAY,EAAE,GAAG,SAAA,EAAW,GAAG,SAAA,EAAU;AAAA,MAExC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,IAAA,GAAO,OAAA;AAAA,EACP,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,EAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAaC,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,QAAA,GAAW,MAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,YAAY,CAAA;AAE3D,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA,EAAG,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,CAAA;AAAA,oBACxG,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,CAAC,IAAA,KAAS;AACjB,UAAA,MAAM,OAAO,OAAA,CAAQ,IAAA,EAAM,EAAE,GAAG,WAAW,IAAA,EAAM,IAAA,EAAM,CAAC,CAAA,EAAG,CAAC,CAAC,CAAA,EAAG,MAAA,EAAQ,OAAA,CAAQ,MAAM,CAAA;AACtF,UAAA,IAAA,CAAK,QAAA,CAAS,IAAA,CAAK,MAAM,IAAA,CAAK,MAAM,CAAA;AACpC,UAAA,OAAO,IAAA;AAAA,QACT,CAAA;AAAA,QACA,MAAM,CAAC,IAAA,KAAS,OAAA,CAAQ,IAAA,EAAM,EAAE,GAAG,UAAA,CAAW,IAAA,EAAM,IAAA,EAAM,CAAC,CAAC,CAAC,GAAG,MAAA,EAAQ,OAAA,CAAQ,OAAO,CAAA;AAAA,QACvF,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,SAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MAdG;AAAA,OAiBV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"chunk-UXONUUPI.js","sourcesContent":["'use client';\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react';\nimport { animate, 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 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\nexport function 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\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 span = sheetSpan(el, side);\n el.style.translate = axis === 'y' ? `0px ${travel}px` : `${travel}px 0px`;\n el.style.scale = axis === 'y' ? `1 ${stretch}` : `${stretch} 1`;\n const scrim = sheetScrim(el);\n if (scrim) scrim.style.opacity = String(1 - Math.min(Math.max(travel / span, 0), 1));\n }\n\n function onPointerDown(e: ReactPointerEvent) {\n if (e.button !== 0) return;\n const startX = e.clientX,\n startY = e.clientY;\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_PX) 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 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 const span = sheetSpan(el, side);\n paint(el, Math.max(o, 0), o < 0 ? 1 + Math.min(-o / span, 1) * STRETCH_MAX : 1);\n }\n\n function onDragEnd(info: PanInfo) {\n restoreSelection();\n const el = panelRef.current;\n if (!el) return;\n const span = sheetSpan(el, side);\n if (info.offset[axis] > span * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY) {\n requestClose();\n return;\n }\n animate(el, { x: [0], y: [0], scale: [[1, 1]], timing: SM.t.settle });\n const scrim = sheetScrim(el);\n if (scrim) animate(scrim, { opacity: [1], timing: SM.t.settle });\n }\n\n return enabled ? { onPointerDown } : {};\n}\n","'use client';\n\nimport './sheet.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { animate, type Layer } from '../../../engine';\nimport { Presence } from '../../../motion/presence';\nimport type { MotionSpecs } from '../../../motion/use-motion';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { useSheetDrag, sheetSpan } from './use-sheet-drag';\nimport type { DataAttributes } from '../../../dom-props';\n\nconst SHEET_TIMING = {\n open: { duration: 'slow', ease: 'entrance' },\n close: { duration: 'base', ease: 'exit' },\n} as const;\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 on click. */\n trigger?: ReactElement | null;\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 sheetSlide(slot: HTMLElement, side: 'right' | 'bottom', at: number[]): Layer {\n const frames = at.map((ratio) => ratio * sheetSpan(slot, side));\n return side === 'bottom' ? { y: frames } : { x: frames };\n}\n\nfunction SheetShell({\n side,\n panelId,\n dismissible,\n container,\n requestClose,\n htmlProps,\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 children: ReactNode;\n} & MotionSpecs) {\n const panelRef = useRef<HTMLElement>(null);\n const dragProps = useSheetDrag({ side, panelRef, enabled: dismissible, requestClose });\n return (\n <ModalShell\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 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\n return (\n <Fragment>\n {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n <OverlayPortal container={container}>\n <Presence>\n {open && (\n <SheetShell\n key=\"sheet\"\n animate={(slot) => {\n const play = animate(slot, { ...sheetSlide(slot, side, [1, 0]), timing: timings.open });\n play.finished.then(() => play.stop());\n return play;\n }}\n exit={(slot) => animate(slot, { ...sheetSlide(slot, side, [1]), 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"]}
|
|
@@ -5,7 +5,7 @@ import { Motion } from './chunk-2QWJ6FAX.js';
|
|
|
5
5
|
import { animate } from './chunk-YGCVWGUG.js';
|
|
6
6
|
import { Icon } from './chunk-3SBCBYB7.js';
|
|
7
7
|
import { UIMotion } from './chunk-S5ZTZANS.js';
|
|
8
|
-
import { Button } from './chunk-
|
|
8
|
+
import { Button } from './chunk-2F5PITAO.js';
|
|
9
9
|
import { cx } from './chunk-QGNC7LH5.js';
|
|
10
10
|
import './date-picker.css';
|
|
11
11
|
import { useState, useRef, useId, useEffect } from 'react';
|
|
@@ -196,5 +196,5 @@ function DtpPanel({ val, commit, min, max, timezone, label, close, slot }) {
|
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
export { DtpPanel };
|
|
199
|
-
//# sourceMappingURL=chunk-
|
|
200
|
-
//# sourceMappingURL=chunk-
|
|
199
|
+
//# sourceMappingURL=chunk-Y7AJQVWJ.js.map
|
|
200
|
+
//# sourceMappingURL=chunk-Y7AJQVWJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/composites/date-picker/calendar-panel.tsx"],"names":[],"mappings":"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","file":"chunk-7RNRLIKT.js","sourcesContent":["'use client';\n\nimport './date-picker.css';\nimport { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { animate } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { Icon } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport { GlidePill, useGlide } from '../../../motion/glide';\nimport { Motion } from '../../../motion/element';\nimport { useDayFocus } from './use-day-focus';\nimport { MONTHS, DOW, toKey, parse, col, today, grid, tzLabel, within } from './date-utils';\nimport { cx } from '../../internal/utils/cx';\n\nconst PILL_FLIP = { timing: UIMotion.t.settle };\n\ninterface DtpPanelProps {\n val: string | null;\n commit: (key: string) => void;\n close: () => void;\n min?: string;\n max?: string;\n timezone?: string;\n label?: string;\n slot?: ReactNode;\n}\n\nexport function DtpPanel({ val, commit, min, max, timezone, label, close, slot }: DtpPanelProps) {\n const seed = val ? parse(val) : new Date();\n const [view, setView] = useState<{ y: number; m: number }>({ y: seed.getFullYear(), m: seed.getMonth() });\n const [focusKey, setFocusKey] = useState<string>(val || today());\n\n const daysRef = useRef<HTMLDivElement>(null);\n const prevViewRef = useRef<number | null>(null);\n const uid = useId();\n const pillId = 'dtp-pill-' + uid;\n\n const glide = useGlide(daysRef);\n\n const inRange = (key: string): boolean => within(key, min, max);\n\n function pickDay(key: string) {\n if (!inRange(key)) return;\n armFocus();\n setFocusKey(key);\n const d = parse(key);\n goToMonth(d.getFullYear(), d.getMonth());\n commit(key);\n }\n\n function goToMonth(y: number, m: number) {\n setView((v) => (v.y === y && v.m === m ? v : { y: y, m: m }));\n }\n function nav(dir: number) {\n const d = new Date(view.y, view.m + dir, 1);\n goToMonth(d.getFullYear(), d.getMonth());\n }\n const now = new Date();\n const viewIsCurrent = view.y === now.getFullYear() && view.m === now.getMonth();\n function goToToday() {\n const key = today();\n const d = parse(key);\n armFocus();\n setFocusKey(key);\n goToMonth(d.getFullYear(), d.getMonth());\n }\n const viewIdx = view.y * 12 + view.m;\n const armFocus = useDayFocus(daysRef, focusKey, viewIdx, '[tabindex=\"0\"]:not(:disabled)');\n useEffect(() => {\n const prev = prevViewRef.current;\n prevViewRef.current = viewIdx;\n const el = daysRef.current;\n if (prev == null || prev === viewIdx || !el) return;\n const dir = viewIdx > prev ? 1 : -1;\n animate(el, { x: [dir * 16, 0], opacity: [0, 1], timing: UIMotion.t.enter });\n }, [viewIdx]);\n\n function moveFocus(deltaDays: number, deltaMonths: number) {\n const d = parse(focusKey);\n if (deltaMonths) d.setMonth(d.getMonth() + deltaMonths);\n if (deltaDays) d.setDate(d.getDate() + deltaDays);\n const key = toKey(d);\n armFocus();\n setFocusKey(key);\n goToMonth(d.getFullYear(), d.getMonth());\n }\n function onGridKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n const k = e.key;\n if (k === 'ArrowLeft') moveFocus(-1, 0);\n else if (k === 'ArrowRight') moveFocus(1, 0);\n else if (k === 'ArrowUp') moveFocus(-7, 0);\n else if (k === 'ArrowDown') moveFocus(7, 0);\n else if (k === 'PageUp') moveFocus(0, -1);\n else if (k === 'PageDown') moveFocus(0, 1);\n else if (k === 'Home') moveFocus(-col(parse(focusKey)), 0);\n else if (k === 'End') moveFocus(6 - col(parse(focusKey)), 0);\n else if (k === 'Enter' || k === ' ') pickDay(focusKey);\n else return;\n e.preventDefault();\n }\n\n const days = grid(view.y, view.m);\n const todayKey = today();\n const selKey = val || null;\n const gridKeys = days.map(toKey);\n const tabKey =\n gridKeys.indexOf(focusKey) >= 0\n ? focusKey\n : selKey && gridKeys.indexOf(selKey) >= 0\n ? selKey\n : gridKeys.indexOf(todayKey) >= 0\n ? todayKey\n : toKey(new Date(view.y, view.m, 1));\n\n const prevEnd = toKey(new Date(view.y, view.m, 0));\n const nextStart = toKey(new Date(view.y, view.m + 1, 1));\n const canPrev = !min || prevEnd >= min;\n const canNext = !max || nextStart <= max;\n\n const weeks: Date[][] = [];\n for (let w = 0; w < 6; w++) weeks.push(days.slice(w * 7, w * 7 + 7));\n\n return (\n <div className=\"dtp\" role=\"dialog\" aria-label={label || 'Pick a date'}>\n <div className=\"dtp__cal\">\n <div className=\"dtp__head\">\n <span className=\"dtp__month\" aria-live=\"polite\">\n {MONTHS[view.m]} <span className=\"dtp__year\">{view.y}</span>\n </span>\n <div className=\"dtp__navs\">\n <button\n type=\"button\"\n className=\"dtp__nav\"\n aria-label=\"Previous month\"\n disabled={!canPrev}\n onClick={() => nav(-1)}\n >\n <Icon name=\"caret-left\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n className=\"dtp__nav\"\n aria-label=\"Go to today\"\n disabled={viewIsCurrent}\n onClick={goToToday}\n >\n <Icon name=\"calendar-dot\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n className=\"dtp__nav\"\n aria-label=\"Next month\"\n disabled={!canNext}\n onClick={() => nav(1)}\n >\n <Icon name=\"caret-right\" size=\"sm\" />\n </button>\n </div>\n </div>\n <div className=\"dtp__dow\" aria-hidden=\"true\">\n {DOW.map((d) => (\n <span key={d}>{d}</span>\n ))}\n </div>\n <div\n className=\"dtp__days\"\n ref={daysRef}\n role=\"grid\"\n aria-label=\"Calendar\"\n onKeyDown={onGridKeyDown}\n onPointerLeave={glide.leave}\n >\n {weeks.map((week, wi) => (\n <div key={wi} role=\"row\" className=\"dtp__row\">\n {week.map((d) => {\n const key = toKey(d);\n const out = d.getMonth() !== view.m;\n const sel = key === selKey;\n const cls = cx('dtp__day', out && 'is-out', sel && 'is-selected', key === todayKey && 'is-today');\n return (\n <button\n key={key}\n type=\"button\"\n role=\"gridcell\"\n data-key={key}\n className={cls}\n disabled={!inRange(key)}\n tabIndex={key === tabKey ? 0 : -1}\n aria-selected={sel || undefined}\n aria-label={MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear()}\n onClick={() => pickDay(key)}\n onPointerEnter={(e) => glide.enter(e.currentTarget)}\n >\n {sel ? (\n <Motion\n as=\"span\"\n layoutId={pillId}\n layoutTransition={PILL_FLIP}\n className=\"dtp__pill\"\n aria-hidden=\"true\"\n />\n ) : null}\n <span className=\"dtp__num\">{d.getDate()}</span>\n {key === todayKey ? <span className=\"dtp__dot\" aria-hidden=\"true\"></span> : null}\n </button>\n );\n })}\n </div>\n ))}\n <GlidePill className=\"dtp__hover\" glide={glide} />\n </div>\n </div>\n\n {slot || null}\n\n <div className=\"dtp__foot\">\n {timezone ? <span className=\"dtp__tz\">{tzLabel(timezone, selKey)}</span> : null}\n <span className=\"dtp__footSpacer\"></span>\n <Button variant=\"primary\" size=\"sm\" onClick={close}>\n Done\n </Button>\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/composites/date-picker/calendar-panel.tsx"],"names":[],"mappings":"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","file":"chunk-Y7AJQVWJ.js","sourcesContent":["'use client';\n\nimport './date-picker.css';\nimport { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { animate } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { Icon } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport { GlidePill, useGlide } from '../../../motion/glide';\nimport { Motion } from '../../../motion/element';\nimport { useDayFocus } from './use-day-focus';\nimport { MONTHS, DOW, toKey, parse, col, today, grid, tzLabel, within } from './date-utils';\nimport { cx } from '../../internal/utils/cx';\n\nconst PILL_FLIP = { timing: UIMotion.t.settle };\n\ninterface DtpPanelProps {\n val: string | null;\n commit: (key: string) => void;\n close: () => void;\n min?: string;\n max?: string;\n timezone?: string;\n label?: string;\n slot?: ReactNode;\n}\n\nexport function DtpPanel({ val, commit, min, max, timezone, label, close, slot }: DtpPanelProps) {\n const seed = val ? parse(val) : new Date();\n const [view, setView] = useState<{ y: number; m: number }>({ y: seed.getFullYear(), m: seed.getMonth() });\n const [focusKey, setFocusKey] = useState<string>(val || today());\n\n const daysRef = useRef<HTMLDivElement>(null);\n const prevViewRef = useRef<number | null>(null);\n const uid = useId();\n const pillId = 'dtp-pill-' + uid;\n\n const glide = useGlide(daysRef);\n\n const inRange = (key: string): boolean => within(key, min, max);\n\n function pickDay(key: string) {\n if (!inRange(key)) return;\n armFocus();\n setFocusKey(key);\n const d = parse(key);\n goToMonth(d.getFullYear(), d.getMonth());\n commit(key);\n }\n\n function goToMonth(y: number, m: number) {\n setView((v) => (v.y === y && v.m === m ? v : { y: y, m: m }));\n }\n function nav(dir: number) {\n const d = new Date(view.y, view.m + dir, 1);\n goToMonth(d.getFullYear(), d.getMonth());\n }\n const now = new Date();\n const viewIsCurrent = view.y === now.getFullYear() && view.m === now.getMonth();\n function goToToday() {\n const key = today();\n const d = parse(key);\n armFocus();\n setFocusKey(key);\n goToMonth(d.getFullYear(), d.getMonth());\n }\n const viewIdx = view.y * 12 + view.m;\n const armFocus = useDayFocus(daysRef, focusKey, viewIdx, '[tabindex=\"0\"]:not(:disabled)');\n useEffect(() => {\n const prev = prevViewRef.current;\n prevViewRef.current = viewIdx;\n const el = daysRef.current;\n if (prev == null || prev === viewIdx || !el) return;\n const dir = viewIdx > prev ? 1 : -1;\n animate(el, { x: [dir * 16, 0], opacity: [0, 1], timing: UIMotion.t.enter });\n }, [viewIdx]);\n\n function moveFocus(deltaDays: number, deltaMonths: number) {\n const d = parse(focusKey);\n if (deltaMonths) d.setMonth(d.getMonth() + deltaMonths);\n if (deltaDays) d.setDate(d.getDate() + deltaDays);\n const key = toKey(d);\n armFocus();\n setFocusKey(key);\n goToMonth(d.getFullYear(), d.getMonth());\n }\n function onGridKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n const k = e.key;\n if (k === 'ArrowLeft') moveFocus(-1, 0);\n else if (k === 'ArrowRight') moveFocus(1, 0);\n else if (k === 'ArrowUp') moveFocus(-7, 0);\n else if (k === 'ArrowDown') moveFocus(7, 0);\n else if (k === 'PageUp') moveFocus(0, -1);\n else if (k === 'PageDown') moveFocus(0, 1);\n else if (k === 'Home') moveFocus(-col(parse(focusKey)), 0);\n else if (k === 'End') moveFocus(6 - col(parse(focusKey)), 0);\n else if (k === 'Enter' || k === ' ') pickDay(focusKey);\n else return;\n e.preventDefault();\n }\n\n const days = grid(view.y, view.m);\n const todayKey = today();\n const selKey = val || null;\n const gridKeys = days.map(toKey);\n const tabKey =\n gridKeys.indexOf(focusKey) >= 0\n ? focusKey\n : selKey && gridKeys.indexOf(selKey) >= 0\n ? selKey\n : gridKeys.indexOf(todayKey) >= 0\n ? todayKey\n : toKey(new Date(view.y, view.m, 1));\n\n const prevEnd = toKey(new Date(view.y, view.m, 0));\n const nextStart = toKey(new Date(view.y, view.m + 1, 1));\n const canPrev = !min || prevEnd >= min;\n const canNext = !max || nextStart <= max;\n\n const weeks: Date[][] = [];\n for (let w = 0; w < 6; w++) weeks.push(days.slice(w * 7, w * 7 + 7));\n\n return (\n <div className=\"dtp\" role=\"dialog\" aria-label={label || 'Pick a date'}>\n <div className=\"dtp__cal\">\n <div className=\"dtp__head\">\n <span className=\"dtp__month\" aria-live=\"polite\">\n {MONTHS[view.m]} <span className=\"dtp__year\">{view.y}</span>\n </span>\n <div className=\"dtp__navs\">\n <button\n type=\"button\"\n className=\"dtp__nav\"\n aria-label=\"Previous month\"\n disabled={!canPrev}\n onClick={() => nav(-1)}\n >\n <Icon name=\"caret-left\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n className=\"dtp__nav\"\n aria-label=\"Go to today\"\n disabled={viewIsCurrent}\n onClick={goToToday}\n >\n <Icon name=\"calendar-dot\" size=\"sm\" />\n </button>\n <button\n type=\"button\"\n className=\"dtp__nav\"\n aria-label=\"Next month\"\n disabled={!canNext}\n onClick={() => nav(1)}\n >\n <Icon name=\"caret-right\" size=\"sm\" />\n </button>\n </div>\n </div>\n <div className=\"dtp__dow\" aria-hidden=\"true\">\n {DOW.map((d) => (\n <span key={d}>{d}</span>\n ))}\n </div>\n <div\n className=\"dtp__days\"\n ref={daysRef}\n role=\"grid\"\n aria-label=\"Calendar\"\n onKeyDown={onGridKeyDown}\n onPointerLeave={glide.leave}\n >\n {weeks.map((week, wi) => (\n <div key={wi} role=\"row\" className=\"dtp__row\">\n {week.map((d) => {\n const key = toKey(d);\n const out = d.getMonth() !== view.m;\n const sel = key === selKey;\n const cls = cx('dtp__day', out && 'is-out', sel && 'is-selected', key === todayKey && 'is-today');\n return (\n <button\n key={key}\n type=\"button\"\n role=\"gridcell\"\n data-key={key}\n className={cls}\n disabled={!inRange(key)}\n tabIndex={key === tabKey ? 0 : -1}\n aria-selected={sel || undefined}\n aria-label={MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear()}\n onClick={() => pickDay(key)}\n onPointerEnter={(e) => glide.enter(e.currentTarget)}\n >\n {sel ? (\n <Motion\n as=\"span\"\n layoutId={pillId}\n layoutTransition={PILL_FLIP}\n className=\"dtp__pill\"\n aria-hidden=\"true\"\n />\n ) : null}\n <span className=\"dtp__num\">{d.getDate()}</span>\n {key === todayKey ? <span className=\"dtp__dot\" aria-hidden=\"true\"></span> : null}\n </button>\n );\n })}\n </div>\n ))}\n <GlidePill className=\"dtp__hover\" glide={glide} />\n </div>\n </div>\n\n {slot || null}\n\n <div className=\"dtp__foot\">\n {timezone ? <span className=\"dtp__tz\">{tzLabel(timezone, selKey)}</span> : null}\n <span className=\"dtp__footSpacer\"></span>\n <Button variant=\"primary\" size=\"sm\" onClick={close}>\n Done\n </Button>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use client';import { ovIsTop, ovInOverlayAbove } from './chunk-
|
|
1
|
+
'use client';import { ovIsTop, ovInOverlayAbove } from './chunk-RCONNA7I.js';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
function useReturnFocus(nodeRef) {
|
|
@@ -58,5 +58,5 @@ function useFocusTrap({ panelRef, entry }) {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
export { useFocusTrap, useReturnFocus };
|
|
61
|
-
//# sourceMappingURL=chunk-
|
|
62
|
-
//# sourceMappingURL=chunk-
|
|
61
|
+
//# sourceMappingURL=chunk-ZCOUPPTI.js.map
|
|
62
|
+
//# sourceMappingURL=chunk-ZCOUPPTI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/internal/overlay/focus.ts"],"names":[],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/internal/overlay/focus.ts"],"names":[],"mappings":"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","file":"chunk-ZCOUPPTI.js","sourcesContent":["'use client';\n\nimport { useEffect, type RefObject } from 'react';\nimport { type OverlayEntry, ovIsTop, ovInOverlayAbove } from './layer';\n\nexport function useReturnFocus(nodeRef: RefObject<HTMLElement>) {\n useEffect(() => {\n const prev = document.activeElement as HTMLElement | null;\n return () => {\n const a = document.activeElement;\n const orphaned = !a || a === document.body || (nodeRef.current && nodeRef.current.contains(a));\n if (orphaned && prev && prev.isConnected && typeof prev.focus === 'function') {\n queueMicrotask(() => {\n if (prev.isConnected) prev.focus({ preventScroll: true });\n });\n }\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nconst OV_FOCUSABLE =\n 'a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), ' +\n 'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport function useFocusTrap({ panelRef, entry }: { panelRef: RefObject<HTMLElement>; entry: OverlayEntry }) {\n useEffect(() => {\n const panel = panelRef.current;\n if (!panel) return undefined;\n const focusables = () =>\n Array.from(panel.querySelectorAll<HTMLElement>(OV_FOCUSABLE)).filter(\n (el) => el.offsetParent !== null || el === document.activeElement,\n );\n\n const seed = panel.querySelector<HTMLElement>('[autofocus], [data-autofocus]') || focusables()[0] || panel;\n seed.focus({ preventScroll: true });\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n const f = focusables();\n if (f.length === 0) {\n e.preventDefault();\n return;\n }\n const cur = document.activeElement;\n if (e.shiftKey) {\n if (cur === f[0] || cur === panel) {\n e.preventDefault();\n f[f.length - 1].focus();\n }\n } else if (cur === f[f.length - 1]) {\n e.preventDefault();\n f[0].focus();\n }\n };\n const onFocusIn = (e: FocusEvent) => {\n if (panel.contains(e.target as Node)) return;\n if (!ovIsTop(entry) || ovInOverlayAbove(entry, e.target)) return;\n (focusables()[0] || panel).focus({ preventScroll: true });\n };\n\n panel.addEventListener('keydown', onKeyDown);\n document.addEventListener('focusin', onFocusIn);\n return () => {\n panel.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('focusin', onFocusIn);\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"]}
|
package/dist/date-field.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
'use client';import { DtpPanel } from './chunk-
|
|
1
|
+
'use client';import { DtpPanel } from './chunk-Y7AJQVWJ.js';
|
|
2
2
|
import './chunk-TCUCYFT7.js';
|
|
3
|
+
import { Popover } from './chunk-FTOAUJL5.js';
|
|
4
|
+
import './chunk-62P3KD57.js';
|
|
3
5
|
import { FieldTrigger, displayDay, FieldShell } from './chunk-YGGCQNNU.js';
|
|
4
|
-
import
|
|
5
|
-
import './chunk-
|
|
6
|
-
import './chunk-LDC3RIYA.js';
|
|
7
|
-
import './chunk-GY7JOPUQ.js';
|
|
6
|
+
import './chunk-ZCOUPPTI.js';
|
|
7
|
+
import './chunk-RCONNA7I.js';
|
|
8
8
|
import './chunk-UE63OOVG.js';
|
|
9
9
|
import './chunk-WM5J5TDI.js';
|
|
10
10
|
import './chunk-NEF5XAHG.js';
|
|
@@ -16,7 +16,7 @@ import './chunk-I4XQ4PV2.js';
|
|
|
16
16
|
import './chunk-3SBCBYB7.js';
|
|
17
17
|
import { useControllable } from './chunk-MMRIQNEN.js';
|
|
18
18
|
import './chunk-S5ZTZANS.js';
|
|
19
|
-
import './chunk-
|
|
19
|
+
import './chunk-2F5PITAO.js';
|
|
20
20
|
import './chunk-7SZCJ7WI.js';
|
|
21
21
|
import './chunk-VTJTGVZZ.js';
|
|
22
22
|
import './chunk-QGNC7LH5.js';
|
package/dist/date-range-field.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
'use client';import { Sheet } from './chunk-
|
|
1
|
+
'use client';import { Sheet } from './chunk-UXONUUPI.js';
|
|
2
2
|
import { useDayFocus } from './chunk-TCUCYFT7.js';
|
|
3
|
+
import { Popover } from './chunk-FTOAUJL5.js';
|
|
4
|
+
import './chunk-62P3KD57.js';
|
|
3
5
|
import { FieldShell, FieldTrigger, parse, today, tzLabel, MONTHS, pad, toKey, add, grid, DOW, col, within } from './chunk-YGGCQNNU.js';
|
|
4
|
-
import './chunk-
|
|
5
|
-
import
|
|
6
|
-
import './chunk-
|
|
7
|
-
import './chunk-LDC3RIYA.js';
|
|
8
|
-
import './chunk-GY7JOPUQ.js';
|
|
6
|
+
import './chunk-K5X2GCXU.js';
|
|
7
|
+
import './chunk-ZCOUPPTI.js';
|
|
8
|
+
import './chunk-RCONNA7I.js';
|
|
9
9
|
import './chunk-UE63OOVG.js';
|
|
10
10
|
import { useGlide, GlidePill } from './chunk-WM5J5TDI.js';
|
|
11
11
|
import './chunk-NEF5XAHG.js';
|
|
@@ -17,7 +17,7 @@ import './chunk-I4XQ4PV2.js';
|
|
|
17
17
|
import { Icon } from './chunk-3SBCBYB7.js';
|
|
18
18
|
import { useControllable } from './chunk-MMRIQNEN.js';
|
|
19
19
|
import { UIMotion } from './chunk-S5ZTZANS.js';
|
|
20
|
-
import { Button } from './chunk-
|
|
20
|
+
import { Button } from './chunk-2F5PITAO.js';
|
|
21
21
|
import './chunk-7SZCJ7WI.js';
|
|
22
22
|
import './chunk-VTJTGVZZ.js';
|
|
23
23
|
import './chunk-QGNC7LH5.js';
|
package/dist/datetime-field.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
'use client';import { DtpPanel } from './chunk-
|
|
1
|
+
'use client';import { DtpPanel } from './chunk-Y7AJQVWJ.js';
|
|
2
2
|
import './chunk-TCUCYFT7.js';
|
|
3
|
+
import { Popover } from './chunk-FTOAUJL5.js';
|
|
4
|
+
import './chunk-62P3KD57.js';
|
|
3
5
|
import { TimeSegments, disp12 } from './chunk-64UU4LGU.js';
|
|
4
6
|
import { displayDay, FieldShell, FieldTrigger, pad } from './chunk-YGGCQNNU.js';
|
|
5
|
-
import
|
|
6
|
-
import './chunk-
|
|
7
|
-
import './chunk-LDC3RIYA.js';
|
|
8
|
-
import './chunk-GY7JOPUQ.js';
|
|
7
|
+
import './chunk-ZCOUPPTI.js';
|
|
8
|
+
import './chunk-RCONNA7I.js';
|
|
9
9
|
import './chunk-UE63OOVG.js';
|
|
10
10
|
import './chunk-WM5J5TDI.js';
|
|
11
11
|
import './chunk-NEF5XAHG.js';
|
|
@@ -17,7 +17,7 @@ import './chunk-I4XQ4PV2.js';
|
|
|
17
17
|
import './chunk-3SBCBYB7.js';
|
|
18
18
|
import { useControllable } from './chunk-MMRIQNEN.js';
|
|
19
19
|
import './chunk-S5ZTZANS.js';
|
|
20
|
-
import './chunk-
|
|
20
|
+
import './chunk-2F5PITAO.js';
|
|
21
21
|
import './chunk-7SZCJ7WI.js';
|
|
22
22
|
import './chunk-VTJTGVZZ.js';
|
|
23
23
|
import './chunk-QGNC7LH5.js';
|
package/dist/dialog.css
CHANGED
|
@@ -136,6 +136,9 @@
|
|
|
136
136
|
color: var(--text-body);
|
|
137
137
|
font: var(--type-body);
|
|
138
138
|
}
|
|
139
|
+
.dialog__body:first-child {
|
|
140
|
+
padding-top: var(--space-5);
|
|
141
|
+
}
|
|
139
142
|
.dialog:has(.dialog__icon) .dialog__body {
|
|
140
143
|
padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
|
|
141
144
|
}
|
package/dist/dialog.d.ts
CHANGED
|
@@ -25,6 +25,9 @@ interface DialogProps {
|
|
|
25
25
|
icon?: ReactNode;
|
|
26
26
|
/** Close button + backdrop/Esc dismissal. Default true. */
|
|
27
27
|
dismissible?: boolean;
|
|
28
|
+
/** Center inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
|
|
29
|
+
* Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
|
|
30
|
+
container?: HTMLElement | null;
|
|
28
31
|
/** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */
|
|
29
32
|
footer?: ReactNode | ((close: () => void) => ReactNode);
|
|
30
33
|
/** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */
|
|
@@ -37,6 +40,6 @@ interface DialogProps {
|
|
|
37
40
|
/** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
|
|
38
41
|
animation?: DisableableAnimation;
|
|
39
42
|
}
|
|
40
|
-
declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
|
|
43
|
+
declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, container, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
|
|
41
44
|
|
|
42
45
|
export { Dialog, type DialogProps };
|
package/dist/dialog.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
|
|
2
|
-
import { ModalShell } from './chunk-
|
|
3
|
-
import './chunk-
|
|
4
|
-
import { ovCloneTrigger, OverlayPortal } from './chunk-
|
|
2
|
+
import { ModalShell } from './chunk-K5X2GCXU.js';
|
|
3
|
+
import './chunk-ZCOUPPTI.js';
|
|
4
|
+
import { ovCloneTrigger, OverlayPortal } from './chunk-RCONNA7I.js';
|
|
5
5
|
import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
|
|
6
6
|
import { Presence } from './chunk-356HZMT4.js';
|
|
7
7
|
import './chunk-XWUWYSCT.js';
|
|
@@ -52,7 +52,7 @@ function DialogSurface({
|
|
|
52
52
|
"aria-labelledby": title ? titleId : void 0,
|
|
53
53
|
"aria-describedby": description ? descId : void 0,
|
|
54
54
|
children: [
|
|
55
|
-
/* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
|
|
55
|
+
(icon || title || description || dismissible) && /* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
|
|
56
56
|
icon && /* @__PURE__ */ jsx("span", { className: "dialog__icon", children: /* @__PURE__ */ jsx(IconSlot, { size: "md", children: icon }) }),
|
|
57
57
|
/* @__PURE__ */ jsxs("div", { className: "dialog__heading", children: [
|
|
58
58
|
title && /* @__PURE__ */ jsx("h2", { className: "dialog__title", id: titleId, children: title }),
|
|
@@ -77,6 +77,7 @@ function Dialog({
|
|
|
77
77
|
tone = "default",
|
|
78
78
|
icon = null,
|
|
79
79
|
dismissible = true,
|
|
80
|
+
container = null,
|
|
80
81
|
footer = null,
|
|
81
82
|
children,
|
|
82
83
|
id,
|
|
@@ -91,7 +92,7 @@ function Dialog({
|
|
|
91
92
|
const timings = resolveMotionTiming(animation, DIALOG_TIMING);
|
|
92
93
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
93
94
|
ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
|
|
94
|
-
/* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
|
|
95
|
+
/* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
|
|
95
96
|
ModalShell,
|
|
96
97
|
{
|
|
97
98
|
animate: { y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open },
|
|
@@ -100,6 +101,7 @@ function Dialog({
|
|
|
100
101
|
panelClass: "overlay-panel--dialog",
|
|
101
102
|
panelId,
|
|
102
103
|
dismissible,
|
|
104
|
+
container,
|
|
103
105
|
requestClose: close,
|
|
104
106
|
children: /* @__PURE__ */ jsx(
|
|
105
107
|
DialogSurface,
|
package/dist/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIALOG_TIMING = {\n open: { duration: 'slow', ease: 'entrance' },\n close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface DialogProps {\n /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n open?: boolean;\n /** Initial open 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 /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */\n trigger?: ReactElement | null;\n /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n title?: ReactNode;\n /** Subtext under the title - wired to `aria-describedby`. @default null */\n description?: ReactNode;\n /** Panel width. @default 'md' */\n size?: 'sm' | 'md' | 'lg';\n /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n tone?: 'default' | 'danger';\n /** Your own icon node for the header badge (alert dialogs). */\n icon?: ReactNode;\n /** Close button + backdrop/Esc dismissal. Default true. */\n dismissible?: boolean;\n /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n footer?: ReactNode | ((close: () => void) => ReactNode);\n /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n children?: ReactNode;\n /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n * Auto-generated when omitted. */\n id?: string;\n /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n panelId: string;\n size: 'sm' | 'md' | 'lg';\n tone: 'default' | 'danger';\n icon: ReactNode;\n title: ReactNode;\n description: ReactNode;\n dismissible: boolean;\n footerContent: ReactNode;\n requestClose: () => void;\n htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n children?: ReactNode;\n}\n\nfunction DialogSurface({\n panelId,\n size,\n tone,\n icon,\n title,\n description,\n dismissible,\n footerContent,\n requestClose,\n htmlProps,\n children,\n}: DialogSurfaceProps) {\n const bodyRef = useRef<HTMLDivElement>(null);\n const titleId = panelId + '-title';\n const descId = panelId + '-desc';\n\n useScrollEdges(bodyRef, (edges, el) => {\n el.toggleAttribute('data-scroll-top', edges.top);\n el.toggleAttribute('data-scroll-bottom', edges.bottom);\n });\n\n return (\n <section\n {...htmlProps}\n className={cx('dialog', htmlProps?.className)}\n role=\"dialog\"\n aria-modal=\"true\"\n data-size={size === 'md' ? undefined : size}\n data-tone={tone === 'default' ? undefined : tone}\n aria-labelledby={title ? titleId : undefined}\n aria-describedby={description ? descId : undefined}\n >\n <header className=\"dialog__header\">\n {icon && (\n <span className=\"dialog__icon\">\n <IconSlot size=\"md\">{icon}</IconSlot>\n </span>\n )}\n <div className=\"dialog__heading\">\n {title && (\n <h2 className=\"dialog__title\" id={titleId}>\n {title}\n </h2>\n )}\n {description && (\n <p className=\"dialog__desc\" id={descId}>\n {description}\n </p>\n )}\n </div>\n {dismissible && (\n <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n </button>\n )}\n </header>\n\n <div className=\"dialog__body\" ref={bodyRef}>\n {children}\n </div>\n\n {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n </section>\n );\n}\n\nexport function Dialog({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n trigger = null,\n title,\n description = null,\n size = 'md',\n tone = 'default',\n icon = null,\n dismissible = true,\n footer = null,\n children,\n id,\n htmlProps,\n animation,\n}: DialogProps) {\n const autoId = useId();\n const panelId = id || 'dialog-' + autoId;\n const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n const triggerRef = useRef<HTMLElement>(null);\n const close = () => setOpen(false);\n\n const timings = resolveMotionTiming(animation, DIALOG_TIMING);\n\n return (\n <Fragment>\n {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n <OverlayPortal>\n <Presence>\n {open && (\n <ModalShell\n key=\"dialog\"\n animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}\n exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}\n layerClass=\"overlay-layer--dialog\"\n panelClass=\"overlay-panel--dialog\"\n panelId={panelId}\n dismissible={dismissible}\n requestClose={close}\n >\n <DialogSurface\n panelId={panelId}\n size={size}\n tone={tone}\n icon={icon}\n title={title}\n description={description}\n dismissible={dismissible}\n footerContent={typeof footer === 'function' ? footer(close) : footer}\n requestClose={close}\n htmlProps={htmlProps}\n >\n {children}\n </DialogSurface>\n </ModalShell>\n )}\n </Presence>\n </OverlayPortal>\n </Fragment>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIALOG_TIMING = {\n open: { duration: 'slow', ease: 'entrance' },\n close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface DialogProps {\n /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n open?: boolean;\n /** Initial open 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 /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */\n trigger?: ReactElement | null;\n /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n title?: ReactNode;\n /** Subtext under the title - wired to `aria-describedby`. @default null */\n description?: ReactNode;\n /** Panel width. @default 'md' */\n size?: 'sm' | 'md' | 'lg';\n /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n tone?: 'default' | 'danger';\n /** Your own icon node for the header badge (alert dialogs). */\n icon?: ReactNode;\n /** Close button + backdrop/Esc dismissal. Default true. */\n dismissible?: boolean;\n /** Center 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 /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n footer?: ReactNode | ((close: () => void) => ReactNode);\n /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n children?: ReactNode;\n /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n * Auto-generated when omitted. */\n id?: string;\n /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n panelId: string;\n size: 'sm' | 'md' | 'lg';\n tone: 'default' | 'danger';\n icon: ReactNode;\n title: ReactNode;\n description: ReactNode;\n dismissible: boolean;\n footerContent: ReactNode;\n requestClose: () => void;\n htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n children?: ReactNode;\n}\n\nfunction DialogSurface({\n panelId,\n size,\n tone,\n icon,\n title,\n description,\n dismissible,\n footerContent,\n requestClose,\n htmlProps,\n children,\n}: DialogSurfaceProps) {\n const bodyRef = useRef<HTMLDivElement>(null);\n const titleId = panelId + '-title';\n const descId = panelId + '-desc';\n\n useScrollEdges(bodyRef, (edges, el) => {\n el.toggleAttribute('data-scroll-top', edges.top);\n el.toggleAttribute('data-scroll-bottom', edges.bottom);\n });\n\n return (\n <section\n {...htmlProps}\n className={cx('dialog', htmlProps?.className)}\n role=\"dialog\"\n aria-modal=\"true\"\n data-size={size === 'md' ? undefined : size}\n data-tone={tone === 'default' ? undefined : tone}\n aria-labelledby={title ? titleId : undefined}\n aria-describedby={description ? descId : undefined}\n >\n {(icon || title || description || dismissible) && (\n <header className=\"dialog__header\">\n {icon && (\n <span className=\"dialog__icon\">\n <IconSlot size=\"md\">{icon}</IconSlot>\n </span>\n )}\n <div className=\"dialog__heading\">\n {title && (\n <h2 className=\"dialog__title\" id={titleId}>\n {title}\n </h2>\n )}\n {description && (\n <p className=\"dialog__desc\" id={descId}>\n {description}\n </p>\n )}\n </div>\n {dismissible && (\n <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n </button>\n )}\n </header>\n )}\n\n <div className=\"dialog__body\" ref={bodyRef}>\n {children}\n </div>\n\n {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n </section>\n );\n}\n\nexport function Dialog({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n trigger = null,\n title,\n description = null,\n size = 'md',\n tone = 'default',\n icon = null,\n dismissible = true,\n container = null,\n footer = null,\n children,\n id,\n htmlProps,\n animation,\n}: DialogProps) {\n const autoId = useId();\n const panelId = id || 'dialog-' + autoId;\n const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n const triggerRef = useRef<HTMLElement>(null);\n const close = () => setOpen(false);\n\n const timings = resolveMotionTiming(animation, DIALOG_TIMING);\n\n return (\n <Fragment>\n {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n <OverlayPortal container={container}>\n <Presence>\n {open && (\n <ModalShell\n key=\"dialog\"\n animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}\n exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}\n layerClass=\"overlay-layer--dialog\"\n panelClass=\"overlay-panel--dialog\"\n panelId={panelId}\n dismissible={dismissible}\n container={container}\n requestClose={close}\n >\n <DialogSurface\n panelId={panelId}\n size={size}\n tone={tone}\n icon={icon}\n title={title}\n description={description}\n dismissible={dismissible}\n footerContent={typeof footer === 'function' ? footer(close) : footer}\n requestClose={close}\n htmlProps={htmlProps}\n >\n {children}\n </DialogSurface>\n </ModalShell>\n )}\n </Presence>\n </OverlayPortal>\n </Fragment>\n );\n}\n"]}
|
package/dist/modal.css
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* modal.css - the unpainted modal surface: the shell layer centers the panel and
|
|
2
|
+
constrains it to the layer box. Everything else is the consumer's paint. */
|
|
3
|
+
.overlay-layer--modal {
|
|
4
|
+
place-items: center;
|
|
5
|
+
}
|
|
6
|
+
.overlay-panel--modal {
|
|
7
|
+
max-width: 100%;
|
|
8
|
+
max-height: 100%;
|
|
9
|
+
}
|
package/dist/modal.d.ts
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactElement, HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
|
|
4
|
+
import { D as DataAttributes } from './dom-props-C0jrllBw.js';
|
|
5
|
+
import './motion-scale-Canq4stZ.js';
|
|
6
|
+
|
|
7
|
+
interface ModalProps {
|
|
8
|
+
/** Controlled open state. Omit to stay uncontrolled. */
|
|
9
|
+
open?: boolean;
|
|
10
|
+
/** Initial state when uncontrolled. Default false. */
|
|
11
|
+
defaultOpen?: boolean;
|
|
12
|
+
/** Fires whenever the open state changes. Pair with `open` for controlled use. */
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
/** Cloned to open the modal on click. */
|
|
15
|
+
trigger?: ReactElement | null;
|
|
16
|
+
/** Scrim/Esc dismissal. Default true. */
|
|
17
|
+
dismissible?: boolean;
|
|
18
|
+
/** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
|
|
19
|
+
* Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
|
|
20
|
+
container?: HTMLElement | null;
|
|
21
|
+
/** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
|
|
22
|
+
id?: string;
|
|
23
|
+
/** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.
|
|
24
|
+
* Centered by default; `width: 100%; height: 100%` makes it full-bleed. */
|
|
25
|
+
htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
|
|
26
|
+
/** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */
|
|
27
|
+
layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
|
|
28
|
+
/** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
|
|
29
|
+
animation?: DisableableAnimation;
|
|
30
|
+
/** The ENTIRE surface - paint AND semantics (`role="dialog"`, a label). Nothing is painted for you. */
|
|
31
|
+
children: ReactNode;
|
|
32
|
+
}
|
|
33
|
+
declare function Modal({ open: controlledOpen, defaultOpen, onOpenChange, trigger, dismissible, container, id, htmlProps, layerProps, animation, children, }: ModalProps): react.JSX.Element;
|
|
34
|
+
|
|
35
|
+
export { Modal, type ModalProps };
|
package/dist/modal.js
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
'use client';import { ModalShell } from './chunk-K5X2GCXU.js';
|
|
2
|
+
import './chunk-ZCOUPPTI.js';
|
|
3
|
+
import { ovCloneTrigger, OverlayPortal } from './chunk-RCONNA7I.js';
|
|
4
|
+
import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
|
|
5
|
+
import { Presence } from './chunk-356HZMT4.js';
|
|
6
|
+
import './chunk-XWUWYSCT.js';
|
|
7
|
+
import './chunk-YGCVWGUG.js';
|
|
8
|
+
import { useControllable } from './chunk-MMRIQNEN.js';
|
|
9
|
+
import './chunk-S5ZTZANS.js';
|
|
10
|
+
import './chunk-VTJTGVZZ.js';
|
|
11
|
+
import './chunk-QGNC7LH5.js';
|
|
12
|
+
import './modal.css';
|
|
13
|
+
import { useRef, useId, Fragment } from 'react';
|
|
14
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
15
|
+
|
|
16
|
+
var MODAL_TIMING = {
|
|
17
|
+
open: { duration: "slow", ease: "entrance" },
|
|
18
|
+
close: { duration: "base", ease: "standard" }
|
|
19
|
+
};
|
|
20
|
+
function Modal({
|
|
21
|
+
open: controlledOpen,
|
|
22
|
+
defaultOpen = false,
|
|
23
|
+
onOpenChange,
|
|
24
|
+
trigger = null,
|
|
25
|
+
dismissible = true,
|
|
26
|
+
container = null,
|
|
27
|
+
id,
|
|
28
|
+
htmlProps,
|
|
29
|
+
layerProps,
|
|
30
|
+
animation,
|
|
31
|
+
children
|
|
32
|
+
}) {
|
|
33
|
+
const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
|
|
34
|
+
const triggerRef = useRef(null);
|
|
35
|
+
const autoId = useId();
|
|
36
|
+
const panelId = id || "modal-" + autoId;
|
|
37
|
+
const close = () => setOpen(false);
|
|
38
|
+
const timings = resolveMotionTiming(animation, MODAL_TIMING);
|
|
39
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
40
|
+
ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
|
|
41
|
+
/* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
|
|
42
|
+
ModalShell,
|
|
43
|
+
{
|
|
44
|
+
animate: { opacity: [0, 1], scale: [0.98, 1], timing: timings.open },
|
|
45
|
+
exit: { opacity: [0], scale: [0.98], timing: timings.close },
|
|
46
|
+
layerClass: "overlay-layer--modal",
|
|
47
|
+
panelClass: "overlay-panel--modal",
|
|
48
|
+
panelId,
|
|
49
|
+
dismissible,
|
|
50
|
+
container,
|
|
51
|
+
requestClose: close,
|
|
52
|
+
panelProps: htmlProps,
|
|
53
|
+
layerProps,
|
|
54
|
+
children
|
|
55
|
+
},
|
|
56
|
+
"modal"
|
|
57
|
+
) }) })
|
|
58
|
+
] });
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { Modal };
|
|
62
|
+
//# sourceMappingURL=modal.js.map
|
|
63
|
+
//# sourceMappingURL=modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/composites/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAYA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA;AACnC,CAAA;AAiCO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,EAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,QAAA,GAAW,MAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,YAAY,CAAA;AAE3D,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA,EAAG,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,CAAA;AAAA,oBACxG,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAC,GAAG,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAA,EAAM,CAAC,CAAA,EAAG,MAAA,EAAQ,QAAQ,IAAA,EAAK;AAAA,QACnE,IAAA,EAAM,EAAE,OAAA,EAAS,CAAC,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAI,CAAA,EAAG,MAAA,EAAQ,OAAA,CAAQ,KAAA,EAAM;AAAA,QAC3D,UAAA,EAAW,sBAAA;AAAA,QACX,UAAA,EAAW,sBAAA;AAAA,QACX,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAY,SAAA;AAAA,QACZ,UAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MAZG;AAAA,OAeV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"modal.js","sourcesContent":["'use client';\n\nimport './modal.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport type { DataAttributes } from '../../../dom-props';\n\nconst MODAL_TIMING = {\n open: { duration: 'slow', ease: 'entrance' },\n close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface ModalProps {\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 modal on click. */\n trigger?: ReactElement | null;\n\n /** Scrim/Esc dismissal. Default true. */\n dismissible?: boolean;\n\n /** Mount 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 panel - this is where your paint goes.\n * Centered by default; `width: 100%; height: 100%` makes it full-bleed. */\n htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */\n layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n animation?: DisableableAnimation;\n /** The ENTIRE surface - paint AND semantics (`role=\"dialog\"`, a label). Nothing is painted for you. */\n children: ReactNode;\n}\n\nexport function Modal({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n trigger = null,\n dismissible = true,\n container = null,\n id,\n htmlProps,\n layerProps,\n animation,\n children,\n}: ModalProps) {\n const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n const triggerRef = useRef<HTMLElement>(null);\n const autoId = useId();\n const panelId = id || 'modal-' + autoId;\n const close = () => setOpen(false);\n const timings = resolveMotionTiming(animation, MODAL_TIMING);\n\n return (\n <Fragment>\n {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n <OverlayPortal container={container}>\n <Presence>\n {open && (\n <ModalShell\n key=\"modal\"\n animate={{ opacity: [0, 1], scale: [0.98, 1], timing: timings.open }}\n exit={{ opacity: [0], scale: [0.98], timing: timings.close }}\n layerClass=\"overlay-layer--modal\"\n panelClass=\"overlay-panel--modal\"\n panelId={panelId}\n dismissible={dismissible}\n container={container}\n requestClose={close}\n panelProps={htmlProps}\n layerProps={layerProps}\n >\n {children}\n </ModalShell>\n )}\n </Presence>\n </OverlayPortal>\n </Fragment>\n );\n}\n"]}
|
package/dist/motion-devtools.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';import { clock } from './chunk-YGCVWGUG.js';
|
|
2
|
-
import { Button } from './chunk-
|
|
2
|
+
import { Button } from './chunk-2F5PITAO.js';
|
|
3
3
|
import { Checkbox } from './chunk-QDK66S4G.js';
|
|
4
4
|
import './chunk-NNXJCLTV.js';
|
|
5
5
|
import { Collapse } from './chunk-7SZCJ7WI.js';
|
package/dist/multi-select.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-
|
|
2
|
-
import './chunk-
|
|
3
|
-
import './chunk-
|
|
1
|
+
'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-OMHQ4U4J.js';
|
|
2
|
+
import './chunk-62P3KD57.js';
|
|
3
|
+
import './chunk-RCONNA7I.js';
|
|
4
4
|
import './chunk-UE63OOVG.js';
|
|
5
5
|
import './chunk-WM5J5TDI.js';
|
|
6
6
|
import './chunk-NEF5XAHG.js';
|
|
@@ -11,7 +11,7 @@ import './chunk-2ERBBFZS.js';
|
|
|
11
11
|
import './chunk-3SBCBYB7.js';
|
|
12
12
|
import { useControllable } from './chunk-MMRIQNEN.js';
|
|
13
13
|
import './chunk-S5ZTZANS.js';
|
|
14
|
-
import './chunk-
|
|
14
|
+
import './chunk-2F5PITAO.js';
|
|
15
15
|
import { CheckGlyph } from './chunk-NNXJCLTV.js';
|
|
16
16
|
import './chunk-7SZCJ7WI.js';
|
|
17
17
|
import './chunk-VTJTGVZZ.js';
|