@jbpark/ui-kit 1.1.4 → 1.1.6

package/dist/utils-DEenfsJ-.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/lib/utils/index.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn as t };

package/dist/utils.mjs

@@ -1,10 +1,3 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { t as cn } from "./utils-DEenfsJ-.mjs";
 
-//#region src/lib/utils/index.ts
-function cn(...inputs) {
-	return twMerge(clsx(inputs));
-}
-
-//#endregion
 export { cn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",

package/dist/Menu-Du6xCBZw.mjs

@@ -1,235 +0,0 @@
-import { ChevronDown } from "lucide-react";
-import { cn } from "@repo/ui/utils";
-import { createElement, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "motion/react";
-import { Typography } from "@repo/ui";
-
-//#region src/components/molecules/Menu/index.tsx
-const MENU_CLASSNAMES = [
-	"p-0",
-	"bg-white",
-	"shadow-md",
-	"rounded-md"
-];
-const OPEN_CLASSNAMES = ["underline", "underline-offset-8"];
-const HOVER_CLASSNAMES = ["hover:underline", "hover:underline-offset-8"];
-const OFFSET = [8, 8];
-const INLINE_OFFSET = 16;
-function findKey(menu, targetKeys) {
-	if (targetKeys.includes(menu.key)) return true;
-	if (menu.children && Array.isArray(menu.children)) {
-		for (const child of menu.children) if (findKey(child, targetKeys)) return true;
-	}
-	return false;
-}
-const Label = ({ children, level = 4, className, ...props }) => {
-	if (typeof children === "string") return /* @__PURE__ */ jsx(Typography.Text, {
-		level,
-		className: cn(className),
-		...props,
-		children
-	});
-	return children;
-};
-const Item = ({ itemKey = "", keyPath = [], root = false, mode, label, children, selectedKeys = [], fullSize, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, ...props }) => {
-	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
-	});
-	const itemRef = useRef(null);
-	const isHorizontal = mode === "horizontal";
-	const isInline = mode === "inline";
-	const [left, top] = offset;
-	const item = {
-		...props,
-		label,
-		key: itemKey,
-		children
-	};
-	const itemClassNames = cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
-		"h-full",
-		"rounded-none border-transparent",
-		!!children?.length && "hover:border-current",
-		isHorizontal ? "border-b-2" : "border-r-2",
-		isInline && "border-none",
-		classNames?.rootItem
-	] : [
-		"rounded-md",
-		...HOVER_CLASSNAMES,
-		classNames?.item
-	]);
-	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", ...fullSize ? [
-		...MENU_CLASSNAMES,
-		"fixed flex justify-center items-start",
-		isHorizontal ? "inset-x-0 w-screen" : "inset-y-0 h-screen"
-	] : []);
-	const childrenContainerStyle = fullSize ? isHorizontal ? {
-		top: position.top,
-		marginTop: top
-	} : {
-		left: position.left,
-		marginLeft: left
-	} : isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
-	useEffect(() => {
-		if (!itemRef.current) return;
-		const $item = itemRef.current;
-		const onResize = () => {
-			setPosition({
-				top: $item.offsetTop + $item.offsetHeight,
-				left: $item.offsetLeft + $item.offsetWidth
-			});
-		};
-		onResize();
-		window.addEventListener("resize", onResize);
-		return () => window.removeEventListener("resize", onResize);
-	}, []);
-	if (!root && fullSize) return /* @__PURE__ */ jsxs("li", {
-		className: cn("basis-1/6", "min-w-[180px]"),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(itemClassNames, "justify-center"),
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick?.({
-					domEvent: e,
-					key: itemKey,
-					keyPath,
-					item
-				});
-			},
-			children: /* @__PURE__ */ jsx(Label, {
-				className: "font-semibold",
-				children: label
-			})
-		}), /* @__PURE__ */ jsx("ul", { children: children?.map((child) => /* @__PURE__ */ jsx("li", {
-			className: cn(itemClassNames, "justify-center", ...findKey(child, selectedKeys) ? [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick?.({
-					domEvent: e,
-					key: child.key,
-					keyPath: [...keyPath, child.key],
-					item: child
-				});
-			},
-			children: /* @__PURE__ */ jsx(Label, {
-				level: 5,
-				className: "text-center text-wrap",
-				children: child.label
-			})
-		}, child.key)) })]
-	});
-	return /* @__PURE__ */ jsxs("li", {
-		ref: itemRef,
-		className: cn("group", "relative", root && isHorizontal ? "inline-block" : "block"),
-		onMouseEnter: () => {
-			if (isInline) return;
-			setOpen(true);
-		},
-		onMouseLeave: () => {
-			if (isInline) return;
-			setOpen(false);
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(itemClassNames, ...findKey(item, selectedKeys) ? root ? ["border-current"] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : root && !!children?.length ? ["group-hover:border-current"] : []),
-			style: root ? styles?.rootItem : styles?.item,
-			onClick: (e) => {
-				e.stopPropagation();
-				if (isInline) setOpen(!open);
-				onClick?.({
-					domEvent: e,
-					key: itemKey,
-					keyPath,
-					item
-				});
-			},
-			children: /* @__PURE__ */ jsxs("div", {
-				className: cn("w-full", "inline-flex items-center justify-between"),
-				children: [
-					/* @__PURE__ */ jsx(Label, {
-						className: cn(classNames?.label, root && classNames?.rootItem, ...findKey(item, selectedKeys) ? root ? [] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
-						style: styles?.label,
-						children: label
-					}),
-					!root && !isInline && !!children?.length && /* @__PURE__ */ jsx(ChevronDown, { className: cn("-rotate-90") }),
-					isInline && !!children?.length && /* @__PURE__ */ jsx(ChevronDown, { className: cn("transition-all", open ? "-rotate-180" : "rotate-0") })
-				]
-			})
-		}), /* @__PURE__ */ jsx(AnimatePresence, { children: !!children?.length && open && /* @__PURE__ */ jsx(motion.div, {
-			className: cn(childrenContainerClassNames),
-			style: childrenContainerStyle,
-			initial: isInline ? {
-				height: 0,
-				opacity: 0
-			} : { opacity: 0 },
-			animate: isInline ? {
-				height: "auto",
-				opacity: 1
-			} : { opacity: 1 },
-			exit: isInline ? {
-				height: 0,
-				opacity: 0
-			} : { opacity: 0 },
-			transition: { duration: .2 },
-			children: /* @__PURE__ */ jsx("ul", {
-				className: cn(fullSize ? [
-					"h-auto",
-					"flex flex-nowrap gap-y-4",
-					"p-8"
-				] : MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
-				style: styles?.subMenu,
-				children: children.map((child) => /* @__PURE__ */ createElement(Item, {
-					...child,
-					key: child.key,
-					itemKey: child.key,
-					keyPath: [...keyPath, child.key],
-					mode,
-					selectedKeys,
-					fullSize,
-					classNames,
-					styles,
-					offset,
-					inlineOffset,
-					onClick
-				}))
-			})
-		}) })]
-	});
-};
-const Menu = ({ items, mode = "vertical", fullSize = false, defaultSelectedKeys: _defaultSelectedKeys = [], selectedKeys: _selectedKeys = [], className, classNames, styles, offset, inlineOffset, onClick = () => {}, ...props }) => {
-	const [selectedKeys, setSelectedKeys] = useState(_defaultSelectedKeys);
-	useEffect(() => {
-		if (!_defaultSelectedKeys.length) return;
-		setSelectedKeys(_defaultSelectedKeys);
-		return () => setSelectedKeys([]);
-	}, [_defaultSelectedKeys]);
-	useEffect(() => {
-		if (!_selectedKeys.length) return;
-		setSelectedKeys(_selectedKeys);
-		return () => setSelectedKeys([]);
-	}, [_selectedKeys]);
-	return /* @__PURE__ */ jsx("ul", {
-		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
-		...props,
-		children: items?.map((item) => /* @__PURE__ */ createElement(Item, {
-			root: true,
-			...item,
-			key: item.key,
-			itemKey: item.key,
-			keyPath: [item.key],
-			selectedKeys,
-			mode,
-			fullSize,
-			classNames,
-			styles,
-			offset,
-			inlineOffset,
-			onClick
-		}))
-	});
-};
-var Menu_default = Menu;
-
-//#endregion
-export { findKey as n, Menu_default as t };