@jbpark/ui-kit 3.6.0 → 3.8.0

package/dist/components/molecules/marquees/item.mjs

@@ -2,18 +2,18 @@
 
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEventListener } from "@jbpark/use-hooks";
 import { useGSAP } from "@gsap/react";
 import { gsap } from "gsap";
 
 //#region src/components/molecules/marquees/item.tsx
+const INITIAL_AUTO_FILL_GUESS = 10;
 const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = false, pauseOnHover = false, children }) => {
 	const itemRefs = useRef([]);
 	const containerRef = useRef(null);
 	const tweenRef = useRef(null);
 	const [width, setWidth] = useState(_width);
 	const [pause, setPause] = useState(false);
-	const [repeatCount, setRepeatCount] = useState(autoFill ? typeof autoFill === "boolean" ? 100 : autoFill : 0);
+	const [repeatCount, setRepeatCount] = useState(autoFill ? typeof autoFill === "boolean" ? INITIAL_AUTO_FILL_GUESS : autoFill : 0);
 	const isPaused = _pause || pause;
 	const hoverEvents = pauseOnHover ? {
 		onMouseEnter: () => {
@@ -69,13 +69,8 @@ const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = fa
 		else tweenRef.current.play();
 	}, [isPaused]);
 	useEffect(() => {
-		setRepeatCount(autoFill ? typeof autoFill === "boolean" ? 100 : autoFill : 0);
+		setRepeatCount(autoFill ? typeof autoFill === "boolean" ? INITIAL_AUTO_FILL_GUESS : autoFill : 0);
 	}, [autoFill]);
-	useEventListener("resize", () => {
-		if (!tweenRef.current || !containerRef.current) return;
-		if (isPaused) tweenRef.current.pause();
-		else tweenRef.current.play();
-	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex overflow-hidden",
 		...hoverEvents,

package/dist/components/molecules/marquees/item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"item.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useGSAP } from '@gsap/react';\nimport { useEventListener } from '@jbpark/use-hooks';\nimport { gsap } from 'gsap';\n\nexport interface ItemProps {\n  key?: React.Key;\n  speed?: number;\n  autoFill?: boolean | number;\n  pause?: boolean;\n  pauseOnHover?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface Props\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {\n  width: string | number;\n}\n\nconst Item = ({\n  width: _width,\n  speed = 100,\n  autoFill = false,\n  pause: _pause = false,\n  pauseOnHover = false,\n  children,\n}: Props) => {\n  const itemRefs = useRef<HTMLDivElement[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tweenRef = useRef<gsap.core.Tween | null>(null);\n\n  const [width, setWidth] = useState<string | number>(_width);\n  const [pause, setPause] = useState(false);\n  const [repeatCount, setRepeatCount] = useState(\n    autoFill ? (typeof autoFill === 'boolean' ? 100 : autoFill) : 0,\n  );\n\n  const isPaused = _pause || pause;\n\n  const hoverEvents = pauseOnHover\n    ? {\n        onMouseEnter: () => {\n          setPause(true);\n        },\n        onMouseLeave: () => {\n          setPause(false);\n        },\n      }\n    : {};\n\n  useEffect(() => {\n    if (\n      !autoFill ||\n      !children ||\n      !itemRefs.current[0] ||\n      typeof width === 'string'\n    ) {\n      return;\n    }\n\n    const itemWidth = itemRefs.current[0].offsetWidth;\n\n    if (itemWidth >= width) {\n      setWidth(itemWidth);\n      setRepeatCount(0);\n      return;\n    }\n\n    let totalWidth = 0;\n    let repeatCount = 0;\n\n    while (totalWidth < width) {\n      totalWidth += itemWidth;\n      repeatCount += 1;\n    }\n\n    setWidth(totalWidth);\n    setRepeatCount(repeatCount - 1);\n  }, [autoFill, width, children]);\n\n  useEffect(() => {\n    setWidth(_width);\n  }, [_width]);\n\n  useGSAP(\n    () => {\n      if (!containerRef.current || typeof width === 'string') {\n        return;\n      }\n\n      if (tweenRef.current) {\n        tweenRef.current.kill();\n      }\n\n      tweenRef.current = gsap.fromTo(\n        containerRef.current,\n        { x: 0 },\n        {\n          x: -width,\n          duration: width / speed,\n          repeat: -1,\n          ease: 'linear',\n        },\n      );\n\n      return () => {\n        tweenRef.current?.kill();\n      };\n    },\n    {\n      scope: containerRef,\n      dependencies: [width, speed],\n    },\n  );\n\n  useEffect(() => {\n    if (!tweenRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  }, [isPaused]);\n\n  useEffect(() => {\n    setRepeatCount(\n      autoFill ? (typeof autoFill === 'boolean' ? 100 : autoFill) : 0,\n    );\n  }, [autoFill]);\n\n  useEventListener('resize', () => {\n    if (!tweenRef.current || !containerRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  });\n\n  return (\n    <div\n      className=\"flex overflow-hidden\"\n      {...hoverEvents}\n      //\n    >\n      <div ref={containerRef} className=\"flex flex-nowrap\">\n        {[...Array(2)].map((_, index) => (\n          <div\n            key={index}\n            style={{ minWidth: width }}\n            className=\"flex flex-nowrap\"\n          >\n            <div\n              ref={el => {\n                if (el) {\n                  itemRefs.current[index] = el;\n                }\n              }}\n            >\n              {children}\n            </div>\n            {[\n              ...Array(typeof autoFill === 'number' ? autoFill : repeatCount),\n            ].map((_, i) => (\n              <div key={i}>{children}</div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,QAAQ,EACZ,OAAO,QACP,QAAQ,KACR,WAAW,OACX,OAAO,SAAS,OAChB,eAAe,OACf,eACW;CACX,MAAM,WAAW,OAAyB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,WAAW,OAA+B,KAAK;CAErD,MAAM,CAAC,OAAO,YAAY,SAA0B,OAAO;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,CAAC,aAAa,kBAAkB,SACpC,WAAY,OAAO,aAAa,YAAY,MAAM,WAAY,EAC/D;CAED,MAAM,WAAW,UAAU;CAE3B,MAAM,cAAc,eAChB;EACE,oBAAoB;AAClB,YAAS,KAAK;;EAEhB,oBAAoB;AAClB,YAAS,MAAM;;EAElB,GACD,EAAE;AAEN,iBAAgB;AACd,MACE,CAAC,YACD,CAAC,YACD,CAAC,SAAS,QAAQ,MAClB,OAAO,UAAU,SAEjB;EAGF,MAAM,YAAY,SAAS,QAAQ,GAAG;AAEtC,MAAI,aAAa,OAAO;AACtB,YAAS,UAAU;AACnB,kBAAe,EAAE;AACjB;;EAGF,IAAI,aAAa;EACjB,IAAI,cAAc;AAElB,SAAO,aAAa,OAAO;AACzB,iBAAc;AACd,kBAAe;;AAGjB,WAAS,WAAW;AACpB,iBAAe,cAAc,EAAE;IAC9B;EAAC;EAAU;EAAO;EAAS,CAAC;AAE/B,iBAAgB;AACd,WAAS,OAAO;IACf,CAAC,OAAO,CAAC;AAEZ,eACQ;AACJ,MAAI,CAAC,aAAa,WAAW,OAAO,UAAU,SAC5C;AAGF,MAAI,SAAS,QACX,UAAS,QAAQ,MAAM;AAGzB,WAAS,UAAU,KAAK,OACtB,aAAa,SACb,EAAE,GAAG,GAAG,EACR;GACE,GAAG,CAAC;GACJ,UAAU,QAAQ;GAClB,QAAQ;GACR,MAAM;GACP,CACF;AAED,eAAa;AACX,YAAS,SAAS,MAAM;;IAG5B;EACE,OAAO;EACP,cAAc,CAAC,OAAO,MAAM;EAC7B,CACF;AAED,iBAAgB;AACd,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,SACF,UAAS,QAAQ,OAAO;MAExB,UAAS,QAAQ,MAAM;IAExB,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,iBACE,WAAY,OAAO,aAAa,YAAY,MAAM,WAAY,EAC/D;IACA,CAAC,SAAS,CAAC;AAEd,kBAAiB,gBAAgB;AAC/B,MAAI,CAAC,SAAS,WAAW,CAAC,aAAa,QACrC;AAGF,MAAI,SACF,UAAS,QAAQ,OAAO;MAExB,UAAS,QAAQ,MAAM;GAEzB;AAEF,QACE,oBAAC;EACC,WAAU;EACV,GAAI;YAGJ,oBAAC;GAAI,KAAK;GAAc,WAAU;aAC/B,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,KAAK,GAAG,UACrB,qBAAC;IAEC,OAAO,EAAE,UAAU,OAAO;IAC1B,WAAU;eAEV,oBAAC;KACC,MAAK,OAAM;AACT,UAAI,GACF,UAAS,QAAQ,SAAS;;KAI7B;MACG,EACL,CACC,GAAG,MAAM,OAAO,aAAa,WAAW,WAAW,YAAY,CAChE,CAAC,KAAK,GAAG,MACR,oBAAC,SAAa,YAAJ,EAAmB,CAC7B;MAjBG,MAkBD,CACN;IACE;GACF"}
+{"version":3,"file":"item.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useGSAP } from '@gsap/react';\nimport { gsap } from 'gsap';\n\nexport interface ItemProps {\n  key?: React.Key;\n  speed?: number;\n  autoFill?: boolean | number;\n  pause?: boolean;\n  pauseOnHover?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface Props\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {\n  width: string | number;\n}\n\n// `autoFill={true}` (the default on `Marquees`) needs *some* repeat count\n// before the item can be measured and the real count computed — this is\n// only ever visible for that one render, but rendering 100 copies (200\n// with the 2x loop duplication) up front was needlessly heavy for the\n// common case. A modest guess still avoids visible gaps for typical\n// item/container width ratios while cutting the worst-case default\n// render by ~90%.\nconst INITIAL_AUTO_FILL_GUESS = 10;\n\nconst Item = ({\n  width: _width,\n  speed = 100,\n  autoFill = false,\n  pause: _pause = false,\n  pauseOnHover = false,\n  children,\n}: Props) => {\n  const itemRefs = useRef<HTMLDivElement[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tweenRef = useRef<gsap.core.Tween | null>(null);\n\n  const [width, setWidth] = useState<string | number>(_width);\n  const [pause, setPause] = useState(false);\n  const [repeatCount, setRepeatCount] = useState(\n    autoFill\n      ? typeof autoFill === 'boolean'\n        ? INITIAL_AUTO_FILL_GUESS\n        : autoFill\n      : 0,\n  );\n\n  const isPaused = _pause || pause;\n\n  const hoverEvents = pauseOnHover\n    ? {\n        onMouseEnter: () => {\n          setPause(true);\n        },\n        onMouseLeave: () => {\n          setPause(false);\n        },\n      }\n    : {};\n\n  useEffect(() => {\n    if (\n      !autoFill ||\n      !children ||\n      !itemRefs.current[0] ||\n      typeof width === 'string'\n    ) {\n      return;\n    }\n\n    const itemWidth = itemRefs.current[0].offsetWidth;\n\n    if (itemWidth >= width) {\n      setWidth(itemWidth);\n      setRepeatCount(0);\n      return;\n    }\n\n    let totalWidth = 0;\n    let repeatCount = 0;\n\n    while (totalWidth < width) {\n      totalWidth += itemWidth;\n      repeatCount += 1;\n    }\n\n    setWidth(totalWidth);\n    setRepeatCount(repeatCount - 1);\n  }, [autoFill, width, children]);\n\n  useEffect(() => {\n    setWidth(_width);\n  }, [_width]);\n\n  useGSAP(\n    () => {\n      if (!containerRef.current || typeof width === 'string') {\n        return;\n      }\n\n      if (tweenRef.current) {\n        tweenRef.current.kill();\n      }\n\n      tweenRef.current = gsap.fromTo(\n        containerRef.current,\n        { x: 0 },\n        {\n          x: -width,\n          duration: width / speed,\n          repeat: -1,\n          ease: 'linear',\n        },\n      );\n\n      return () => {\n        tweenRef.current?.kill();\n      };\n    },\n    {\n      scope: containerRef,\n      dependencies: [width, speed],\n    },\n  );\n\n  useEffect(() => {\n    if (!tweenRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  }, [isPaused]);\n\n  useEffect(() => {\n    setRepeatCount(\n      autoFill\n        ? typeof autoFill === 'boolean'\n          ? INITIAL_AUTO_FILL_GUESS\n          : autoFill\n        : 0,\n    );\n  }, [autoFill]);\n\n  return (\n    <div\n      className=\"flex overflow-hidden\"\n      {...hoverEvents}\n      //\n    >\n      <div ref={containerRef} className=\"flex flex-nowrap\">\n        {[...Array(2)].map((_, index) => (\n          <div\n            key={index}\n            style={{ minWidth: width }}\n            className=\"flex flex-nowrap\"\n          >\n            <div\n              ref={el => {\n                if (el) {\n                  itemRefs.current[index] = el;\n                }\n              }}\n            >\n              {children}\n            </div>\n            {[\n              ...Array(typeof autoFill === 'number' ? autoFill : repeatCount),\n            ].map((_, i) => (\n              <div key={i}>{children}</div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;AA4BA,MAAM,0BAA0B;AAEhC,MAAM,QAAQ,EACZ,OAAO,QACP,QAAQ,KACR,WAAW,OACX,OAAO,SAAS,OAChB,eAAe,OACf,eACW;CACX,MAAM,WAAW,OAAyB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,WAAW,OAA+B,KAAK;CAErD,MAAM,CAAC,OAAO,YAAY,SAA0B,OAAO;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,CAAC,aAAa,kBAAkB,SACpC,WACI,OAAO,aAAa,YAClB,0BACA,WACF,EACL;CAED,MAAM,WAAW,UAAU;CAE3B,MAAM,cAAc,eAChB;EACE,oBAAoB;AAClB,YAAS,KAAK;;EAEhB,oBAAoB;AAClB,YAAS,MAAM;;EAElB,GACD,EAAE;AAEN,iBAAgB;AACd,MACE,CAAC,YACD,CAAC,YACD,CAAC,SAAS,QAAQ,MAClB,OAAO,UAAU,SAEjB;EAGF,MAAM,YAAY,SAAS,QAAQ,GAAG;AAEtC,MAAI,aAAa,OAAO;AACtB,YAAS,UAAU;AACnB,kBAAe,EAAE;AACjB;;EAGF,IAAI,aAAa;EACjB,IAAI,cAAc;AAElB,SAAO,aAAa,OAAO;AACzB,iBAAc;AACd,kBAAe;;AAGjB,WAAS,WAAW;AACpB,iBAAe,cAAc,EAAE;IAC9B;EAAC;EAAU;EAAO;EAAS,CAAC;AAE/B,iBAAgB;AACd,WAAS,OAAO;IACf,CAAC,OAAO,CAAC;AAEZ,eACQ;AACJ,MAAI,CAAC,aAAa,WAAW,OAAO,UAAU,SAC5C;AAGF,MAAI,SAAS,QACX,UAAS,QAAQ,MAAM;AAGzB,WAAS,UAAU,KAAK,OACtB,aAAa,SACb,EAAE,GAAG,GAAG,EACR;GACE,GAAG,CAAC;GACJ,UAAU,QAAQ;GAClB,QAAQ;GACR,MAAM;GACP,CACF;AAED,eAAa;AACX,YAAS,SAAS,MAAM;;IAG5B;EACE,OAAO;EACP,cAAc,CAAC,OAAO,MAAM;EAC7B,CACF;AAED,iBAAgB;AACd,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,SACF,UAAS,QAAQ,OAAO;MAExB,UAAS,QAAQ,MAAM;IAExB,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,iBACE,WACI,OAAO,aAAa,YAClB,0BACA,WACF,EACL;IACA,CAAC,SAAS,CAAC;AAEd,QACE,oBAAC;EACC,WAAU;EACV,GAAI;YAGJ,oBAAC;GAAI,KAAK;GAAc,WAAU;aAC/B,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,KAAK,GAAG,UACrB,qBAAC;IAEC,OAAO,EAAE,UAAU,OAAO;IAC1B,WAAU;eAEV,oBAAC;KACC,MAAK,OAAM;AACT,UAAI,GACF,UAAS,QAAQ,SAAS;;KAI7B;MACG,EACL,CACC,GAAG,MAAM,OAAO,aAAa,WAAW,WAAW,YAAY,CAChE,CAAC,KAAK,GAAG,MACR,oBAAC,SAAa,YAAJ,EAAmB,CAC7B;MAjBG,MAkBD,CACN;IACE;GACF"}

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

@@ -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

@@ -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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"}
+{"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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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/reveals/reveals.d.mts

@@ -22,6 +22,11 @@ declare const Reveals: ({
   cascade,
   duration,
   delay,
+  effect,
+  once,
+  viewport,
+  variants,
+  transition,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/molecules/reveals/reveals.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"reveals.d.mts","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"mappings":";;;;UAMiB,KAAA,SACP,KAAA,CAAM,wBAAA,SAAiC,SAAA;EAC/C,OAAA;EACA,UAAA;IACE,IAAA;IACA,IAAA;EAAA;EAEF,IAAA;EACA,KAAA,GAAQ,SAAA;AAAA;AAAA,cAGG,QAAA;AAAA,cACA,KAAA;AAAA,cACA,OAAA;AAAA,cAEP,OAAA;EAAW,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GASd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"reveals.d.mts","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"mappings":";;;;UAMiB,KAAA,SACP,KAAA,CAAM,wBAAA,SAAiC,SAAA;EAC/C,OAAA;EACA,UAAA;IACE,IAAA;IACA,IAAA;EAAA;EAEF,IAAA;EACA,KAAA,GAAQ,SAAA;AAAA;AAAA,cAGG,QAAA;AAAA,cACA,KAAA;AAAA,cACA,OAAA;AAAA,cAEP,OAAA;EAAW,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,MAAA;EAAA,IAAA;EAAA,QAAA;EAAA,QAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAcd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/reveals/reveals.mjs

@@ -7,10 +7,15 @@ import { jsx } from "react/jsx-runtime";
 const DURATION = .6;
 const DELAY = 0;
 const CASCADE = .1;
-const Reveals = ({ children, className, classNames, items = [], cascade = CASCADE, duration = DURATION, delay = DELAY, ...props }) => {
+const Reveals = ({ children, className, classNames, items = [], cascade = CASCADE, duration = DURATION, delay = DELAY, effect, once, viewport, variants, transition, ...props }) => {
 	const renderItems = (items) => items.map((item, index) => /* @__PURE__ */ jsx(Item, {
+		effect,
 		duration,
 		delay: delay + cascade * index,
+		once,
+		viewport,
+		variants,
+		transition,
 		...item,
 		className: cn(item.className, classNames?.item),
 		children: item.children

package/dist/components/molecules/reveals/reveals.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"reveals.mjs","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props\n  extends React.ComponentPropsWithoutRef<'div'>, ItemProps {\n  cascade?: number;\n  classNames?: {\n    root?: string;\n    item?: string;\n  };\n  once?: boolean;\n  items?: ItemProps[];\n}\n\nexport const DURATION = 0.6;\nexport const DELAY = 0;\nexport const CASCADE = 0.1;\n\nconst Reveals = ({\n  children,\n  className,\n  classNames,\n  items = [],\n  cascade = CASCADE,\n  duration = DURATION,\n  delay = DELAY,\n  ...props\n}: Props) => {\n  const renderItems = (items: ItemProps[]) =>\n    items.map((item, index) => (\n      <Item\n        key={index}\n        duration={duration}\n        delay={delay + cascade * index}\n        {...item}\n        className={cn(\n          item.className,\n          classNames?.item,\n          //\n        )}\n      >\n        {item.children}\n      </Item>\n    ));\n\n  return (\n    <div\n      className={cn(\n        'flex gap-5',\n        className,\n        classNames?.root,\n        //\n      )}\n      {...props}\n    >\n      {renderItems(\n        children\n          ? Children.toArray(children).map(child => ({\n              children: child,\n            }))\n          : items,\n      )}\n    </div>\n  );\n};\n\nexport default Reveals;\n"],"mappings":";;;;;;AAiBA,MAAa,WAAW;AACxB,MAAa,QAAQ;AACrB,MAAa,UAAU;AAEvB,MAAM,WAAW,EACf,UACA,WACA,YACA,QAAQ,EAAE,EACV,UAAU,SACV,WAAW,UACX,QAAQ,OACR,GAAG,YACQ;CACX,MAAM,eAAe,UACnB,MAAM,KAAK,MAAM,UACf,oBAAC;EAEW;EACV,OAAO,QAAQ,UAAU;EACzB,GAAI;EACJ,WAAW,GACT,KAAK,WACL,YAAY,KAEb;YAEA,KAAK;IAVD,MAWA,CACP;AAEJ,QACE,oBAAC;EACC,WAAW,GACT,cACA,WACA,YAAY,KAEb;EACD,GAAI;YAEH,YACC,WACI,SAAS,QAAQ,SAAS,CAAC,KAAI,WAAU,EACvC,UAAU,OACX,EAAE,GACH,MACL;GACG"}
+{"version":3,"file":"reveals.mjs","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props\n  extends React.ComponentPropsWithoutRef<'div'>, ItemProps {\n  cascade?: number;\n  classNames?: {\n    root?: string;\n    item?: string;\n  };\n  once?: boolean;\n  items?: ItemProps[];\n}\n\nexport const DURATION = 0.6;\nexport const DELAY = 0;\nexport const CASCADE = 0.1;\n\nconst Reveals = ({\n  children,\n  className,\n  classNames,\n  items = [],\n  cascade = CASCADE,\n  duration = DURATION,\n  delay = DELAY,\n  effect,\n  once,\n  viewport,\n  variants,\n  transition,\n  ...props\n}: Props) => {\n  const renderItems = (items: ItemProps[]) =>\n    items.map((item, index) => (\n      <Item\n        key={index}\n        effect={effect}\n        duration={duration}\n        delay={delay + cascade * index}\n        once={once}\n        viewport={viewport}\n        variants={variants}\n        transition={transition}\n        {...item}\n        className={cn(\n          item.className,\n          classNames?.item,\n          //\n        )}\n      >\n        {item.children}\n      </Item>\n    ));\n\n  return (\n    <div\n      className={cn(\n        'flex gap-5',\n        className,\n        classNames?.root,\n        //\n      )}\n      {...props}\n    >\n      {renderItems(\n        children\n          ? Children.toArray(children).map(child => ({\n              children: child,\n            }))\n          : items,\n      )}\n    </div>\n  );\n};\n\nexport default Reveals;\n"],"mappings":";;;;;;AAiBA,MAAa,WAAW;AACxB,MAAa,QAAQ;AACrB,MAAa,UAAU;AAEvB,MAAM,WAAW,EACf,UACA,WACA,YACA,QAAQ,EAAE,EACV,UAAU,SACV,WAAW,UACX,QAAQ,OACR,QACA,MACA,UACA,UACA,YACA,GAAG,YACQ;CACX,MAAM,eAAe,UACnB,MAAM,KAAK,MAAM,UACf,oBAAC;EAES;EACE;EACV,OAAO,QAAQ,UAAU;EACnB;EACI;EACA;EACE;EACZ,GAAI;EACJ,WAAW,GACT,KAAK,WACL,YAAY,KAEb;YAEA,KAAK;IAfD,MAgBA,CACP;AAEJ,QACE,oBAAC;EACC,WAAW,GACT,cACA,WACA,YAAY,KAEb;EACD,GAAI;YAEH,YACC,WACI,SAAS,QAAQ,SAAS,CAAC,KAAI,WAAU,EACvC,UAAU,OACX,EAAE,GACH,MACL;GACG"}

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

@@ -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

@@ -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"}
+{"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

@@ -20,6 +20,14 @@ interface Props {
     item?: string;
   };
   onChange?: (files: UploadFile[]) => void;
+  /**
+   * Called once per file that didn't make it in — either bumped by
+   * `maxCount` or failed to read.
+   */
+  onReject?: (info: {
+    file: File;
+    reason: 'max-count' | 'read-error';
+  }) => void;
 }
 declare const Upload: ({
   defaultValue,
@@ -30,8 +38,9 @@ declare const Upload: ({
   disabled,
   className,
   classNames,
-  onChange: _onChange
+  onChange: _onChange,
+  onReject
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Upload, UploadFile };
+export { Props, Upload, UploadFile };
 //# sourceMappingURL=upload.d.mts.map

package/dist/components/molecules/upload.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"upload.d.mts","names":[],"sources":["../../../src/components/molecules/upload.tsx"],"mappings":";;;UAeiB,UAAA;EACf,GAAA;EACA,IAAA;EACA,GAAA;AAAA;AAAA,UAGe,KAAA;EACf,YAAA,GAAe,UAAA;EACf,KAAA,GAAQ,UAAA;EACR,QAAA;EACA,MAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,IAAA;EAAA;EAEF,QAAA,IAAY,KAAA,EAAO,UAAA;AAAA;AAAA,cAOf,MAAA;EAAU,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA,EAAA;AAAA,GAUb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"upload.d.mts","names":[],"sources":["../../../src/components/molecules/upload.tsx"],"mappings":";;;UAgBiB,UAAA;EACf,GAAA;EACA,IAAA;EACA,GAAA;AAAA;AAAA,UAGe,KAAA;EACf,YAAA,GAAe,UAAA;EACf,KAAA,GAAQ,UAAA;EACR,QAAA;EACA,MAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,IAAA;EAAA;EAEF,QAAA,IAAY,KAAA,EAAO,UAAA;EAKW;;;;EAA9B,QAAA,IAAY,IAAA;IAAQ,IAAA,EAAM,IAAA;IAAM,MAAA;EAAA;AAAA;AAAA,cAO5B,MAAA;EAAU,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA,EAAA,SAAA;EAAA;AAAA,GAWb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/upload.mjs

@@ -6,10 +6,11 @@ import { Upload, X } from "lucide-react";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useFileDrop, useFileToDataUrl } from "@jbpark/use-hooks";
+import { v4 } from "uuid";
 
 //#region src/components/molecules/upload.tsx
 const isImage = (file) => /^data:image\//.test(file.url) || /\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);
-const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept = "image/*", maxCount, disabled, className, classNames, onChange: _onChange = () => {} }) => {
+const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept = "image/*", maxCount, disabled, className, classNames, onChange: _onChange = () => {}, onReject }) => {
 	const inputId = useId();
 	const readAsDataUrl = useFileToDataUrl();
 	const [files, setFiles] = useControllableState({
@@ -20,11 +21,27 @@ const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept =
 	const addFiles = async (incoming) => {
 		const remaining = typeof maxCount === "number" ? Math.max(0, maxCount - files.length) : incoming.length;
 		const accepted = incoming.slice(0, remaining);
-		const uploaded = await Promise.all(accepted.map(async (file) => ({
-			uid: `${file.name}-${file.lastModified}-${file.size}`,
-			name: file.name,
-			url: await readAsDataUrl(file)
-		})));
+		incoming.slice(remaining).forEach((file) => onReject?.({
+			file,
+			reason: "max-count"
+		}));
+		if (accepted.length === 0) return;
+		const uploaded = (await Promise.all(accepted.map(async (file) => {
+			try {
+				return {
+					uid: `${file.name}-${file.lastModified}-${file.size}-${v4()}`,
+					name: file.name,
+					url: await readAsDataUrl(file)
+				};
+			} catch {
+				onReject?.({
+					file,
+					reason: "read-error"
+				});
+				return null;
+			}
+		}))).filter((file) => file !== null);
+		if (uploaded.length === 0) return;
 		setFiles([...files, ...uploaded]);
 	};
 	const removeFile = (uid) => {

package/dist/components/molecules/upload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport {\n  useControllableState,\n  useFileDrop,\n  useFileToDataUrl,\n} from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [files, setFiles] = useControllableState<UploadFile[]>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const addFiles = async (incoming: File[]) => {\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n\n    const uploaded = await Promise.all(\n      accepted.map(async file => ({\n        uid: `${file.name}-${file.lastModified}-${file.size}`,\n        name: file.name,\n        url: await readAsDataUrl(file),\n      })),\n    );\n\n    setFiles([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    setFiles(files.filter(file => file.uid !== uid));\n  };\n\n  const { dropRef, isDragging } = useFileDrop<HTMLLabelElement>({\n    accept,\n    multiple,\n    disabled,\n    onDrop: addFiles,\n  });\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        ref={dropRef}\n        htmlFor={inputId}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragging && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(Array.from(e.target.files));\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'flex flex-col gap-2',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                'flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,WAAW,SACf,gBAAgB,KAAK,KAAK,IAAI,IAC9B,+BAA+B,KAAK,KAAK,KAAK;AAEhD,MAAMA,YAAU,EACd,eAAe,EAAE,EACjB,OAAO,QACP,WAAW,MACX,SAAS,WACT,UACA,UACA,WACA,YACA,UAAU,kBAAkB,SACjB;CACX,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,OAAO,YAAY,qBAAmC;EAC3D,OAAO;EACP;EACA,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,OAAO,aAAqB;EAC3C,MAAM,YACJ,OAAO,aAAa,WAChB,KAAK,IAAI,GAAG,WAAW,MAAM,OAAO,GACpC,SAAS;EAEf,MAAM,WAAW,SAAS,MAAM,GAAG,UAAU;EAE7C,MAAM,WAAW,MAAM,QAAQ,IAC7B,SAAS,IAAI,OAAM,UAAS;GAC1B,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,aAAa,GAAG,KAAK;GAC/C,MAAM,KAAK;GACX,KAAK,MAAM,cAAc,KAAK;GAC/B,EAAE,CACJ;AAED,WAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;;CAGnC,MAAM,cAAc,QAAgB;AAClC,WAAS,MAAM,QAAO,SAAQ,KAAK,QAAQ,IAAI,CAAC;;CAGlD,MAAM,EAAE,SAAS,eAAe,YAA8B;EAC5D;EACA;EACA;EACA,QAAQ;EACT,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GACT,uBACA,UAED;aAED,qBAAC;GACC,KAAK;GACL,SAAS;GACT,WAAW,GACT,kEACA,mDACA,iCACA,qBACA,cAAc,4BACd,YAAY,qDACZ,YAAY,SAEb;;IAED,oBAACC,UAAW,WAAU,WAAW;IACjC,qBAAC;KAAK;KAAmB,WAAW,MAAM;KAAG;QAAiB;IAC9D,oBAAC;KACC,IAAI;KACJ,MAAK;KACG;KACE;KACA;KACV,WAAU;KACV,WAAU,MAAK;AACb,UAAI,EAAE,OAAO,OAAO,OAClB,UAAS,MAAM,KAAK,EAAE,OAAO,MAAM,CAAC;AAEtC,QAAE,OAAO,QAAQ;;MAEnB;;IACI,EAEP,MAAM,SAAS,KACd,oBAAC;GACC,WAAW,GACT,uBACA,YAAY,KAEb;aAEA,MAAM,KAAI,SACT,qBAAC;IAEC,WAAW,GACT,iDACA,YAAY,KAEb;;KAEA,QAAQ,KAAK,IACZ,oBAAC;MACC,KAAK,KAAK;MACV,KAAI;MACJ,WAAU;OACV;KAEJ,oBAAC;MAAK,WAAU;gBAA2B,KAAK;OAAY;KAC5D,oBAAC;MACC,MAAK;MACL,OAAM;MACN,MAAK;MACL,MAAM,oBAAC,KAAE,WAAU,WAAW;MAC9B,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;OAC3B;;MAvBG,KAAK,IAwBP,CACL;IACC;GAEH"}
+{"version":3,"file":"upload.mjs","names":["Upload","uuid","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport {\n  useControllableState,\n  useFileDrop,\n  useFileToDataUrl,\n} from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n  /**\n   * Called once per file that didn't make it in — either bumped by\n   * `maxCount` or failed to read.\n   */\n  onReject?: (info: { file: File; reason: 'max-count' | 'read-error' }) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n  onReject,\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [files, setFiles] = useControllableState<UploadFile[]>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const addFiles = async (incoming: File[]) => {\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n    const rejected = incoming.slice(remaining);\n\n    rejected.forEach(file => onReject?.({ file, reason: 'max-count' }));\n\n    if (accepted.length === 0) {\n      return;\n    }\n\n    const uploaded = (\n      await Promise.all(\n        accepted.map(async file => {\n          try {\n            return {\n              // `uuid()` guarantees uniqueness even for the same file\n              // added twice (identical name/lastModified/size), which\n              // name+lastModified+size alone can't — a collision there\n              // corrupted React's item keys and made removeFile's\n              // uid-based filter delete both copies at once.\n              uid: `${file.name}-${file.lastModified}-${file.size}-${uuid()}`,\n              name: file.name,\n              url: await readAsDataUrl(file),\n            };\n          } catch {\n            onReject?.({ file, reason: 'read-error' });\n            return null;\n          }\n        }),\n      )\n    ).filter((file): file is UploadFile => file !== null);\n\n    if (uploaded.length === 0) {\n      return;\n    }\n\n    setFiles([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    setFiles(files.filter(file => file.uid !== uid));\n  };\n\n  const { dropRef, isDragging } = useFileDrop<HTMLLabelElement>({\n    accept,\n    multiple,\n    disabled,\n    onDrop: addFiles,\n  });\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        ref={dropRef}\n        htmlFor={inputId}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragging && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(Array.from(e.target.files));\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'flex flex-col gap-2',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                'flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;;;AA2CA,MAAM,WAAW,SACf,gBAAgB,KAAK,KAAK,IAAI,IAC9B,+BAA+B,KAAK,KAAK,KAAK;AAEhD,MAAMA,YAAU,EACd,eAAe,EAAE,EACjB,OAAO,QACP,WAAW,MACX,SAAS,WACT,UACA,UACA,WACA,YACA,UAAU,kBAAkB,IAC5B,eACW;CACX,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,OAAO,YAAY,qBAAmC;EAC3D,OAAO;EACP;EACA,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,OAAO,aAAqB;EAC3C,MAAM,YACJ,OAAO,aAAa,WAChB,KAAK,IAAI,GAAG,WAAW,MAAM,OAAO,GACpC,SAAS;EAEf,MAAM,WAAW,SAAS,MAAM,GAAG,UAAU;AAG7C,EAFiB,SAAS,MAAM,UAAU,CAEjC,SAAQ,SAAQ,WAAW;GAAE;GAAM,QAAQ;GAAa,CAAC,CAAC;AAEnE,MAAI,SAAS,WAAW,EACtB;EAGF,MAAM,YACJ,MAAM,QAAQ,IACZ,SAAS,IAAI,OAAM,SAAQ;AACzB,OAAI;AACF,WAAO;KAML,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,aAAa,GAAG,KAAK,KAAK,GAAGC,IAAM;KAC7D,MAAM,KAAK;KACX,KAAK,MAAM,cAAc,KAAK;KAC/B;WACK;AACN,eAAW;KAAE;KAAM,QAAQ;KAAc,CAAC;AAC1C,WAAO;;IAET,CACH,EACD,QAAQ,SAA6B,SAAS,KAAK;AAErD,MAAI,SAAS,WAAW,EACtB;AAGF,WAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;;CAGnC,MAAM,cAAc,QAAgB;AAClC,WAAS,MAAM,QAAO,SAAQ,KAAK,QAAQ,IAAI,CAAC;;CAGlD,MAAM,EAAE,SAAS,eAAe,YAA8B;EAC5D;EACA;EACA;EACA,QAAQ;EACT,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GACT,uBACA,UAED;aAED,qBAAC;GACC,KAAK;GACL,SAAS;GACT,WAAW,GACT,kEACA,mDACA,iCACA,qBACA,cAAc,4BACd,YAAY,qDACZ,YAAY,SAEb;;IAED,oBAACC,UAAW,WAAU,WAAW;IACjC,qBAAC;KAAK;KAAmB,WAAW,MAAM;KAAG;QAAiB;IAC9D,oBAAC;KACC,IAAI;KACJ,MAAK;KACG;KACE;KACA;KACV,WAAU;KACV,WAAU,MAAK;AACb,UAAI,EAAE,OAAO,OAAO,OAClB,UAAS,MAAM,KAAK,EAAE,OAAO,MAAM,CAAC;AAEtC,QAAE,OAAO,QAAQ;;MAEnB;;IACI,EAEP,MAAM,SAAS,KACd,oBAAC;GACC,WAAW,GACT,uBACA,YAAY,KAEb;aAEA,MAAM,KAAI,SACT,qBAAC;IAEC,WAAW,GACT,iDACA,YAAY,KAEb;;KAEA,QAAQ,KAAK,IACZ,oBAAC;MACC,KAAK,KAAK;MACV,KAAI;MACJ,WAAU;OACV;KAEJ,oBAAC;MAAK,WAAU;gBAA2B,KAAK;OAAY;KAC5D,oBAAC;MACC,MAAK;MACL,OAAM;MACN,MAAK;MACL,MAAM,oBAAC,KAAE,WAAU,WAAW;MAC9B,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;OAC3B;;MAvBG,KAAK,IAwBP,CACL;IACC;GAEH"}

package/dist/components/organisms/modal.mjs

@@ -6,9 +6,9 @@ import Button from "../../Button.mjs";
 import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { v4 } from "uuid";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { v4 } from "uuid";
 
 //#region src/components/organisms/modal.tsx
 const { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } = dialog_exports;

package/dist/components/organisms/toast.mjs

@@ -6,9 +6,9 @@ import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTimeout } from "@jbpark/use-hooks";
+import { v4 } from "uuid";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { v4 } from "uuid";
 
 //#region src/components/organisms/toast.tsx
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";

package/dist/components/templates/layout/header.mjs

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/templates/layout/header.tsx
 const Header = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("header", {
-		className: cn("sticky top-0 z-50", "flex h-16 w-full items-center px-5", className),
+		className: cn("sticky top-0 z-50", "bg-background", "flex h-16 w-full items-center px-5", className),
 		...props,
 		children
 	});

package/dist/components/templates/layout/header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'header'> {}\n\nconst Header = ({ children, className, ...props }: Props) => {\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-50',\n        'flex h-16 w-full items-center px-5',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC3D,QACE,oBAAC;EACC,WAAW,GACT,qBACA,sCACA,UAED;EACD,GAAI;EAEH;GACM"}
+{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'header'> {}\n\nconst Header = ({ children, className, ...props }: Props) => {\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-50',\n        'bg-background',\n        'flex h-16 w-full items-center px-5',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC3D,QACE,oBAAC;EACC,WAAW,GACT,qBACA,iBACA,sCACA,UAED;EACD,GAAI;EAEH;GACM"}

package/dist/components/templates/layout/layout.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";;;UAMiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAS/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";;;UAciB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAgB/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/layout/layout.mjs

@@ -1,20 +1,36 @@
 import { cn } from "../../../utils.mjs";
+import { SiderRegistryContext } from "./sider-context.mjs";
 import Sider from "./sider.mjs";
-import { Children, createContext, isValidElement, useContext } from "react";
+import { Children, createContext, isValidElement, useContext, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/templates/layout/layout.tsx
 const LayoutNestedContext = createContext(false);
-const hasSiderChild = (children) => Children.toArray(children).some((child) => isValidElement(child) && child.type === Sider);
+const hasDirectSiderChild = (children) => Children.toArray(children).some((child) => isValidElement(child) && child.type === Sider);
 const Layout = ({ children, className, ...props }) => {
 	const isNested = useContext(LayoutNestedContext);
-	const isRow = hasSiderChild(children);
+	const [siderIds] = useState(() => /* @__PURE__ */ new Set());
+	const [siderCount, setSiderCount] = useState(() => hasDirectSiderChild(children) ? 1 : 0);
+	const registry = useMemo(() => ({
+		registerSider: (id) => {
+			siderIds.add(id);
+			setSiderCount(siderIds.size);
+		},
+		unregisterSider: (id) => {
+			siderIds.delete(id);
+			setSiderCount(siderIds.size);
+		}
+	}), [siderIds]);
+	const isRow = siderCount > 0;
 	return /* @__PURE__ */ jsx(LayoutNestedContext.Provider, {
 		value: true,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("flex w-full flex-1", isNested ? "min-h-0" : "min-h-screen", isRow ? "flex-row" : "flex-col", className),
-			...props,
-			children
+		children: /* @__PURE__ */ jsx(SiderRegistryContext.Provider, {
+			value: registry,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex w-full flex-1", isNested ? "min-h-0" : "min-h-screen", isRow ? "flex-row" : "flex-col", className),
+				...props,
+				children
+			})
 		})
 	});
 };

package/dist/components/templates/layout/layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import { Children, createContext, isValidElement, useContext } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\nconst hasSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isNested = useContext(LayoutNestedContext);\n  const isRow = hasSiderChild(children);\n\n  return (\n    <LayoutNestedContext.Provider value>\n      <div\n        className={cn(\n          'flex w-full flex-1',\n          // A nested Layout (the Sider row wrapper) must stay free to\n          // shrink/grow inside its parent's flex column, so it keeps\n          // min-h-0. The outermost Layout has no ancestor to size against,\n          // so it needs its own height anchor or flex-1/grow are no-ops\n          // and Content collapses under Footer.\n          isNested ? 'min-h-0' : 'min-h-screen',\n          isRow ? 'flex-row' : 'flex-col',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </LayoutNestedContext.Provider>\n  );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;AAQA,MAAM,sBAAsB,cAAc,MAAM;AAEhD,MAAM,iBAAiB,aACrB,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,QAAQ,cAAc,SAAS;AAErC,QACE,oBAAC,oBAAoB;EAAS;YAC5B,oBAAC;GACC,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,UACD;GACD,GAAI;GAEH;IACG;GACuB"}
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\n// Effects (including the registry-based detection in sider-context.ts)\n// never run during SSR, so registry state alone would render flex-col on\n// the server and every first paint, then flip to flex-row after hydration\n// for even the common, non-wrapped case. This direct-children check seeds\n// the correct initial guess for that common case so it's right immediately;\n// the registry then stays authoritative for Fragment-wrapped/custom-wrapped\n// Siders it can't see, correcting the guess after mount if needed.\nconst hasDirectSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isNested = useContext(LayoutNestedContext);\n  const [siderIds] = useState(() => new Set<object>());\n  const [siderCount, setSiderCount] = useState(() =>\n    hasDirectSiderChild(children) ? 1 : 0,\n  );\n\n  const registry = useMemo(\n    () => ({\n      registerSider: (id: object) => {\n        siderIds.add(id);\n        setSiderCount(siderIds.size);\n      },\n      unregisterSider: (id: object) => {\n        siderIds.delete(id);\n        setSiderCount(siderIds.size);\n      },\n    }),\n    [siderIds],\n  );\n\n  const isRow = siderCount > 0;\n\n  return (\n    <LayoutNestedContext.Provider value>\n      <SiderRegistryContext.Provider value={registry}>\n        <div\n          className={cn(\n            'flex w-full flex-1',\n            // A nested Layout (the Sider row wrapper) must stay free to\n            // shrink/grow inside its parent's flex column, so it keeps\n            // min-h-0. The outermost Layout has no ancestor to size against,\n            // so it needs its own height anchor or flex-1/grow are no-ops\n            // and Content collapses under Footer.\n            isNested ? 'min-h-0' : 'min-h-screen',\n            isRow ? 'flex-row' : 'flex-col',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </SiderRegistryContext.Provider>\n    </LayoutNestedContext.Provider>\n  );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;;AAgBA,MAAM,sBAAsB,cAAc,MAAM;AAShD,MAAM,uBAAuB,aAC3B,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,CAAC,YAAY,+BAAe,IAAI,KAAa,CAAC;CACpD,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,SAAS,GAAG,IAAI,EACrC;CAED,MAAM,WAAW,eACR;EACL,gBAAgB,OAAe;AAC7B,YAAS,IAAI,GAAG;AAChB,iBAAc,SAAS,KAAK;;EAE9B,kBAAkB,OAAe;AAC/B,YAAS,OAAO,GAAG;AACnB,iBAAc,SAAS,KAAK;;EAE/B,GACD,CAAC,SAAS,CACX;CAED,MAAM,QAAQ,aAAa;AAE3B,QACE,oBAAC,oBAAoB;EAAS;YAC5B,oBAAC,qBAAqB;GAAS,OAAO;aACpC,oBAAC;IACC,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,UACD;IACD,GAAI;IAEH;KACG;IACwB;GACH"}