@jbpark/ui-kit 1.1.3

package/dist/Menu-Du6xCBZw.mjs

@@ -0,0 +1,235 @@
+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 };

package/dist/Menu.d.mts

@@ -0,0 +1,2 @@
+import { a as findKey, i as MenuProps, n as Menu, r as MenuItem, t as ClickEventHandler } from "./index-Bis4UfFa.mjs";
+export { ClickEventHandler, MenuItem, MenuProps, Menu as default, findKey };

package/dist/Menu.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import { n as findKey, t as Menu_default } from "./Menu-Du6xCBZw.mjs";
+
+export { Menu_default as default, findKey };

package/dist/Reveals-BC-bFyOg.mjs

@@ -0,0 +1,89 @@
+import { cn } from "@repo/ui/utils";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+
+//#region src/components/molecules/Reveals/Item/index.tsx
+const effectVariants = {
+	fadeIn: {
+		offscreen: { opacity: 0 },
+		onscreen: { opacity: 1 }
+	},
+	fadeInUp: {
+		offscreen: {
+			opacity: 0,
+			y: 50
+		},
+		onscreen: {
+			opacity: 1,
+			y: 0
+		}
+	},
+	slideInUp: {
+		offscreen: {
+			opacity: 1,
+			y: 50
+		},
+		onscreen: {
+			opacity: 1,
+			y: 0
+		}
+	}
+};
+const Item = ({ effect = "fadeInUp", children, once, viewport, variants, duration, delay, transition, className, ...props }) => {
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: "offscreen",
+		whileInView: "onscreen",
+		viewport: {
+			once,
+			...viewport
+		},
+		variants: {
+			offscreen: {
+				...effectVariants[effect].offscreen,
+				...variants?.offscreen,
+				transition: { duration: 0 }
+			},
+			onscreen: {
+				...effectVariants[effect].onscreen,
+				...variants?.onscreen,
+				transition: {
+					duration,
+					ease: "easeOut",
+					delay,
+					...transition
+				}
+			}
+		},
+		className: cn("flex h-full items-center justify-center", className),
+		...props,
+		children
+	});
+};
+var Item_default = Item;
+
+//#endregion
+//#region src/components/molecules/Reveals/index.tsx
+const DURATION = .6;
+const DELAY = 0;
+const CASCADE = .1;
+const Reveals = ({ children, className, classNames, items = [], cascade = CASCADE, duration = DURATION, delay = DELAY, ...props }) => {
+	const renderItems = (items$1) => items$1.map((item, index) => /* @__PURE__ */ jsx(Item_default, {
+		duration,
+		delay: delay + cascade * index,
+		className: cn(item.className, classNames?.item),
+		...props,
+		...item,
+		children: item.children
+	}, index));
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex gap-5", className, classNames?.root),
+		...props,
+		children: renderItems(children ? Children.toArray(children).map((child) => ({ children: child })) : items)
+	});
+};
+Reveals.Item = Item_default;
+var Reveals_default = Reveals;
+
+//#endregion
+export { Item_default as a, Reveals_default as i, DELAY as n, DURATION as r, CASCADE as t };

package/dist/Reveals.d.mts

@@ -0,0 +1,2 @@
+import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-BkkNNoK0.mjs";
+export { CASCADE, DELAY, DURATION, Item, ItemProps, Props as RevealsProps, Reveals as default };

package/dist/Reveals.mjs

@@ -0,0 +1,3 @@
+import { a as Item_default, i as Reveals_default, n as DELAY, r as DURATION, t as CASCADE } from "./Reveals-BC-bFyOg.mjs";
+
+export { CASCADE, DELAY, DURATION, Item_default as Item, Reveals_default as default };

package/dist/Typography-waEo2g0S.mjs

@@ -0,0 +1,72 @@
+import { cn } from "@repo/ui/utils";
+import { jsx } from "react/jsx-runtime";
+import { TEXT_LEVELS } from "@repo/ui/enums";
+
+//#region src/components/atoms/Typography/Link/index.tsx
+const Link = ({ children, className, level, ...props }) => {
+	return /* @__PURE__ */ jsx("a", {
+		className: cn("underline-offset-1 hover:underline", level ? TEXT_LEVELS[level] : "", className),
+		...props,
+		children
+	});
+};
+var Link_default = Link;
+
+//#endregion
+//#region src/components/atoms/Typography/Paragraph/index.tsx
+const Paragraph = ({ children, className, level, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cn(level ? TEXT_LEVELS[level] : "", className),
+		children
+	});
+};
+var Paragraph_default = Paragraph;
+
+//#endregion
+//#region src/components/atoms/Typography/Text/index.tsx
+const Text = ({ children, underline, strong, className, level, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-nowrap", level ? TEXT_LEVELS[level] : "", underline && "underline", strong && "font-bold", className),
+		...props,
+		children
+	});
+};
+var Text_default = Text;
+
+//#endregion
+//#region src/components/atoms/Typography/Title/index.tsx
+const styles = {
+	h1: "text-6xl",
+	h2: "text-5xl",
+	h3: "text-4xl",
+	h4: "text-3xl",
+	h5: "text-2xl",
+	h6: "text-xl"
+};
+const Title = ({ children, level = 1, className, ...props }) => {
+	const Element = level < 1 || level > 6 ? "h1" : `h${level}`;
+	return /* @__PURE__ */ jsx(Element, {
+		className: cn("leading-snug font-bold", styles[Element], className),
+		...props,
+		children
+	});
+};
+var Title_default = Title;
+
+//#endregion
+//#region src/components/atoms/Typography/index.tsx
+const Typography = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx("article", {
+		...props,
+		children
+	});
+};
+Typography.Link = Link_default;
+Typography.Paragraph = Paragraph_default;
+Typography.Text = Text_default;
+Typography.Title = Title_default;
+var Typography_default = Typography;
+
+//#endregion
+export { Link_default as a, Paragraph_default as i, Title_default as n, Text_default as r, Typography_default as t };

package/dist/Typography.d.mts

@@ -0,0 +1,2 @@
+import { a as Paragraph, i as Text, n as TypographyProps, o as Link, r as Title, t as Typography } from "./index-03IpZ7BA.mjs";
+export { Link, Paragraph, Text, Title, TypographyProps, Typography as default };

package/dist/Typography.mjs

@@ -0,0 +1,3 @@
+import { a as Link_default, i as Paragraph_default, n as Title_default, r as Text_default, t as Typography_default } from "./Typography-waEo2g0S.mjs";
+
+export { Link_default as Link, Paragraph_default as Paragraph, Text_default as Text, Title_default as Title, Typography_default as default };

package/dist/enums.d.mts

@@ -0,0 +1,4 @@
+//#region src/lib/enums/index.d.ts
+declare const TEXT_LEVELS: Record<string, string>;
+//#endregion
+export { TEXT_LEVELS };

package/dist/enums.mjs

@@ -0,0 +1,12 @@
+//#region src/lib/enums/index.ts
+const TEXT_LEVELS = {
+	1: "text-2xl",
+	2: "text-xl",
+	3: "text-lg",
+	4: "text-base",
+	5: "text-sm",
+	6: "text-xs"
+};
+
+//#endregion
+export { TEXT_LEVELS };

package/dist/index-03IpZ7BA.d.mts

@@ -0,0 +1,83 @@
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/components/atoms/Typography/Link/index.d.ts
+interface Props$3 extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  level?: TypographyProps['level'];
+}
+declare const Link: ({
+  children,
+  className,
+  level,
+  ...props
+}: Props$3) => react_jsx_runtime8.JSX.Element;
+//#endregion
+//#region src/components/atoms/Typography/Paragraph/index.d.ts
+interface Props$2 extends TypographyProps {}
+declare const Paragraph: ({
+  children,
+  className,
+  level,
+  ...props
+}: Props$2) => react_jsx_runtime8.JSX.Element;
+//#endregion
+//#region src/components/atoms/Typography/Text/index.d.ts
+interface Props$1 extends TypographyProps {
+  underline?: boolean;
+  strong?: boolean;
+}
+declare const Text: ({
+  children,
+  underline,
+  strong,
+  className,
+  level,
+  ...props
+}: Props$1) => react_jsx_runtime8.JSX.Element;
+//#endregion
+//#region src/components/atoms/Typography/Title/index.d.ts
+interface Props extends TypographyProps {}
+declare const Title: ({
+  children,
+  level,
+  className,
+  ...props
+}: Props) => react_jsx_runtime8.JSX.Element;
+//#endregion
+//#region src/components/atoms/Typography/index.d.ts
+interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const Typography: {
+  ({
+    children,
+    ...props
+  }: TypographyProps): react_jsx_runtime8.JSX.Element;
+  Link: ({
+    children,
+    className,
+    level,
+    ...props
+  }: Props$3) => react_jsx_runtime8.JSX.Element;
+  Paragraph: ({
+    children,
+    className,
+    level,
+    ...props
+  }: Props$2) => react_jsx_runtime8.JSX.Element;
+  Text: ({
+    children,
+    underline,
+    strong,
+    className,
+    level,
+    ...props
+  }: Props$1) => react_jsx_runtime8.JSX.Element;
+  Title: ({
+    children,
+    level,
+    className,
+    ...props
+  }: Props) => react_jsx_runtime8.JSX.Element;
+};
+//#endregion
+export { Paragraph as a, Text as i, TypographyProps as n, Link as o, Title as r, Typography as t };

package/dist/index-Bis4UfFa.d.mts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/components/molecules/Menu/index.d.ts
+interface MenuItem {
+  label: React.ReactNode;
+  key: React.Key;
+  type?: string;
+  itemKey?: React.Key;
+  keyPath?: React.Key[];
+  path?: string;
+  children?: MenuItem[];
+}
+interface Props {
+  fullSize?: boolean;
+  mode?: 'horizontal' | 'vertical' | 'inline';
+  selectedKeys?: React.Key[];
+  defaultSelectedKeys?: React.Key[];
+  offset?: [number, number];
+  inlineOffset?: number;
+  classNames?: {
+    rootItem?: string;
+    subMenu?: string;
+    item?: string;
+    label?: string;
+  };
+  styles?: {
+    rootItem?: React.CSSProperties;
+    subMenu?: React.CSSProperties;
+    item?: React.CSSProperties;
+    label?: React.CSSProperties;
+  };
+  onClick?: ClickEventHandler;
+}
+interface MenuProps extends Props, Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+  items?: MenuItem[];
+}
+type ClickEventHandler = (params: {
+  domEvent: React.MouseEvent;
+  key: React.Key;
+  keyPath: React.Key[];
+  item: MenuItem;
+}) => void;
+declare function findKey(menu: MenuItem, targetKeys: React.Key[]): boolean;
+declare const Menu: ({
+  items,
+  mode,
+  fullSize,
+  defaultSelectedKeys: _defaultSelectedKeys,
+  selectedKeys: _selectedKeys,
+  className,
+  classNames,
+  styles,
+  offset,
+  inlineOffset,
+  onClick,
+  ...props
+}: MenuProps) => react_jsx_runtime6.JSX.Element;
+//#endregion
+export { findKey as a, MenuProps as i, Menu as n, MenuItem as r, ClickEventHandler as t };

package/dist/index-BkkNNoK0.d.mts

@@ -0,0 +1,97 @@
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { MotionProps } from "motion/react";
+
+//#region src/components/molecules/Reveals/Item/index.d.ts
+declare const effectVariants: {
+  fadeIn: {
+    offscreen: {
+      opacity: number;
+    };
+    onscreen: {
+      opacity: number;
+    };
+  };
+  fadeInUp: {
+    offscreen: {
+      opacity: number;
+      y: number;
+    };
+    onscreen: {
+      opacity: number;
+      y: number;
+    };
+  };
+  slideInUp: {
+    offscreen: {
+      opacity: number;
+      y: number;
+    };
+    onscreen: {
+      opacity: number;
+      y: number;
+    };
+  };
+};
+interface ItemProps {
+  effect?: keyof typeof effectVariants;
+  delay?: number;
+  once?: boolean;
+  duration?: number;
+  className?: string;
+  children?: React.ReactNode;
+  viewport?: MotionProps['viewport'];
+  variants?: MotionProps['variants'];
+  transition?: MotionProps['transition'];
+}
+declare const Item: ({
+  effect,
+  children,
+  once,
+  viewport,
+  variants,
+  duration,
+  delay,
+  transition,
+  className,
+  ...props
+}: ItemProps) => react_jsx_runtime11.JSX.Element;
+//#endregion
+//#region src/components/molecules/Reveals/index.d.ts
+interface Props extends React.HTMLAttributes<HTMLDivElement>, ItemProps {
+  cascade?: number;
+  classNames?: {
+    root?: string;
+    item?: string;
+  };
+  once?: boolean;
+  items?: ItemProps[];
+}
+declare const DURATION = 0.6;
+declare const DELAY = 0;
+declare const CASCADE = 0.1;
+declare const Reveals: {
+  ({
+    children,
+    className,
+    classNames,
+    items,
+    cascade,
+    duration,
+    delay,
+    ...props
+  }: Props): react_jsx_runtime11.JSX.Element;
+  Item: ({
+    effect,
+    children,
+    once,
+    viewport,
+    variants,
+    duration,
+    delay,
+    transition,
+    className,
+    ...props
+  }: ItemProps) => react_jsx_runtime11.JSX.Element;
+};
+//#endregion
+export { Reveals as a, Props as i, DELAY as n, Item as o, DURATION as r, ItemProps as s, CASCADE as t };