@stableflow/pay-ui 0.1.0 → 0.2.0-beta-90dffc3d2f-20261012
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-DON56HU7.js → chunk-EYLLKIPV.js} +4 -2
- package/dist/chunk-EYLLKIPV.js.map +1 -0
- package/dist/{chunk-AIJAGS5R.js → chunk-RUT7LQ3A.js} +3 -2
- package/dist/chunk-RUT7LQ3A.js.map +1 -0
- package/dist/dialog/index.d.ts +1 -1
- package/dist/dialog/index.js +4 -2
- package/dist/dialog/index.js.map +1 -1
- package/dist/drawer/index.d.ts +1 -1
- package/dist/drawer/index.js +2 -2
- package/dist/overlay/index.d.ts +2 -1
- package/dist/overlay/index.js +1 -1
- package/dist/{types-DNElDQZ9.d.ts → types-CLWReVC4.d.ts} +1 -0
- package/package.json +1 -1
- package/dist/chunk-AIJAGS5R.js.map +0 -1
- package/dist/chunk-DON56HU7.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Overlay,
|
|
3
3
|
OverlayPanel
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-RUT7LQ3A.js";
|
|
5
5
|
import {
|
|
6
6
|
OVERLAY_MASK_FADE_SECONDS,
|
|
7
7
|
OVERLAY_PANEL_SLIDE_SECONDS
|
|
@@ -34,6 +34,7 @@ function Drawer(props) {
|
|
|
34
34
|
cardClassName,
|
|
35
35
|
panelClassName,
|
|
36
36
|
titleClassName,
|
|
37
|
+
headerClassName,
|
|
37
38
|
closeClassName,
|
|
38
39
|
closeIcon,
|
|
39
40
|
headerAction,
|
|
@@ -71,6 +72,7 @@ function Drawer(props) {
|
|
|
71
72
|
title,
|
|
72
73
|
ariaLabel,
|
|
73
74
|
titleClassName,
|
|
75
|
+
headerClassName,
|
|
74
76
|
closeClassName,
|
|
75
77
|
closeIcon,
|
|
76
78
|
headerAction,
|
|
@@ -110,4 +112,4 @@ export {
|
|
|
110
112
|
DRAWER_SIDE,
|
|
111
113
|
Drawer
|
|
112
114
|
};
|
|
113
|
-
//# sourceMappingURL=chunk-
|
|
115
|
+
//# sourceMappingURL=chunk-EYLLKIPV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/drawer/config.ts","../src/drawer/Drawer.tsx"],"sourcesContent":["export const DRAWER_SIDE = {\n Top: \"top\",\n Right: \"right\",\n Bottom: \"bottom\",\n Left: \"left\",\n} as const;\n\nexport type DrawerSide = (typeof DRAWER_SIDE)[keyof typeof DRAWER_SIDE];\n","import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { OVERLAY_MASK_FADE_SECONDS, OVERLAY_PANEL_SLIDE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { DRAWER_SIDE, type DrawerSide } from \"./config\";\n\nexport type DrawerProps = OverlayChromeProps & {\n side?: DrawerSide;\n};\n\nexport function Drawer(props: DrawerProps) {\n const {\n open,\n onClose,\n title,\n ariaLabel,\n children,\n mask = true,\n maskClassName,\n closeOnMaskClick = true,\n cardClassName,\n panelClassName,\n titleClassName,\n headerClassName,\n closeClassName,\n closeIcon,\n headerAction,\n contentClassName,\n side = DRAWER_SIDE.Right,\n } = props;\n const hidden = slideHidden(side);\n\n return (\n <Overlay\n type=\"drawer\"\n open={open}\n onClose={onClose}\n mask={mask}\n maskClassName={maskClassName}\n closeOnMaskClick={closeOnMaskClick}\n elevated={props.elevated}\n >\n <motion.div\n className={cn(\"pointer-events-auto\", drawerPositionClassName(side), panelClassName)}\n initial={hidden}\n animate={{\n x: 0,\n y: 0,\n transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: OVERLAY_MASK_FADE_SECONDS, ease: easeOut },\n }}\n exit={{\n ...hidden,\n transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: 0, ease: easeOut },\n }}\n >\n <OverlayPanel\n title={title}\n ariaLabel={ariaLabel}\n titleClassName={titleClassName}\n headerClassName={headerClassName}\n closeClassName={closeClassName}\n closeIcon={closeIcon}\n headerAction={headerAction}\n contentClassName={contentClassName}\n onClose={onClose}\n cardClassName={cn(drawerPanelClassName(side), cardClassName)}\n trapFocus={mask}\n >\n {children}\n </OverlayPanel>\n </motion.div>\n </Overlay>\n );\n}\n\nexport default Drawer;\n\nconst easeOut: [number, number, number, number] = [0.32, 0.72, 0, 1];\n\nfunction slideHidden(side: DrawerSide): { x?: string; y?: string } {\n if (side === DRAWER_SIDE.Top) return { y: \"-100%\" };\n if (side === DRAWER_SIDE.Bottom) return { y: \"100%\" };\n if (side === DRAWER_SIDE.Left) return { x: \"-100%\" };\n return { x: \"100%\" };\n}\n\nfunction drawerPositionClassName(side: DrawerSide) {\n if (side === DRAWER_SIDE.Top) return \"absolute inset-x-0 top-0\";\n if (side === DRAWER_SIDE.Bottom) return \"absolute inset-x-0 bottom-0\";\n if (side === DRAWER_SIDE.Left) return \"absolute inset-y-0 left-0 h-full w-[min(100%,420px)]\";\n return \"absolute inset-y-0 right-0 h-full w-[min(100%,420px)]\";\n}\n\nfunction drawerPanelClassName(side: DrawerSide) {\n if (side === DRAWER_SIDE.Top) return \"w-full max-h-[90vh] rounded-t-none md:rounded-t-none\";\n if (side === DRAWER_SIDE.Bottom) return \"w-full max-h-[90vh] rounded-b-none md:rounded-b-none\";\n if (side === DRAWER_SIDE.Left) return \"h-full w-full rounded-l-none md:rounded-l-none\";\n return \"h-full w-full rounded-r-none md:rounded-r-none\";\n}\n"],"mappings":";;;;;;;;;;;;;AAAO,IAAM,cAAc;AAAA,EACzB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;;;ACLA,SAAS,cAAc;AAyDf;AA7CD,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,EACrB,IAAI;AACJ,QAAM,SAAS,YAAY,IAAI;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAW,GAAG,uBAAuB,wBAAwB,IAAI,GAAG,cAAc;AAAA,UAClF,SAAS;AAAA,UACT,SAAS;AAAA,YACP,GAAG;AAAA,YACH,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,2BAA2B,MAAM,QAAQ;AAAA,UACvG;AAAA,UACA,MAAM;AAAA,YACJ,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,GAAG,MAAM,QAAQ;AAAA,UAC/E;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,qBAAqB,IAAI,GAAG,aAAa;AAAA,cAC3D,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAIA,IAAM,UAA4C,CAAC,MAAM,MAAM,GAAG,CAAC;AAEnE,SAAS,YAAY,MAA8C;AACjE,MAAI,SAAS,YAAY,IAAK,QAAO,EAAE,GAAG,QAAQ;AAClD,MAAI,SAAS,YAAY,OAAQ,QAAO,EAAE,GAAG,OAAO;AACpD,MAAI,SAAS,YAAY,KAAM,QAAO,EAAE,GAAG,QAAQ;AACnD,SAAO,EAAE,GAAG,OAAO;AACrB;AAEA,SAAS,wBAAwB,MAAkB;AACjD,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;AAEA,SAAS,qBAAqB,MAAkB;AAC9C,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;","names":[]}
|
|
@@ -124,6 +124,7 @@ function OverlayPanel(props) {
|
|
|
124
124
|
title,
|
|
125
125
|
ariaLabel,
|
|
126
126
|
titleClassName,
|
|
127
|
+
headerClassName,
|
|
127
128
|
closeClassName,
|
|
128
129
|
closeIcon,
|
|
129
130
|
headerAction,
|
|
@@ -185,7 +186,7 @@ function OverlayPanel(props) {
|
|
|
185
186
|
style,
|
|
186
187
|
onClick: (event) => event.stopPropagation(),
|
|
187
188
|
children: [
|
|
188
|
-
/* @__PURE__ */ jsxs2("div", { className: "relative flex shrink-0 items-center gap-3", children: [
|
|
189
|
+
/* @__PURE__ */ jsxs2("div", { className: cn("relative flex shrink-0 items-center gap-3", headerClassName), children: [
|
|
189
190
|
/* @__PURE__ */ jsx2(
|
|
190
191
|
"h2",
|
|
191
192
|
{
|
|
@@ -220,4 +221,4 @@ export {
|
|
|
220
221
|
Overlay,
|
|
221
222
|
OverlayPanel
|
|
222
223
|
};
|
|
223
|
-
//# sourceMappingURL=chunk-
|
|
224
|
+
//# sourceMappingURL=chunk-RUT7LQ3A.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/overlay/Overlay.tsx","../src/overlay/use-overlay-layer.ts","../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useLayoutEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport {\n OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n OVERLAY_EXIT_SECONDS,\n OVERLAY_MASK_FADE_SECONDS,\n OVERLAY_PANEL_SLIDE_SECONDS,\n} from \"./config\";\nimport { elevatedOverlayZIndex, isTopOverlay } from \"./stack\";\nimport { useOverlayLayer } from \"./use-overlay-layer\";\n\nexport type OverlayProps = {\n type?: \"dialog\" | \"drawer\";\n open: boolean;\n onClose?: () => void;\n mask?: boolean;\n maskClassName?: string;\n closeOnMaskClick?: boolean;\n children?: ReactNode;\n className?: string;\n elevated?: boolean;\n};\n\nexport function Overlay(props: OverlayProps) {\n const {\n type = \"dialog\",\n open,\n onClose,\n mask = true,\n maskClassName,\n closeOnMaskClick = true,\n children,\n className,\n elevated = false,\n } = props;\n const [present, setPresent] = useState(open);\n\n useLayoutEffect(() => {\n if (open) setPresent(true);\n }, [open]);\n\n const zIndex = useOverlayLayer(open || present);\n const visualZIndex = elevated ? elevatedOverlayZIndex(zIndex) : zIndex;\n\n useEffect(() => {\n if (!open) return;\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") return;\n if (!isTopOverlay(zIndex)) return;\n onClose?.();\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [open, onClose, zIndex]);\n\n if (typeof document === \"undefined\") return null;\n if (!open && !present) return null;\n\n return createPortal(\n <AnimatePresence onExitComplete={() => setPresent(false)}>\n {open ? (\n <motion.div\n key=\"overlay-root\"\n className={cn(\"fixed inset-0 overflow-hidden\", !mask && \"pointer-events-none\", className)}\n style={{ zIndex: visualZIndex }}\n role=\"presentation\"\n initial={{ opacity: 1 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 1 }}\n transition={{ duration: OVERLAY_EXIT_SECONDS }}\n >\n <motion.div\n className={cn(\n \"absolute inset-0\",\n mask ? \"bg-[rgba(0,0,0,0.50)]\" : \"bg-transparent\",\n !closeOnMaskClick && \"pointer-events-none\",\n maskClassName,\n )}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1, transition: { duration: OVERLAY_MASK_FADE_SECONDS, delay: 0 } }}\n exit={{\n opacity: 0,\n transition: {\n duration: OVERLAY_MASK_FADE_SECONDS,\n delay: type === \"drawer\" ? OVERLAY_PANEL_SLIDE_SECONDS : OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n },\n }}\n onClick={closeOnMaskClick ? onClose : undefined}\n />\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>,\n document.body,\n );\n}\n\nexport default Overlay;\n","import { useLayoutEffect, useState } from \"react\";\nimport { OVERLAY_BASE_Z_INDEX } from \"./config\";\nimport { acquireOverlayLayer, releaseOverlayLayer } from \"./stack\";\n\nexport function useOverlayLayer(open: boolean) {\n const [zIndex, setZIndex] = useState(OVERLAY_BASE_Z_INDEX);\n\n useLayoutEffect(() => {\n if (!open) return;\n const nextZIndex = acquireOverlayLayer();\n setZIndex(nextZIndex);\n return () => {\n releaseOverlayLayer(nextZIndex);\n };\n }, [open]);\n\n return zIndex;\n}\n","import { useEffect, useId, type CSSProperties, type ReactNode } from \"react\";\nimport { IconClose } from \"../icons/close\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { Card } from \"../card/Card\";\n\nexport type OverlayPanelProps = {\n title?: ReactNode;\n ariaLabel?: string;\n titleClassName?: string;\n headerClassName?: string;\n closeClassName?: string;\n closeIcon?: ReactNode;\n headerAction?: ReactNode;\n onClose?: () => void;\n cardClassName?: string;\n contentClassName?: string;\n children?: ReactNode;\n style?: CSSProperties;\n trapFocus?: boolean;\n};\n\nexport function OverlayPanel(props: OverlayPanelProps) {\n const {\n title,\n ariaLabel,\n titleClassName,\n headerClassName,\n closeClassName,\n closeIcon,\n headerAction,\n onClose,\n cardClassName,\n contentClassName,\n children,\n style,\n trapFocus = true,\n } = props;\n const panelId = useId();\n const titleId = panelId + \"-title\";\n const hasTitle = title !== undefined && title !== null && title !== \"\";\n\n useEffect(() => {\n if (!trapFocus) return;\n\n const panel = document.getElementById(panelId);\n if (!panel) return;\n\n const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n panel.focus({ preventScroll: true });\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Tab\") return;\n\n const focusableElements = Array.from(\n panel.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n ),\n ).filter((element) => element.getAttribute(\"aria-hidden\") !== \"true\" && element.getClientRects().length > 0);\n\n if (focusableElements.length === 0) {\n event.preventDefault();\n panel.focus({ preventScroll: true });\n return;\n }\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n const activeElement = document.activeElement;\n\n if (event.shiftKey && (activeElement === panel || activeElement === firstElement || !panel.contains(activeElement))) {\n event.preventDefault();\n lastElement.focus({ preventScroll: true });\n } else if (!event.shiftKey && activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus({ preventScroll: true });\n }\n };\n\n panel.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n panel.removeEventListener(\"keydown\", handleKeyDown);\n if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });\n };\n }, [panelId, trapFocus]);\n\n return (\n <Card\n id={panelId}\n role=\"dialog\"\n aria-modal={trapFocus ? \"true\" : undefined}\n aria-labelledby={hasTitle ? titleId : undefined}\n aria-label={hasTitle ? undefined : ariaLabel}\n tabIndex={-1}\n className={cn(\"relative flex flex-col gap-5\", cardClassName)}\n style={style}\n onClick={(event) => event.stopPropagation()}\n >\n <div className={cn(\"relative flex shrink-0 items-center gap-3\", headerClassName)}>\n <h2\n id={hasTitle ? titleId : undefined}\n className={cn(\n \"min-h-5 min-w-0 text-[20px] font-semibold leading-normal text-black\",\n fontSans,\n titleClassName,\n )}\n >\n {title}\n </h2>\n {headerAction}\n <button\n type=\"button\"\n aria-label=\"Close\"\n onClick={onClose}\n className={cn(\"ml-auto shrink-0 cursor-pointer border-0 bg-transparent p-0 text-black\", closeClassName)}\n >\n {closeIcon ?? <IconClose className=\"size-3.25\" />}\n </button>\n </div>\n <div className={cn(\"min-h-0 flex-1 overflow-y-auto\", contentClassName)}>{children}</div>\n </Card>\n );\n}\n\nexport default OverlayPanel;\n"],"mappings":"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","names":["useLayoutEffect","useState","useState","useLayoutEffect","useEffect","jsx","jsxs","useEffect"]}
|
package/dist/dialog/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { O as OverlayChromeProps } from '../types-
|
|
2
|
+
import { O as OverlayChromeProps } from '../types-CLWReVC4.js';
|
|
3
3
|
|
|
4
4
|
type DialogProps = OverlayChromeProps;
|
|
5
5
|
declare function Dialog(props: DialogProps): react.JSX.Element;
|
package/dist/dialog/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DRAWER_SIDE,
|
|
3
3
|
Drawer
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-EYLLKIPV.js";
|
|
5
5
|
import {
|
|
6
6
|
Overlay,
|
|
7
7
|
OverlayPanel
|
|
8
|
-
} from "../chunk-
|
|
8
|
+
} from "../chunk-RUT7LQ3A.js";
|
|
9
9
|
import "../chunk-J5TQGGEN.js";
|
|
10
10
|
import "../chunk-MJ36QLY3.js";
|
|
11
11
|
import {
|
|
@@ -51,6 +51,7 @@ function Dialog(props) {
|
|
|
51
51
|
closeOnMaskClick = true,
|
|
52
52
|
cardClassName,
|
|
53
53
|
titleClassName,
|
|
54
|
+
headerClassName,
|
|
54
55
|
closeClassName,
|
|
55
56
|
closeIcon,
|
|
56
57
|
headerAction,
|
|
@@ -95,6 +96,7 @@ function Dialog(props) {
|
|
|
95
96
|
title,
|
|
96
97
|
ariaLabel,
|
|
97
98
|
titleClassName,
|
|
99
|
+
headerClassName,
|
|
98
100
|
closeClassName,
|
|
99
101
|
closeIcon,
|
|
100
102
|
headerAction,
|
package/dist/dialog/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/dialog/Dialog.tsx","../../src/hooks/use-media-query.ts"],"sourcesContent":["import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { DESKTOP_MEDIA_QUERY, OVERLAY_DIALOG_PANEL_FADE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { Drawer } from \"../drawer/Drawer\";\nimport { DRAWER_SIDE } from \"../drawer/config\";\n\nexport type DialogProps = OverlayChromeProps;\n\nexport function Dialog(props: DialogProps) {\n const {\n open,\n onClose,\n title,\n ariaLabel,\n children,\n mask = true,\n maskClassName,\n closeOnMaskClick = true,\n cardClassName,\n titleClassName,\n closeClassName,\n closeIcon,\n headerAction,\n contentClassName,\n } = props;\n const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n\n if (!isDesktop) {\n return (\n <Drawer\n {...props}\n side={DRAWER_SIDE.Bottom}\n cardClassName={cn(\"w-full rounded-b-none\", cardClassName)}\n />\n );\n }\n\n return (\n <Overlay\n open={open}\n onClose={onClose}\n mask={mask}\n maskClassName={maskClassName}\n closeOnMaskClick={closeOnMaskClick}\n elevated={props.elevated}\n >\n <div className=\"pointer-events-none relative flex size-full items-center justify-center p-4\">\n <motion.div\n className=\"pointer-events-auto\"\n initial={{ opacity: 0 }}\n animate={{\n opacity: 1,\n transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n }}\n exit={{\n opacity: 0,\n transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n }}\n >\n <OverlayPanel\n title={title}\n ariaLabel={ariaLabel}\n titleClassName={titleClassName}\n closeClassName={closeClassName}\n closeIcon={closeIcon}\n headerAction={headerAction}\n contentClassName={contentClassName}\n onClose={onClose}\n cardClassName={cn(\"w-full max-h-[90vh] md:w-[500px]\", cardClassName)}\n trapFocus={mask}\n >\n {children}\n </OverlayPanel>\n </motion.div>\n </div>\n </Overlay>\n );\n}\n\nexport default Dialog;\n","import { useEffect, useState } from \"react\";\n\nexport function useMediaQuery(query: string): boolean {\n const [matches, setMatches] = useState(() => {\n if (typeof window === \"undefined\") return true;\n return window.matchMedia(query).matches;\n });\n\n useEffect(() => {\n const media = window.matchMedia(query);\n const onChange = () => setMatches(media.matches);\n onChange();\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n }, [query]);\n\n return matches;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,cAAc;;;ACAvB,SAAS,WAAW,gBAAgB;AAE7B,SAAS,cAAc,OAAwB;AACpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM;AAC3C,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC,CAAC;AAED,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,KAAK;AACrC,UAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAC/C,aAAS;AACT,UAAM,iBAAiB,UAAU,QAAQ;AACzC,WAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAAA,EAC3D,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;
|
|
1
|
+
{"version":3,"sources":["../../src/dialog/Dialog.tsx","../../src/hooks/use-media-query.ts"],"sourcesContent":["import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { DESKTOP_MEDIA_QUERY, OVERLAY_DIALOG_PANEL_FADE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { Drawer } from \"../drawer/Drawer\";\nimport { DRAWER_SIDE } from \"../drawer/config\";\n\nexport type DialogProps = OverlayChromeProps;\n\nexport function Dialog(props: DialogProps) {\n const {\n open,\n onClose,\n title,\n ariaLabel,\n children,\n mask = true,\n maskClassName,\n closeOnMaskClick = true,\n cardClassName,\n titleClassName,\n headerClassName,\n closeClassName,\n closeIcon,\n headerAction,\n contentClassName,\n } = props;\n const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n\n if (!isDesktop) {\n return (\n <Drawer\n {...props}\n side={DRAWER_SIDE.Bottom}\n cardClassName={cn(\"w-full rounded-b-none\", cardClassName)}\n />\n );\n }\n\n return (\n <Overlay\n open={open}\n onClose={onClose}\n mask={mask}\n maskClassName={maskClassName}\n closeOnMaskClick={closeOnMaskClick}\n elevated={props.elevated}\n >\n <div className=\"pointer-events-none relative flex size-full items-center justify-center p-4\">\n <motion.div\n className=\"pointer-events-auto\"\n initial={{ opacity: 0 }}\n animate={{\n opacity: 1,\n transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n }}\n exit={{\n opacity: 0,\n transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n }}\n >\n <OverlayPanel\n title={title}\n ariaLabel={ariaLabel}\n titleClassName={titleClassName}\n headerClassName={headerClassName}\n closeClassName={closeClassName}\n closeIcon={closeIcon}\n headerAction={headerAction}\n contentClassName={contentClassName}\n onClose={onClose}\n cardClassName={cn(\"w-full max-h-[90vh] md:w-[500px]\", cardClassName)}\n trapFocus={mask}\n >\n {children}\n </OverlayPanel>\n </motion.div>\n </div>\n </Overlay>\n );\n}\n\nexport default Dialog;\n","import { useEffect, useState } from \"react\";\n\nexport function useMediaQuery(query: string): boolean {\n const [matches, setMatches] = useState(() => {\n if (typeof window === \"undefined\") return true;\n return window.matchMedia(query).matches;\n });\n\n useEffect(() => {\n const media = window.matchMedia(query);\n const onChange = () => setMatches(media.matches);\n onChange();\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n }, [query]);\n\n return matches;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,cAAc;;;ACAvB,SAAS,WAAW,gBAAgB;AAE7B,SAAS,cAAc,OAAwB;AACpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM;AAC3C,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC,CAAC;AAED,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,KAAK;AACrC,UAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAC/C,aAAS;AACT,UAAM,iBAAiB,UAAU,QAAQ;AACzC,WAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAAA,EAC3D,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;ADiBM;AAtBC,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,cAAc,mBAAmB;AAEnD,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,YAAY;AAAA,QAClB,eAAe,GAAG,yBAAyB,aAAa;AAAA;AAAA,IAC1D;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB,8BAAC,SAAI,WAAU,+EACb;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAE;AAAA,UACtB,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY,EAAE,UAAU,mCAAmC,OAAO,EAAE;AAAA,UACtE;AAAA,UACA,MAAM;AAAA,YACJ,SAAS;AAAA,YACT,YAAY,EAAE,UAAU,mCAAmC,OAAO,EAAE;AAAA,UACtE;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,oCAAoC,aAAa;AAAA,cACnE,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
package/dist/drawer/index.d.ts
CHANGED
package/dist/drawer/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DRAWER_SIDE,
|
|
3
3
|
Drawer
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-EYLLKIPV.js";
|
|
5
|
+
import "../chunk-RUT7LQ3A.js";
|
|
6
6
|
import "../chunk-J5TQGGEN.js";
|
|
7
7
|
import "../chunk-MJ36QLY3.js";
|
|
8
8
|
import "../chunk-RUOUGZWI.js";
|
package/dist/overlay/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, CSSProperties } from 'react';
|
|
3
3
|
export { F as FLOATING_ALIGN, a as FLOATING_SIDE, b as FloatingAlign, c as FloatingSide, u as useFloatingPosition } from '../use-floating-position-aNqQwkre.js';
|
|
4
|
-
export { O as OverlayChromeProps } from '../types-
|
|
4
|
+
export { O as OverlayChromeProps } from '../types-CLWReVC4.js';
|
|
5
5
|
|
|
6
6
|
type OverlayProps = {
|
|
7
7
|
type?: "dialog" | "drawer";
|
|
@@ -20,6 +20,7 @@ type OverlayPanelProps = {
|
|
|
20
20
|
title?: ReactNode;
|
|
21
21
|
ariaLabel?: string;
|
|
22
22
|
titleClassName?: string;
|
|
23
|
+
headerClassName?: string;
|
|
23
24
|
closeClassName?: string;
|
|
24
25
|
closeIcon?: ReactNode;
|
|
25
26
|
headerAction?: ReactNode;
|
package/dist/overlay/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/overlay/Overlay.tsx","../src/overlay/use-overlay-layer.ts","../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useLayoutEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport {\n OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n OVERLAY_EXIT_SECONDS,\n OVERLAY_MASK_FADE_SECONDS,\n OVERLAY_PANEL_SLIDE_SECONDS,\n} from \"./config\";\nimport { elevatedOverlayZIndex, isTopOverlay } from \"./stack\";\nimport { useOverlayLayer } from \"./use-overlay-layer\";\n\nexport type OverlayProps = {\n type?: \"dialog\" | \"drawer\";\n open: boolean;\n onClose?: () => void;\n mask?: boolean;\n maskClassName?: string;\n closeOnMaskClick?: boolean;\n children?: ReactNode;\n className?: string;\n elevated?: boolean;\n};\n\nexport function Overlay(props: OverlayProps) {\n const {\n type = \"dialog\",\n open,\n onClose,\n mask = true,\n maskClassName,\n closeOnMaskClick = true,\n children,\n className,\n elevated = false,\n } = props;\n const [present, setPresent] = useState(open);\n\n useLayoutEffect(() => {\n if (open) setPresent(true);\n }, [open]);\n\n const zIndex = useOverlayLayer(open || present);\n const visualZIndex = elevated ? elevatedOverlayZIndex(zIndex) : zIndex;\n\n useEffect(() => {\n if (!open) return;\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") return;\n if (!isTopOverlay(zIndex)) return;\n onClose?.();\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n return () => document.removeEventListener(\"keydown\", onKeyDown);\n }, [open, onClose, zIndex]);\n\n if (typeof document === \"undefined\") return null;\n if (!open && !present) return null;\n\n return createPortal(\n <AnimatePresence onExitComplete={() => setPresent(false)}>\n {open ? (\n <motion.div\n key=\"overlay-root\"\n className={cn(\"fixed inset-0 overflow-hidden\", !mask && \"pointer-events-none\", className)}\n style={{ zIndex: visualZIndex }}\n role=\"presentation\"\n initial={{ opacity: 1 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 1 }}\n transition={{ duration: OVERLAY_EXIT_SECONDS }}\n >\n <motion.div\n className={cn(\n \"absolute inset-0\",\n mask ? \"bg-[rgba(0,0,0,0.50)]\" : \"bg-transparent\",\n !closeOnMaskClick && \"pointer-events-none\",\n maskClassName,\n )}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1, transition: { duration: OVERLAY_MASK_FADE_SECONDS, delay: 0 } }}\n exit={{\n opacity: 0,\n transition: {\n duration: OVERLAY_MASK_FADE_SECONDS,\n delay: type === \"drawer\" ? OVERLAY_PANEL_SLIDE_SECONDS : OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n },\n }}\n onClick={closeOnMaskClick ? onClose : undefined}\n />\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>,\n document.body,\n );\n}\n\nexport default Overlay;\n","import { useLayoutEffect, useState } from \"react\";\nimport { OVERLAY_BASE_Z_INDEX } from \"./config\";\nimport { acquireOverlayLayer, releaseOverlayLayer } from \"./stack\";\n\nexport function useOverlayLayer(open: boolean) {\n const [zIndex, setZIndex] = useState(OVERLAY_BASE_Z_INDEX);\n\n useLayoutEffect(() => {\n if (!open) return;\n const nextZIndex = acquireOverlayLayer();\n setZIndex(nextZIndex);\n return () => {\n releaseOverlayLayer(nextZIndex);\n };\n }, [open]);\n\n return zIndex;\n}\n","import { useEffect, useId, type CSSProperties, type ReactNode } from \"react\";\nimport { IconClose } from \"../icons/close\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { Card } from \"../card/Card\";\n\nexport type OverlayPanelProps = {\n title?: ReactNode;\n ariaLabel?: string;\n titleClassName?: string;\n closeClassName?: string;\n closeIcon?: ReactNode;\n headerAction?: ReactNode;\n onClose?: () => void;\n cardClassName?: string;\n contentClassName?: string;\n children?: ReactNode;\n style?: CSSProperties;\n trapFocus?: boolean;\n};\n\nexport function OverlayPanel(props: OverlayPanelProps) {\n const {\n title,\n ariaLabel,\n titleClassName,\n closeClassName,\n closeIcon,\n headerAction,\n onClose,\n cardClassName,\n contentClassName,\n children,\n style,\n trapFocus = true,\n } = props;\n const panelId = useId();\n const titleId = panelId + \"-title\";\n const hasTitle = title !== undefined && title !== null && title !== \"\";\n\n useEffect(() => {\n if (!trapFocus) return;\n\n const panel = document.getElementById(panelId);\n if (!panel) return;\n\n const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n panel.focus({ preventScroll: true });\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Tab\") return;\n\n const focusableElements = Array.from(\n panel.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n ),\n ).filter((element) => element.getAttribute(\"aria-hidden\") !== \"true\" && element.getClientRects().length > 0);\n\n if (focusableElements.length === 0) {\n event.preventDefault();\n panel.focus({ preventScroll: true });\n return;\n }\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n const activeElement = document.activeElement;\n\n if (event.shiftKey && (activeElement === panel || activeElement === firstElement || !panel.contains(activeElement))) {\n event.preventDefault();\n lastElement.focus({ preventScroll: true });\n } else if (!event.shiftKey && activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus({ preventScroll: true });\n }\n };\n\n panel.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n panel.removeEventListener(\"keydown\", handleKeyDown);\n if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });\n };\n }, [panelId, trapFocus]);\n\n return (\n <Card\n id={panelId}\n role=\"dialog\"\n aria-modal={trapFocus ? \"true\" : undefined}\n aria-labelledby={hasTitle ? titleId : undefined}\n aria-label={hasTitle ? undefined : ariaLabel}\n tabIndex={-1}\n className={cn(\"relative flex flex-col gap-5\", cardClassName)}\n style={style}\n onClick={(event) => event.stopPropagation()}\n >\n <div className=\"relative flex shrink-0 items-center gap-3\">\n <h2\n id={hasTitle ? titleId : undefined}\n className={cn(\n \"min-h-5 min-w-0 text-[20px] font-semibold leading-normal text-black\",\n fontSans,\n titleClassName,\n )}\n >\n {title}\n </h2>\n {headerAction}\n <button\n type=\"button\"\n aria-label=\"Close\"\n onClick={onClose}\n className={cn(\"ml-auto shrink-0 cursor-pointer border-0 bg-transparent p-0 text-black\", closeClassName)}\n >\n {closeIcon ?? <IconClose className=\"size-3.25\" />}\n </button>\n </div>\n <div className={cn(\"min-h-0 flex-1 overflow-y-auto\", contentClassName)}>{children}</div>\n </Card>\n );\n}\n\nexport default OverlayPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,WAAW,mBAAAA,kBAAiB,YAAAC,iBAAgB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,cAAc;;;ACHxC,SAAS,iBAAiB,gBAAgB;AAInC,SAAS,gBAAgB,MAAe;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,oBAAoB;AAEzD,kBAAgB,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,aAAa,oBAAoB;AACvC,cAAU,UAAU;AACpB,WAAO,MAAM;AACX,0BAAoB,UAAU;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SAAO;AACT;;;ADiDQ,SAUE,KAVF;AAxCD,SAAS,QAAQ,OAAqB;AAC3C,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb,IAAI;AACJ,QAAM,CAAC,SAAS,UAAU,IAAIC,UAAS,IAAI;AAE3C,EAAAC,iBAAgB,MAAM;AACpB,QAAI,KAAM,YAAW,IAAI;AAAA,EAC3B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAS,gBAAgB,QAAQ,OAAO;AAC9C,QAAM,eAAe,WAAW,sBAAsB,MAAM,IAAI;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AAEX,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,SAAU;AAC5B,UAAI,CAAC,aAAa,MAAM,EAAG;AAC3B,gBAAU;AAAA,IACZ;AAEA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,MAAM,SAAS,MAAM,CAAC;AAE1B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,CAAC,QAAQ,CAAC,QAAS,QAAO;AAE9B,SAAO;AAAA,IACL,oBAAC,mBAAgB,gBAAgB,MAAM,WAAW,KAAK,GACpD,iBACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAEC,WAAW,GAAG,iCAAiC,CAAC,QAAQ,uBAAuB,SAAS;AAAA,QACxF,OAAO,EAAE,QAAQ,aAAa;AAAA,QAC9B,MAAK;AAAA,QACL,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,UAAU,qBAAqB;AAAA,QAE7C;AAAA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO,0BAA0B;AAAA,gBACjC,CAAC,oBAAoB;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,SAAS,EAAE,SAAS,EAAE;AAAA,cACtB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,2BAA2B,OAAO,EAAE,EAAE;AAAA,cACrF,MAAM;AAAA,gBACJ,SAAS;AAAA,gBACT,YAAY;AAAA,kBACV,UAAU;AAAA,kBACV,OAAO,SAAS,WAAW,8BAA8B;AAAA,gBAC3D;AAAA,cACF;AAAA,cACA,SAAS,mBAAmB,UAAU;AAAA;AAAA,UACxC;AAAA,UACC;AAAA;AAAA;AAAA,MA3BG;AAAA,IA4BN,IACE,MACN;AAAA,IACA,SAAS;AAAA,EACX;AACF;;;AEpGA,SAAS,aAAAC,YAAW,aAAiD;AAgG/D,SACE,OAAAC,MADF,QAAAC,aAAA;AA3EC,SAAS,aAAa,OAA0B;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,UAAU;AAC1B,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU;AAEpE,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,UAAW;AAEhB,UAAM,QAAQ,SAAS,eAAe,OAAO;AAC7C,QAAI,CAAC,MAAO;AAEZ,UAAM,oBAAoB,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;AACnG,UAAM,MAAM,EAAE,eAAe,KAAK,CAAC;AAEnC,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,MAAO;AAEzB,YAAM,oBAAoB,MAAM;AAAA,QAC9B,MAAM;AAAA,UACJ;AAAA,QACF;AAAA,MACF,EAAE,OAAO,CAAC,YAAY,QAAQ,aAAa,aAAa,MAAM,UAAU,QAAQ,eAAe,EAAE,SAAS,CAAC;AAE3G,UAAI,kBAAkB,WAAW,GAAG;AAClC,cAAM,eAAe;AACrB,cAAM,MAAM,EAAE,eAAe,KAAK,CAAC;AACnC;AAAA,MACF;AAEA,YAAM,eAAe,kBAAkB,CAAC;AACxC,YAAM,cAAc,kBAAkB,kBAAkB,SAAS,CAAC;AAClE,YAAM,gBAAgB,SAAS;AAE/B,UAAI,MAAM,aAAa,kBAAkB,SAAS,kBAAkB,gBAAgB,CAAC,MAAM,SAAS,aAAa,IAAI;AACnH,cAAM,eAAe;AACrB,oBAAY,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MAC3C,WAAW,CAAC,MAAM,YAAY,kBAAkB,aAAa;AAC3D,cAAM,eAAe;AACrB,qBAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,iBAAiB,WAAW,aAAa;AAC/C,WAAO,MAAM;AACX,YAAM,oBAAoB,WAAW,aAAa;AAClD,UAAI,mBAAmB,YAAa,mBAAkB,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IACrF;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAY,YAAY,SAAS;AAAA,MACjC,mBAAiB,WAAW,UAAU;AAAA,MACtC,cAAY,WAAW,SAAY;AAAA,MACnC,UAAU;AAAA,MACV,WAAW,GAAG,gCAAgC,aAAa;AAAA,MAC3D;AAAA,MACA,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAE1C;AAAA,wBAAAA,MAAC,SAAI,WAAU,6CACb;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,WAAW,UAAU;AAAA,cACzB,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA,UACD,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS;AAAA,cACT,WAAW,GAAG,0EAA0E,cAAc;AAAA,cAErG,uBAAa,gBAAAA,KAAC,aAAU,WAAU,aAAY;AAAA;AAAA,UACjD;AAAA,WACF;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAW,GAAG,kCAAkC,gBAAgB,GAAI,UAAS;AAAA;AAAA;AAAA,EACpF;AAEJ;","names":["useLayoutEffect","useState","useState","useLayoutEffect","useEffect","jsx","jsxs","useEffect"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/drawer/config.ts","../src/drawer/Drawer.tsx"],"sourcesContent":["export const DRAWER_SIDE = {\n Top: \"top\",\n Right: \"right\",\n Bottom: \"bottom\",\n Left: \"left\",\n} as const;\n\nexport type DrawerSide = (typeof DRAWER_SIDE)[keyof typeof DRAWER_SIDE];\n","import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { OVERLAY_MASK_FADE_SECONDS, OVERLAY_PANEL_SLIDE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { DRAWER_SIDE, type DrawerSide } from \"./config\";\n\nexport type DrawerProps = OverlayChromeProps & {\n side?: DrawerSide;\n};\n\nexport function Drawer(props: DrawerProps) {\n const {\n open,\n onClose,\n title,\n ariaLabel,\n children,\n mask = true,\n maskClassName,\n closeOnMaskClick = true,\n cardClassName,\n panelClassName,\n titleClassName,\n closeClassName,\n closeIcon,\n headerAction,\n contentClassName,\n side = DRAWER_SIDE.Right,\n } = props;\n const hidden = slideHidden(side);\n\n return (\n <Overlay\n type=\"drawer\"\n open={open}\n onClose={onClose}\n mask={mask}\n maskClassName={maskClassName}\n closeOnMaskClick={closeOnMaskClick}\n elevated={props.elevated}\n >\n <motion.div\n className={cn(\"pointer-events-auto\", drawerPositionClassName(side), panelClassName)}\n initial={hidden}\n animate={{\n x: 0,\n y: 0,\n transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: OVERLAY_MASK_FADE_SECONDS, ease: easeOut },\n }}\n exit={{\n ...hidden,\n transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: 0, ease: easeOut },\n }}\n >\n <OverlayPanel\n title={title}\n ariaLabel={ariaLabel}\n titleClassName={titleClassName}\n closeClassName={closeClassName}\n closeIcon={closeIcon}\n headerAction={headerAction}\n contentClassName={contentClassName}\n onClose={onClose}\n cardClassName={cn(drawerPanelClassName(side), cardClassName)}\n trapFocus={mask}\n >\n {children}\n </OverlayPanel>\n </motion.div>\n </Overlay>\n );\n}\n\nexport default Drawer;\n\nconst easeOut: [number, number, number, number] = [0.32, 0.72, 0, 1];\n\nfunction slideHidden(side: DrawerSide): { x?: string; y?: string } {\n if (side === DRAWER_SIDE.Top) return { y: \"-100%\" };\n if (side === DRAWER_SIDE.Bottom) return { y: \"100%\" };\n if (side === DRAWER_SIDE.Left) return { x: \"-100%\" };\n return { x: \"100%\" };\n}\n\nfunction drawerPositionClassName(side: DrawerSide) {\n if (side === DRAWER_SIDE.Top) return \"absolute inset-x-0 top-0\";\n if (side === DRAWER_SIDE.Bottom) return \"absolute inset-x-0 bottom-0\";\n if (side === DRAWER_SIDE.Left) return \"absolute inset-y-0 left-0 h-full w-[min(100%,420px)]\";\n return \"absolute inset-y-0 right-0 h-full w-[min(100%,420px)]\";\n}\n\nfunction drawerPanelClassName(side: DrawerSide) {\n if (side === DRAWER_SIDE.Top) return \"w-full max-h-[90vh] rounded-t-none md:rounded-t-none\";\n if (side === DRAWER_SIDE.Bottom) return \"w-full max-h-[90vh] rounded-b-none md:rounded-b-none\";\n if (side === DRAWER_SIDE.Left) return \"h-full w-full rounded-l-none md:rounded-l-none\";\n return \"h-full w-full rounded-r-none md:rounded-r-none\";\n}\n"],"mappings":";;;;;;;;;;;;;AAAO,IAAM,cAAc;AAAA,EACzB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;;;ACLA,SAAS,cAAc;AAwDf;AA5CD,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,EACrB,IAAI;AACJ,QAAM,SAAS,YAAY,IAAI;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAW,GAAG,uBAAuB,wBAAwB,IAAI,GAAG,cAAc;AAAA,UAClF,SAAS;AAAA,UACT,SAAS;AAAA,YACP,GAAG;AAAA,YACH,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,2BAA2B,MAAM,QAAQ;AAAA,UACvG;AAAA,UACA,MAAM;AAAA,YACJ,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,GAAG,MAAM,QAAQ;AAAA,UAC/E;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,qBAAqB,IAAI,GAAG,aAAa;AAAA,cAC3D,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAIA,IAAM,UAA4C,CAAC,MAAM,MAAM,GAAG,CAAC;AAEnE,SAAS,YAAY,MAA8C;AACjE,MAAI,SAAS,YAAY,IAAK,QAAO,EAAE,GAAG,QAAQ;AAClD,MAAI,SAAS,YAAY,OAAQ,QAAO,EAAE,GAAG,OAAO;AACpD,MAAI,SAAS,YAAY,KAAM,QAAO,EAAE,GAAG,QAAQ;AACnD,SAAO,EAAE,GAAG,OAAO;AACrB;AAEA,SAAS,wBAAwB,MAAkB;AACjD,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;AAEA,SAAS,qBAAqB,MAAkB;AAC9C,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;","names":[]}
|