npm - @jbpark/ui-kit - Versions diffs - 3.7.0 → 4.0.0 - Mend

@jbpark/ui-kit 3.7.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/dist/components/molecules/dropdown.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;;;;~~KAUK~~,kBAAA,IAAsB,IAAA;AAAA,~~UAEjB~~,KAAA,SAAc,KAAA,CAAM,wBAAA;~~EAC5B~~,IAAA;EACA,OAAA;EACA,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,kBAAA;AAAA;AAAA,cAGX,QAAA;EAAY,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA,EAAA,KAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,YAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1	+ {"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;;;;KAWK,kBAAA,IAAsB,IAAA;AAAA,UAEV,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,IAAA;EACA,OAAA;EACA,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,kBAAA;AAAA;AAAA,cAGX,QAAA;EAAY,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA,EAAA,KAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,YAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/dropdown.mjs CHANGED Viewed

@@ -2,23 +2,25 @@
 import { cn } from "../../utils.mjs";
 import Menu from "./menu/menu.mjs";
-import { useState } from "react";
+import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/dropdown.tsx
 const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange: _onOpenChange = () => {}, className, onMouseEnter, onMouseLeave, ...props }) => {
-	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-	const controlled = _open !== void 0;
-	const open = controlled ? _open : uncontrolledOpen;
+	const [open, onOpenChange] = useControllableState({
+		value: _open,
+		defaultValue: false,
+		onChange: _onOpenChange
+	});
 	const isClickTrigger = trigger === "click";
-	const onOpenChange = (nextOpen) => {
-		if (!controlled) setUncontrolledOpen(nextOpen);
-		_onOpenChange(nextOpen);
-	};
+	const menuId = useId();
+	const containerRef = useRef(null);
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: cn("relative z-0", "inline-block cursor-pointer", className),
+		ref: containerRef,
+		className: cn("relative", "inline-block cursor-pointer", className),
 		onMouseEnter: (event) => {
 			onMouseEnter?.(event);
 			if (isClickTrigger) return;
@@ -30,8 +32,11 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 			onOpenChange(false);
 		},
 		children: [/* @__PURE__ */ jsx("div", {
+			role: isClickTrigger ? "button" : void 0,
+			tabIndex: isClickTrigger ? 0 : void 0,
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
+			"aria-controls": open ? menuId : void 0,
 			onClick: () => {
 				if (!isClickTrigger) return;
 				onOpenChange(!open);
@@ -40,11 +45,18 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 				if (isClickTrigger) return;
 				onOpenChange(true);
 			},
-			onBlur: () => {
-				onOpenChange(false);
+			onBlur: (e) => {
+				if (!containerRef.current?.contains(e.relatedTarget)) onOpenChange(false);
 			},
 			onKeyDown: (e) => {
-				if (e.key === "Escape") onOpenChange(false);
+				if (e.key === "Escape") {
+					onOpenChange(false);
+					return;
+				}
+				if (isClickTrigger && (e.key === "Enter" || e.key === " ")) {
+					e.preventDefault();
+					onOpenChange(!open);
+				}
 			},
 			children
 		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(motion.div, {
@@ -64,6 +76,7 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 			transition: { duration: .1 },
 			children: /* @__PURE__ */ jsx(Menu, {
 				...menu,
+				id: menuId,
 				onMouseDown: (e) => {
 					e.preventDefault();
 				}

package/dist/components/molecules/dropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { ~~useState~~ } from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\~~ninterface~~ Props extends React.ComponentPropsWithoutRef<'div'> {\n open?: boolean;\n trigger?: ~~string~~;\n menu?: MenuProps;\n onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n children,\n menu,\n trigger = 'hover',\n open: _open,\n onOpenChange: _onOpenChange = () => {},\n className,\n onMouseEnter,\n onMouseLeave,\n ...props\n}: Props) => {\n const [~~uncontrolledOpen~~, ~~setUncontrolledOpen~~] = ~~useState~~<boolean>(~~false);\n~~\n ~~const~~ ~~controlled =~~ _open ~~!==~~ ~~undefined;\~~n ~~const open = controlled ? _open : uncontrolledOpen~~;\n\n const isClickTrigger = trigger === 'click';\n\n const ~~onOpenChange~~ = (~~nextOpen: boolean~~) => ~~{\n if~~ (~~!controlled~~) ~~{\n setUncontrolledOpen(nextOpen)~~;\n }\n ~~_onOpenChange(nextOpen);\n~~ ~~};\n\n~~ return (\n <div\n {...props}\n className={cn(\n 'relative ~~z-0~~',\n 'inline-block cursor-pointer',\n className,\n //\n )}\n onMouseEnter={event => {\n onMouseEnter?.(event);\n if (isClickTrigger) {\n return;\n }\n onOpenChange(true);\n }}\n onMouseLeave={event => {\n onMouseLeave?.(event);\n if (isClickTrigger) {\n return;\n }\n onOpenChange(false);\n }}\n >\n <div\n aria-haspopup=\"menu\"\n aria-expanded={open}\n onClick={() => {\n if (!isClickTrigger) {\n return;\n }\n onOpenChange(!open);\n }}\n onFocus={() => {\n if (isClickTrigger) {\n return;\n }\n onOpenChange(true);\n }}\n onBlur={() => {\n onOpenChange(false);\n }}\n onKeyDown={e => {\n if (e.key === 'Escape') {\n onOpenChange(false);\n }\n }}\n >\n {children}\n </div>\n <AnimatePresence>\n {open && (\n <motion.div\n className={cn(\n 'absolute top-full pt-2',\n //\n )}\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n transition={{ duration: 0.1 }}\n >\n <Menu\n {...menu}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n};\n\nexport default Dropdown;\n"],"mappings":"~~;;;;;;;;;AAmBA~~,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,WACA,cACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,~~kBAAkB~~,~~uBAAuB~~,~~SAAkB~~,~~MAAM~~;~~CAExE~~,~~MAAM~~,~~aAAa,~~UAAU;~~CAC7B~~,~~MAAM,OAAO,aAAa,QAAQ~~;~~CAElC~~,MAAM,iBAAiB,YAAY;~~CAEnC~~,MAAM,~~gBAAgB~~,~~aAAsB~~;~~AAC1C~~,~~MAAI~~,~~CAAC~~,~~WACH~~,~~qBAAoB,SAAS~~;~~AAE/B~~,~~gBAAc,SAAS;;AAGzB,~~QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GACT,~~gBACA~~,+BACA,UAED;EACD,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,iBAAc;GACd,iBAAe;GACf,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,eAAe;AACb,QAAI,eACF;AAEF,iBAAa,KAAK;;GAEpB,~~cAAc~~;~~AACZ~~,~~iBAAa~~,MAAM;;~~GAErB~~,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,~~SACZ~~,~~cAAa~~,MAAM;;GAItB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}
1	+ {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n open?: boolean;\n trigger?: 'hover' \| 'click';\n menu?: MenuProps;\n onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n children,\n menu,\n trigger = 'hover',\n open: _open,\n onOpenChange: _onOpenChange = () => {},\n className,\n onMouseEnter,\n onMouseLeave,\n ...props\n}: Props) => {\n const [open, onOpenChange] = useControllableState<boolean>({\n value: _open,\n defaultValue: false,\n onChange: _onOpenChange,\n });\n\n const isClickTrigger = trigger === 'click';\n const menuId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n\n return (\n <div\n {...props}\n ref={containerRef}\n className={cn(\n 'relative',\n 'inline-block cursor-pointer',\n className,\n //\n )}\n onMouseEnter={event => {\n onMouseEnter?.(event);\n if (isClickTrigger) {\n return;\n }\n onOpenChange(true);\n }}\n onMouseLeave={event => {\n onMouseLeave?.(event);\n if (isClickTrigger) {\n return;\n }\n onOpenChange(false);\n }}\n >\n <div\n role={isClickTrigger ? 'button' : undefined}\n tabIndex={isClickTrigger ? 0 : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-controls={open ? menuId : undefined}\n onClick={() => {\n if (!isClickTrigger) {\n return;\n }\n onOpenChange(!open);\n }}\n onFocus={() => {\n if (isClickTrigger) {\n return;\n }\n onOpenChange(true);\n }}\n onBlur={e => {\n // Without this check, moving focus from the trigger into the\n // menu itself (e.g. via Tab) closed the dropdown before the\n // user could ever reach it — the mouse path avoided the same\n // bug only by way of onMouseDown's preventDefault below, which\n // does nothing for keyboard focus. Mirrors the containment\n // check menu/item/item.tsx already uses for the same reason.\n if (!containerRef.current?.contains(e.relatedTarget as Node)) {\n onOpenChange(false);\n }\n }}\n onKeyDown={e => {\n if (e.key === 'Escape') {\n onOpenChange(false);\n return;\n }\n if (isClickTrigger && (e.key === 'Enter' \|\| e.key === ' ')) {\n e.preventDefault();\n onOpenChange(!open);\n }\n }}\n >\n {children}\n </div>\n <AnimatePresence>\n {open && (\n <motion.div\n className={cn(\n 'absolute top-full pt-2',\n //\n )}\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n transition={{ duration: 0.1 }}\n >\n <Menu\n {...menu}\n id={menuId}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,WACA,cACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,MAAM,gBAAgB,qBAA8B;EACzD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CAEF,MAAM,iBAAiB,YAAY;CACnC,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,OAAuB,KAAK;AAEjD,QACE,qBAAC;EACC,GAAI;EACJ,KAAK;EACL,WAAW,GACT,YACA,+BACA,UAED;EACD,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,MAAM,iBAAiB,WAAW;GAClC,UAAU,iBAAiB,IAAI;GAC/B,iBAAc;GACd,iBAAe;GACf,iBAAe,OAAO,SAAS;GAC/B,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,eAAe;AACb,QAAI,eACF;AAEF,iBAAa,KAAK;;GAEpB,SAAQ,MAAK;AAOX,QAAI,CAAC,aAAa,SAAS,SAAS,EAAE,cAAsB,CAC1D,cAAa,MAAM;;GAGvB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,UAAU;AACtB,kBAAa,MAAM;AACnB;;AAEF,QAAI,mBAAmB,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAM;AAC1D,OAAE,gBAAgB;AAClB,kBAAa,CAAC,KAAK;;;GAItB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,IAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}

package/dist/components/molecules/index.d.mts CHANGED Viewed

@@ -1,10 +1,13 @@
-import Card from "../../Card.mjs";
-import { Menu } from "./menu/menu.mjs";
+import Card, { Props } from "../../Card.mjs";
+import { Menu, Props as Props$1 } from "./menu/menu.mjs";
 import "../../Menu.mjs";
+import { Props as Props$2 } from "./reveals/reveals.mjs";
 import Reveals from "../../Reveals.mjs";
-import Space from "../../Space.mjs";
-import { Collapse } from "./collapse.mjs";
-import { Dropdown } from "./dropdown.mjs";
+import Space, { Props as Props$3 } from "../../Space.mjs";
+import { Collapse, Props as Props$4 } from "./collapse.mjs";
+import { Dropdown, Props as Props$5 } from "./dropdown.mjs";
+import { Props as Props$6 } from "./marquees/marquees.mjs";
 import { Marquees } from "./marquees/index.mjs";
+import { Props as Props$7 } from "./splitter/splitter.mjs";
 import { Splitter } from "./splitter/index.mjs";
-import { Upload, UploadFile } from "./upload.mjs";
+import { Props as Props$8, Upload, UploadFile } from "./upload.mjs";

package/dist/components/molecules/menu/item/item.mjs CHANGED Viewed

@@ -22,7 +22,7 @@ const getItemClasses = (root, isHorizontal, isInline, hasChildren, customClasses
 	isHorizontal ? "border-b-2" : "border-r-2",
 	isInline && "border-none"
 ] : ["rounded-md", ...STYLES.hover.classes], customClasses);
-const Item = ({ itemKey, keyPath, root = false, mode, label, children, selectedKeys = [], selectionMap, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, onSelect, ...props }) => {
+const Item = ({ itemKey, keyPath, root = false, index, mode, label, children, selectionMap, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, onSelect, ...props }) => {
 	const [open, setOpen] = useState(false);
 	const itemRef = useRef(null);
 	const isHorizontal = mode === "horizontal";
@@ -48,10 +48,30 @@ const Item = ({ itemKey, keyPath, root = false, mode, label, children, selectedK
 		onClick?.(params);
 		if (!selected) onSelect?.(params);
 	};
+	const handleKeyDown = (domEvent) => {
+		if (domEvent.key === "Enter" || domEvent.key === " ") {
+			domEvent.preventDefault();
+			handleSelect(domEvent);
+			return;
+		}
+		if (domEvent.key === "Escape") {
+			if (children?.length && open) {
+				domEvent.stopPropagation();
+				setOpen(false);
+			}
+			return;
+		}
+		const isNext = isHorizontal ? domEvent.key === "ArrowRight" : domEvent.key === "ArrowDown";
+		const isPrev = isHorizontal ? domEvent.key === "ArrowLeft" : domEvent.key === "ArrowUp";
+		if (!isNext && !isPrev) return;
+		domEvent.preventDefault();
+		(isNext ? itemRef.current?.nextElementSibling : itemRef.current?.previousElementSibling)?.querySelector("[role=\"menuitem\"]")?.focus();
+	};
 	const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4");
 	const childrenContainerStyle = isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
 	return /* @__PURE__ */ jsxs("li", {
 		ref: itemRef,
+		role: "none",
 		className: cn("group", "relative", root && isHorizontal ? "inline-block" : "block"),
 		onMouseEnter: () => {
 			if (isInline) return;
@@ -71,19 +91,14 @@ const Item = ({ itemKey, keyPath, root = false, mode, label, children, selectedK
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			role: "menuitem",
-			tabIndex: 0,
+			tabIndex: index === 0 ? 0 : -1,
 			"aria-expanded": children?.length ? open : void 0,
 			"aria-haspopup": children?.length ? "menu" : void 0,
-			"aria-selected": selected,
+			"aria-current": selected ? true : void 0,
 			className: cn(itemClassNames, ...selected ? root ? ["border-current"] : [...STYLES.open.classes, ...STYLES.hover.classes] : root && !!children?.length ? ["group-hover:border-current"] : []),
 			style: root ? styles?.rootItem : styles?.item,
 			onClick: handleSelect,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleSelect(e);
-				}
-			},
+			onKeyDown: handleKeyDown,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: cn("w-full", "inline-flex items-center justify-between"),
 				children: [
@@ -113,16 +128,17 @@ const Item = ({ itemKey, keyPath, root = false, mode, label, children, selectedK
 			} : { opacity: 0 },
 			transition: { duration: .2 },
 			children: /* @__PURE__ */ jsx("ul", {
+				role: "menu",
 				className: cn(MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
 				style: styles?.subMenu,
-				children: children.map((child) => /* @__PURE__ */ createElement(Item, {
+				children: children.map((child, childIndex) => /* @__PURE__ */ createElement(Item, {
 					...child,
 					key: child.key,
 					itemKey: child.key,
 					keyPath: [...keyPath, child.key],
+					index: childIndex,
 					selectionMap,
 					mode,
-					selectedKeys,
 					classNames,
 					styles,
 					offset,

package/dist/components/molecules/menu/item/item.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item.mjs","names":[],"sources":["../../../../../src/components/molecules/menu/item/item.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { ChevronDown } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { MENU_CLASSNAMES, MenuItem, Props } from '../menu';\nimport Label from './label';\n\ninterface ItemProps extends Props, MenuItem {\n itemKey: React.Key;\n keyPath: React.Key[];\n root?: boolean;\n}\nconst OFFSET: [number, number] = [8, 8];\nconst INLINE_OFFSET = 16;\n\nconst STYLES = {\n hover: {\n classes: ['hover:underline', 'hover:underline-offset-8'],\n },\n open: {\n classes: ['underline', 'underline-offset-8'],\n },\n} as const;\n\nconst getItemClasses = (\n root: boolean,\n isHorizontal: boolean,\n isInline: boolean,\n hasChildren: boolean,\n customClasses?: string,\n) =>\n cn(\n 'px-4 py-2',\n 'cursor-pointer',\n 'whitespace-nowrap',\n root && isHorizontal ? 'inline-flex' : 'flex',\n ...(root\n ? [\n 'h-full',\n 'rounded-none border-transparent',\n hasChildren && 'hover:border-current',\n isHorizontal ? 'border-b-2' : 'border-r-2',\n isInline && 'border-none',\n ]\n : ['rounded-md', ...STYLES.hover.classes]),\n customClasses,\n );\n\nconst Item = ({\n itemKey,\n keyPath,\n root = false,\n mode,\n label,\n children,\n selectedKeys = [],\n selectionMap,\n classNames,\n styles,\n offset = OFFSET,\n inlineOffset = INLINE_OFFSET,\n onClick,\n onSelect,\n ...props\n}: ItemProps) => {\n const [open, setOpen] = useState<boolean>(false);\n\n const itemRef = useRef<HTMLLIElement \| null>(null);\n\n const isHorizontal = mode === 'horizontal';\n const isInline = mode === 'inline';\n\n const [left, top] = offset;\n\n const selected = selectionMap?.get(itemKey) ?? false;\n\n const item = {\n ...props,\n label,\n key: itemKey,\n children,\n };\n\n const itemClassNames = getItemClasses(\n root,\n isHorizontal,\n isInline,\n !!children?.length,\n root ? classNames?.rootItem : classNames?.item,\n );\n\n const handleSelect = (domEvent: React.SyntheticEvent) => {\n domEvent.stopPropagation();\n\n if (isInline) {\n setOpen(!open);\n }\n\n const params = {\n domEvent,\n key: itemKey,\n keyPath,\n item,\n };\n\n onClick?.(params);\n\n if (!selected) {\n onSelect?.(params);\n }\n };\n\n const childrenContainerClassNames = cn(\n isInline ? 'relative overflow-hidden' : 'absolute min-w-[200px]',\n !isInline && root && isHorizontal\n ? 'left-0 top-full pt-2 pl-0'\n : !isInline\n ? 'left-full top-0 pl-2 pt-0'\n : 'pl-4',\n );\n\n const childrenContainerStyle = isInline\n ? {\n paddingLeft: inlineOffset,\n }\n : root && isHorizontal\n ? {\n paddingTop: top,\n }\n : {\n paddingLeft: left,\n };\n\n return (\n <li\n ref={itemRef}\n className={cn(\n 'group',\n 'relative',\n root && isHorizontal ? 'inline-block' : 'block',\n )}\n onMouseEnter={() => {\n if (isInline) {\n return;\n }\n setOpen(true);\n }}\n onMouseLeave={() => {\n if (isInline) {\n return;\n }\n setOpen(false);\n }}\n onFocus={() => {\n if (isInline) {\n return;\n }\n setOpen(true);\n }}\n onBlur={e => {\n if (isInline) {\n return;\n }\n if (!itemRef.current?.contains(e.relatedTarget as Node)) {\n setOpen(false);\n }\n }}\n >\n <div\n role=\"menuitem\"\n tabIndex={0}\n aria-expanded={children?.length ? open : undefined}\n aria-haspopup={children?.length ? 'menu' : undefined}\n aria-selected={selected}\n className={cn(\n itemClassNames,\n ...(selected\n ? root\n ? ['border-current']\n : [...STYLES.open.classes, ...STYLES.hover.classes]\n : root && !!children?.length\n ? ['group-hover:border-current']\n : []),\n //\n )}\n style={root ? styles?.rootItem : styles?.item}\n onClick={handleSelect}\n onKeyDown={e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n handleSelect(e);\n }\n }}\n >\n <div\n className={cn(\n 'w-full',\n 'inline-flex items-center justify-between',\n //\n )}\n >\n <Label className={cn(classNames?.label)} style={styles?.label}>\n {label}\n </Label>\n {!root && !isInline && !!children?.length && (\n <ChevronDown className={cn('-rotate-90')} />\n )}\n {isInline && !!children?.length && (\n <ChevronDown\n className={cn(\n 'transition-all',\n open ? '-rotate-180' : 'rotate-0',\n )}\n />\n )}\n </div>\n </div>\n <AnimatePresence>\n {!!children?.length && open && (\n <motion.div\n className={cn(\n childrenContainerClassNames,\n //\n )}\n style={childrenContainerStyle}\n initial={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n animate={isInline ? { height: 'auto', opacity: 1 } : { opacity: 1 }}\n exit={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n transition={{ duration: 0.2 }}\n >\n <ul\n className={cn(\n MENU_CLASSNAMES,\n isInline && 'shadow-none',\n classNames?.subMenu,\n //\n )}\n style={styles?.subMenu}\n >\n {children.map(child => (\n <Item\n {...child}\n key={child.key}\n itemKey={child.key}\n keyPath={[...keyPath, child.key]}\n selectionMap={selectionMap}\n mode={mode}\n selectedKeys={selectedKeys}\n classNames={classNames}\n styles={styles}\n offset={offset}\n inlineOffset={inlineOffset}\n onClick={onClick}\n onSelect={onSelect}\n />\n ))}\n </ul>\n </motion.div>\n )}\n </AnimatePresence>\n </li>\n );\n};\n\nexport default Item;\n"],"mappings":"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"}
1	+ {"version":3,"file":"item.mjs","names":[],"sources":["../../../../../src/components/molecules/menu/item/item.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { ChevronDown } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { MENU_CLASSNAMES, MenuItem, Props } from '../menu';\nimport Label from './label';\n\ninterface ItemProps extends Props, MenuItem {\n itemKey: React.Key;\n keyPath: React.Key[];\n root?: boolean;\n index: number;\n}\nconst OFFSET: [number, number] = [8, 8];\nconst INLINE_OFFSET = 16;\n\nconst STYLES = {\n hover: {\n classes: ['hover:underline', 'hover:underline-offset-8'],\n },\n open: {\n classes: ['underline', 'underline-offset-8'],\n },\n} as const;\n\nconst getItemClasses = (\n root: boolean,\n isHorizontal: boolean,\n isInline: boolean,\n hasChildren: boolean,\n customClasses?: string,\n) =>\n cn(\n 'px-4 py-2',\n 'cursor-pointer',\n 'whitespace-nowrap',\n root && isHorizontal ? 'inline-flex' : 'flex',\n ...(root\n ? [\n 'h-full',\n 'rounded-none border-transparent',\n hasChildren && 'hover:border-current',\n isHorizontal ? 'border-b-2' : 'border-r-2',\n isInline && 'border-none',\n ]\n : ['rounded-md', ...STYLES.hover.classes]),\n customClasses,\n );\n\nconst Item = ({\n itemKey,\n keyPath,\n root = false,\n index,\n mode,\n label,\n children,\n selectionMap,\n classNames,\n styles,\n offset = OFFSET,\n inlineOffset = INLINE_OFFSET,\n onClick,\n onSelect,\n ...props\n}: ItemProps) => {\n const [open, setOpen] = useState<boolean>(false);\n\n const itemRef = useRef<HTMLLIElement \| null>(null);\n\n const isHorizontal = mode === 'horizontal';\n const isInline = mode === 'inline';\n\n const [left, top] = offset;\n\n const selected = selectionMap?.get(itemKey) ?? false;\n\n const item = {\n ...props,\n label,\n key: itemKey,\n children,\n };\n\n const itemClassNames = getItemClasses(\n root,\n isHorizontal,\n isInline,\n !!children?.length,\n root ? classNames?.rootItem : classNames?.item,\n );\n\n const handleSelect = (domEvent: React.SyntheticEvent) => {\n domEvent.stopPropagation();\n\n if (isInline) {\n setOpen(!open);\n }\n\n const params = {\n domEvent,\n key: itemKey,\n keyPath,\n item,\n };\n\n onClick?.(params);\n\n if (!selected) {\n onSelect?.(params);\n }\n };\n\n // Roving tabindex (WAI-ARIA menu pattern): only the first item in each\n // menu/submenu level is a Tab stop (below); arrow keys move real DOM\n // focus between sibling <li>s within that same level, which is what\n // ends up mattering for actual keyboard use even though — unlike a\n // fully state-tracked implementation — focus resets to the first item\n // if the user Tabs out and back in rather than resuming where they left\n // off.\n const handleKeyDown = (domEvent: React.KeyboardEvent) => {\n if (domEvent.key === 'Enter' \|\| domEvent.key === ' ') {\n domEvent.preventDefault();\n handleSelect(domEvent);\n return;\n }\n\n if (domEvent.key === 'Escape') {\n if (children?.length && open) {\n domEvent.stopPropagation();\n setOpen(false);\n }\n return;\n }\n\n const isNext = isHorizontal\n ? domEvent.key === 'ArrowRight'\n : domEvent.key === 'ArrowDown';\n const isPrev = isHorizontal\n ? domEvent.key === 'ArrowLeft'\n : domEvent.key === 'ArrowUp';\n\n if (!isNext && !isPrev) {\n return;\n }\n\n domEvent.preventDefault();\n const sibling = isNext\n ? itemRef.current?.nextElementSibling\n : itemRef.current?.previousElementSibling;\n sibling?.querySelector<HTMLElement>('[role=\"menuitem\"]')?.focus();\n };\n\n const childrenContainerClassNames = cn(\n isInline ? 'relative overflow-hidden' : 'absolute min-w-[200px]',\n !isInline && root && isHorizontal\n ? 'left-0 top-full pt-2 pl-0'\n : !isInline\n ? 'left-full top-0 pl-2 pt-0'\n : 'pl-4',\n );\n\n const childrenContainerStyle = isInline\n ? {\n paddingLeft: inlineOffset,\n }\n : root && isHorizontal\n ? {\n paddingTop: top,\n }\n : {\n paddingLeft: left,\n };\n\n return (\n <li\n ref={itemRef}\n role=\"none\"\n className={cn(\n 'group',\n 'relative',\n root && isHorizontal ? 'inline-block' : 'block',\n )}\n onMouseEnter={() => {\n if (isInline) {\n return;\n }\n setOpen(true);\n }}\n onMouseLeave={() => {\n if (isInline) {\n return;\n }\n setOpen(false);\n }}\n onFocus={() => {\n if (isInline) {\n return;\n }\n setOpen(true);\n }}\n onBlur={e => {\n if (isInline) {\n return;\n }\n if (!itemRef.current?.contains(e.relatedTarget as Node)) {\n setOpen(false);\n }\n }}\n >\n <div\n role=\"menuitem\"\n tabIndex={index === 0 ? 0 : -1}\n aria-expanded={children?.length ? open : undefined}\n aria-haspopup={children?.length ? 'menu' : undefined}\n aria-current={selected ? true : undefined}\n className={cn(\n itemClassNames,\n ...(selected\n ? root\n ? ['border-current']\n : [...STYLES.open.classes, ...STYLES.hover.classes]\n : root && !!children?.length\n ? ['group-hover:border-current']\n : []),\n //\n )}\n style={root ? styles?.rootItem : styles?.item}\n onClick={handleSelect}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(\n 'w-full',\n 'inline-flex items-center justify-between',\n //\n )}\n >\n <Label className={cn(classNames?.label)} style={styles?.label}>\n {label}\n </Label>\n {!root && !isInline && !!children?.length && (\n <ChevronDown className={cn('-rotate-90')} />\n )}\n {isInline && !!children?.length && (\n <ChevronDown\n className={cn(\n 'transition-all',\n open ? '-rotate-180' : 'rotate-0',\n )}\n />\n )}\n </div>\n </div>\n <AnimatePresence>\n {!!children?.length && open && (\n <motion.div\n className={cn(\n childrenContainerClassNames,\n //\n )}\n style={childrenContainerStyle}\n initial={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n animate={isInline ? { height: 'auto', opacity: 1 } : { opacity: 1 }}\n exit={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n transition={{ duration: 0.2 }}\n >\n <ul\n role=\"menu\"\n className={cn(\n MENU_CLASSNAMES,\n isInline && 'shadow-none',\n classNames?.subMenu,\n //\n )}\n style={styles?.subMenu}\n >\n {children.map((child, childIndex) => (\n <Item\n {...child}\n key={child.key}\n itemKey={child.key}\n keyPath={[...keyPath, child.key]}\n index={childIndex}\n selectionMap={selectionMap}\n mode={mode}\n classNames={classNames}\n styles={styles}\n offset={offset}\n inlineOffset={inlineOffset}\n onClick={onClick}\n onSelect={onSelect}\n />\n ))}\n </ul>\n </motion.div>\n )}\n </AnimatePresence>\n </li>\n );\n};\n\nexport default Item;\n"],"mappings":"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"}

package/dist/components/molecules/menu/menu.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu.d.mts","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"mappings":";;;~~UAQiB~~,QAAA;EACf,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,IAAA;EACA,IAAA;EACA,QAAA,GAAW,QAAA;AAAA;AAAA,UAGI,KAAA;EACf,IAAA;EACA,YAAA,GAAe,KAAA,CAAM,GAAA;EACrB,mBAAA,GAAsB,KAAA,CAAM,GAAA;EAC5B,YAAA,GAAe,YAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;IACE,QAAA;IACA,OAAA;IACA,IAAA;IACA,KAAA;EAAA;~~EAGF~~,MAAA;IACE,QAAA,GAAW,KAAA,CAAM,aAAA;IACjB,OAAA,GAAU,KAAA,CAAM,aAAA;IAChB,IAAA,GAAO,KAAA,CAAM,aAAA;IACb,KAAA,GAAQ,KAAA,CAAM,aAAA;EAAA;~~EAGhB~~,OAAA,GAAU,iBAAA;EACV,QAAA,GAAW,iBAAA;AAAA;AAAA,UAGI,SAAA,SAEb,KAAA,EACA,IAAA,CAAK,KAAA,CAAM,wBAAA;EACb,KAAA,GAAQ,QAAA;AAAA;AAAA,KAGE,iBAAA,IAAqB,MAAA;EAC/B,QAAA,EAAU,KAAA,CAAM,cAAA;EAChB,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,OAAA,EAAS,KAAA,CAAM,GAAA;EACf,IAAA,EAAM,QAAA;AAAA;AAAA,cAGK,eAAA;AAAA,KASD,YAAA,GAAe,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAEhC,iBAAA,GACX,KAAA,EAAO,QAAA,IACP,eAAA,EAAiB,WAAA,CAAY,KAAA,CAAM,GAAA,MAClC,YAAA;AAAA,cAeU,OAAA,GACX,IAAA,EAAM,QAAA,EACN,UAAA,EAAY,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAiB1B,IAAA;EAAQ,KAAA;EAAA,IAAA;EAAA,mBAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAaX,SAAA,KAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1	+ {"version":3,"file":"menu.d.mts","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"mappings":";;;UAUiB,QAAA;EACf,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,IAAA;EACA,IAAA;EACA,QAAA,GAAW,QAAA;AAAA;AAAA,UAGI,KAAA;EACf,IAAA;EACA,YAAA,GAAe,KAAA,CAAM,GAAA;EACrB,mBAAA,GAAsB,KAAA,CAAM,GAAA;EAC5B,YAAA,GAAe,YAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;IACE,QAAA;IACA,OAAA;IACA,IAAA;IACA,KAAA;EAAA;EAEF,MAAA;IACE,QAAA,GAAW,KAAA,CAAM,aAAA;IACjB,OAAA,GAAU,KAAA,CAAM,aAAA;IAChB,IAAA,GAAO,KAAA,CAAM,aAAA;IACb,KAAA,GAAQ,KAAA,CAAM,aAAA;EAAA;EAEhB,OAAA,GAAU,iBAAA;EACV,QAAA,GAAW,iBAAA;AAAA;AAAA,UAGI,SAAA,SAEb,KAAA,EACA,IAAA,CAAK,KAAA,CAAM,wBAAA;EACb,KAAA,GAAQ,QAAA;AAAA;AAAA,KAGE,iBAAA,IAAqB,MAAA;EAC/B,QAAA,EAAU,KAAA,CAAM,cAAA;EAChB,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,OAAA,EAAS,KAAA,CAAM,GAAA;EACf,IAAA,EAAM,QAAA;AAAA;AAAA,cAGK,eAAA;AAAA,KASD,YAAA,GAAe,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAEhC,iBAAA,GACX,KAAA,EAAO,QAAA,IACP,eAAA,EAAiB,WAAA,CAAY,KAAA,CAAM,GAAA,MAClC,YAAA;AAAA,cAeU,OAAA,GACX,IAAA,EAAM,QAAA,EACN,UAAA,EAAY,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAiB1B,IAAA;EAAQ,KAAA;EAAA,IAAA;EAAA,mBAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAaX,SAAA,KAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/menu/menu.mjs CHANGED Viewed

@@ -2,8 +2,9 @@
 import { cn } from "../../../utils.mjs";
 import Item from "./item/item.mjs";
-import { createElement, useMemo, useState } from "react";
+import { createElement, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 //#region src/components/molecules/menu/menu.tsx
 const MENU_CLASSNAMES = [
@@ -33,26 +34,27 @@ const findKey = (menu, targetKeys) => {
 	return false;
 };
 const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }) => {
-	const controlled = _selectedKeys !== void 0;
-	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys ?? []);
-	const selectedKeys = controlled ? _selectedKeys : uncontrolledSelectedKeys;
+	const [selectedKeys, setSelectedKeys] = useControllableState({
+		value: _selectedKeys,
+		defaultValue: defaultSelectedKeys ?? []
+	});
 	const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
 	const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
 	const onSelect = (params) => {
-		if (!controlled) setUncontrolledSelectedKeys([params.key]);
+		setSelectedKeys([params.key]);
 		_onSelect?.(params);
 	};
 	return /* @__PURE__ */ jsx("ul", {
 		role: "menu",
 		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
 		...props,
-		children: items?.map((item) => /* @__PURE__ */ createElement(Item, {
+		children: items?.map((item, index) => /* @__PURE__ */ createElement(Item, {
 			root: true,
 			...item,
 			key: item.key,
 			itemKey: item.key,
 			keyPath: [item.key],
-			selectedKeys,
+			index,
 			selectionMap,
 			mode,
 			classNames,

package/dist/components/molecules/menu/menu.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, ~~useState~~ } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n label: React.ReactNode;\n key: React.Key;\n type?: string;\n path?: string;\n children?: MenuItem[];\n}\n\nexport interface Props {\n mode?: 'horizontal' \| 'vertical' \| 'inline';\n selectedKeys?: React.Key[];\n defaultSelectedKeys?: React.Key[];\n selectionMap?: SelectionMap;\n offset?: [number, number];\n inlineOffset?: number;\n classNames?: {\n rootItem?: string;\n subMenu?: string;\n item?: string;\n label?: string;\n ~~// open?: string;\n~~ };\n styles?: {\n rootItem?: React.CSSProperties;\n subMenu?: React.CSSProperties;\n item?: React.CSSProperties;\n label?: React.CSSProperties;\n ~~// open?: React.CSSProperties;\n~~ };\n onClick?: ClickEventHandler;\n onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n extends\n Props,\n Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' \| 'onSelect'> {\n items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n domEvent: React.SyntheticEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n 'p-0',\n 'bg-popover',\n 'text-popover-foreground',\n 'shadow-md',\n 'rounded-md',\n //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n items: MenuItem[],\n selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n const map = new Map<React.Key, boolean>();\n\n const dfs = (node: MenuItem): boolean => {\n const self = selectedKeysSet.has(node.key);\n const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n const isSelected = self \|\| hasSelectedChild;\n map.set(node.key, isSelected);\n return isSelected;\n };\n\n items.forEach(dfs);\n return map;\n};\n\nexport const findKey = (\n menu: MenuItem,\n targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n if (targetKeys.has(menu.key)) {\n return true;\n }\n\n if (menu.children && Array.isArray(menu.children)) {\n for (const child of menu.children) {\n if (findKey(child, targetKeys)) {\n return true;\n }\n }\n }\n\n return false;\n};\n\nconst Menu = ({\n items,\n mode = 'vertical',\n defaultSelectedKeys = [],\n selectedKeys: _selectedKeys,\n className,\n classNames,\n styles,\n offset,\n inlineOffset,\n onClick,\n onSelect: _onSelect,\n ...props\n}: MenuProps) => {\n const ~~controlled = _selectedKeys !== undefined;\n const~~ [~~uncontrolledSelectedKeys~~, ~~setUncontrolledSelectedKeys~~] = ~~useState<\n~~ React.Key[]\n >(~~defaultSelectedKeys ?? []);\n~~\n ~~const~~ ~~selectedKeys = controlled\~~n ? ~~(_selectedKeys~~ as ~~React.Key~~[])~~\n : uncontrolledSelectedKeys~~;\n\n const selectedKeysSet = useMemo(\n () => new Set<React.Key>(selectedKeys ?? []),\n [selectedKeys],\n );\n\n const selectionMap = useMemo(\n () => buildSelectionMap(items ?? [], selectedKeysSet),\n [items, selectedKeysSet],\n );\n\n const onSelect = (params: {\n domEvent: React.SyntheticEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n }) => {\n if (~~!controlled) {\n setUncontrolledSelectedKeys(~~[params.key]);\n ~~}\n~~ _onSelect?.(params);\n };\n\n return (\n <ul\n role=\"menu\"\n className={cn(\n MENU_CLASSNAMES,\n mode === 'horizontal' ? 'flex' : 'inline-block',\n className,\n )}\n {...props}\n >\n {items?.map(item => (\n <Item\n root\n {...item}\n key={item.key}\n itemKey={item.key}\n keyPath={[item.key]}\n ~~selectedKeys~~={~~selectedKeys~~}\n selectionMap={selectionMap}\n mode={mode}\n classNames={classNames}\n styles={styles}\n offset={offset}\n inlineOffset={inlineOffset}\n onClick={onClick}\n onSelect={onSelect}\n />\n ))}\n </ul>\n );\n};\n\nexport default Menu;\n"],"mappings":"~~;;;;;;;;~~AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CAED;AAID,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,KAAyB;CAEzC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,IAAI;EAC1C,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,MAAM,CAAC,IAAI;EACrE,MAAM,aAAa,QAAQ;AAC3B,MAAI,IAAI,KAAK,KAAK,WAAW;AAC7B,SAAO;;AAGT,OAAM,QAAQ,IAAI;AAClB,QAAO;;AAGT,MAAa,WACX,MACA,eACY;AACZ,KAAI,WAAW,IAAI,KAAK,IAAI,CAC1B,QAAO;AAGT,KAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,EAC/C;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,QAAQ,OAAO,WAAW,CAC5B,QAAO;;AAKb,QAAO;;AAGT,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,EAAE,EACxB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,~~aAAa~~,~~kBAAkB;CACrC~~,~~MAAM~~,~~CAAC~~,~~0BAA0B,+BAA+B~~,~~SAE9D~~,uBAAuB,EAAE,CAAC;~~CAE5B~~,MAAM,~~eAAe,aAChB,gBACD;CAEJ,MAAM,~~kBAAkB,cAChB,IAAI,IAAe,gBAAgB,EAAE,CAAC,EAC5C,CAAC,aAAa,CACf;CAED,MAAM,eAAe,cACb,kBAAkB,SAAS,EAAE,EAAE,gBAAgB,EACrD,CAAC,OAAO,gBAAgB,CACzB;CAED,MAAM,YAAY,WAKZ;AACJ,~~MAAI~~,CAAC,~~WACH,6BAA4B,CAAC,~~OAAO,IAAI,CAAC;~~AAE3C~~,cAAY,OAAO;;AAGrB,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,UACD;EACD,GAAI;YAEH,OAAO,~~KAAI~~,~~SACV~~,8BAAC;GACC;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,IAAI;~~GACL~~;~~GACA~~;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;IACV,CACF;GACC"}
1	+ {"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n label: React.ReactNode;\n key: React.Key;\n type?: string;\n path?: string;\n children?: MenuItem[];\n}\n\nexport interface Props {\n mode?: 'horizontal' \| 'vertical' \| 'inline';\n selectedKeys?: React.Key[];\n defaultSelectedKeys?: React.Key[];\n selectionMap?: SelectionMap;\n offset?: [number, number];\n inlineOffset?: number;\n classNames?: {\n rootItem?: string;\n subMenu?: string;\n item?: string;\n label?: string;\n };\n styles?: {\n rootItem?: React.CSSProperties;\n subMenu?: React.CSSProperties;\n item?: React.CSSProperties;\n label?: React.CSSProperties;\n };\n onClick?: ClickEventHandler;\n onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n extends\n Props,\n Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' \| 'onSelect'> {\n items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n domEvent: React.SyntheticEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n 'p-0',\n 'bg-popover',\n 'text-popover-foreground',\n 'shadow-md',\n 'rounded-md',\n //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n items: MenuItem[],\n selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n const map = new Map<React.Key, boolean>();\n\n const dfs = (node: MenuItem): boolean => {\n const self = selectedKeysSet.has(node.key);\n const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n const isSelected = self \|\| hasSelectedChild;\n map.set(node.key, isSelected);\n return isSelected;\n };\n\n items.forEach(dfs);\n return map;\n};\n\nexport const findKey = (\n menu: MenuItem,\n targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n if (targetKeys.has(menu.key)) {\n return true;\n }\n\n if (menu.children && Array.isArray(menu.children)) {\n for (const child of menu.children) {\n if (findKey(child, targetKeys)) {\n return true;\n }\n }\n }\n\n return false;\n};\n\nconst Menu = ({\n items,\n mode = 'vertical',\n defaultSelectedKeys = [],\n selectedKeys: _selectedKeys,\n className,\n classNames,\n styles,\n offset,\n inlineOffset,\n onClick,\n onSelect: _onSelect,\n ...props\n}: MenuProps) => {\n const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n value: _selectedKeys,\n defaultValue: defaultSelectedKeys ?? [],\n });\n\n const selectedKeysSet = useMemo(\n () => new Set<React.Key>(selectedKeys ?? []),\n [selectedKeys],\n );\n\n const selectionMap = useMemo(\n () => buildSelectionMap(items ?? [], selectedKeysSet),\n [items, selectedKeysSet],\n );\n\n const onSelect = (params: {\n domEvent: React.SyntheticEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n }) => {\n setSelectedKeys([params.key]);\n _onSelect?.(params);\n };\n\n return (\n <ul\n role=\"menu\"\n className={cn(\n MENU_CLASSNAMES,\n mode === 'horizontal' ? 'flex' : 'inline-block',\n className,\n )}\n {...props}\n >\n {items?.map((item, index) => (\n <Item\n root\n {...item}\n key={item.key}\n itemKey={item.key}\n keyPath={[item.key]}\n index={index}\n selectionMap={selectionMap}\n mode={mode}\n classNames={classNames}\n styles={styles}\n offset={offset}\n inlineOffset={inlineOffset}\n onClick={onClick}\n onSelect={onSelect}\n />\n ))}\n </ul>\n );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CAED;AAID,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,KAAyB;CAEzC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,IAAI;EAC1C,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,MAAM,CAAC,IAAI;EACrE,MAAM,aAAa,QAAQ;AAC3B,MAAI,IAAI,KAAK,KAAK,WAAW;AAC7B,SAAO;;AAGT,OAAM,QAAQ,IAAI;AAClB,QAAO;;AAGT,MAAa,WACX,MACA,eACY;AACZ,KAAI,WAAW,IAAI,KAAK,IAAI,CAC1B,QAAO;AAGT,KAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,EAC/C;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,QAAQ,OAAO,WAAW,CAC5B,QAAO;;AAKb,QAAO;;AAGT,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,EAAE,EACxB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,EAAE;EACxC,CAAC;CAEF,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,EAAE,CAAC,EAC5C,CAAC,aAAa,CACf;CAED,MAAM,eAAe,cACb,kBAAkB,SAAS,EAAE,EAAE,gBAAgB,EACrD,CAAC,OAAO,gBAAgB,CACzB;CAED,MAAM,YAAY,WAKZ;AACJ,kBAAgB,CAAC,OAAO,IAAI,CAAC;AAC7B,cAAY,OAAO;;AAGrB,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,UACD;EACD,GAAI;YAEH,OAAO,KAAK,MAAM,UACjB,8BAAC;GACC;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,IAAI;GACZ;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;IACV,CACF;GACC"}

package/dist/components/molecules/splitter/splitter.mjs CHANGED Viewed

@@ -2,7 +2,7 @@
 import { cn } from "../../../utils.mjs";
 import { resizable_exports } from "../../../core/resizable.mjs";
-import { Children, Fragment } from "react";
+import { Children, Fragment, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/splitter/splitter.tsx
@@ -20,7 +20,7 @@ const Splitter = ({ children, className, orientation = "horizontal", withHandle
                 transition-colors`, handleClassName),
 			withHandle: withHandle && handle === void 0,
 			children: handle
-		})] }, index))
+		})] }, isValidElement(panel) && panel.key != null ? panel.key : index))
 	});
 };

package/dist/components/molecules/splitter/splitter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"splitter.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/splitter/splitter.tsx"],"sourcesContent":["'use client';\n\nimport { Children, Fragment } from 'react';\n\nimport { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizableHandle, ResizablePanelGroup } = resizable;\n\ntype SplitterLayout = Parameters<\n NonNullable<\n React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']\n >\n>[0];\n\nexport interface Props extends Omit<\n React.ComponentProps<typeof ResizablePanelGroup>,\n 'children' \| 'orientation' \| 'onLayoutChange' \| 'onLayoutChanged' \| 'onResize'\n> {\n children: React.ReactNode;\n orientation?: 'horizontal' \| 'vertical';\n withHandle?: boolean;\n handle?: React.ReactNode;\n handleClassName?: string;\n onResize?: (layout: SplitterLayout) => void;\n onResizeEnd?: (layout: SplitterLayout) => void;\n}\n\nconst Splitter = ({\n children,\n className,\n orientation = 'horizontal',\n withHandle = true,\n handle,\n handleClassName,\n onResize,\n onResizeEnd,\n ...props\n}: Props) => {\n const panels = Children.toArray(children);\n\n return (\n <ResizablePanelGroup\n className={cn(\n 'border-border/60 h-full w-full rounded-lg border',\n className,\n )}\n orientation={orientation}\n onLayoutChange={onResize}\n onLayoutChanged={onResizeEnd}\n {...props}\n >\n {panels.map((panel, index) => (\n <Fragment key={index}>\n {panel}\n {index < panels.length - 1 && (\n <ResizableHandle\n className={cn(\n `hover:bg-border/80 data-separator-active:bg-border\n transition-colors`,\n handleClassName,\n )}\n withHandle={withHandle && handle === undefined}\n >\n {handle}\n </ResizableHandle>\n )}\n </Fragment>\n ))}\n </ResizablePanelGroup>\n );\n};\n\nexport default Splitter;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,iBAAiB,wBAAwBA;AAqBjD,MAAM,YAAY,EAChB,UACA,WACA,cAAc,cACd,aAAa,MACb,QACA,iBACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,SAAS,SAAS,QAAQ,SAAS;AAEzC,QACE,oBAAC;EACC,WAAW,GACT,oDACA,UACD;EACY;EACb,gBAAgB;EAChB,iBAAiB;EACjB,GAAI;YAEH,OAAO,KAAK,OAAO,UAClB,qBAAC,~~uBACE~~,OACA,QAAQ,OAAO,SAAS,KACvB,oBAAC;GACC,WAAW,GACT;oCAEA,gBACD;GACD,YAAY,cAAc,WAAW;aAEpC;IACe,~~KAZP~~,~~MAcJ~~,CACX;GACkB"}
1	+ {"version":3,"file":"splitter.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/splitter/splitter.tsx"],"sourcesContent":["'use client';\n\nimport { Children, Fragment, isValidElement } from 'react';\n\nimport { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizableHandle, ResizablePanelGroup } = resizable;\n\ntype SplitterLayout = Parameters<\n NonNullable<\n React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']\n >\n>[0];\n\nexport interface Props extends Omit<\n React.ComponentProps<typeof ResizablePanelGroup>,\n 'children' \| 'orientation' \| 'onLayoutChange' \| 'onLayoutChanged' \| 'onResize'\n> {\n children: React.ReactNode;\n orientation?: 'horizontal' \| 'vertical';\n withHandle?: boolean;\n handle?: React.ReactNode;\n handleClassName?: string;\n onResize?: (layout: SplitterLayout) => void;\n onResizeEnd?: (layout: SplitterLayout) => void;\n}\n\nconst Splitter = ({\n children,\n className,\n orientation = 'horizontal',\n withHandle = true,\n handle,\n handleClassName,\n onResize,\n onResizeEnd,\n ...props\n}: Props) => {\n const panels = Children.toArray(children);\n\n return (\n <ResizablePanelGroup\n className={cn(\n 'border-border/60 h-full w-full rounded-lg border',\n className,\n )}\n orientation={orientation}\n onLayoutChange={onResize}\n onLayoutChanged={onResizeEnd}\n {...props}\n >\n {panels.map((panel, index) => (\n <Fragment\n key={isValidElement(panel) && panel.key != null ? panel.key : index}\n >\n {panel}\n {index < panels.length - 1 && (\n <ResizableHandle\n className={cn(\n `hover:bg-border/80 data-separator-active:bg-border\n transition-colors`,\n handleClassName,\n )}\n withHandle={withHandle && handle === undefined}\n >\n {handle}\n </ResizableHandle>\n )}\n </Fragment>\n ))}\n </ResizablePanelGroup>\n );\n};\n\nexport default Splitter;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,iBAAiB,wBAAwBA;AAqBjD,MAAM,YAAY,EAChB,UACA,WACA,cAAc,cACd,aAAa,MACb,QACA,iBACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,SAAS,SAAS,QAAQ,SAAS;AAEzC,QACE,oBAAC;EACC,WAAW,GACT,oDACA,UACD;EACY;EACb,gBAAgB;EAChB,iBAAiB;EACjB,GAAI;YAEH,OAAO,KAAK,OAAO,UAClB,qBAAC,uBAGE,OACA,QAAQ,OAAO,SAAS,KACvB,oBAAC;GACC,WAAW,GACT;oCAEA,gBACD;GACD,YAAY,cAAc,WAAW;aAEpC;IACe,KAbf,eAAe,MAAM,IAAI,MAAM,OAAO,OAAO,MAAM,MAAM,MAerD,CACX;GACkB"}

package/dist/components/molecules/upload.d.mts CHANGED Viewed

@@ -42,5 +42,5 @@ declare const Upload: ({
   onReject
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Upload, UploadFile };
+export { Props, Upload, UploadFile };
 //# sourceMappingURL=upload.d.mts.map

package/dist/components/organisms/drawer.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";;;~~UA0CiB~~,KAAA;EACf,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,QAAA;EACA,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,SAAA;EACA,IAAA;EACA,YAAA;EACA,SAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,UAAA;IACE,IAAA;IACA,OAAA;IACA,SAAA;IACA,MAAA;IACA,KAAA;IACA,KAAA;IACA,KAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,SAAA,GAAY,WAAA;EACZ,OAAA;AAAA;AAAA,cA8BI,MAAA;EAAU,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAqBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1	+ {"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";;;UA2CiB,KAAA;EACf,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,QAAA;EACA,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,SAAA;EACA,IAAA;EACA,YAAA;EACA,SAAA;EACA,SAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,UAAA;IACE,IAAA;IACA,OAAA;IACA,SAAA;IACA,MAAA;IACA,KAAA;IACA,KAAA;IACA,KAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,SAAA,GAAY,WAAA;EACZ,OAAA;AAAA;AAAA,cA8BI,MAAA;EAAU,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAqBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/organisms/drawer.mjs CHANGED Viewed

@@ -3,6 +3,7 @@
 import { cn, renderConditional } from "../../utils.mjs";
 import { drawer_exports } from "../../core/drawer.mjs";
 import Button from "../../Button.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../providers/Config/context.mjs";
 import { X } from "lucide-react";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -38,6 +39,7 @@ const getSizeStyles = (direction, size) => {
 	return direction === "top" || direction === "bottom" ? { height: value } : { width: value };
 };
 const Drawer = ({ open, title, extra, footer, closable = true, closeIcon, direction = "bottom", size = "medium", maskClosable = true, handlebar = true, draggable = false, rounded = false, mask = true, className, classNames, style, children, container, onClose, ...props }) => {
+	const { locale } = useConfig();
 	useEffect(() => {
 		if (!open || mask) return;
 		const targetDocument = container?.ownerDocument ?? document;
@@ -95,7 +97,7 @@ const Drawer = ({ open, title, extra, footer, closable = true, closeIcon, direct
 							type: "text",
 							shape: "circle",
 							size: "small",
-							"aria-label": "닫기",
+							"aria-label": locale.close ?? DEFAULT_LOCALE.close,
 							icon: closeIcon || /* @__PURE__ */ jsx(X, {}),
 							onClick: onClose,
 							className: cn(classNames?.close)

package/dist/components/organisms/drawer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n DrawerContent,\n Drawer: DrawerCore,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n} = drawer;\n\n// `body.style.pointerEvents` is global state (per document), so several\n// mask-less overlays opening at once would otherwise race: each instance\n// would capture whatever the previous one had already written and the\n// last cleanup would restore a stale value. Reference counting makes only\n// the first instance capture the original value and only the last one\n// restore it. Keyed by document (not a single module-level counter) so\n// drawers portaled into different documents — e.g. live-editor's iframe\n// Renderer — don't share state with the host document.\ntype MaskLessState = { count: number; originalPointerEvents: string \| null };\nconst maskLessStates = new WeakMap<Document, MaskLessState>();\n\nconst getMaskLessState = (doc: Document): MaskLessState => {\n let state = maskLessStates.get(doc);\n\n if (!state) {\n state = { count: 0, originalPointerEvents: null };\n maskLessStates.set(doc, state);\n }\n\n return state;\n};\n\nexport interface Props {\n open: boolean;\n children?: React.ReactNode;\n title?: React.ReactNode;\n extra?: React.ReactNode;\n footer?: React.ReactNode;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n direction?: 'top' \| 'bottom' \| 'left' \| 'right';\n size?: 'small' \| 'medium' \| 'large' \| 'full' \| string;\n maskClosable?: boolean;\n handlebar?: boolean;\n draggable?: boolean;\n rounded?: boolean;\n mask?: boolean;\n className?: string;\n style?: React.CSSProperties;\n classNames?: {\n mask?: string;\n content?: string;\n handlebar?: string;\n header?: string;\n title?: string;\n close?: string;\n extra?: string;\n body?: string;\n footer?: string;\n };\n container?: HTMLElement;\n onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n small: '30%',\n medium: '50%',\n large: '75%',\n full: '90%',\n};\n\n// Rounds the edge facing into the viewport — the opposite edge from\n// whichever side the drawer is anchored to.\nconst ROUNDED_CLASSES: Record<'top' \| 'bottom' \| 'left' \| 'right', string> = {\n top: 'rounded-b-[30px]!',\n bottom: 'rounded-t-[30px]!',\n left: 'rounded-r-[30px]!',\n right: 'rounded-l-[30px]!',\n};\n\nconst getSizeStyles = (\n direction: 'top' \| 'bottom' \| 'left' \| 'right',\n size: string,\n): React.CSSProperties => {\n const value = SIZES[size] \|\| size;\n\n return direction === 'top' \|\| direction === 'bottom'\n ? { height: value }\n : { width: value };\n};\n\nconst Drawer = ({\n open,\n title,\n extra,\n footer,\n closable = true,\n closeIcon,\n direction = 'bottom',\n size = 'medium',\n maskClosable = true,\n handlebar = true,\n draggable = false,\n rounded = false,\n mask = true,\n className,\n classNames,\n style,\n children,\n container,\n onClose,\n ...props\n}: Props) => {\n useEffect(() => {\n if (!open \|\| mask) {\n return;\n }\n\n const targetDocument = container?.ownerDocument ?? document;\n const targetWindow = targetDocument.defaultView ?? window;\n const body = targetDocument.body;\n const state = getMaskLessState(targetDocument);\n\n if (state.count === 0) {\n state.originalPointerEvents = body.style.pointerEvents;\n }\n state.count += 1;\n\n const raf = targetWindow.requestAnimationFrame(() => {\n body.style.pointerEvents = 'auto';\n });\n\n return () => {\n targetWindow.cancelAnimationFrame(raf);\n state.count -= 1;\n\n if (state.count === 0) {\n body.style.pointerEvents = state.originalPointerEvents ?? '';\n state.originalPointerEvents = null;\n }\n };\n }, [open, mask, container]);\n\n return (\n <DrawerCore\n open={open}\n direction={direction}\n handleOnly={!draggable}\n container={container}\n onOpenChange={open => {\n if (!open) {\n onClose();\n }\n }}\n {...props}\n >\n <DrawerContent\n className={cn(\n 'border-none outline-none',\n rounded ? ROUNDED_CLASSES[direction] : 'rounded-none!',\n classNames?.content,\n className,\n //\n )}\n handlebar={handlebar}\n mask={mask}\n onPointerDownOutside={event => {\n if (!maskClosable) {\n event.preventDefault();\n }\n }}\n classNames={{\n mask: classNames?.mask \|\| '',\n handlebar: classNames?.handlebar \|\| '',\n }}\n style={{\n ...getSizeStyles(direction, size),\n ...style,\n }}\n >\n <DrawerHeader\n className={cn(\n classNames?.header,\n !title && 'p-0',\n //\n )}\n >\n <div className=\"flex items-start gap-2\">\n {closable && (\n <Button\n type=\"text\"\n shape=\"circle\"\n size=\"small\"\n aria-label~~=\"닫기\"~~\n icon={closeIcon \|\| <X />}\n onClick={onClose}\n className={cn(classNames?.close)}\n />\n )}\n <div className=\"flex flex-1 items-start justify-between gap-2\">\n <DrawerTitle className={cn(classNames?.title)}>\n {title}\n </DrawerTitle>\n {renderConditional(extra, v => (\n <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n ))}\n </div>\n </div>\n <DrawerDescription className=\"hidden\" />\n </DrawerHeader>\n <div\n className={cn(\n 'overflow-auto p-5',\n classNames?.body,\n //\n )}\n >\n {children}\n </div>\n {renderConditional(footer, v => (\n <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n ))}\n </DrawerContent>\n </DrawerCore>\n );\n};\n\nexport default Drawer;\n"],"mappings":"~~;;;;;;;;;;AAWA~~,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAWJ,MAAM,iCAAiB,IAAI,SAAkC;AAE7D,MAAM,oBAAoB,QAAiC;CACzD,IAAI,QAAQ,eAAe,IAAI,IAAI;AAEnC,KAAI,CAAC,OAAO;AACV,UAAQ;GAAE,OAAO;GAAG,uBAAuB;GAAM;AACjD,iBAAe,IAAI,KAAK,MAAM;;AAGhC,QAAO;;AAmCT,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAID,MAAM,kBAAuE;CAC3E,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;~~AACX~~,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,iBAAiB,WAAW,iBAAiB;EACnD,MAAM,eAAe,eAAe,eAAe;EACnD,MAAM,OAAO,eAAe;EAC5B,MAAM,QAAQ,iBAAiB,eAAe;AAE9C,MAAI,MAAM,UAAU,EAClB,OAAM,wBAAwB,KAAK,MAAM;AAE3C,QAAM,SAAS;EAEf,MAAM,MAAM,aAAa,4BAA4B;AACnD,QAAK,MAAM,gBAAgB;IAC3B;AAEF,eAAa;AACX,gBAAa,qBAAqB,IAAI;AACtC,SAAM,SAAS;AAEf,OAAI,MAAM,UAAU,GAAG;AACrB,SAAK,MAAM,gBAAgB,MAAM,yBAAyB;AAC1D,UAAM,wBAAwB;;;IAGjC;EAAC;EAAM;EAAM;EAAU,CAAC;AAE3B,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,OAAI,CAAC,KACH,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,gBAAgB,aAAa,iBACvC,YAAY,SACZ,UAED;GACU;GACL;GACN,uBAAsB,UAAS;AAC7B,QAAI,CAAC,aACH,OAAM,gBAAgB;;GAG1B,YAAY;IACV,MAAM,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,YACC,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,~~cAAW~~;~~OACX~~,MAAM,aAAa,oBAAC,MAAI;OACxB,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,EAEJ,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}
1	+ {"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n DrawerContent,\n Drawer: DrawerCore,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n} = drawer;\n\n// `body.style.pointerEvents` is global state (per document), so several\n// mask-less overlays opening at once would otherwise race: each instance\n// would capture whatever the previous one had already written and the\n// last cleanup would restore a stale value. Reference counting makes only\n// the first instance capture the original value and only the last one\n// restore it. Keyed by document (not a single module-level counter) so\n// drawers portaled into different documents — e.g. live-editor's iframe\n// Renderer — don't share state with the host document.\ntype MaskLessState = { count: number; originalPointerEvents: string \| null };\nconst maskLessStates = new WeakMap<Document, MaskLessState>();\n\nconst getMaskLessState = (doc: Document): MaskLessState => {\n let state = maskLessStates.get(doc);\n\n if (!state) {\n state = { count: 0, originalPointerEvents: null };\n maskLessStates.set(doc, state);\n }\n\n return state;\n};\n\nexport interface Props {\n open: boolean;\n children?: React.ReactNode;\n title?: React.ReactNode;\n extra?: React.ReactNode;\n footer?: React.ReactNode;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n direction?: 'top' \| 'bottom' \| 'left' \| 'right';\n size?: 'small' \| 'medium' \| 'large' \| 'full' \| string;\n maskClosable?: boolean;\n handlebar?: boolean;\n draggable?: boolean;\n rounded?: boolean;\n mask?: boolean;\n className?: string;\n style?: React.CSSProperties;\n classNames?: {\n mask?: string;\n content?: string;\n handlebar?: string;\n header?: string;\n title?: string;\n close?: string;\n extra?: string;\n body?: string;\n footer?: string;\n };\n container?: HTMLElement;\n onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n small: '30%',\n medium: '50%',\n large: '75%',\n full: '90%',\n};\n\n// Rounds the edge facing into the viewport — the opposite edge from\n// whichever side the drawer is anchored to.\nconst ROUNDED_CLASSES: Record<'top' \| 'bottom' \| 'left' \| 'right', string> = {\n top: 'rounded-b-[30px]!',\n bottom: 'rounded-t-[30px]!',\n left: 'rounded-r-[30px]!',\n right: 'rounded-l-[30px]!',\n};\n\nconst getSizeStyles = (\n direction: 'top' \| 'bottom' \| 'left' \| 'right',\n size: string,\n): React.CSSProperties => {\n const value = SIZES[size] \|\| size;\n\n return direction === 'top' \|\| direction === 'bottom'\n ? { height: value }\n : { width: value };\n};\n\nconst Drawer = ({\n open,\n title,\n extra,\n footer,\n closable = true,\n closeIcon,\n direction = 'bottom',\n size = 'medium',\n maskClosable = true,\n handlebar = true,\n draggable = false,\n rounded = false,\n mask = true,\n className,\n classNames,\n style,\n children,\n container,\n onClose,\n ...props\n}: Props) => {\n const { locale } = useConfig();\n\n useEffect(() => {\n if (!open \|\| mask) {\n return;\n }\n\n const targetDocument = container?.ownerDocument ?? document;\n const targetWindow = targetDocument.defaultView ?? window;\n const body = targetDocument.body;\n const state = getMaskLessState(targetDocument);\n\n if (state.count === 0) {\n state.originalPointerEvents = body.style.pointerEvents;\n }\n state.count += 1;\n\n const raf = targetWindow.requestAnimationFrame(() => {\n body.style.pointerEvents = 'auto';\n });\n\n return () => {\n targetWindow.cancelAnimationFrame(raf);\n state.count -= 1;\n\n if (state.count === 0) {\n body.style.pointerEvents = state.originalPointerEvents ?? '';\n state.originalPointerEvents = null;\n }\n };\n }, [open, mask, container]);\n\n return (\n <DrawerCore\n open={open}\n direction={direction}\n handleOnly={!draggable}\n container={container}\n onOpenChange={open => {\n if (!open) {\n onClose();\n }\n }}\n {...props}\n >\n <DrawerContent\n className={cn(\n 'border-none outline-none',\n rounded ? ROUNDED_CLASSES[direction] : 'rounded-none!',\n classNames?.content,\n className,\n //\n )}\n handlebar={handlebar}\n mask={mask}\n onPointerDownOutside={event => {\n if (!maskClosable) {\n event.preventDefault();\n }\n }}\n classNames={{\n mask: classNames?.mask \|\| '',\n handlebar: classNames?.handlebar \|\| '',\n }}\n style={{\n ...getSizeStyles(direction, size),\n ...style,\n }}\n >\n <DrawerHeader\n className={cn(\n classNames?.header,\n !title && 'p-0',\n //\n )}\n >\n <div className=\"flex items-start gap-2\">\n {closable && (\n <Button\n type=\"text\"\n shape=\"circle\"\n size=\"small\"\n aria-label={locale.close ?? DEFAULT_LOCALE.close}\n icon={closeIcon \|\| <X />}\n onClick={onClose}\n className={cn(classNames?.close)}\n />\n )}\n <div className=\"flex flex-1 items-start justify-between gap-2\">\n <DrawerTitle className={cn(classNames?.title)}>\n {title}\n </DrawerTitle>\n {renderConditional(extra, v => (\n <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n ))}\n </div>\n </div>\n <DrawerDescription className=\"hidden\" />\n </DrawerHeader>\n <div\n className={cn(\n 'overflow-auto p-5',\n classNames?.body,\n //\n )}\n >\n {children}\n </div>\n {renderConditional(footer, v => (\n <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n ))}\n </DrawerContent>\n </DrawerCore>\n );\n};\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAWJ,MAAM,iCAAiB,IAAI,SAAkC;AAE7D,MAAM,oBAAoB,QAAiC;CACzD,IAAI,QAAQ,eAAe,IAAI,IAAI;AAEnC,KAAI,CAAC,OAAO;AACV,UAAQ;GAAE,OAAO;GAAG,uBAAuB;GAAM;AACjD,iBAAe,IAAI,KAAK,MAAM;;AAGhC,QAAO;;AAmCT,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAID,MAAM,kBAAuE;CAC3E,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,WAAW;AAE9B,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,iBAAiB,WAAW,iBAAiB;EACnD,MAAM,eAAe,eAAe,eAAe;EACnD,MAAM,OAAO,eAAe;EAC5B,MAAM,QAAQ,iBAAiB,eAAe;AAE9C,MAAI,MAAM,UAAU,EAClB,OAAM,wBAAwB,KAAK,MAAM;AAE3C,QAAM,SAAS;EAEf,MAAM,MAAM,aAAa,4BAA4B;AACnD,QAAK,MAAM,gBAAgB;IAC3B;AAEF,eAAa;AACX,gBAAa,qBAAqB,IAAI;AACtC,SAAM,SAAS;AAEf,OAAI,MAAM,UAAU,GAAG;AACrB,SAAK,MAAM,gBAAgB,MAAM,yBAAyB;AAC1D,UAAM,wBAAwB;;;IAGjC;EAAC;EAAM;EAAM;EAAU,CAAC;AAE3B,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,OAAI,CAAC,KACH,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,gBAAgB,aAAa,iBACvC,YAAY,SACZ,UAED;GACU;GACL;GACN,uBAAsB,UAAS;AAC7B,QAAI,CAAC,aACH,OAAM,gBAAgB;;GAG1B,YAAY;IACV,MAAM,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,YACC,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,cAAY,OAAO,SAAS,eAAe;OAC3C,MAAM,aAAa,oBAAC,MAAI;OACxB,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,EAEJ,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}

package/dist/components/organisms/imperative-stack.mjs ADDED Viewed

@@ -0,0 +1,106 @@
+'use client';
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { v4 } from "uuid";
+import { createRoot } from "react-dom/client";
+//#region src/components/organisms/imperative-stack.tsx
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function createImperativeStack({ createRootElement, StackItem }) {
+	const containerStates = /* @__PURE__ */ new Map();
+	const rootElements = /* @__PURE__ */ new WeakMap();
+	const reactRoots = /* @__PURE__ */ new Map();
+	const getContainerState = (container) => {
+		let state = containerStates.get(container);
+		if (!state) {
+			state = {
+				stack: [],
+				update: null
+			};
+			containerStates.set(container, state);
+		}
+		return state;
+	};
+	const getRootElement = (container) => {
+		if (!isBrowser) return null;
+		const targetContainer = container || document.body;
+		let rootEl = rootElements.get(targetContainer);
+		if (!rootEl) {
+			rootEl = createRootElement();
+			targetContainer.appendChild(rootEl);
+			rootElements.set(targetContainer, rootEl);
+		}
+		return rootEl;
+	};
+	const StackRenderer = ({ container }) => {
+		const [, forceUpdate] = useState({});
+		useEffect(() => {
+			const state = getContainerState(container);
+			state.update = () => forceUpdate({});
+			return () => {
+				state.update = null;
+			};
+		}, [container]);
+		const { stack } = getContainerState(container);
+		return /* @__PURE__ */ jsx(Fragment$1, { children: stack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StackItem, {
+			id,
+			...props
+		}, id)) });
+	};
+	const render = (props) => {
+		if (!isBrowser) return;
+		const targetContainer = props.container || document.body;
+		const rootElement = getRootElement(targetContainer);
+		if (!reactRoots.has(targetContainer)) {
+			const root = createRoot(rootElement);
+			reactRoots.set(targetContainer, root);
+			root.render(/* @__PURE__ */ jsx(StackRenderer, { container: targetContainer }));
+		}
+		const state = getContainerState(targetContainer);
+		const id = props.id || v4();
+		state.stack.push({
+			...props,
+			id
+		});
+		state.update?.();
+		return id;
+	};
+	const destroy = (id) => {
+		if (!id) {
+			containerStates.forEach((state) => {
+				state.stack = [];
+				state.update?.();
+			});
+			reactRoots.forEach((root, container) => {
+				root.unmount();
+				rootElements.get(container)?.remove();
+				rootElements.delete(container);
+			});
+			reactRoots.clear();
+			containerStates.clear();
+			return;
+		}
+		containerStates.forEach((state, container) => {
+			if (!state.stack.some((item) => item.id === id)) return;
+			state.stack = state.stack.filter((item) => item.id !== id);
+			state.update?.();
+			if (!state.stack.length) {
+				reactRoots.get(container)?.unmount();
+				reactRoots.delete(container);
+				containerStates.delete(container);
+				rootElements.get(container)?.remove();
+				rootElements.delete(container);
+			}
+		});
+	};
+	return {
+		render,
+		destroy,
+		getRootElement
+	};
+}
+//#endregion
+export { createImperativeStack, isBrowser };
+//# sourceMappingURL=imperative-stack.mjs.map

package/dist/components/organisms/imperative-stack.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"imperative-stack.mjs","names":["uuid"],"sources":["../../../src/components/organisms/imperative-stack.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport { v4 as uuid } from 'uuid';\n\n// Shared machinery behind Modal.info/success/error/warning/confirm and\n// Toast.info/success/error/warning — both used to independently\n// reimplement ~120 near-identical lines of this (container-scoped stack,\n// a React root per container, imperative render/destroy). The only parts\n// that actually differ between the two are the DOM node their stack\n// mounts into (position/ARIA) and which component renders each stack\n// entry — everything else here is generic over that.\n\nexport const isBrowser =\n typeof window !== 'undefined' && typeof document !== 'undefined';\n\ntype ContainerState<TProps> = {\n stack: (TProps & { id: string })[];\n update: (() => void) | null;\n};\n\nexport interface ImperativeStack<\n TProps extends { id?: string; container?: HTMLElement },\n> {\n render: (props: TProps) => string | undefined;\n destroy: (id?: string) => void;\n getRootElement: (container?: HTMLElement) => HTMLElement | null;\n}\n\nexport interface ImperativeStackOptions<\n TProps extends { id?: string; container?: HTMLElement },\n> {\n /** Creates the DOM node this stack's React root mounts into — not yet\n * attached to the document; the factory appends it to the target\n * container itself. Called once per distinct container. */\n createRootElement: () => HTMLElement;\n /** Renders one stack entry — typically each caller's \"Static<Thing>\"\n * component, which owns its own createPortal(..., getRootElement()). */\n StackItem: React.ComponentType<TProps & { id: string }>;\n}\n\nexport function createImperativeStack<\n TProps extends { id?: string; container?: HTMLElement },\n>({\n createRootElement,\n StackItem,\n}: ImperativeStackOptions<TProps>): ImperativeStack<TProps> {\n const containerStates = new Map<HTMLElement, ContainerState<TProps>>();\n const rootElements = new WeakMap<HTMLElement, HTMLElement>();\n const reactRoots = new Map<HTMLElement, Root>();\n\n const getContainerState = (\n container: HTMLElement,\n ): ContainerState<TProps> => {\n let state = containerStates.get(container);\n\n if (!state) {\n state = { stack: [], update: null };\n containerStates.set(container, state);\n }\n\n return state;\n };\n\n const getRootElement = (container?: HTMLElement): HTMLElement | null => {\n if (!isBrowser) {\n return null;\n }\n\n const targetContainer = container || document.body;\n let rootEl = rootElements.get(targetContainer);\n\n if (!rootEl) {\n rootEl = createRootElement();\n targetContainer.appendChild(rootEl);\n rootElements.set(targetContainer, rootEl);\n }\n\n return rootEl;\n };\n\n const StackRenderer = ({ container }: { container: HTMLElement }) => {\n const [, forceUpdate] = useState({});\n\n useEffect(() => {\n const state = getContainerState(container);\n state.update = () => forceUpdate({});\n return () => {\n state.update = null;\n };\n }, [container]);\n\n const { stack } = getContainerState(container);\n\n return (\n <>\n {stack.map(({ id, ...props }) => (\n <StackItem key={id} id={id} {...(props as TProps)} />\n ))}\n </>\n );\n };\n\n const render = (props: TProps): string | undefined => {\n if (!isBrowser) {\n return;\n }\n\n const targetContainer = props.container || document.body;\n const rootElement = getRootElement(targetContainer)!;\n\n if (!reactRoots.has(targetContainer)) {\n const root = createRoot(rootElement);\n reactRoots.set(targetContainer, root);\n root.render(<StackRenderer container={targetContainer} />);\n }\n\n const state = getContainerState(targetContainer);\n const id = props.id || uuid();\n state.stack.push({ ...props, id });\n state.update?.();\n\n return id;\n };\n\n const destroy = (id?: string) => {\n if (!id) {\n containerStates.forEach(state => {\n state.stack = [];\n state.update?.();\n });\n reactRoots.forEach((root, container) => {\n root.unmount();\n rootElements.get(container)?.remove();\n rootElements.delete(container);\n });\n reactRoots.clear();\n containerStates.clear();\n return;\n }\n\n containerStates.forEach((state, container) => {\n if (!state.stack.some(item => item.id === id)) {\n return;\n }\n\n state.stack = state.stack.filter(item => item.id !== id);\n state.update?.();\n\n if (!state.stack.length) {\n reactRoots.get(container)?.unmount();\n reactRoots.delete(container);\n containerStates.delete(container);\n rootElements.get(container)?.remove();\n rootElements.delete(container);\n }\n });\n };\n\n return { render, destroy, getRootElement };\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,YACX,OAAO,WAAW,eAAe,OAAO,aAAa;AA2BvD,SAAgB,sBAEd,EACA,mBACA,aAC0D;CAC1D,MAAM,kCAAkB,IAAI,KAA0C;CACtE,MAAM,+BAAe,IAAI,SAAmC;CAC5D,MAAM,6BAAa,IAAI,KAAwB;CAE/C,MAAM,qBACJ,cAC2B;EAC3B,IAAI,QAAQ,gBAAgB,IAAI,UAAU;AAE1C,MAAI,CAAC,OAAO;AACV,WAAQ;IAAE,OAAO,EAAE;IAAE,QAAQ;IAAM;AACnC,mBAAgB,IAAI,WAAW,MAAM;;AAGvC,SAAO;;CAGT,MAAM,kBAAkB,cAAgD;AACtE,MAAI,CAAC,UACH,QAAO;EAGT,MAAM,kBAAkB,aAAa,SAAS;EAC9C,IAAI,SAAS,aAAa,IAAI,gBAAgB;AAE9C,MAAI,CAAC,QAAQ;AACX,YAAS,mBAAmB;AAC5B,mBAAgB,YAAY,OAAO;AACnC,gBAAa,IAAI,iBAAiB,OAAO;;AAG3C,SAAO;;CAGT,MAAM,iBAAiB,EAAE,gBAA4C;EACnE,MAAM,GAAG,eAAe,SAAS,EAAE,CAAC;AAEpC,kBAAgB;GACd,MAAM,QAAQ,kBAAkB,UAAU;AAC1C,SAAM,eAAe,YAAY,EAAE,CAAC;AACpC,gBAAa;AACX,UAAM,SAAS;;KAEhB,CAAC,UAAU,CAAC;EAEf,MAAM,EAAE,UAAU,kBAAkB,UAAU;AAE9C,SACE,4CACG,MAAM,KAAK,EAAE,IAAI,GAAG,YACnB,oBAAC;GAAuB;GAAI,GAAK;KAAjB,GAAqC,CACrD,GACD;;CAIP,MAAM,UAAU,UAAsC;AACpD,MAAI,CAAC,UACH;EAGF,MAAM,kBAAkB,MAAM,aAAa,SAAS;EACpD,MAAM,cAAc,eAAe,gBAAgB;AAEnD,MAAI,CAAC,WAAW,IAAI,gBAAgB,EAAE;GACpC,MAAM,OAAO,WAAW,YAAY;AACpC,cAAW,IAAI,iBAAiB,KAAK;AACrC,QAAK,OAAO,oBAAC,iBAAc,WAAW,kBAAmB,CAAC;;EAG5D,MAAM,QAAQ,kBAAkB,gBAAgB;EAChD,MAAM,KAAK,MAAM,MAAMA,IAAM;AAC7B,QAAM,MAAM,KAAK;GAAE,GAAG;GAAO;GAAI,CAAC;AAClC,QAAM,UAAU;AAEhB,SAAO;;CAGT,MAAM,WAAW,OAAgB;AAC/B,MAAI,CAAC,IAAI;AACP,mBAAgB,SAAQ,UAAS;AAC/B,UAAM,QAAQ,EAAE;AAChB,UAAM,UAAU;KAChB;AACF,cAAW,SAAS,MAAM,cAAc;AACtC,SAAK,SAAS;AACd,iBAAa,IAAI,UAAU,EAAE,QAAQ;AACrC,iBAAa,OAAO,UAAU;KAC9B;AACF,cAAW,OAAO;AAClB,mBAAgB,OAAO;AACvB;;AAGF,kBAAgB,SAAS,OAAO,cAAc;AAC5C,OAAI,CAAC,MAAM,MAAM,MAAK,SAAQ,KAAK,OAAO,GAAG,CAC3C;AAGF,SAAM,QAAQ,MAAM,MAAM,QAAO,SAAQ,KAAK,OAAO,GAAG;AACxD,SAAM,UAAU;AAEhB,OAAI,CAAC,MAAM,MAAM,QAAQ;AACvB,eAAW,IAAI,UAAU,EAAE,SAAS;AACpC,eAAW,OAAO,UAAU;AAC5B,oBAAgB,OAAO,UAAU;AACjC,iBAAa,IAAI,UAAU,EAAE,QAAQ;AACrC,iBAAa,OAAO,UAAU;;IAEhC;;AAGJ,QAAO;EAAE;EAAQ;EAAS;EAAgB"}

package/dist/components/organisms/index.d.mts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { Drawer, Props } from "./drawer.mjs";
+import { Props as Props$1 } from "./list/list.mjs";
 import { List } from "./list/index.mjs";
-import { Modal } from "./modal.mjs";
+import { Modal, Props as Props$2 } from "./modal.mjs";
+import { Props as Props$3 } from "./swiper/swiper.mjs";
 import { Swiper } from "./swiper/index.mjs";
 import { StaticProps, Toast } from "./toast.mjs";

package/dist/components/organisms/list/index.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Item } from "./item.mjs";
-import { List as List$1 } from "./list.mjs";
+import { List as List$1, Props } from "./list.mjs";
 //#region src/components/organisms/list/index.d.ts
 type ListComponent = typeof List$1 & {