@mieweb/ui 0.10.0-dev.19 → 0.10.0-dev.20
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/dist/{chunk-QR7EG7YH.js → chunk-2ABWFQQH.js} +3 -3
- package/dist/{chunk-QR7EG7YH.js.map → chunk-2ABWFQQH.js.map} +1 -1
- package/dist/{chunk-GVBHDRC7.cjs → chunk-6N6LIAUJ.cjs} +6 -6
- package/dist/{chunk-GVBHDRC7.cjs.map → chunk-6N6LIAUJ.cjs.map} +1 -1
- package/dist/{chunk-VILW53UZ.js → chunk-BIQ7GSO2.js} +3 -3
- package/dist/{chunk-VILW53UZ.js.map → chunk-BIQ7GSO2.js.map} +1 -1
- package/dist/{chunk-XI34EGK5.cjs → chunk-CPPUT74P.cjs} +9 -9
- package/dist/{chunk-XI34EGK5.cjs.map → chunk-CPPUT74P.cjs.map} +1 -1
- package/dist/{chunk-5JJ2DAE4.js → chunk-ENMXHZNE.js} +3 -3
- package/dist/{chunk-5JJ2DAE4.js.map → chunk-ENMXHZNE.js.map} +1 -1
- package/dist/{chunk-XCP454Q6.js → chunk-F4N67NAF.js} +12 -3
- package/dist/chunk-F4N67NAF.js.map +1 -0
- package/dist/{chunk-OYBJQBLO.js → chunk-G45FBKKV.js} +3 -3
- package/dist/{chunk-OYBJQBLO.js.map → chunk-G45FBKKV.js.map} +1 -1
- package/dist/{chunk-NUQSQRG3.cjs → chunk-HQ4CGVWX.cjs} +27 -27
- package/dist/{chunk-NUQSQRG3.cjs.map → chunk-HQ4CGVWX.cjs.map} +1 -1
- package/dist/{chunk-NV2CWBI2.cjs → chunk-IEY3ZJIT.cjs} +12 -3
- package/dist/chunk-IEY3ZJIT.cjs.map +1 -0
- package/dist/{chunk-K2K2HP35.js → chunk-IH55BEB3.js} +3 -3
- package/dist/{chunk-K2K2HP35.js.map → chunk-IH55BEB3.js.map} +1 -1
- package/dist/{chunk-PEUCQ2YP.cjs → chunk-LJZKEMAH.cjs} +9 -9
- package/dist/{chunk-PEUCQ2YP.cjs.map → chunk-LJZKEMAH.cjs.map} +1 -1
- package/dist/{chunk-673GMFA6.js → chunk-MZNCLXXU.js} +3 -3
- package/dist/{chunk-673GMFA6.js.map → chunk-MZNCLXXU.js.map} +1 -1
- package/dist/{chunk-X5KAO35W.cjs → chunk-R2O72G6Z.cjs} +7 -7
- package/dist/{chunk-X5KAO35W.cjs.map → chunk-R2O72G6Z.cjs.map} +1 -1
- package/dist/{chunk-VPWJCJCX.cjs → chunk-S45EERW3.cjs} +5 -5
- package/dist/{chunk-VPWJCJCX.cjs.map → chunk-S45EERW3.cjs.map} +1 -1
- package/dist/{chunk-SVXWO37F.cjs → chunk-SQ2D7AON.cjs} +21 -21
- package/dist/{chunk-SVXWO37F.cjs.map → chunk-SQ2D7AON.cjs.map} +1 -1
- package/dist/{chunk-P2CA3XGI.js → chunk-SYRLCTDV.js} +3 -3
- package/dist/{chunk-P2CA3XGI.js.map → chunk-SYRLCTDV.js.map} +1 -1
- package/dist/{chunk-7ZDPD5ZX.cjs → chunk-T4L7Q5FA.cjs} +7 -7
- package/dist/{chunk-7ZDPD5ZX.cjs.map → chunk-T4L7Q5FA.cjs.map} +1 -1
- package/dist/{chunk-ZGRCSNPK.js → chunk-TF7YWJHU.js} +3 -3
- package/dist/{chunk-ZGRCSNPK.js.map → chunk-TF7YWJHU.js.map} +1 -1
- package/dist/{chunk-YIV4Y4SK.js → chunk-UBSH27C2.js} +3 -3
- package/dist/{chunk-YIV4Y4SK.js.map → chunk-UBSH27C2.js.map} +1 -1
- package/dist/{chunk-SGFYA22I.cjs → chunk-VYPPQPSZ.cjs} +7 -7
- package/dist/{chunk-SGFYA22I.cjs.map → chunk-VYPPQPSZ.cjs.map} +1 -1
- package/dist/{chunk-5FU7LVZF.cjs → chunk-Z4JR23IB.cjs} +9 -9
- package/dist/{chunk-5FU7LVZF.cjs.map → chunk-Z4JR23IB.cjs.map} +1 -1
- package/dist/{chunk-CXEKSA7I.js → chunk-ZTW4KODY.js} +3 -3
- package/dist/{chunk-CXEKSA7I.js.map → chunk-ZTW4KODY.js.map} +1 -1
- package/dist/components/AlertDialog/index.cjs +4 -4
- package/dist/components/AlertDialog/index.js +3 -3
- package/dist/components/Collapsible/index.cjs +5 -5
- package/dist/components/Collapsible/index.js +2 -2
- package/dist/components/Dropdown/index.cjs +9 -9
- package/dist/components/Dropdown/index.js +2 -2
- package/dist/components/KeyboardShortcutsOverlay/index.cjs +5 -5
- package/dist/components/KeyboardShortcutsOverlay/index.js +3 -3
- package/dist/components/MediaEditor/index.cjs +8 -8
- package/dist/components/MediaEditor/index.js +3 -3
- package/dist/components/Modal/index.cjs +10 -10
- package/dist/components/Modal/index.js +2 -2
- package/dist/components/RichTextEditor/index.cjs +6 -6
- package/dist/components/RichTextEditor/index.js +3 -3
- package/dist/components/SuperChat/index.cjs +43 -21
- package/dist/components/SuperChat/index.cjs.map +1 -1
- package/dist/components/SuperChat/index.js +36 -14
- package/dist/components/SuperChat/index.js.map +1 -1
- package/dist/components/SuperChat/plugins/index.cjs +5 -5
- package/dist/components/SuperChat/plugins/index.js +4 -4
- package/dist/esheet.cjs +6 -6
- package/dist/esheet.js +3 -3
- package/dist/index.cjs +281 -281
- package/dist/index.js +18 -18
- package/dist/motion.cjs +7 -7
- package/dist/motion.js +2 -2
- package/package.json +1 -1
- package/dist/chunk-NV2CWBI2.cjs.map +0 -1
- package/dist/chunk-XCP454Q6.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkT4L7Q5FA_cjs = require('./chunk-T4L7Q5FA.cjs');
|
|
4
4
|
var chunkX6A27RGO_cjs = require('./chunk-X6A27RGO.cjs');
|
|
5
5
|
var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -28,7 +28,7 @@ function AlertDialog({
|
|
|
28
28
|
onAction?.();
|
|
29
29
|
};
|
|
30
30
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
31
|
-
|
|
31
|
+
chunkT4L7Q5FA_cjs.Modal,
|
|
32
32
|
{
|
|
33
33
|
open,
|
|
34
34
|
onOpenChange,
|
|
@@ -38,7 +38,7 @@ function AlertDialog({
|
|
|
38
38
|
className,
|
|
39
39
|
"aria-label": typeof title === "string" ? title : void 0,
|
|
40
40
|
children: [
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
41
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkT4L7Q5FA_cjs.ModalBody, { className: "px-6 py-5", children: [
|
|
42
42
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
43
43
|
"h2",
|
|
44
44
|
{
|
|
@@ -57,7 +57,7 @@ function AlertDialog({
|
|
|
57
57
|
),
|
|
58
58
|
children
|
|
59
59
|
] }),
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkT4L7Q5FA_cjs.ModalFooter, { children: [
|
|
61
61
|
!hideCancel && /* @__PURE__ */ jsxRuntime.jsx(chunkX6A27RGO_cjs.Button, { variant: "secondary", onClick: handleCancel, children: cancelLabel }),
|
|
62
62
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
63
63
|
chunkX6A27RGO_cjs.Button,
|
|
@@ -76,5 +76,5 @@ function AlertDialog({
|
|
|
76
76
|
AlertDialog.displayName = "AlertDialog";
|
|
77
77
|
|
|
78
78
|
exports.AlertDialog = AlertDialog;
|
|
79
|
-
//# sourceMappingURL=chunk-
|
|
80
|
-
//# sourceMappingURL=chunk-
|
|
79
|
+
//# sourceMappingURL=chunk-6N6LIAUJ.cjs.map
|
|
80
|
+
//# sourceMappingURL=chunk-6N6LIAUJ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/AlertDialog/AlertDialog.tsx"],"names":["jsxs","Modal","ModalBody","jsx","cn","ModalFooter","Button"],"mappings":";;;;;;;AAqDA,SAAS,WAAA,CAAY;AAAA,EACnB,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,WAAA,GAAc,UAAA;AAAA,EACd,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,cAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,IAAW;AACX,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,IAAW;AAAA,EACb,CAAA;AAEA,EAAA,uBACEA,eAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,mBAAA,EAAqB,KAAA;AAAA,MACrB,aAAA,EAAe,KAAA;AAAA,MACf,SAAA;AAAA,MACA,YAAA,EAAY,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,MAAA;AAAA,MAEhD,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,2BAAA,EAAA,EAAU,WAAU,WAAA,EACnB,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,oBAAA;AAAA,cACV,SAAA,EAAU,sCAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,WAAA,oBACCA,cAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,0BAAA;AAAA,cACV,SAAA,EAAWC,qBAAG,oCAAoC,CAAA;AAAA,cAEjD,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED;AAAA,SAAA,EACH,CAAA;AAAA,wCACCC,6BAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,CAAC,8BACAF,cAAA,CAACG,wBAAA,EAAA,EAAO,SAAQ,WAAA,EAAY,OAAA,EAAS,cAClC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,0BAEFH,cAAA;AAAA,YAACG,wBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,OAAA,KAAY,aAAA,GAAgB,QAAA,GAAW,SAAA;AAAA,cAChD,OAAA,EAAS,YAAA;AAAA,cACT,QAAA,EAAU,cAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/AlertDialog/AlertDialog.tsx"],"names":["jsxs","Modal","ModalBody","jsx","cn","ModalFooter","Button"],"mappings":";;;;;;;AAqDA,SAAS,WAAA,CAAY;AAAA,EACnB,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,WAAA,GAAc,UAAA;AAAA,EACd,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,cAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,IAAW;AACX,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,IAAW;AAAA,EACb,CAAA;AAEA,EAAA,uBACEA,eAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,mBAAA,EAAqB,KAAA;AAAA,MACrB,aAAA,EAAe,KAAA;AAAA,MACf,SAAA;AAAA,MACA,YAAA,EAAY,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,MAAA;AAAA,MAEhD,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,2BAAA,EAAA,EAAU,WAAU,WAAA,EACnB,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,oBAAA;AAAA,cACV,SAAA,EAAU,sCAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,WAAA,oBACCA,cAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,0BAAA;AAAA,cACV,SAAA,EAAWC,qBAAG,oCAAoC,CAAA;AAAA,cAEjD,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED;AAAA,SAAA,EACH,CAAA;AAAA,wCACCC,6BAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,CAAC,8BACAF,cAAA,CAACG,wBAAA,EAAA,EAAO,SAAQ,WAAA,EAAY,OAAA,EAAS,cAClC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,0BAEFH,cAAA;AAAA,YAACG,wBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,OAAA,KAAY,aAAA,GAAgB,QAAA,GAAW,SAAA;AAAA,cAChD,OAAA,EAAS,YAAA;AAAA,cACT,QAAA,EAAU,cAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-6N6LIAUJ.cjs","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\nimport { Modal, ModalBody, ModalFooter, type ModalProps } from '../Modal';\nimport { Button } from '../Button';\n\nexport interface AlertDialogProps extends Pick<\n ModalProps,\n 'open' | 'onOpenChange'\n> {\n /** Dialog title */\n title: React.ReactNode;\n /** Optional descriptive body text */\n description?: React.ReactNode;\n /** Custom body content (rendered below the description) */\n children?: React.ReactNode;\n /** Label for the cancel button (default \"Cancel\") */\n cancelLabel?: React.ReactNode;\n /** Label for the confirm/action button (default \"Continue\") */\n actionLabel?: React.ReactNode;\n /** Called when the action button is clicked */\n onAction?: () => void;\n /** Called when the cancel button is clicked */\n onCancel?: () => void;\n /** Visual emphasis for the action button */\n variant?: 'default' | 'destructive';\n /** Disables the action button */\n actionDisabled?: boolean;\n /** Hides the cancel button */\n hideCancel?: boolean;\n /** Additional class name for the dialog content */\n className?: string;\n}\n\n/**\n * A modal dialog that interrupts the user with important content and expects\n * a response. Built on top of {@link Modal}.\n *\n * Unlike a regular Modal, it does not close on overlay click or Escape by\n * default — the user must explicitly choose an action.\n *\n * @example\n * ```tsx\n * <AlertDialog\n * open={open}\n * onOpenChange={setOpen}\n * title=\"Delete case?\"\n * description=\"This action cannot be undone.\"\n * variant=\"destructive\"\n * actionLabel=\"Delete\"\n * onAction={handleDelete}\n * />\n * ```\n */\nfunction AlertDialog({\n open,\n onOpenChange,\n title,\n description,\n children,\n cancelLabel = 'Cancel',\n actionLabel = 'Continue',\n onAction,\n onCancel,\n variant = 'default',\n actionDisabled,\n hideCancel,\n className,\n}: AlertDialogProps) {\n const handleCancel = () => {\n onCancel?.();\n onOpenChange(false);\n };\n\n const handleAction = () => {\n onAction?.();\n };\n\n return (\n <Modal\n open={open}\n onOpenChange={onOpenChange}\n size=\"sm\"\n closeOnOverlayClick={false}\n closeOnEscape={false}\n className={className}\n aria-label={typeof title === 'string' ? title : undefined}\n >\n <ModalBody className=\"px-6 py-5\">\n <h2\n data-slot=\"alert-dialog-title\"\n className=\"text-lg font-semibold tracking-tight\"\n >\n {title}\n </h2>\n {description && (\n <p\n data-slot=\"alert-dialog-description\"\n className={cn('text-muted-foreground mt-2 text-sm')}\n >\n {description}\n </p>\n )}\n {children}\n </ModalBody>\n <ModalFooter>\n {!hideCancel && (\n <Button variant=\"secondary\" onClick={handleCancel}>\n {cancelLabel}\n </Button>\n )}\n <Button\n variant={variant === 'destructive' ? 'danger' : 'primary'}\n onClick={handleAction}\n disabled={actionDisabled}\n >\n {actionLabel}\n </Button>\n </ModalFooter>\n </Modal>\n );\n}\n\nAlertDialog.displayName = 'AlertDialog';\n\nexport { AlertDialog };\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-
|
|
1
|
+
import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-ENMXHZNE.js';
|
|
2
2
|
import { cn } from './chunk-TQONQSJO.js';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Keyboard } from 'lucide-react';
|
|
@@ -101,5 +101,5 @@ function KeyboardShortcutsOverlay({
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
export { Kbd, KeyboardShortcutsOverlay };
|
|
104
|
-
//# sourceMappingURL=chunk-
|
|
105
|
-
//# sourceMappingURL=chunk-
|
|
104
|
+
//# sourceMappingURL=chunk-BIQ7GSO2.js.map
|
|
105
|
+
//# sourceMappingURL=chunk-BIQ7GSO2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/KeyboardShortcutsOverlay/KeyboardShortcutsOverlay.tsx"],"names":["Kbd","Fragment"],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/KeyboardShortcutsOverlay/KeyboardShortcutsOverlay.tsx"],"names":["Kbd","Fragment"],"mappings":"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","file":"chunk-BIQ7GSO2.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Keyboard } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalClose,\n ModalBody,\n ModalFooter,\n} from '../Modal';\n\n// =============================================================================\n// Kbd\n// =============================================================================\n\nexport type KbdProps = React.HTMLAttributes<HTMLElement>;\n\n/** A keyboard-key chip: `<Kbd>⌘K</Kbd>`. */\nexport const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(\n { className, ...props },\n ref\n) {\n return (\n <kbd\n ref={ref}\n className={cn(\n 'border-border bg-muted text-foreground rounded border px-1.5 py-0.5 font-mono text-[11px]',\n className\n )}\n {...props}\n />\n );\n});\n\n// =============================================================================\n// KeyboardShortcutsOverlay\n// =============================================================================\n\nexport interface ShortcutDef {\n /** Key or alternatives — `\"j\"`, `[\"j\", \"↓\"]`, `\"⌘K\"`. */\n keys: string | string[];\n description: string;\n}\n\nexport interface ShortcutGroup {\n title: string;\n shortcuts: ShortcutDef[];\n}\n\nexport interface KeyboardShortcutsOverlayProps {\n open: boolean;\n onClose: () => void;\n /** Flat list of shortcuts, or use `groups` for sectioned help. */\n shortcuts?: ShortcutDef[];\n /** Sectioned shortcuts with group headings. */\n groups?: ShortcutGroup[];\n title?: string;\n /** Footer hint. Pass `null` to hide it. */\n hint?: React.ReactNode | null;\n /** Joins key alternatives (default \"or\"), overridable for i18n. */\n alternativesLabel?: string;\n}\n\nfunction Keys({\n keys,\n alternativesLabel,\n}: {\n keys: string | string[];\n alternativesLabel: string;\n}) {\n const list = Array.isArray(keys) ? keys : keys.split(' / ');\n return (\n <span className=\"flex shrink-0 items-center gap-1\">\n {list.map((k, i) => (\n <React.Fragment key={`${k}-${i}`}>\n <Kbd>{k}</Kbd>\n {i < list.length - 1 && (\n <span className=\"text-muted-foreground mx-0.5 text-xs\">\n {alternativesLabel}\n </span>\n )}\n </React.Fragment>\n ))}\n </span>\n );\n}\n\nfunction ShortcutList({\n shortcuts,\n alternativesLabel,\n}: {\n shortcuts: ShortcutDef[];\n alternativesLabel: string;\n}) {\n return (\n <ul className=\"flex list-none flex-col gap-2 p-0\">\n {shortcuts.map((s) => (\n <li\n key={`${s.description}-${String(s.keys)}`}\n className=\"text-foreground flex items-center justify-between gap-4 text-sm\"\n >\n <span className=\"min-w-0\">{s.description}</span>\n <Keys keys={s.keys} alternativesLabel={alternativesLabel} />\n </li>\n ))}\n </ul>\n );\n}\n\n/**\n * The `?` keyboard-shortcuts help dialog: a list of shortcut rows\n * (optionally grouped) with `Kbd` chips for each key. Pairs with the\n * `useKeyboardShortcut` hook, which handles the binding — this component\n * only renders the help.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * useKeyboardShortcut('?', () => setOpen((v) => !v), {\n * modifiers: { shift: true },\n * });\n *\n * <KeyboardShortcutsOverlay\n * open={open}\n * onClose={() => setOpen(false)}\n * shortcuts={[\n * { keys: ['j', '↓'], description: 'Next record' },\n * { keys: '⌘K', description: 'Command palette' },\n * ]}\n * />\n * ```\n */\nexport function KeyboardShortcutsOverlay({\n open,\n onClose,\n shortcuts,\n groups,\n title = 'Keyboard shortcuts',\n hint,\n alternativesLabel = 'or',\n}: KeyboardShortcutsOverlayProps) {\n const defaultHint = (\n <>\n Press <Kbd>?</Kbd> anytime to toggle this help\n </>\n );\n const footer = hint === null ? null : (hint ?? defaultHint);\n\n return (\n <Modal\n open={open}\n onOpenChange={(o) => {\n if (!o) onClose();\n }}\n size=\"sm\"\n aria-label={title}\n >\n <ModalHeader>\n <ModalTitle className=\"flex items-center gap-2 text-sm\">\n <Keyboard aria-hidden=\"true\" className=\"text-primary-500 h-4 w-4\" />\n {title}\n </ModalTitle>\n <ModalClose />\n </ModalHeader>\n <ModalBody className=\"flex flex-col gap-4\">\n {shortcuts && (\n <ShortcutList\n shortcuts={shortcuts}\n alternativesLabel={alternativesLabel}\n />\n )}\n {groups?.map((group) => (\n <div key={group.title} className=\"flex flex-col gap-2\">\n <h3 className=\"text-muted-foreground text-xs font-semibold tracking-wide uppercase\">\n {group.title}\n </h3>\n <ShortcutList\n shortcuts={group.shortcuts}\n alternativesLabel={alternativesLabel}\n />\n </div>\n ))}\n </ModalBody>\n {footer && (\n <ModalFooter className=\"text-muted-foreground justify-center text-[11px]\">\n <span>{footer}</span>\n </ModalFooter>\n )}\n </Modal>\n );\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkT4L7Q5FA_cjs = require('./chunk-T4L7Q5FA.cjs');
|
|
4
4
|
var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var lucideReact = require('lucide-react');
|
|
@@ -81,7 +81,7 @@ function KeyboardShortcutsOverlay({
|
|
|
81
81
|
] });
|
|
82
82
|
const footer = hint === null ? null : hint ?? defaultHint;
|
|
83
83
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
84
|
-
|
|
84
|
+
chunkT4L7Q5FA_cjs.Modal,
|
|
85
85
|
{
|
|
86
86
|
open,
|
|
87
87
|
onOpenChange: (o) => {
|
|
@@ -90,14 +90,14 @@ function KeyboardShortcutsOverlay({
|
|
|
90
90
|
size: "sm",
|
|
91
91
|
"aria-label": title,
|
|
92
92
|
children: [
|
|
93
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
94
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
93
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkT4L7Q5FA_cjs.ModalHeader, { children: [
|
|
94
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkT4L7Q5FA_cjs.ModalTitle, { className: "flex items-center gap-2 text-sm", children: [
|
|
95
95
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { "aria-hidden": "true", className: "text-primary-500 h-4 w-4" }),
|
|
96
96
|
title
|
|
97
97
|
] }),
|
|
98
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkT4L7Q5FA_cjs.ModalClose, {})
|
|
99
99
|
] }),
|
|
100
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
100
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkT4L7Q5FA_cjs.ModalBody, { className: "flex flex-col gap-4", children: [
|
|
101
101
|
shortcuts && /* @__PURE__ */ jsxRuntime.jsx(
|
|
102
102
|
ShortcutList,
|
|
103
103
|
{
|
|
@@ -116,7 +116,7 @@ function KeyboardShortcutsOverlay({
|
|
|
116
116
|
)
|
|
117
117
|
] }, group.title))
|
|
118
118
|
] }),
|
|
119
|
-
footer && /* @__PURE__ */ jsxRuntime.jsx(
|
|
119
|
+
footer && /* @__PURE__ */ jsxRuntime.jsx(chunkT4L7Q5FA_cjs.ModalFooter, { className: "text-muted-foreground justify-center text-[11px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer }) })
|
|
120
120
|
]
|
|
121
121
|
}
|
|
122
122
|
);
|
|
@@ -124,5 +124,5 @@ function KeyboardShortcutsOverlay({
|
|
|
124
124
|
|
|
125
125
|
exports.Kbd = Kbd;
|
|
126
126
|
exports.KeyboardShortcutsOverlay = KeyboardShortcutsOverlay;
|
|
127
|
-
//# sourceMappingURL=chunk-
|
|
128
|
-
//# sourceMappingURL=chunk-
|
|
127
|
+
//# sourceMappingURL=chunk-CPPUT74P.cjs.map
|
|
128
|
+
//# sourceMappingURL=chunk-CPPUT74P.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/KeyboardShortcutsOverlay/KeyboardShortcutsOverlay.tsx"],"names":["React","Kbd","jsx","cn","jsxs","Fragment","Modal","ModalHeader","ModalTitle","Keyboard","ModalClose","ModalBody","ModalFooter"],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/KeyboardShortcutsOverlay/KeyboardShortcutsOverlay.tsx"],"names":["React","Kbd","jsx","cn","jsxs","Fragment","Modal","ModalHeader","ModalTitle","Keyboard","ModalClose","ModalBody","ModalFooter"],"mappings":"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","file":"chunk-CPPUT74P.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Keyboard } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalClose,\n ModalBody,\n ModalFooter,\n} from '../Modal';\n\n// =============================================================================\n// Kbd\n// =============================================================================\n\nexport type KbdProps = React.HTMLAttributes<HTMLElement>;\n\n/** A keyboard-key chip: `<Kbd>⌘K</Kbd>`. */\nexport const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(\n { className, ...props },\n ref\n) {\n return (\n <kbd\n ref={ref}\n className={cn(\n 'border-border bg-muted text-foreground rounded border px-1.5 py-0.5 font-mono text-[11px]',\n className\n )}\n {...props}\n />\n );\n});\n\n// =============================================================================\n// KeyboardShortcutsOverlay\n// =============================================================================\n\nexport interface ShortcutDef {\n /** Key or alternatives — `\"j\"`, `[\"j\", \"↓\"]`, `\"⌘K\"`. */\n keys: string | string[];\n description: string;\n}\n\nexport interface ShortcutGroup {\n title: string;\n shortcuts: ShortcutDef[];\n}\n\nexport interface KeyboardShortcutsOverlayProps {\n open: boolean;\n onClose: () => void;\n /** Flat list of shortcuts, or use `groups` for sectioned help. */\n shortcuts?: ShortcutDef[];\n /** Sectioned shortcuts with group headings. */\n groups?: ShortcutGroup[];\n title?: string;\n /** Footer hint. Pass `null` to hide it. */\n hint?: React.ReactNode | null;\n /** Joins key alternatives (default \"or\"), overridable for i18n. */\n alternativesLabel?: string;\n}\n\nfunction Keys({\n keys,\n alternativesLabel,\n}: {\n keys: string | string[];\n alternativesLabel: string;\n}) {\n const list = Array.isArray(keys) ? keys : keys.split(' / ');\n return (\n <span className=\"flex shrink-0 items-center gap-1\">\n {list.map((k, i) => (\n <React.Fragment key={`${k}-${i}`}>\n <Kbd>{k}</Kbd>\n {i < list.length - 1 && (\n <span className=\"text-muted-foreground mx-0.5 text-xs\">\n {alternativesLabel}\n </span>\n )}\n </React.Fragment>\n ))}\n </span>\n );\n}\n\nfunction ShortcutList({\n shortcuts,\n alternativesLabel,\n}: {\n shortcuts: ShortcutDef[];\n alternativesLabel: string;\n}) {\n return (\n <ul className=\"flex list-none flex-col gap-2 p-0\">\n {shortcuts.map((s) => (\n <li\n key={`${s.description}-${String(s.keys)}`}\n className=\"text-foreground flex items-center justify-between gap-4 text-sm\"\n >\n <span className=\"min-w-0\">{s.description}</span>\n <Keys keys={s.keys} alternativesLabel={alternativesLabel} />\n </li>\n ))}\n </ul>\n );\n}\n\n/**\n * The `?` keyboard-shortcuts help dialog: a list of shortcut rows\n * (optionally grouped) with `Kbd` chips for each key. Pairs with the\n * `useKeyboardShortcut` hook, which handles the binding — this component\n * only renders the help.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * useKeyboardShortcut('?', () => setOpen((v) => !v), {\n * modifiers: { shift: true },\n * });\n *\n * <KeyboardShortcutsOverlay\n * open={open}\n * onClose={() => setOpen(false)}\n * shortcuts={[\n * { keys: ['j', '↓'], description: 'Next record' },\n * { keys: '⌘K', description: 'Command palette' },\n * ]}\n * />\n * ```\n */\nexport function KeyboardShortcutsOverlay({\n open,\n onClose,\n shortcuts,\n groups,\n title = 'Keyboard shortcuts',\n hint,\n alternativesLabel = 'or',\n}: KeyboardShortcutsOverlayProps) {\n const defaultHint = (\n <>\n Press <Kbd>?</Kbd> anytime to toggle this help\n </>\n );\n const footer = hint === null ? null : (hint ?? defaultHint);\n\n return (\n <Modal\n open={open}\n onOpenChange={(o) => {\n if (!o) onClose();\n }}\n size=\"sm\"\n aria-label={title}\n >\n <ModalHeader>\n <ModalTitle className=\"flex items-center gap-2 text-sm\">\n <Keyboard aria-hidden=\"true\" className=\"text-primary-500 h-4 w-4\" />\n {title}\n </ModalTitle>\n <ModalClose />\n </ModalHeader>\n <ModalBody className=\"flex flex-col gap-4\">\n {shortcuts && (\n <ShortcutList\n shortcuts={shortcuts}\n alternativesLabel={alternativesLabel}\n />\n )}\n {groups?.map((group) => (\n <div key={group.title} className=\"flex flex-col gap-2\">\n <h3 className=\"text-muted-foreground text-xs font-semibold tracking-wide uppercase\">\n {group.title}\n </h3>\n <ShortcutList\n shortcuts={group.shortcuts}\n alternativesLabel={alternativesLabel}\n />\n </div>\n ))}\n </ModalBody>\n {footer && (\n <ModalFooter className=\"text-muted-foreground justify-center text-[11px]\">\n <span>{footer}</span>\n </ModalFooter>\n )}\n </Modal>\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useFocusTrap } from './chunk-4SMSH4OY.js';
|
|
2
2
|
import { useEscapeKey } from './chunk-T4ME7QCT.js';
|
|
3
3
|
import { isStorybookDocsMode } from './chunk-VSQF22GL.js';
|
|
4
|
-
import { useMotionRuntime, AnimatedPresence, Animated } from './chunk-
|
|
4
|
+
import { useMotionRuntime, AnimatedPresence, Animated } from './chunk-F4N67NAF.js';
|
|
5
5
|
import { cn } from './chunk-TQONQSJO.js';
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { cva } from 'class-variance-authority';
|
|
@@ -294,5 +294,5 @@ function CloseIcon() {
|
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants };
|
|
297
|
-
//# sourceMappingURL=chunk-
|
|
298
|
-
//# sourceMappingURL=chunk-
|
|
297
|
+
//# sourceMappingURL=chunk-ENMXHZNE.js.map
|
|
298
|
+
//# sourceMappingURL=chunk-ENMXHZNE.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-5JJ2DAE4.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { isStorybookDocsMode } from '../../utils/environment';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { Animated, AnimatedPresence, useMotionRuntime } from '../../motion';\n\n/**\n * Modal scroll lock state manager.\n * Uses a singleton pattern with ref-like storage to track open modals\n * and manage body scroll locking across multiple modal instances.\n * Includes reset capability for testing environments.\n */\nconst scrollLockState = {\n count: 0,\n originalOverflow: null as string | null,\n reset() {\n this.count = 0;\n this.originalOverflow = null;\n },\n};\n\n// Export for testing environments\nexport const __resetScrollLockState = () => scrollLockState.reset();\n\nconst modalOverlayVariants = cva(\n ['fixed inset-0', 'bg-black/50 backdrop-blur-sm'],\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\n/**\n * Entry keyframes for the CSS path only.\n *\n * Kept out of the `cva` base so they never run alongside the motion runtime —\n * both drive opacity and transform, and applied together they fight.\n *\n * Entry only: there is no CSS exit. The component unmounts the moment `open`\n * flips to false, so `data-state` is hardcoded `\"open\"` and closed keyframes\n * would be unreachable dead code. That missing exit is the clearest thing the\n * motion opt-in buys back.\n */\nconst MODAL_OVERLAY_FALLBACK_ANIMATION = 'animate-in fade-in-0';\n\nconst MODAL_CONTENT_FALLBACK_ANIMATION =\n 'duration-200 animate-in fade-in-0 zoom-in-95';\n\nconst modalContentVariants = cva(\n [\n 'relative w-full bg-card text-card-foreground',\n 'border border-border shadow-lg',\n // Full-screen on mobile, rounded on larger screens\n 'rounded-none sm:rounded-xl',\n 'flex flex-col',\n // Full viewport height on mobile, constrained on larger screens\n 'max-h-dvh sm:max-h-[calc(100dvh-2rem)]',\n 'min-h-dvh sm:min-h-0',\n // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),\n // make it participate in the flex column layout so overflow constraints work.\n '[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0',\n 'focus:outline-none',\n ],\n {\n variants: {\n size: {\n sm: 'sm:max-w-sm',\n md: 'sm:max-w-md',\n lg: 'sm:max-w-lg',\n xl: 'sm:max-w-xl',\n '2xl': 'sm:max-w-2xl',\n '3xl': 'sm:max-w-3xl',\n '4xl': 'sm:max-w-4xl',\n full: 'max-w-[calc(100vw-2rem)]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n /** Whether the modal is open */\n open: boolean;\n /** Callback when the modal should close */\n onOpenChange: (open: boolean) => void;\n /** Modal content */\n children: React.ReactNode;\n /** Whether to close when clicking the overlay */\n closeOnOverlayClick?: boolean;\n /** Whether to close when pressing Escape */\n closeOnEscape?: boolean;\n /** Additional class name for the modal content */\n className?: string;\n /** ID for the modal, used for accessibility */\n id?: string;\n /** Accessible label for the modal */\n 'aria-label'?: string;\n /** ID of the element that labels the modal */\n 'aria-labelledby'?: string;\n /** ID of the element that describes the modal */\n 'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n * <ModalHeader>\n * <ModalTitle>Confirm Action</ModalTitle>\n * <ModalClose />\n * </ModalHeader>\n * <ModalBody>\n * Are you sure you want to continue?\n * </ModalBody>\n * <ModalFooter>\n * <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button onClick={handleConfirm}>Confirm</Button>\n * </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n open,\n onOpenChange,\n children,\n size,\n closeOnOverlayClick = true,\n closeOnEscape = true,\n className,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n const generatedId = React.useId();\n const modalId = id || generatedId;\n\n /*\n * The dialog outlives `open`.\n *\n * With a motion runtime, `AnimatedPresence` keeps the subtree on screen until\n * its exit animation finishes. Guards keyed on `open` alone would therefore\n * release while a `role=\"dialog\" aria-modal=\"true\"` element is still visible:\n * Tab could reach the page behind it and body scrolling would resume under\n * it. `isGuarded` stays true until presence reports the exit is done.\n *\n * Only tracked when a runtime is actually animating. Without one the subtree\n * unmounts on the same frame, and `onExitComplete` would never fire to clear\n * the flag.\n */\n const runtime = useMotionRuntime();\n const animatesExit = Boolean(runtime?.enabled);\n const [isExiting, setIsExiting] = React.useState(false);\n const [prevOpen, setPrevOpen] = React.useState(open);\n\n // Derived synchronously during render (React's \"adjust state when props\n // change\" pattern), not in an effect. An effect runs after commit, which\n // would leave one committed frame with the dialog still on screen but\n // `isGuarded` false — the focus trap would tear down, restore focus, then\n // re-arm and yank focus into the closing dialog, with the scroll lock\n // flickering alongside. Setting state during render re-renders before\n // commit, so the guards never observe the gap.\n if (prevOpen !== open) {\n setPrevOpen(open);\n if (!open && animatesExit) {\n setIsExiting(true);\n }\n }\n\n // If the runtime disappears or is disabled mid-exit, `onExitComplete` will\n // never fire — the subtree is already gone. Without this reset the guards\n // (and the body scroll lock with them) would be held forever.\n React.useEffect(() => {\n if (!animatesExit && isExiting) {\n setIsExiting(false);\n }\n }, [animatesExit, isExiting]);\n\n const isGuarded = open || isExiting;\n\n // Focus trap. Typed as `HTMLElement` because the content element is supplied\n // by `Animated`, which is element-agnostic.\n const focusTrapRef = useFocusTrap<HTMLElement>(isGuarded);\n\n // Handle escape key\n useEscapeKey(() => {\n if (closeOnEscape && open) {\n onOpenChange(false);\n }\n }, open);\n\n // Handle overlay click\n const handleOverlayClick = React.useCallback(\n (e: React.MouseEvent) => {\n if (closeOnOverlayClick && e.target === e.currentTarget) {\n onOpenChange(false);\n }\n },\n [closeOnOverlayClick, onOpenChange]\n );\n\n // Prevent body scroll while the modal is on screen (handles multiple modals).\n // Keyed on `isGuarded`, not `open`, so scrolling does not resume underneath a\n // dialog that is still animating out.\n // Skip scroll lock in Storybook docs mode where multiple stories render inline\n React.useEffect(() => {\n // Skip scroll lock entirely in Storybook docs mode\n if (!isGuarded || isStorybookDocsMode()) {\n return undefined;\n }\n\n scrollLockState.count++;\n // Only capture and set overflow when first modal opens\n if (scrollLockState.count === 1) {\n scrollLockState.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n return () => {\n scrollLockState.count--;\n // Only restore overflow when last modal closes\n if (\n scrollLockState.count === 0 &&\n scrollLockState.originalOverflow !== null\n ) {\n document.body.style.overflow = scrollLockState.originalOverflow;\n scrollLockState.originalOverflow = null;\n }\n };\n }, [isGuarded]);\n\n return (\n <ModalContext.Provider\n value={{ onClose: () => onOpenChange(false), modalId }}\n >\n {/*\n The `open` check lives inside `AnimatedPresence` rather than as an early\n `return null` above. On the CSS path this is identical — the tree\n unmounts immediately. With a motion runtime the subtree is held on\n screen until the overlay and content finish their exit animations.\n */}\n <AnimatedPresence onExitComplete={() => setIsExiting(false)}>\n {open && (\n <div key=\"modal-root\" className=\"fixed inset-0 z-50\">\n {/* Overlay backdrop */}\n <Animated\n preset=\"overlay\"\n mode=\"presence\"\n className={cn(modalOverlayVariants())}\n fallbackClassName={MODAL_OVERLAY_FALLBACK_ANIMATION}\n data-state=\"open\"\n aria-hidden=\"true\"\n />\n {/* Scrollable centering container — click outside to close */}\n <div className=\"fixed inset-0 overflow-y-auto\">\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className=\"flex min-h-full items-center justify-center p-0 sm:p-4\"\n onClick={handleOverlayClick}\n >\n {/* Content */}\n <Animated\n ref={focusTrapRef}\n preset=\"modalContent\"\n mode=\"presence\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n aria-describedby={ariaDescribedBy}\n id={modalId}\n tabIndex={-1}\n data-state=\"open\"\n data-slot=\"modal\"\n className={cn(modalContentVariants({ size }), className)}\n fallbackClassName={MODAL_CONTENT_FALLBACK_ANIMATION}\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </Animated>\n </div>\n </div>\n </div>\n )}\n </AnimatedPresence>\n </ModalContext.Provider>\n );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n onClose: () => void;\n modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n undefined\n);\n\nfunction useModalContext() {\n const context = React.useContext(ModalContext);\n if (!context) {\n throw new Error('Modal components must be used within a Modal');\n }\n return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"modal-header\"\n className={cn(\n 'flex shrink-0 items-center justify-between',\n 'border-border border-b px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n ({ className, children, ...props }, ref) => {\n const { modalId } = useModalContext();\n return (\n <h2\n ref={ref}\n id={`${modalId}-title`}\n data-slot=\"modal-title\"\n className={cn(\n 'text-lg leading-none font-semibold tracking-tight',\n className\n )}\n {...props}\n >\n {children}\n </h2>\n );\n }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n ({ className, children, onClick, ...props }, ref) => {\n const { onClose } = useModalContext();\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) {\n onClose();\n }\n },\n [onClick, onClose]\n );\n\n return (\n <button\n ref={ref}\n type=\"button\"\n onClick={handleClick}\n data-slot=\"modal-close\"\n className={cn(\n 'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n 'text-muted-foreground hover:text-foreground',\n 'hover:bg-muted transition-colors',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n className\n )}\n aria-label=\"Close\"\n {...props}\n >\n {children || <CloseIcon />}\n </button>\n );\n }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"modal-body\"\n className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', className)}\n {...props}\n />\n )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"modal-footer\"\n className={cn(\n 'flex shrink-0 items-center justify-end gap-3',\n 'border-border border-t px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n );\n}\n\nexport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalClose,\n ModalBody,\n ModalFooter,\n modalContentVariants,\n modalOverlayVariants,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-ENMXHZNE.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { isStorybookDocsMode } from '../../utils/environment';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { Animated, AnimatedPresence, useMotionRuntime } from '../../motion';\n\n/**\n * Modal scroll lock state manager.\n * Uses a singleton pattern with ref-like storage to track open modals\n * and manage body scroll locking across multiple modal instances.\n * Includes reset capability for testing environments.\n */\nconst scrollLockState = {\n count: 0,\n originalOverflow: null as string | null,\n reset() {\n this.count = 0;\n this.originalOverflow = null;\n },\n};\n\n// Export for testing environments\nexport const __resetScrollLockState = () => scrollLockState.reset();\n\nconst modalOverlayVariants = cva(\n ['fixed inset-0', 'bg-black/50 backdrop-blur-sm'],\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\n/**\n * Entry keyframes for the CSS path only.\n *\n * Kept out of the `cva` base so they never run alongside the motion runtime —\n * both drive opacity and transform, and applied together they fight.\n *\n * Entry only: there is no CSS exit. The component unmounts the moment `open`\n * flips to false, so `data-state` is hardcoded `\"open\"` and closed keyframes\n * would be unreachable dead code. That missing exit is the clearest thing the\n * motion opt-in buys back.\n */\nconst MODAL_OVERLAY_FALLBACK_ANIMATION = 'animate-in fade-in-0';\n\nconst MODAL_CONTENT_FALLBACK_ANIMATION =\n 'duration-200 animate-in fade-in-0 zoom-in-95';\n\nconst modalContentVariants = cva(\n [\n 'relative w-full bg-card text-card-foreground',\n 'border border-border shadow-lg',\n // Full-screen on mobile, rounded on larger screens\n 'rounded-none sm:rounded-xl',\n 'flex flex-col',\n // Full viewport height on mobile, constrained on larger screens\n 'max-h-dvh sm:max-h-[calc(100dvh-2rem)]',\n 'min-h-dvh sm:min-h-0',\n // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),\n // make it participate in the flex column layout so overflow constraints work.\n '[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0',\n 'focus:outline-none',\n ],\n {\n variants: {\n size: {\n sm: 'sm:max-w-sm',\n md: 'sm:max-w-md',\n lg: 'sm:max-w-lg',\n xl: 'sm:max-w-xl',\n '2xl': 'sm:max-w-2xl',\n '3xl': 'sm:max-w-3xl',\n '4xl': 'sm:max-w-4xl',\n full: 'max-w-[calc(100vw-2rem)]',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n /** Whether the modal is open */\n open: boolean;\n /** Callback when the modal should close */\n onOpenChange: (open: boolean) => void;\n /** Modal content */\n children: React.ReactNode;\n /** Whether to close when clicking the overlay */\n closeOnOverlayClick?: boolean;\n /** Whether to close when pressing Escape */\n closeOnEscape?: boolean;\n /** Additional class name for the modal content */\n className?: string;\n /** ID for the modal, used for accessibility */\n id?: string;\n /** Accessible label for the modal */\n 'aria-label'?: string;\n /** ID of the element that labels the modal */\n 'aria-labelledby'?: string;\n /** ID of the element that describes the modal */\n 'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n * <ModalHeader>\n * <ModalTitle>Confirm Action</ModalTitle>\n * <ModalClose />\n * </ModalHeader>\n * <ModalBody>\n * Are you sure you want to continue?\n * </ModalBody>\n * <ModalFooter>\n * <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button onClick={handleConfirm}>Confirm</Button>\n * </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n open,\n onOpenChange,\n children,\n size,\n closeOnOverlayClick = true,\n closeOnEscape = true,\n className,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n const generatedId = React.useId();\n const modalId = id || generatedId;\n\n /*\n * The dialog outlives `open`.\n *\n * With a motion runtime, `AnimatedPresence` keeps the subtree on screen until\n * its exit animation finishes. Guards keyed on `open` alone would therefore\n * release while a `role=\"dialog\" aria-modal=\"true\"` element is still visible:\n * Tab could reach the page behind it and body scrolling would resume under\n * it. `isGuarded` stays true until presence reports the exit is done.\n *\n * Only tracked when a runtime is actually animating. Without one the subtree\n * unmounts on the same frame, and `onExitComplete` would never fire to clear\n * the flag.\n */\n const runtime = useMotionRuntime();\n const animatesExit = Boolean(runtime?.enabled);\n const [isExiting, setIsExiting] = React.useState(false);\n const [prevOpen, setPrevOpen] = React.useState(open);\n\n // Derived synchronously during render (React's \"adjust state when props\n // change\" pattern), not in an effect. An effect runs after commit, which\n // would leave one committed frame with the dialog still on screen but\n // `isGuarded` false — the focus trap would tear down, restore focus, then\n // re-arm and yank focus into the closing dialog, with the scroll lock\n // flickering alongside. Setting state during render re-renders before\n // commit, so the guards never observe the gap.\n if (prevOpen !== open) {\n setPrevOpen(open);\n if (!open && animatesExit) {\n setIsExiting(true);\n }\n }\n\n // If the runtime disappears or is disabled mid-exit, `onExitComplete` will\n // never fire — the subtree is already gone. Without this reset the guards\n // (and the body scroll lock with them) would be held forever.\n React.useEffect(() => {\n if (!animatesExit && isExiting) {\n setIsExiting(false);\n }\n }, [animatesExit, isExiting]);\n\n const isGuarded = open || isExiting;\n\n // Focus trap. Typed as `HTMLElement` because the content element is supplied\n // by `Animated`, which is element-agnostic.\n const focusTrapRef = useFocusTrap<HTMLElement>(isGuarded);\n\n // Handle escape key\n useEscapeKey(() => {\n if (closeOnEscape && open) {\n onOpenChange(false);\n }\n }, open);\n\n // Handle overlay click\n const handleOverlayClick = React.useCallback(\n (e: React.MouseEvent) => {\n if (closeOnOverlayClick && e.target === e.currentTarget) {\n onOpenChange(false);\n }\n },\n [closeOnOverlayClick, onOpenChange]\n );\n\n // Prevent body scroll while the modal is on screen (handles multiple modals).\n // Keyed on `isGuarded`, not `open`, so scrolling does not resume underneath a\n // dialog that is still animating out.\n // Skip scroll lock in Storybook docs mode where multiple stories render inline\n React.useEffect(() => {\n // Skip scroll lock entirely in Storybook docs mode\n if (!isGuarded || isStorybookDocsMode()) {\n return undefined;\n }\n\n scrollLockState.count++;\n // Only capture and set overflow when first modal opens\n if (scrollLockState.count === 1) {\n scrollLockState.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n return () => {\n scrollLockState.count--;\n // Only restore overflow when last modal closes\n if (\n scrollLockState.count === 0 &&\n scrollLockState.originalOverflow !== null\n ) {\n document.body.style.overflow = scrollLockState.originalOverflow;\n scrollLockState.originalOverflow = null;\n }\n };\n }, [isGuarded]);\n\n return (\n <ModalContext.Provider\n value={{ onClose: () => onOpenChange(false), modalId }}\n >\n {/*\n The `open` check lives inside `AnimatedPresence` rather than as an early\n `return null` above. On the CSS path this is identical — the tree\n unmounts immediately. With a motion runtime the subtree is held on\n screen until the overlay and content finish their exit animations.\n */}\n <AnimatedPresence onExitComplete={() => setIsExiting(false)}>\n {open && (\n <div key=\"modal-root\" className=\"fixed inset-0 z-50\">\n {/* Overlay backdrop */}\n <Animated\n preset=\"overlay\"\n mode=\"presence\"\n className={cn(modalOverlayVariants())}\n fallbackClassName={MODAL_OVERLAY_FALLBACK_ANIMATION}\n data-state=\"open\"\n aria-hidden=\"true\"\n />\n {/* Scrollable centering container — click outside to close */}\n <div className=\"fixed inset-0 overflow-y-auto\">\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className=\"flex min-h-full items-center justify-center p-0 sm:p-4\"\n onClick={handleOverlayClick}\n >\n {/* Content */}\n <Animated\n ref={focusTrapRef}\n preset=\"modalContent\"\n mode=\"presence\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n aria-describedby={ariaDescribedBy}\n id={modalId}\n tabIndex={-1}\n data-state=\"open\"\n data-slot=\"modal\"\n className={cn(modalContentVariants({ size }), className)}\n fallbackClassName={MODAL_CONTENT_FALLBACK_ANIMATION}\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </Animated>\n </div>\n </div>\n </div>\n )}\n </AnimatedPresence>\n </ModalContext.Provider>\n );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n onClose: () => void;\n modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n undefined\n);\n\nfunction useModalContext() {\n const context = React.useContext(ModalContext);\n if (!context) {\n throw new Error('Modal components must be used within a Modal');\n }\n return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"modal-header\"\n className={cn(\n 'flex shrink-0 items-center justify-between',\n 'border-border border-b px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n ({ className, children, ...props }, ref) => {\n const { modalId } = useModalContext();\n return (\n <h2\n ref={ref}\n id={`${modalId}-title`}\n data-slot=\"modal-title\"\n className={cn(\n 'text-lg leading-none font-semibold tracking-tight',\n className\n )}\n {...props}\n >\n {children}\n </h2>\n );\n }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n ({ className, children, onClick, ...props }, ref) => {\n const { onClose } = useModalContext();\n\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n if (!e.defaultPrevented) {\n onClose();\n }\n },\n [onClick, onClose]\n );\n\n return (\n <button\n ref={ref}\n type=\"button\"\n onClick={handleClick}\n data-slot=\"modal-close\"\n className={cn(\n 'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n 'text-muted-foreground hover:text-foreground',\n 'hover:bg-muted transition-colors',\n 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n className\n )}\n aria-label=\"Close\"\n {...props}\n >\n {children || <CloseIcon />}\n </button>\n );\n }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"modal-body\"\n className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', className)}\n {...props}\n />\n )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"modal-footer\"\n className={cn(\n 'flex shrink-0 items-center justify-end gap-3',\n 'border-border border-t px-6 py-4',\n className\n )}\n {...props}\n />\n )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n );\n}\n\nexport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalClose,\n ModalBody,\n ModalFooter,\n modalContentVariants,\n modalOverlayVariants,\n};\n"]}
|
|
@@ -178,7 +178,16 @@ var motionPresets = {
|
|
|
178
178
|
// `times` front-loads the overshoot so it reads as a pop rather than an
|
|
179
179
|
// even swell. Keyframe arrays need a duration-based tween; a spring has no
|
|
180
180
|
// way to run through intermediate values.
|
|
181
|
-
|
|
181
|
+
//
|
|
182
|
+
// `times` is scoped to `scale` on purpose. At the top level it also
|
|
183
|
+
// applies to `opacity`, whose two-value tween then gets three time stops:
|
|
184
|
+
// it overshoots to 1 early, falls back toward 0, and snaps to 1 at the end,
|
|
185
|
+
// so the badge flickers instead of fading in.
|
|
186
|
+
transition: {
|
|
187
|
+
duration: 0.15,
|
|
188
|
+
ease: "easeOut",
|
|
189
|
+
scale: { duration: 0.28, ease: "easeOut", times: [0, 0.45, 1] }
|
|
190
|
+
}
|
|
182
191
|
}
|
|
183
192
|
};
|
|
184
193
|
var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@mieweb/ui.motionRuntimeContext.v1");
|
|
@@ -259,5 +268,5 @@ function AnimatedPresence({
|
|
|
259
268
|
AnimatedPresence.displayName = "AnimatedPresence";
|
|
260
269
|
|
|
261
270
|
export { Animated, AnimatedPresence, MotionRuntimeContext, createPresetPropBuilders, motionPresets, useMotionRuntime };
|
|
262
|
-
//# sourceMappingURL=chunk-
|
|
263
|
-
//# sourceMappingURL=chunk-
|
|
271
|
+
//# sourceMappingURL=chunk-F4N67NAF.js.map
|
|
272
|
+
//# sourceMappingURL=chunk-F4N67NAF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/motion/presets.ts","../src/motion/runtime.ts","../src/motion/Animated.tsx"],"names":["React2","Animated"],"mappings":"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","file":"chunk-F4N67NAF.js","sourcesContent":["/**\n * Motion presets — the shared vocabulary of animations.\n *\n * This module is intentionally **free of any `motion` import**. It ships in the\n * main `@mieweb/ui` entry so components can describe *what* they animate\n * without pulling in a runtime to actually do it. The `@mieweb/ui/motion` entry\n * is what turns these descriptions into real animations.\n *\n * Every preset is expressed as an open/closed variant pair so the same\n * definition serves both usages:\n *\n * - **toggle** — the element stays mounted and animates between `open` and\n * `closed` (a drawer sliding in and out).\n * - **presence** — the element mounts and unmounts, entering on `open` and\n * exiting back to `closed` (a modal).\n */\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Named animation recipes shared by components. */\nexport type MotionPreset =\n | 'drawerStart'\n | 'overlay'\n | 'modalContent'\n | 'sidebarLabel'\n | 'menu'\n | 'collapse'\n | 'toast'\n | 'fade'\n | 'pop';\n\n/**\n * A physical edge, already resolved from any logical (`start`/`end`) position\n * and from writing direction.\n *\n * Presets that move an element along an axis take one of these as `custom`.\n * Resolution is the component's job, not the preset's: only the component knows\n * whether its `end` means right or left, and — for anything anchored — which\n * side it actually landed on after flipping away from a viewport edge.\n */\nexport type MotionEdge = 'top' | 'bottom' | 'left' | 'right';\n\n/** Offset along the axis implied by `edge`, in px. */\nfunction offsetFromEdge(\n edge: unknown,\n distance: number\n): { x: number; y: number } {\n switch (edge) {\n case 'top':\n return { x: 0, y: -distance };\n case 'bottom':\n return { x: 0, y: distance };\n case 'left':\n return { x: -distance, y: 0 };\n default:\n return { x: distance, y: 0 };\n }\n}\n\n/**\n * A variant value. Either a plain target object or a function of the element's\n * `custom` value — the latter lets a single preset adapt to context, e.g. a\n * drawer flipping its off-canvas direction in RTL.\n */\nexport type MotionVariant =\n | Record<string, unknown>\n | ((custom: unknown) => Record<string, unknown>);\n\nexport interface MotionPresetDefinition {\n variants: {\n open: MotionVariant;\n closed: MotionVariant;\n };\n transition: Record<string, unknown>;\n}\n\n// =============================================================================\n// Presets\n// =============================================================================\n\n/**\n * `custom` contract per preset:\n *\n * - `drawerStart` — `boolean`, whether the document direction is RTL.\n * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical\n * position and writing direction by the component.\n * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —\n * unused.\n */\nexport const motionPresets: Record<MotionPreset, MotionPresetDefinition> = {\n /**\n * Off-canvas panel pinned to the inline-start edge. Animates `x` only, which\n * the compositor can handle without layout or paint.\n */\n drawerStart: {\n variants: {\n open: { x: '0%' },\n // Off-canvas direction follows writing direction, mirroring the\n // `-translate-x-full rtl:translate-x-full` CSS fallback.\n closed: (isRtl: unknown) => ({ x: isRtl ? '100%' : '-100%' }),\n },\n transition: { type: 'spring', stiffness: 400, damping: 40, mass: 1 },\n },\n\n /** Scrim behind a drawer or modal. */\n overlay: {\n variants: {\n open: { opacity: 1 },\n closed: { opacity: 0 },\n },\n transition: { duration: 0.2, ease: 'easeOut' },\n },\n\n /** Centered dialog surface — rises and settles rather than popping. */\n modalContent: {\n variants: {\n open: { opacity: 1, scale: 1, y: 0 },\n closed: { opacity: 0, scale: 0.96, y: 8 },\n },\n transition: { type: 'spring', stiffness: 500, damping: 40, mass: 0.8 },\n },\n\n /**\n * Text that disappears as its container narrows — sidebar labels on collapse.\n *\n * Opacity only, and deliberately so. An inline-axis slide would read slightly\n * better but would make every label direction-aware, and resolving direction\n * per nav item is a disproportionate amount of plumbing for an 8px nudge.\n * Fading also degrades to itself under reduced motion instead of becoming a\n * different animation.\n *\n * Short because it runs on many elements at once and has to finish inside the\n * container's own width transition, or labels are still fading after the rail\n * has stopped moving.\n */\n sidebarLabel: {\n variants: {\n open: { opacity: 1 },\n closed: { opacity: 0 },\n },\n transition: { duration: 0.15, ease: 'easeOut' },\n },\n\n /**\n * Anchored popup surface — dropdown, select, autocomplete, command palette.\n *\n * `custom` is the side of the anchor the menu actually occupies, so the\n * closed state nudges back *toward* the trigger and the menu reads as coming\n * out of the control that opened it. Pass the post-flip side, not the\n * requested placement: a menu asked for `bottom` that flipped to `top` for\n * want of room must animate from the top, or it moves the wrong way.\n *\n * `transform-origin` is deliberately left to CSS (`origin-top` and friends).\n * It is static per side and never animates, so making it a variant would put\n * a second owner on a property motion has no reason to touch.\n *\n * Snappier than `modalContent`: a menu is a transient response to a click and\n * should feel instant, where a dialog is a context switch and can afford to\n * settle.\n */\n menu: {\n variants: {\n open: { opacity: 1, scale: 1, x: 0, y: 0 },\n closed: (edge: unknown) => ({\n opacity: 0,\n scale: 0.95,\n ...offsetFromEdge(edge, -4),\n }),\n },\n transition: { type: 'spring', stiffness: 600, damping: 40, mass: 0.6 },\n },\n\n /**\n * Disclosure content that expands and collapses — `Collapsible`, `Accordion`.\n *\n * The one preset that earns its keep on capability rather than polish:\n * `height: auto` is not interpolable in CSS, so the alternative is a\n * hard-coded max-height that either clips tall content or eases against dead\n * space on short content. Motion measures the real height instead.\n *\n * Animating `height` costs layout on every frame, unlike the transform and\n * opacity work everywhere else in this file. That is the price of the\n * capability; keep the duration short and don't reach for this preset when a\n * transform would do.\n *\n * Consumers must clip the element (`overflow-hidden`) or content spills past\n * the shrinking box mid-animation.\n *\n * Note that `MotionConfig reducedMotion=\"user\"` does **not** cover this:\n * it drops transform and layout animations, and `height` is a plain value\n * animation to motion. Components using this preset are responsible for\n * honoring the preference themselves — see `usePrefersReducedMotion`.\n */\n collapse: {\n variants: {\n open: { height: 'auto', opacity: 1 },\n closed: { height: 0, opacity: 0 },\n },\n transition: { duration: 0.2, ease: 'easeOut' },\n },\n\n /**\n * Transient notification entering and leaving a stack.\n *\n * `custom` is the physical edge the toast lives against, so it enters from\n * the screen edge nearest it rather than always from the right — which is\n * what the `animate-slide-in-right` fallback does regardless of position.\n *\n * Scale is near-imperceptible on purpose: it softens the arrival without\n * making a message that may carry an error read as playful.\n */\n toast: {\n variants: {\n open: { opacity: 1, scale: 1, x: 0, y: 0 },\n closed: (edge: unknown) => ({\n opacity: 0,\n scale: 0.98,\n ...offsetFromEdge(edge, 24),\n }),\n },\n transition: { type: 'spring', stiffness: 400, damping: 36, mass: 0.8 },\n },\n\n /**\n * Generic presence fade, for surfaces with no meaningful direction —\n * drag overlays, connectivity banners, skeleton-to-content swaps.\n *\n * Survives `reducedMotion=\"user\"` intact, since opacity is the one thing that\n * setting keeps. Prefer it over a transform preset wherever the movement is\n * decorative rather than explanatory.\n */\n fade: {\n variants: {\n open: { opacity: 1 },\n closed: { opacity: 0 },\n },\n transition: { duration: 0.15, ease: 'easeOut' },\n },\n\n /**\n * Small element arriving with emphasis — a count badge, a status pill.\n *\n * Overshoots past full size and settles back (`1 → 1.1 → 1`) so the arrival\n * is legible on an element too small for movement to register. Reserve it\n * for things that appear in response to an event worth noticing; on anything\n * large it reads as a bounce.\n *\n * The overshoot is a keyframe rather than a spring because the resting open\n * state has to be `scale: 1`. Expressing the emphasis as a spring target\n * would leave a mounted consumer parked at 1.1 — permanently 10% oversized —\n * since the open variant is also the at-rest state.\n */\n pop: {\n variants: {\n open: { opacity: 1, scale: [1, 1.1, 1] },\n closed: { opacity: 0, scale: 1 },\n },\n // `times` front-loads the overshoot so it reads as a pop rather than an\n // even swell. Keyframe arrays need a duration-based tween; a spring has no\n // way to run through intermediate values.\n //\n // `times` is scoped to `scale` on purpose. At the top level it also\n // applies to `opacity`, whose two-value tween then gets three time stops:\n // it overshoots to 1 early, falls back toward 0, and snaps to 1 at the end,\n // so the badge flickers instead of fading in.\n transition: {\n duration: 0.15,\n ease: 'easeOut',\n scale: { duration: 0.28, ease: 'easeOut', times: [0, 0.45, 1] },\n },\n },\n};\n","/**\n * Motion runtime — the seam between components and an optional animation library.\n *\n * Components in the main entry never import `motion`. They ask this module for\n * a runtime; if an app has opted in by rendering `<MotionProvider>` from\n * `@mieweb/ui/motion`, they get one and animate. If not, `useMotionRuntime()`\n * returns `null` and they fall back to their existing CSS transitions. That is\n * what keeps `motion` out of the bundle of every app that hasn't asked for it —\n * the opt-in is resolved in the *module graph*, not by a prop.\n *\n * Like `presets`, this module must stay free of any `motion` import.\n */\n\nimport * as React from 'react';\nimport { motionPresets, type MotionPreset } from './presets';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface MotionPresenceProps {\n children?: React.ReactNode;\n /** Suppress the initial mount animation. */\n initial?: boolean;\n /**\n * Fires once every exiting child has finished and been removed.\n *\n * Needed by anything that guards the DOM while it is open — a focus trap, a\n * scroll lock — because those guards must outlive `open` for as long as the\n * subtree is still on screen. Never fires when no runtime is active, since\n * there is no exit to wait for.\n */\n onExitComplete?: () => void;\n}\n\n/**\n * The capabilities a motion library must supply. Deliberately small: element\n * factories, a presence wrapper, and prop builders. Components depend on this\n * interface, never on a concrete library, so swapping or dropping the library\n * stays a one-file change.\n */\nexport interface MotionRuntime {\n /**\n * Whether animations should actually run.\n *\n * A disabled provider still supplies a runtime rather than `null` so that\n * consumers can tell \"disabled\" apart from \"never opted in\": `Modal` uses it\n * to decide whether an exit animation will ever report completion, and\n * `AnimatedPresence` keeps its wrapper element stable across the flip.\n * `Animated` itself renders the plain fallback tag whenever this is false —\n * withholding animation props from a mounted motion component corrupts\n * `toggle`-mode elements, so the swap (and the remount it implies) is the\n * correct behaviour. See the render branches in `Animated`.\n */\n enabled: boolean;\n /** Animated `div`. */\n Div: React.ElementType;\n /** Animated `nav`. */\n Nav: React.ElementType;\n /** Animated `span`, for inline content that must not become a block. */\n Span: React.ElementType;\n /** Enables exit animations for conditionally rendered children. */\n Presence: React.ComponentType<MotionPresenceProps>;\n /**\n * Props for an element that stays mounted and animates between states.\n * Skips the initial animation so a closed drawer doesn't slide out on load.\n */\n toggle: (\n preset: MotionPreset,\n open: boolean,\n custom?: unknown\n ) => Record<string, unknown>;\n /** Props for an element that mounts and unmounts inside `Presence`. */\n presence: (preset: MotionPreset, custom?: unknown) => Record<string, unknown>;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\n/**\n * The context is stashed on `globalThis` under a registered symbol rather than\n * held in a module-local `const`.\n *\n * `@mieweb/ui` and `@mieweb/ui/motion` are separate bundle entries, and CJS\n * builds cannot code-split. Without this, the provider and the components\n * would each get their own copy of the context object and the provider would\n * silently never be seen — animations would simply never turn on, with no\n * error to explain why. A duplicated install of the package causes the same\n * failure. Keying off the global symbol registry makes the context a true\n * singleton in every one of those cases.\n *\n * The key is versioned. Two copies of this package sharing one page share\n * whatever lives under the key, so the `v1` suffix is a compatibility\n * contract: bump it if the `MotionRuntime` interface ever changes shape,\n * or an old provider will hand a new component a runtime it cannot use.\n */\nconst CONTEXT_KEY = Symbol.for('@mieweb/ui.motionRuntimeContext.v1');\n\ntype GlobalWithMotionContext = typeof globalThis & {\n [CONTEXT_KEY]?: React.Context<MotionRuntime | null>;\n};\n\nfunction getMotionRuntimeContext(): React.Context<MotionRuntime | null> {\n const globalScope = globalThis as GlobalWithMotionContext;\n if (!globalScope[CONTEXT_KEY]) {\n globalScope[CONTEXT_KEY] = React.createContext<MotionRuntime | null>(null);\n }\n return globalScope[CONTEXT_KEY];\n}\n\n/** @internal Consumed by `<MotionProvider>` in the `@mieweb/ui/motion` entry. */\nexport const MotionRuntimeContext = getMotionRuntimeContext();\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\n/**\n * The active motion runtime, or `null` when the app has not opted in.\n *\n * Components must treat `null` as the normal case and keep a CSS path that\n * looks good on its own — motion is an enhancement, never a requirement.\n */\nexport function useMotionRuntime(): MotionRuntime | null {\n return React.useContext(MotionRuntimeContext);\n}\n\n// =============================================================================\n// Prop builders\n// =============================================================================\n\n/**\n * Builds the `toggle`/`presence` prop builders around a library-agnostic core.\n * Exported so `<MotionProvider>` can assemble a runtime without restating the\n * preset lookup.\n *\n * @internal\n */\nexport function createPresetPropBuilders(): Pick<\n MotionRuntime,\n 'toggle' | 'presence'\n> {\n return {\n toggle(preset, open, custom) {\n const { variants, transition } = motionPresets[preset];\n return {\n variants,\n transition,\n custom,\n // `false` pins the element to its current variant on mount instead of\n // animating into it.\n initial: false,\n animate: open ? 'open' : 'closed',\n };\n },\n\n presence(preset, custom) {\n const { variants, transition } = motionPresets[preset];\n return {\n variants,\n transition,\n custom,\n initial: 'closed',\n animate: 'open',\n exit: 'closed',\n };\n },\n };\n}\n","/**\n * `Animated` / `AnimatedPresence` — the ergonomic layer components use.\n *\n * These exist so an individual component never has to branch on whether motion\n * is available. It declares the preset it wants and the CSS classes that stand\n * in when motion is absent; this module picks the element to render.\n *\n * Adding motion to a further component should be a matter of swapping its\n * root `<div>` for an `<Animated>` and naming a preset — no new imports, no\n * new dependency, and no behavior change for apps that have not opted in.\n */\n\nimport * as React from 'react';\nimport { cn } from '../utils/cn';\nimport { useMotionRuntime, type MotionPresenceProps } from './runtime';\nimport type { MotionPreset } from './presets';\n\n// =============================================================================\n// Animated\n// =============================================================================\n\nexport interface AnimatedProps extends React.HTMLAttributes<HTMLElement> {\n /** Intrinsic element to render. */\n as?: 'div' | 'nav' | 'span';\n /** Which shared animation recipe to use. */\n preset: MotionPreset;\n /**\n * - `toggle` — element stays mounted and animates between open and closed.\n * - `presence` — element mounts and unmounts; wrap it in `<AnimatedPresence>`\n * so the exit animation gets a chance to run.\n */\n mode: 'toggle' | 'presence';\n /** Current state. Only read in `toggle` mode. */\n open?: boolean;\n /** Per-preset context value — see the `custom` contract in `presets.ts`. */\n custom?: unknown;\n /**\n * Classes applied whenever this element is **not** animating — no provider,\n * a disabled provider, or `enabled={false}`. This is where a component's\n * existing CSS transition lives, so the two paths never both try to drive\n * the same property.\n */\n fallbackClassName?: string;\n /**\n * Set `false` to stop this element animating even when a runtime is active.\n *\n * For states where an animated element would be wrong rather than merely\n * unnecessary. Motion writes a `transform` to hold an element at its resting\n * position, and a transformed ancestor becomes the containing block for any\n * `position: fixed` descendant — so an element that is only sometimes\n * animated should opt out the rest of the time.\n *\n * Flipping this (or the provider's `disabled`) swaps the element back to a\n * plain tag, which **remounts** it — deliberately. See the note on the\n * render branches below.\n */\n enabled?: boolean;\n}\n\nexport const Animated = React.forwardRef<HTMLElement, AnimatedProps>(\n function Animated(\n {\n as = 'div',\n preset,\n mode,\n open = false,\n custom,\n className,\n fallbackClassName,\n enabled = true,\n children,\n ...rest\n },\n ref\n ) {\n const runtime = useMotionRuntime();\n\n /*\n * Anything not animating renders the plain tag with the CSS fallback —\n * no provider, a disabled provider, or `enabled={false}` alike.\n *\n * Crossing between this branch and the motion one changes the element\n * type, which remounts the subtree. That is deliberate. The obvious\n * alternative — keeping the motion component mounted and only withholding\n * its animation props — corrupts `toggle`-mode elements in both\n * directions, because motion only writes variant styles at mount or in\n * response to an animation:\n *\n * - props added in place (a drawer crossing into its mobile breakpoint\n * while closed) never get the `closed` transform, so the drawer sits\n * fully visible over the page;\n * - props removed in place strand whatever inline `transform` motion last\n * wrote, so a sidebar returning to desktop stays off-canvas.\n *\n * Fresh mounts are correct in both worlds, so remounting at the flip is\n * the fix. The flips are rare — a breakpoint cross, a test toggling the\n * provider — and a remount that resets local state beats a stale\n * transform that removes the navigation.\n */\n if (!runtime || !runtime.enabled || !enabled) {\n const Tag = as as React.ElementType;\n return (\n <Tag ref={ref} className={cn(fallbackClassName, className)} {...rest}>\n {children}\n </Tag>\n );\n }\n\n const Component =\n as === 'nav' ? runtime.Nav : as === 'span' ? runtime.Span : runtime.Div;\n\n const motionProps =\n mode === 'toggle'\n ? runtime.toggle(preset, open, custom)\n : runtime.presence(preset, custom);\n\n return (\n <Component ref={ref} className={className} {...motionProps} {...rest}>\n {children}\n </Component>\n );\n }\n);\n\nAnimated.displayName = 'Animated';\n\n// =============================================================================\n// AnimatedPresence\n// =============================================================================\n\n/**\n * Keeps unmounting children on screen long enough to animate out.\n *\n * Without a runtime this is a pass-through, so children disappear immediately —\n * which is exactly what they do today. Children rendered conditionally inside\n * it need a stable `key`.\n */\nexport function AnimatedPresence({\n children,\n initial,\n onExitComplete,\n}: MotionPresenceProps): React.JSX.Element {\n const runtime = useMotionRuntime();\n\n if (!runtime) {\n return <>{children}</>;\n }\n\n const { Presence } = runtime;\n return (\n <Presence initial={initial} onExitComplete={onExitComplete}>\n {children}\n </Presence>\n );\n}\n\nAnimatedPresence.displayName = 'AnimatedPresence';\n"]}
|
|
@@ -5,7 +5,7 @@ import { useTranscriptEdits, DEFAULT_FILLER_WORDS } from './chunk-UUI7WXI5.js';
|
|
|
5
5
|
import { isSilenceType, PLAYBACK_SPEEDS } from './chunk-6CGM5H4J.js';
|
|
6
6
|
import { Select } from './chunk-S7WCHDBO.js';
|
|
7
7
|
import { Input } from './chunk-3IMM2PM4.js';
|
|
8
|
-
import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-
|
|
8
|
+
import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-ENMXHZNE.js';
|
|
9
9
|
import { Button } from './chunk-7YO7DNUV.js';
|
|
10
10
|
import * as React6 from 'react';
|
|
11
11
|
import { cva } from 'class-variance-authority';
|
|
@@ -1999,5 +1999,5 @@ var MediaEditor = React6.forwardRef(
|
|
|
1999
1999
|
MediaEditor.displayName = "MediaEditor";
|
|
2000
2000
|
|
|
2001
2001
|
export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal };
|
|
2002
|
-
//# sourceMappingURL=chunk-
|
|
2003
|
-
//# sourceMappingURL=chunk-
|
|
2002
|
+
//# sourceMappingURL=chunk-G45FBKKV.js.map
|
|
2003
|
+
//# sourceMappingURL=chunk-G45FBKKV.js.map
|