@jbpark/ui-kit 2.3.3 → 2.3.4

package/dist/components/molecules/Dropdown/index.mjs

@@ -0,0 +1,66 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import Menu from "../../../Menu.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/components/molecules/Dropdown/index.tsx
+const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange: _onOpenChange = () => {}, ...props }) => {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const controlled = _open !== void 0;
+	const open = controlled ? _open : uncontrolledOpen;
+	const isClickTrigger = trigger === "click";
+	const onOpenChange = (nextOpen) => {
+		if (!controlled) setUncontrolledOpen(nextOpen);
+		_onOpenChange(nextOpen);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("relative z-0", "inline-block cursor-pointer"),
+		onMouseEnter: () => {
+			if (isClickTrigger) return;
+			onOpenChange(true);
+		},
+		onMouseLeave: () => {
+			if (isClickTrigger) return;
+			onOpenChange(false);
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			onClick: () => {
+				if (!isClickTrigger) return;
+				onOpenChange(!open);
+			},
+			onBlur: () => {
+				onOpenChange(false);
+			},
+			children
+		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(motion.div, {
+			className: cn("absolute top-full pt-2"),
+			initial: {
+				opacity: 0,
+				y: -10
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				y: -10
+			},
+			transition: { duration: .1 },
+			children: /* @__PURE__ */ jsx(Menu, {
+				...menu,
+				onMouseDown: (e) => {
+					e.preventDefault();
+				}
+			})
+		}) })]
+	});
+};
+
+//#endregion
+export { Dropdown as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/molecules/Dropdown/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from '../Menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\ninterface Props extends React.ComponentPropsWithoutRef<'div'> {\n  open?: boolean;\n  trigger?: string;\n  menu?: MenuProps;\n  placement?: string;\n  onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n  children,\n  menu,\n  trigger = 'hover',\n  open: _open,\n  onOpenChange: _onOpenChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(false);\n\n  const controlled = _open !== undefined;\n  const open = controlled ? _open : uncontrolledOpen;\n\n  const isClickTrigger = trigger === 'click';\n\n  const onOpenChange = (nextOpen: boolean) => {\n    if (!controlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    _onOpenChange(nextOpen);\n  };\n\n  return (\n    <div\n      {...props}\n      className={cn('relative z-0', 'inline-block cursor-pointer')}\n      onMouseEnter={() => {\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(true);\n      }}\n      onMouseLeave={() => {\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(false);\n      }}\n    >\n      <div\n        onClick={() => {\n          if (!isClickTrigger) {\n            return;\n          }\n          onOpenChange(!open);\n        }}\n        onBlur={() => {\n          onOpenChange(false);\n        }}\n      >\n        {children}\n      </div>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            className={cn(\n              'absolute top-full pt-2',\n              //\n            )}\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.1 }}\n          >\n            <Menu\n              {...menu}\n              onMouseDown={e => {\n                e.preventDefault();\n              }}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,GAAG,YACQ;CACX,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,MAAM;CAExE,MAAM,aAAa,UAAU;CAC7B,MAAM,OAAO,aAAa,QAAQ;CAElC,MAAM,iBAAiB,YAAY;CAEnC,MAAM,gBAAgB,aAAsB;AAC1C,MAAI,CAAC,WACH,qBAAoB,SAAS;AAE/B,gBAAc,SAAS;;AAGzB,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GAAG,gBAAgB,8BAA8B;EAC5D,oBAAoB;AAClB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,oBAAoB;AAClB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,cAAc;AACZ,iBAAa,MAAM;;GAGpB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}

package/dist/components/molecules/Marquees/Item/index.d.mts

@@ -0,0 +1,17 @@
+import "react/jsx-runtime";
+
+//#region src/components/molecules/Marquees/Item/index.d.ts
+interface ItemProps {
+  key?: React.Key;
+  speed?: number;
+  autoFill?: boolean | number;
+  pause?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+}
+interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {
+  width: string | number;
+}
+//#endregion
+export { ItemProps, Props };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/molecules/Marquees/Item/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/molecules/Marquees/Item/index.tsx"],"mappings":";;;UAKiB,SAAA;EACf,GAAA,GAAM,KAAA,CAAM,GAAA;EACZ,KAAA;EACA,QAAA;EACA,KAAA;EACA,YAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;AAAA,UAGF,KAAA,SACP,IAAA,CAAK,KAAA,CAAM,wBAAA,iBAAyC,SAAA;EAC5D,KAAA;AAAA"}

package/dist/components/molecules/Marquees/Item/index.mjs

@@ -0,0 +1,103 @@
+import { gsapWithCSS } from "../../../../node_modules/gsap/index.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+
+//#region src/components/molecules/Marquees/Item/index.tsx
+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 isPaused = _pause || pause;
+	const hoverEvents = pauseOnHover ? {
+		onMouseEnter: () => {
+			setPause(true);
+		},
+		onMouseLeave: () => {
+			setPause(false);
+		}
+	} : {};
+	useEffect(() => {
+		if (!autoFill || !children || !itemRefs.current[0] || typeof width === "string") return;
+		const itemWidth = itemRefs.current[0].offsetWidth;
+		if (itemWidth >= width) {
+			setWidth(itemWidth);
+			setRepeatCount(0);
+			return;
+		}
+		let totalWidth = 0;
+		let repeatCount = 0;
+		while (totalWidth < width) {
+			totalWidth += itemWidth;
+			repeatCount += 1;
+		}
+		setWidth(totalWidth);
+		setRepeatCount(repeatCount - 1);
+	}, [
+		autoFill,
+		width,
+		children
+	]);
+	useEffect(() => {
+		setWidth(_width);
+	}, [_width]);
+	useGSAP(() => {
+		if (!containerRef.current || typeof width === "string") return;
+		if (tweenRef.current) tweenRef.current.kill();
+		tweenRef.current = gsapWithCSS.fromTo(containerRef.current, { x: 0 }, {
+			x: -width,
+			duration: width / speed,
+			repeat: -1,
+			ease: "linear"
+		});
+		return () => {
+			tweenRef.current?.kill();
+		};
+	}, {
+		scope: containerRef,
+		dependencies: [width, speed]
+	});
+	useEffect(() => {
+		if (!tweenRef.current) return;
+		if (isPaused) tweenRef.current.pause();
+		else tweenRef.current.play();
+	}, [isPaused]);
+	useEffect(() => {
+		setRepeatCount(autoFill ? typeof autoFill === "boolean" ? 100 : autoFill : 0);
+	}, [autoFill]);
+	useEffect(() => {
+		const onResize = () => {
+			if (!tweenRef.current || !containerRef.current) return;
+			tweenRef.current.pause();
+		};
+		window.addEventListener("resize", onResize);
+		return () => {
+			window.removeEventListener("resize", onResize);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex overflow-hidden",
+		...hoverEvents,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "flex flex-nowrap",
+			children: [...Array(2)].map((_, index) => /* @__PURE__ */ jsxs("div", {
+				style: { minWidth: width },
+				className: "flex flex-nowrap",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: (el) => {
+						if (el) itemRefs.current[index] = el;
+					},
+					children
+				}), [...Array(typeof autoFill === "number" ? autoFill : repeatCount)].map((_, i) => /* @__PURE__ */ jsx("div", { children }, i))]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+export { Item as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/molecules/Marquees/Item/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["gsap"],"sources":["../../../../../src/components/molecules/Marquees/Item/index.tsx"],"sourcesContent":["import { 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\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  useEffect(() => {\n    const onResize = () => {\n      if (!tweenRef.current || !containerRef.current) {\n        return;\n      }\n      tweenRef.current.pause();\n    };\n\n    window.addEventListener('resize', onResize);\n\n    return () => {\n      window.removeEventListener('resize', onResize);\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":";;;;;;AAmBA,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,UAAUA,YAAK,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,iBAAgB;EACd,MAAM,iBAAiB;AACrB,OAAI,CAAC,SAAS,WAAW,CAAC,aAAa,QACrC;AAEF,YAAS,QAAQ,OAAO;;AAG1B,SAAO,iBAAiB,UAAU,SAAS;AAE3C,eAAa;AACX,UAAO,oBAAoB,UAAU,SAAS;;IAE/C,EAAE,CAAC;AAEN,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/Marquees/index.d.mts

@@ -0,0 +1,31 @@
+import { ItemProps, Props as Props$1 } from "./Item/index.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/molecules/Marquees/index.d.ts
+interface Props extends React.ComponentPropsWithoutRef<'div'> {
+  speed?: number;
+  autoFill?: boolean | number;
+  pauseOnHover?: boolean;
+  items?: ItemProps[];
+}
+declare const Marquees: {
+  ({
+    className,
+    items,
+    speed,
+    pauseOnHover,
+    autoFill,
+    ...props
+  }: Props): react_jsx_runtime0.JSX.Element;
+  Item: ({
+    width: _width,
+    speed,
+    autoFill,
+    pause: _pause,
+    pauseOnHover,
+    children
+  }: Props$1) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { Marquees };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/molecules/Marquees/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/Marquees/index.tsx"],"mappings":";;;;UAUiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,KAAA;EACA,QAAA;EACA,YAAA;EACA,KAAA,GAAQ,SAAA;AAAA;AAAA,cAGJ,QAAA;EAAA;;;;;;;KAOH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/Marquees/index.mjs

@@ -0,0 +1,63 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import Item from "./Item/index.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useResponsiveSize, useThrottle } from "@jbpark/use-hooks";
+
+//#region src/components/molecules/Marquees/index.tsx
+const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = true, ...props }) => {
+	const [width, setWidth] = useState("100vw");
+	const [padding, setPadding] = useState(0);
+	const [pause, setPause] = useState(false);
+	const throttledWidth = useThrottle(width, 200);
+	const { size } = useResponsiveSize();
+	const containerRef = useRef(null);
+	const hoverEvents = pauseOnHover ? {
+		onMouseEnter: () => {
+			setPause(true);
+		},
+		onMouseLeave: () => {
+			setPause(false);
+		}
+	} : {};
+	useEffect(() => {
+		if (!size.width || !containerRef.current) return;
+		const computedStyle = getComputedStyle(containerRef.current);
+		setPadding((parseFloat(computedStyle.paddingLeft) || 0) + (parseFloat(computedStyle.paddingRight) || 0));
+		setWidth(size.width);
+	}, [size]);
+	useEffect(() => {
+		const onScroll = () => {
+			setWidth(document.body.scrollWidth);
+		};
+		window.addEventListener("scroll", onScroll);
+		return () => {
+			window.removeEventListener("scroll", onScroll);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn(className),
+		...hoverEvents,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col gap-y-5", "overflow-hidden", "whitespace-nowrap", "bg-inherit"),
+			style: { width: typeof throttledWidth === "number" ? throttledWidth - padding : throttledWidth },
+			children: items?.map(({ children, key: itemKey, ...item }, key) => /* @__PURE__ */ jsx(Item, {
+				width: throttledWidth,
+				pause,
+				speed,
+				autoFill,
+				...item,
+				children
+			}, itemKey || key))
+		})
+	});
+};
+Marquees.Item = Item;
+
+//#endregion
+export { Marquees as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/molecules/Marquees/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Marquees/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useResponsiveSize, useThrottle } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './Item';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number;\n  autoFill?: boolean | number;\n  pauseOnHover?: boolean;\n  items?: ItemProps[];\n}\n\nconst Marquees = ({\n  className,\n  items,\n  speed,\n  pauseOnHover = true,\n  autoFill = true,\n  ...props\n}: Props) => {\n  const [width, setWidth] = useState<string | number>(\n    '100vw',\n    //\n  );\n  const [padding, setPadding] = useState(0);\n  const [pause, setPause] = useState(false);\n\n  const throttledWidth = useThrottle(width, 200);\n\n  const { size } = useResponsiveSize<HTMLDivElement>();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const hoverEvents = pauseOnHover\n    ? {\n        onMouseEnter: () => {\n          setPause(true);\n        },\n        onMouseLeave: () => {\n          setPause(false);\n        },\n      }\n    : {};\n\n  useEffect(() => {\n    if (!size.width || !containerRef.current) {\n      return;\n    }\n\n    const computedStyle = getComputedStyle(containerRef.current);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    setPadding(paddingLeft + paddingRight);\n\n    setWidth(size.width);\n  }, [size]);\n\n  useEffect(() => {\n    const onScroll = () => {\n      setWidth(document.body.scrollWidth);\n    };\n\n    window.addEventListener('scroll', onScroll);\n\n    return () => {\n      window.removeEventListener('scroll', onScroll);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        className,\n        //\n      )}\n      {...hoverEvents}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-y-5',\n          'overflow-hidden',\n          'whitespace-nowrap',\n          'bg-inherit',\n          //\n        )}\n        style={{\n          width:\n            typeof throttledWidth === 'number'\n              ? throttledWidth - padding\n              : throttledWidth,\n        }}\n      >\n        {items?.map(({ children, key: itemKey, ...item }: ItemProps, key) => (\n          <Item\n            key={itemKey || key}\n            width={throttledWidth}\n            pause={pause}\n            speed={speed}\n            autoFill={autoFill}\n            {...item}\n          >\n            {children}\n          </Item>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nMarquees.Item = Item;\n\nexport { Item, type ItemProps, type Props as MarqueesProps };\n\nexport default Marquees;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,YAAY,EAChB,WACA,OACA,OACA,eAAe,MACf,WAAW,MACX,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,SACxB,QAED;CACD,MAAM,CAAC,SAAS,cAAc,SAAS,EAAE;CACzC,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CAEzC,MAAM,iBAAiB,YAAY,OAAO,IAAI;CAE9C,MAAM,EAAE,SAAS,mBAAmC;CACpD,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,cAAc,eAChB;EACE,oBAAoB;AAClB,YAAS,KAAK;;EAEhB,oBAAoB;AAClB,YAAS,MAAM;;EAElB,GACD,EAAE;AAEN,iBAAgB;AACd,MAAI,CAAC,KAAK,SAAS,CAAC,aAAa,QAC/B;EAGF,MAAM,gBAAgB,iBAAiB,aAAa,QAAQ;AAI5D,cAHoB,WAAW,cAAc,YAAY,IAAI,MACxC,WAAW,cAAc,aAAa,IAAI,GAEzB;AAEtC,WAAS,KAAK,MAAM;IACnB,CAAC,KAAK,CAAC;AAEV,iBAAgB;EACd,MAAM,iBAAiB;AACrB,YAAS,SAAS,KAAK,YAAY;;AAGrC,SAAO,iBAAiB,UAAU,SAAS;AAE3C,eAAa;AACX,UAAO,oBAAoB,UAAU,SAAS;;IAE/C,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,KAAK;EACL,WAAW,GACT,UAED;EACD,GAAI;EACJ,GAAI;YAEJ,oBAAC;GACC,WAAW,GACT,yBACA,mBACA,qBACA,aAED;GACD,OAAO,EACL,OACE,OAAO,mBAAmB,WACtB,iBAAiB,UACjB,gBACP;aAEA,OAAO,KAAK,EAAE,UAAU,KAAK,SAAS,GAAG,QAAmB,QAC3D,oBAAC;IAEC,OAAO;IACA;IACA;IACG;IACV,GAAI;IAEH;MAPI,WAAW,IAQX,CACP;IACE;GACF;;AAIV,SAAS,OAAO"}

package/dist/components/molecules/Menu/Item/Label/index.mjs

@@ -0,0 +1,18 @@
+import { cn } from "../../../../../utils.mjs";
+import Typography from "../../../../../Typography.mjs";
+import "../../../../../index.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/molecules/Menu/Item/Label/index.tsx
+const Label = ({ children, className, ...props }) => {
+	if (typeof children === "string") return /* @__PURE__ */ jsx(Typography.Text, {
+		className: cn(className),
+		...props,
+		children
+	});
+	return children;
+};
+
+//#endregion
+export { Label as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/molecules/Menu/Item/Label/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/molecules/Menu/Item/Label/index.tsx"],"sourcesContent":["import { Typography } from '@repo/ui';\nimport { cn } from '@repo/ui/utils';\n\ninterface Props extends React.ComponentPropsWithoutRef<\n  typeof Typography.Text\n> {}\n\nconst Label = ({ children, className, ...props }: Props) => {\n  if (typeof children === 'string') {\n    return (\n      <Typography.Text className={cn(className)} {...props}>\n        {children}\n      </Typography.Text>\n    );\n  }\n\n  return children;\n};\n\nexport default Label;\n"],"mappings":";;;;;;AAOA,MAAM,SAAS,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC1D,KAAI,OAAO,aAAa,SACtB,QACE,oBAAC,WAAW;EAAK,WAAW,GAAG,UAAU;EAAE,GAAI;EAC5C;GACe;AAItB,QAAO"}

package/dist/components/molecules/Menu/Item/index.mjs

@@ -0,0 +1,122 @@
+import { cn } from "../../../../utils.mjs";
+import Label from "./Label/index.mjs";
+import { MENU_CLASSNAMES } from "../../../../Menu.mjs";
+import { ChevronDown } from "lucide-react";
+import { createElement, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/components/molecules/Menu/Item/index.tsx
+const OFFSET = [8, 8];
+const INLINE_OFFSET = 16;
+const STYLES = {
+	hover: { classes: ["hover:underline", "hover:underline-offset-8"] },
+	open: { classes: ["underline", "underline-offset-8"] }
+};
+const getItemClasses = (root, isHorizontal, isInline, hasChildren, customClasses) => cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
+	"h-full",
+	"rounded-none border-transparent",
+	hasChildren && "hover:border-current",
+	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 [open, setOpen] = useState(false);
+	const itemRef = useRef(null);
+	const isHorizontal = mode === "horizontal";
+	const isInline = mode === "inline";
+	const [left, top] = offset;
+	const selected = selectionMap?.get(itemKey) ?? false;
+	const item = {
+		...props,
+		label,
+		key: itemKey,
+		children
+	};
+	const itemClassNames = getItemClasses(root, isHorizontal, isInline, !!children?.length, root ? classNames?.rootItem : 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");
+	const childrenContainerStyle = isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
+	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", {
+			role: "menuitem",
+			"aria-expanded": children?.length ? open : void 0,
+			"aria-haspopup": children?.length ? "menu" : void 0,
+			"aria-selected": selected,
+			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: (e) => {
+				e.stopPropagation();
+				if (isInline) setOpen(!open);
+				const params = {
+					domEvent: e,
+					key: itemKey,
+					keyPath,
+					item
+				};
+				onClick?.(params);
+				if (!selected) onSelect?.(params);
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("w-full", "inline-flex items-center justify-between"),
+				children: [
+					/* @__PURE__ */ jsx(Label, {
+						className: cn(classNames?.label),
+						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(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],
+					selectionMap,
+					mode,
+					selectedKeys,
+					classNames,
+					styles,
+					offset,
+					inlineOffset,
+					onClick,
+					onSelect
+				}))
+			})
+		}) })]
+	});
+};
+
+//#endregion
+export { Item as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/molecules/Menu/Item/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/molecules/Menu/Item/index.tsx"],"sourcesContent":["import { 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 '..';\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 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    >\n      <div\n        role=\"menuitem\"\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={e => {\n          e.stopPropagation();\n\n          if (isInline) {\n            setOpen(!open);\n          }\n\n          const params = {\n            domEvent: e,\n            key: itemKey,\n            keyPath,\n            item,\n          };\n\n          onClick?.(params);\n\n          if (!selected) {\n            onSelect?.(params);\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":";;;;;;;;;AAeA,MAAM,SAA2B,CAAC,GAAG,EAAE;AACvC,MAAM,gBAAgB;AAEtB,MAAM,SAAS;CACb,OAAO,EACL,SAAS,CAAC,mBAAmB,2BAA2B,EACzD;CACD,MAAM,EACJ,SAAS,CAAC,aAAa,qBAAqB,EAC7C;CACF;AAED,MAAM,kBACJ,MACA,cACA,UACA,aACA,kBAEA,GACE,aACA,kBACA,qBACA,QAAQ,eAAe,gBAAgB,QACvC,GAAI,OACA;CACE;CACA;CACA,eAAe;CACf,eAAe,eAAe;CAC9B,YAAY;CACb,GACD,CAAC,cAAc,GAAG,OAAO,MAAM,QAAQ,EAC3C,cACD;AAEH,MAAM,QAAQ,EACZ,SACA,SACA,OAAO,OACP,MACA,OACA,UACA,eAAe,EAAE,EACjB,cACA,YACA,QACA,SAAS,QACT,eAAe,eACf,SACA,UACA,GAAG,YACY;CACf,MAAM,CAAC,MAAM,WAAW,SAAkB,MAAM;CAEhD,MAAM,UAAU,OAA6B,KAAK;CAElD,MAAM,eAAe,SAAS;CAC9B,MAAM,WAAW,SAAS;CAE1B,MAAM,CAAC,MAAM,OAAO;CAEpB,MAAM,WAAW,cAAc,IAAI,QAAQ,IAAI;CAE/C,MAAM,OAAO;EACX,GAAG;EACH;EACA,KAAK;EACL;EACD;CAED,MAAM,iBAAiB,eACrB,MACA,cACA,UACA,CAAC,CAAC,UAAU,QACZ,OAAO,YAAY,WAAW,YAAY,KAC3C;CAED,MAAM,8BAA8B,GAClC,WAAW,6BAA6B,0BACxC,CAAC,YAAY,QAAQ,eACjB,8BACA,CAAC,WACC,8BACA,OACP;CAED,MAAM,yBAAyB,WAC3B,EACE,aAAa,cACd,GACD,QAAQ,eACN,EACE,YAAY,KACb,GACD,EACE,aAAa,MACd;AAEP,QACE,qBAAC;EACC,KAAK;EACL,WAAW,GACT,SACA,YACA,QAAQ,eAAe,iBAAiB,QACzC;EACD,oBAAoB;AAClB,OAAI,SACF;AAEF,WAAQ,KAAK;;EAEf,oBAAoB;AAClB,OAAI,SACF;AAEF,WAAQ,MAAM;;aAGhB,oBAAC;GACC,MAAK;GACL,iBAAe,UAAU,SAAS,OAAO;GACzC,iBAAe,UAAU,SAAS,SAAS;GAC3C,iBAAe;GACf,WAAW,GACT,gBACA,GAAI,WACA,OACE,CAAC,iBAAiB,GAClB,CAAC,GAAG,OAAO,KAAK,SAAS,GAAG,OAAO,MAAM,QAAQ,GACnD,QAAQ,CAAC,CAAC,UAAU,SAClB,CAAC,6BAA6B,GAC9B,EAAE,CAET;GACD,OAAO,OAAO,QAAQ,WAAW,QAAQ;GACzC,UAAS,MAAK;AACZ,MAAE,iBAAiB;AAEnB,QAAI,SACF,SAAQ,CAAC,KAAK;IAGhB,MAAM,SAAS;KACb,UAAU;KACV,KAAK;KACL;KACA;KACD;AAED,cAAU,OAAO;AAEjB,QAAI,CAAC,SACH,YAAW,OAAO;;aAItB,qBAAC;IACC,WAAW,GACT,UACA,2CAED;;KAED,oBAAC;MAAM,WAAW,GAAG,YAAY,MAAM;MAAE,OAAO,QAAQ;gBACrD;OACK;KACP,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,UAAU,UACjC,oBAAC,eAAY,WAAW,GAAG,aAAa,GAAI;KAE7C,YAAY,CAAC,CAAC,UAAU,UACvB,oBAAC,eACC,WAAW,GACT,kBACA,OAAO,gBAAgB,WACxB,GACD;;KAEA;IACF,EACN,oBAAC,6BACE,CAAC,CAAC,UAAU,UAAU,QACrB,oBAAC,OAAO;GACN,WAAW,GACT,4BAED;GACD,OAAO;GACP,SAAS,WAAW;IAAE,QAAQ;IAAG,SAAS;IAAG,GAAG,EAAE,SAAS,GAAG;GAC9D,SAAS,WAAW;IAAE,QAAQ;IAAQ,SAAS;IAAG,GAAG,EAAE,SAAS,GAAG;GACnE,MAAM,WAAW;IAAE,QAAQ;IAAG,SAAS;IAAG,GAAG,EAAE,SAAS,GAAG;GAC3D,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,WAAW,GACT,iBACA,YAAY,eACZ,YAAY,QAEb;IACD,OAAO,QAAQ;cAEd,SAAS,KAAI,UACZ,8BAAC;KACC,GAAI;KACJ,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,CAAC,GAAG,SAAS,MAAM,IAAI;KAClB;KACR;KACQ;KACF;KACJ;KACA;KACM;KACL;KACC;MACV,CACF;KACC;IACM,GAEC;GACf"}

package/dist/{index-CsjsTuId.d.mts → components/molecules/Reveals/Item/index.d.mts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { MotionProps } from "motion/react";
 
 //#region src/components/molecules/Reveals/Item/index.d.ts
@@ -54,44 +54,7 @@ declare const Item: ({
   transition,
   className,
   ...props
-}: ItemProps) => react_jsx_runtime7.JSX.Element;
+}: ItemProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/molecules/Reveals/index.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'>, 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_runtime7.JSX.Element;
-  Item: ({
-    effect,
-    children,
-    once,
-    viewport,
-    variants,
-    duration,
-    delay,
-    transition,
-    className,
-    ...props
-  }: ItemProps) => react_jsx_runtime7.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 };
+export { Item, ItemProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/molecules/Reveals/Item/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/molecules/Reveals/Item/index.tsx"],"mappings":";;;;cAMM,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAeW,SAAA;EACf,MAAA,gBAAsB,cAAA;EACtB,KAAA;EACA,IAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,QAAA,GAAW,WAAA;EACX,QAAA,GAAW,WAAA;EACX,UAAA,GAAa,WAAA;AAAA;AAAA,cAGT,IAAA;EAAQ,MAAA;EAAA,QAAA;EAAA,IAAA;EAAA,QAAA;EAAA,QAAA;EAAA,QAAA;EAAA,KAAA;EAAA,UAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAWX,SAAA,KAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{Reveals-Cqo3i2hh.mjs → components/molecules/Reveals/Item/index.mjs}

@@ -1,5 +1,6 @@
-import { t as cn } from "./utils-1s_37TSX.mjs";
-import { Children } from "react";
+'use client';
+
+import { cn } from "../../../../utils.mjs";
 import { jsx } from "react/jsx-runtime";
 import { motion } from "motion/react";
 
@@ -60,30 +61,7 @@ const Item = ({ effect = "fadeInUp", children, once, viewport, variants, duratio
 		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 };
+export { Item as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/molecules/Reveals/Item/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/molecules/Reveals/Item/index.tsx"],"sourcesContent":["'use client';\n\nimport { type MotionProps, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nconst effectVariants = {\n  fadeIn: {\n    offscreen: { opacity: 0 },\n    onscreen: { opacity: 1 },\n  },\n  fadeInUp: {\n    offscreen: { opacity: 0, y: 50 },\n    onscreen: { opacity: 1, y: 0 },\n  },\n  slideInUp: {\n    offscreen: { opacity: 1, y: 50 },\n    onscreen: { opacity: 1, y: 0 },\n  },\n};\n\nexport interface ItemProps {\n  effect?: keyof typeof effectVariants;\n  delay?: number;\n  once?: boolean;\n  duration?: number;\n  className?: string;\n  children?: React.ReactNode;\n  viewport?: MotionProps['viewport'];\n  variants?: MotionProps['variants'];\n  transition?: MotionProps['transition'];\n}\n\nconst Item = ({\n  effect = 'fadeInUp',\n  children,\n  once,\n  viewport,\n  variants,\n  duration,\n  delay,\n  transition,\n  className,\n  ...props\n}: ItemProps) => {\n  return (\n    <motion.div\n      initial=\"offscreen\"\n      whileInView=\"onscreen\"\n      viewport={{ once, ...viewport }}\n      variants={{\n        offscreen: {\n          ...effectVariants[effect].offscreen,\n          ...variants?.offscreen,\n          transition: {\n            duration: 0,\n          },\n        },\n        onscreen: {\n          ...effectVariants[effect].onscreen,\n          ...variants?.onscreen,\n          transition: {\n            duration,\n            ease: 'easeOut',\n            delay,\n            ...transition,\n          },\n        },\n      }}\n      className={cn(\n        'flex h-full items-center justify-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;AAMA,MAAM,iBAAiB;CACrB,QAAQ;EACN,WAAW,EAAE,SAAS,GAAG;EACzB,UAAU,EAAE,SAAS,GAAG;EACzB;CACD,UAAU;EACR,WAAW;GAAE,SAAS;GAAG,GAAG;GAAI;EAChC,UAAU;GAAE,SAAS;GAAG,GAAG;GAAG;EAC/B;CACD,WAAW;EACT,WAAW;GAAE,SAAS;GAAG,GAAG;GAAI;EAChC,UAAU;GAAE,SAAS;GAAG,GAAG;GAAG;EAC/B;CACF;AAcD,MAAM,QAAQ,EACZ,SAAS,YACT,UACA,MACA,UACA,UACA,UACA,OACA,YACA,WACA,GAAG,YACY;AACf,QACE,oBAAC,OAAO;EACN,SAAQ;EACR,aAAY;EACZ,UAAU;GAAE;GAAM,GAAG;GAAU;EAC/B,UAAU;GACR,WAAW;IACT,GAAG,eAAe,QAAQ;IAC1B,GAAG,UAAU;IACb,YAAY,EACV,UAAU,GACX;IACF;GACD,UAAU;IACR,GAAG,eAAe,QAAQ;IAC1B,GAAG,UAAU;IACb,YAAY;KACV;KACA,MAAM;KACN;KACA,GAAG;KACJ;IACF;GACF;EACD,WAAW,GACT,2CACA,UAED;EACD,GAAI;EAEH;GACU"}

package/dist/components/molecules/Space/index.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/molecules/Space/index.d.ts
+interface Props extends React.ComponentPropsWithRef<'div'> {
+  loading?: boolean;
+  loader?: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  size?: 'small' | 'middle' | 'large' | number | number[];
+  align?: 'start' | 'end' | 'center' | 'baseline';
+  wrap?: boolean;
+  split?: React.ReactNode;
+  grid?: {
+    rows?: number;
+    cols?: number;
+  };
+}
+declare const Space: ({
+  loading,
+  loader,
+  children,
+  size,
+  orientation,
+  align,
+  wrap,
+  split,
+  className,
+  grid,
+  hidden,
+  style,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Space };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/molecules/Space/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/Space/index.tsx"],"mappings":";;;UAMU,KAAA,SAAc,KAAA,CAAM,qBAAA;EAC5B,OAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,WAAA;EACA,IAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,IAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAiBE,KAAA;EAAS,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,IAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}