@jbpark/ui-kit 2.3.3 → 2.3.4

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

@@ -0,0 +1,41 @@
+import { cn } from "../../../utils.mjs";
+import Skeleton from "../../atoms/Skeleton/index.mjs";
+import { Children } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/molecules/Space/index.tsx
+const sizes = {
+	small: [4, 4],
+	middle: [8, 8],
+	large: [16, 16]
+};
+const aligns = {
+	start: "items-start text-start",
+	end: "items-end text-end",
+	center: "items-center text-center",
+	baseline: "items-baseline text-baseline"
+};
+const Space = ({ loading, loader, children, size = "middle", orientation = "horizontal", align = "center", wrap = false, split, className, grid, hidden, style, ...props }) => {
+	const [x, y] = typeof size === "string" ? sizes[size] || [0, 0] : Array.isArray(size) ? size : [size, size];
+	const count = Children.count(children);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		children: loader || /* @__PURE__ */ jsx(Skeleton, {})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-nowrap", orientation === "horizontal" ? "flex-row" : "flex-col", wrap && "flex-wrap", aligns[align], grid && "grid", hidden && "hidden", className),
+		style: {
+			columnGap: x,
+			rowGap: y,
+			gridTemplateRows: grid?.rows ? `repeat(${grid.rows}, minmax(0, 1fr))` : void 0,
+			gridTemplateColumns: grid?.cols ? `repeat(${grid.cols}, minmax(0, 1fr))` : void 0,
+			...style
+		},
+		...props,
+		children: Children.map(children, (child, i) => /* @__PURE__ */ jsxs(Fragment, { children: [child, split && i < count - 1 && split] }))
+	});
+};
+
+//#endregion
+export { Space as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/molecules/Space/index.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/Skeleton';\n\ninterface Props extends React.ComponentPropsWithRef<'div'> {\n  loading?: boolean;\n  loader?: React.ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'middle' | 'large' | number | number[];\n  align?: 'start' | 'end' | 'center' | 'baseline';\n  wrap?: boolean;\n  split?: React.ReactNode;\n  grid?: {\n    rows?: number;\n    cols?: number;\n  };\n}\n\nconst sizes: Record<string, number[]> = {\n  small: [4, 4],\n  middle: [8, 8],\n  large: [16, 16],\n};\n\nconst aligns: Record<string, string> = {\n  start: 'items-start text-start',\n  end: 'items-end text-end',\n  center: 'items-center text-center',\n  baseline: 'items-baseline text-baseline',\n};\n\nconst Space = ({\n  loading,\n  loader,\n  children,\n  size = 'middle',\n  orientation = 'horizontal',\n  align = 'center',\n  wrap = false,\n  split,\n  className,\n  grid,\n  hidden,\n  style,\n  ...props\n}: Props) => {\n  const [x, y] =\n    typeof size === 'string'\n      ? sizes[size] || [0, 0]\n      : Array.isArray(size)\n        ? size\n        : [size, size];\n  const count = Children.count(children);\n\n  if (loading) {\n    return <div className={cn(className)}>{loader || <Skeleton />}</div>;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-nowrap',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        wrap && 'flex-wrap',\n        aligns[align],\n        grid && 'grid',\n        hidden && 'hidden',\n        className,\n      )}\n      style={{\n        columnGap: x,\n        rowGap: y,\n        gridTemplateRows: grid?.rows\n          ? `repeat(${grid.rows}, minmax(0, 1fr))`\n          : undefined,\n        gridTemplateColumns: grid?.cols\n          ? `repeat(${grid.cols}, minmax(0, 1fr))`\n          : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <>\n          {child}\n          {split && i < count - 1 && split}\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport default Space;\n"],"mappings":";;;;;;AAoBA,MAAM,QAAkC;CACtC,OAAO,CAAC,GAAG,EAAE;CACb,QAAQ,CAAC,GAAG,EAAE;CACd,OAAO,CAAC,IAAI,GAAG;CAChB;AAED,MAAM,SAAiC;CACrC,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CACX;AAED,MAAM,SAAS,EACb,SACA,QACA,UACA,OAAO,UACP,cAAc,cACd,QAAQ,UACR,OAAO,OACP,OACA,WACA,MACA,QACA,OACA,GAAG,YACQ;CACX,MAAM,CAAC,GAAG,KACR,OAAO,SAAS,WACZ,MAAM,SAAS,CAAC,GAAG,EAAE,GACrB,MAAM,QAAQ,KAAK,GACjB,OACA,CAAC,MAAM,KAAK;CACpB,MAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,KAAI,QACF,QAAO,oBAAC;EAAI,WAAW,GAAG,UAAU;YAAG,UAAU,oBAAC,aAAW;GAAO;AAGtE,QACE,oBAAC;EACC,WAAW,GACT,oBACA,gBAAgB,eAAe,aAAa,YAC5C,QAAQ,aACR,OAAO,QACP,QAAQ,QACR,UAAU,UACV,UACD;EACD,OAAO;GACL,WAAW;GACX,QAAQ;GACR,kBAAkB,MAAM,OACpB,UAAU,KAAK,KAAK,qBACpB;GACJ,qBAAqB,MAAM,OACvB,UAAU,KAAK,KAAK,qBACpB;GACJ,GAAG;GACJ;EACD,GAAI;YAEH,SAAS,IAAI,WAAW,OAAO,MAC9B,4CACG,OACA,SAAS,IAAI,QAAQ,KAAK,SAC1B,CACH;GACE"}

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

@@ -0,0 +1,7 @@
+import Menu from "../../Menu.mjs";
+import Reveals from "../../Reveals.mjs";
+import { Card } from "./Card/index.mjs";
+import { Collapse } from "./Collapse/index.mjs";
+import { Dropdown } from "./Dropdown/index.mjs";
+import { Marquees } from "./Marquees/index.mjs";
+import { Space } from "./Space/index.mjs";

package/dist/components/molecules/index.mjs

@@ -0,0 +1,9 @@
+import Card from "./Card/index.mjs";
+import Collapse from "./Collapse/index.mjs";
+import Menu from "../../Menu.mjs";
+import Dropdown from "./Dropdown/index.mjs";
+import Marquees from "./Marquees/index.mjs";
+import Reveals from "../../Reveals.mjs";
+import Space from "./Space/index.mjs";
+
+export {  };

package/dist/components/organisms/Drawer/index.d.mts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/organisms/Drawer/index.d.ts
+interface Props {
+  open: boolean;
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  footer?: React.ReactNode;
+  closable?: boolean;
+  closeIcon?: React.ReactNode;
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+  maskClosable?: boolean;
+  handlebar?: boolean;
+  draggable?: boolean;
+  rounded?: boolean;
+  mask?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  classNames?: {
+    mask?: string;
+    content?: string;
+    handlebar?: string;
+    header?: string;
+    title?: string;
+    close?: string;
+    body?: string;
+    footer?: string;
+  };
+  container?: HTMLElement;
+  onClose: () => void;
+}
+declare const Drawer: ({
+  open,
+  title,
+  footer,
+  closable,
+  closeIcon,
+  direction,
+  maskClosable,
+  handlebar,
+  draggable,
+  rounded,
+  mask,
+  className,
+  classNames,
+  style,
+  children,
+  container,
+  onClose,
+  ...props
+}: Props) => react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Drawer };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/organisms/Drawer/index.d.mts.map

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

package/dist/components/organisms/Drawer/index.mjs

@@ -0,0 +1,72 @@
+'use client';
+
+import { cn, renderConditional } from "../../../utils.mjs";
+import { drawer_exports } from "../../../core/drawer.mjs";
+import "../../../core.mjs";
+import { X } from "lucide-react";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/organisms/Drawer/index.tsx
+const { DrawerContent, Drawer: DrawerCore, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } = drawer_exports;
+const Drawer = ({ open, title, footer, closable = true, closeIcon, direction = "bottom", maskClosable = true, handlebar = true, draggable = false, rounded = false, mask = true, className, classNames, style, children, container, onClose, ...props }) => {
+	useEffect(() => {
+		if (!open) return;
+		if (!mask) {
+			const originalPointerEvents = document.body.style.pointerEvents;
+			const raf = window.requestAnimationFrame(() => {
+				document.body.style.pointerEvents = "auto";
+			});
+			return () => {
+				window.cancelAnimationFrame(raf);
+				document.body.style.pointerEvents = originalPointerEvents;
+			};
+		}
+	}, [open, mask]);
+	if (typeof window === "undefined") return null;
+	return /* @__PURE__ */ jsx(DrawerCore, {
+		open,
+		direction,
+		handleOnly: !draggable,
+		container,
+		onOpenChange: (open) => {
+			if (!open && maskClosable) onClose();
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(DrawerContent, {
+			className: cn("border-none outline-none", rounded ? "rounded-t-[30px]!" : "rounded-none!", classNames?.content, className),
+			handlebar,
+			mask,
+			classNames: {
+				mask: cn(classNames?.mask || ""),
+				handlebar: cn(classNames?.handlebar || "")
+			},
+			style,
+			children: [
+				/* @__PURE__ */ jsxs(DrawerHeader, {
+					className: cn(classNames?.header, !title && "p-0"),
+					children: [/* @__PURE__ */ jsxs(DrawerTitle, {
+						className: cn("flex justify-between", classNames?.title),
+						children: [/* @__PURE__ */ jsx("span", { children: title }), renderConditional(closable ? closeIcon || /* @__PURE__ */ jsx(X, {}) : null, (v) => /* @__PURE__ */ jsx("span", {
+							className: cn("absolute top-3 right-5 cursor-pointer", classNames?.close),
+							onClick: onClose,
+							children: v
+						}))]
+					}), /* @__PURE__ */ jsx(DrawerDescription, { className: "hidden" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("overflow-auto p-5", classNames?.body),
+					children
+				}),
+				renderConditional(footer, (v) => /* @__PURE__ */ jsx(DrawerFooter, {
+					className: cn(classNames?.footer),
+					children: v
+				}))
+			]
+		})
+	});
+};
+
+//#endregion
+export { Drawer as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/organisms/Drawer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["drawer"],"sources":["../../../../src/components/organisms/Drawer/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nconst {\n  DrawerContent,\n  Drawer: DrawerCore,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} = drawer;\n\ninterface Props {\n  open: boolean;\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n  maskClosable?: boolean;\n  handlebar?: boolean;\n  draggable?: boolean;\n  rounded?: boolean;\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: {\n    mask?: string;\n    content?: string;\n    handlebar?: string;\n    header?: string;\n    title?: string;\n    close?: string;\n    body?: string;\n    footer?: string;\n  };\n  container?: HTMLElement;\n  onClose: () => void;\n}\n\nconst Drawer = ({\n  open,\n  title,\n  footer,\n  closable = true,\n  closeIcon,\n  direction = 'bottom',\n  maskClosable = true,\n  handlebar = true,\n  draggable = false,\n  rounded = false,\n  mask = true,\n  className,\n  classNames,\n  style,\n  children,\n  container,\n  onClose,\n  ...props\n}: Props) => {\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    if (!mask) {\n      const originalPointerEvents = document.body.style.pointerEvents;\n\n      const raf = window.requestAnimationFrame(() => {\n        document.body.style.pointerEvents = 'auto';\n      });\n\n      return () => {\n        window.cancelAnimationFrame(raf);\n        document.body.style.pointerEvents = originalPointerEvents;\n      };\n    }\n  }, [open, mask]);\n\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <DrawerCore\n      open={open}\n      direction={direction}\n      handleOnly={!draggable}\n      container={container}\n      onOpenChange={(open: boolean) => {\n        if (!open && maskClosable) {\n          onClose();\n        }\n      }}\n      {...props}\n    >\n      <DrawerContent\n        className={cn(\n          'border-none outline-none',\n          rounded ? 'rounded-t-[30px]!' : 'rounded-none!',\n          classNames?.content,\n          className,\n          //\n        )}\n        handlebar={handlebar}\n        mask={mask}\n        classNames={{\n          mask: cn(\n            classNames?.mask || '',\n            //\n          ),\n          handlebar: cn(\n            classNames?.handlebar || '',\n            //\n          ),\n        }}\n        style={style}\n      >\n        <DrawerHeader\n          className={cn(\n            classNames?.header,\n            !title && 'p-0',\n            //\n          )}\n        >\n          <DrawerTitle\n            className={cn(\n              'flex justify-between',\n              classNames?.title,\n              //\n            )}\n          >\n            <span>{title}</span>\n            {renderConditional(closable ? closeIcon || <X /> : null, v => (\n              <span\n                className={cn(\n                  'absolute top-3 right-5 cursor-pointer',\n                  classNames?.close,\n                  //\n                )}\n                onClick={onClose}\n              >\n                {v}\n              </span>\n            ))}\n          </DrawerTitle>\n          <DrawerDescription className=\"hidden\" />\n        </DrawerHeader>\n        <div\n          className={cn(\n            'overflow-auto p-5',\n            classNames?.body,\n            //\n          )}\n        >\n          {children}\n        </div>\n        {renderConditional(footer, v => (\n          <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n        ))}\n      </DrawerContent>\n    </DrawerCore>\n  );\n};\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;AASA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AA+BJ,MAAM,UAAU,EACd,MACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;AACX,iBAAgB;AACd,MAAI,CAAC,KACH;AAGF,MAAI,CAAC,MAAM;GACT,MAAM,wBAAwB,SAAS,KAAK,MAAM;GAElD,MAAM,MAAM,OAAO,4BAA4B;AAC7C,aAAS,KAAK,MAAM,gBAAgB;KACpC;AAEF,gBAAa;AACX,WAAO,qBAAqB,IAAI;AAChC,aAAS,KAAK,MAAM,gBAAgB;;;IAGvC,CAAC,MAAM,KAAK,CAAC;AAEhB,KAAI,OAAO,WAAW,YACpB,QAAO;AAGT,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAe,SAAkB;AAC/B,OAAI,CAAC,QAAQ,aACX,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,sBAAsB,iBAChC,YAAY,SACZ,UAED;GACU;GACL;GACN,YAAY;IACV,MAAM,GACJ,YAAY,QAAQ,GAErB;IACD,WAAW,GACT,YAAY,aAAa,GAE1B;IACF;GACM;;IAEP,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MACC,WAAW,GACT,wBACA,YAAY,MAEb;iBAED,oBAAC,oBAAM,QAAa,EACnB,kBAAkB,WAAW,aAAa,oBAAC,MAAI,GAAG,OAAM,MACvD,oBAAC;OACC,WAAW,GACT,yCACA,YAAY,MAEb;OACD,SAAS;iBAER;QACI,CACP;OACU,EACd,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}

package/dist/components/organisms/List/Item/index.mjs

@@ -0,0 +1,15 @@
+import { cn } from "../../../../utils.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/organisms/List/Item/index.tsx
+const Item = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Item as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/organisms/List/Item/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/organisms/List/Item/index.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nconst Item = ({\n  children,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <div className={cn(className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;AAEA,MAAM,QAAQ,EACZ,UACA,WACA,GAAG,YACwC;AAC3C,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;EAChC;GACG"}

package/dist/components/organisms/List/index.d.mts

@@ -0,0 +1,52 @@
+import { Skeleton } from "../../atoms/Skeleton/index.mjs";
+import "../../../index.mjs";
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/organisms/List/index.d.ts
+interface Props<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+  loading?: boolean;
+  loaderProps?: React.ComponentProps<typeof Skeleton>;
+  loader?: React.ReactNode;
+  title?: React.ReactNode;
+  header?: React.ReactNode;
+  empty?: React.ReactNode;
+  classNames?: {
+    title?: string;
+    header?: string;
+    body?: string;
+  };
+  scroll?: {
+    hasMore: boolean;
+    loading: boolean;
+    loader?: React.ReactNode;
+    options?: IntersectionObserverInit;
+    next: () => void;
+  };
+  data?: T[];
+  renderItem?: (item: T, index: number) => React.ReactNode;
+}
+declare const List: {
+  <T>({
+    loading,
+    loaderProps,
+    loader,
+    header,
+    title,
+    empty,
+    scroll,
+    data,
+    className,
+    classNames,
+    renderItem,
+    ...props
+  }: Props<T>): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element;
+  Item: ({
+    children,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"div">) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { List };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/organisms/List/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/List/index.tsx"],"mappings":";;;;;;UAWU,KAAA,YAAiB,IAAA,CACzB,KAAA,CAAM,wBAAA;EAGN,OAAA;EACA,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA;EAC1C,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,UAAA;IACE,KAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,MAAA;IACE,OAAA;IACA,OAAA;IACA,MAAA,GAAS,KAAA,CAAM,SAAA;IACf,OAAA,GAAU,wBAAA;IACV,IAAA;EAAA;EAEF,IAAA,GAAO,CAAA;EACP,UAAA,IAAc,IAAA,EAAM,CAAA,EAAG,KAAA,aAAkB,KAAA,CAAM,SAAA;AAAA;AAAA,cAG3C,IAAA;EAAA;IAAS,OAAA;IAAA,WAAA;IAAA,MAAA;IAAA,MAAA;IAAA,KAAA;IAAA,KAAA;IAAA,MAAA;IAAA,IAAA;IAAA,SAAA;IAAA,UAAA;IAAA,UAAA;IAAA,GAAA;EAAA,GAaZ,KAAA,CAAM,CAAA,sCAAE,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/organisms/List/index.mjs

@@ -0,0 +1,77 @@
+'use client';
+
+import { cn, renderConditional } from "../../../utils.mjs";
+import Skeleton from "../../atoms/Skeleton/index.mjs";
+import Item from "./Item/index.mjs";
+import "../../../index.mjs";
+import React, { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
+
+//#region src/components/organisms/List/index.tsx
+const List = ({ loading, loaderProps, loader, header, title, empty, scroll, data, className, classNames, renderItem = () => null, ...props }) => {
+	const [loaderRef, entry] = useIntersectionObserver({
+		threshold: 0,
+		root: null,
+		rootMargin: "0px",
+		...scroll?.options
+	});
+	useEffect(() => {
+		if (!scroll) return;
+		if (entry?.isIntersecting && scroll.hasMore && !scroll.loading) scroll.next();
+	}, [entry, scroll]);
+	if (loading) return loader || /* @__PURE__ */ jsxs("div", {
+		className: cn(className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn(classNames?.title),
+				children: title && /* @__PURE__ */ jsx(Skeleton, {})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(classNames?.header),
+				children: header && /* @__PURE__ */ jsx(Skeleton, { size: "small" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("space-y-2", classNames?.body),
+				children: /* @__PURE__ */ jsx(Skeleton.Node, {
+					count: 10,
+					gap: 10,
+					...loaderProps
+				})
+			})
+		]
+	});
+	if (!data?.length && empty) return empty;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(className),
+		...props,
+		children: [
+			renderConditional(title, (v) => /* @__PURE__ */ jsx("h2", {
+				className: cn("px-1.5 py-4", "text-black-90 text-lg leading-5.75 font-bold"),
+				children: v
+			})),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(classNames?.header),
+				children: header
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("space-y-2", classNames?.body),
+				children: [
+					data?.map((item, i) => renderItem(item, i)),
+					scroll?.loading && (scroll?.loader ?? /* @__PURE__ */ jsx(Skeleton.Node, {
+						count: 10,
+						gap: 10,
+						...loaderProps
+					})),
+					/* @__PURE__ */ jsx("div", { ref: loaderRef })
+				]
+			})
+		]
+	});
+};
+List.Item = Item;
+
+//#endregion
+export { List as default };
+//# sourceMappingURL=index.mjs.map

package/dist/components/organisms/List/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/organisms/List/index.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect } from 'react';\n\nimport { useIntersectionObserver } from '@uidotdev/usehooks';\n\nimport { Skeleton } from '@repo/ui';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Item from './Item';\n\ninterface Props<T> extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title'\n> {\n  loading?: boolean;\n  loaderProps?: React.ComponentProps<typeof Skeleton>;\n  loader?: React.ReactNode;\n  title?: React.ReactNode;\n  header?: React.ReactNode;\n  empty?: React.ReactNode;\n  classNames?: {\n    title?: string;\n    header?: string;\n    body?: string;\n  };\n  scroll?: {\n    hasMore: boolean;\n    loading: boolean;\n    loader?: React.ReactNode;\n    options?: IntersectionObserverInit;\n    next: () => void;\n  };\n  data?: T[];\n  renderItem?: (item: T, index: number) => React.ReactNode;\n}\n\nconst List = <T,>({\n  loading,\n  loaderProps,\n  loader,\n  header,\n  title,\n  empty,\n  scroll,\n  data,\n  className,\n  classNames,\n  renderItem = () => null,\n  ...props\n}: Props<T>) => {\n  const [loaderRef, entry] = useIntersectionObserver({\n    threshold: 0,\n    root: null,\n    rootMargin: '0px',\n    ...scroll?.options,\n  });\n\n  useEffect(() => {\n    if (!scroll) {\n      return;\n    }\n\n    if (entry?.isIntersecting && scroll.hasMore && !scroll.loading) {\n      scroll.next();\n    }\n  }, [entry, scroll]);\n\n  if (loading) {\n    return (\n      loader || (\n        <div className={cn(className)} {...props}>\n          <div className={cn(classNames?.title)}>{title && <Skeleton />}</div>\n          <div className={cn(classNames?.header)}>\n            {header && <Skeleton size=\"small\" />}\n          </div>\n          <div className={cn('space-y-2', classNames?.body)}>\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          </div>\n        </div>\n      )\n    );\n  }\n\n  if (!data?.length && empty) {\n    return empty;\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <h2\n          className={cn(\n            'px-1.5 py-4',\n            'text-black-90 text-lg leading-5.75 font-bold',\n            //\n          )}\n        >\n          {v}\n        </h2>\n      ))}\n      <div className={cn(classNames?.header)}>{header}</div>\n      <div className={cn('space-y-2', classNames?.body)}>\n        {data?.map((item, i) => renderItem(item, i))}\n        {scroll?.loading &&\n          (scroll?.loader ?? (\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          ))}\n        <div ref={loaderRef} />\n      </div>\n    </div>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,GAAG,YACW;CACd,MAAM,CAAC,WAAW,SAAS,wBAAwB;EACjD,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,kBAAkB,OAAO,WAAW,CAAC,OAAO,QACrD,QAAO,MAAM;IAEd,CAAC,OAAO,OAAO,CAAC;AAEnB,KAAI,QACF,QACE,UACE,qBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;;GACjC,oBAAC;IAAI,WAAW,GAAG,YAAY,MAAM;cAAG,SAAS,oBAAC,aAAW;KAAO;GACpE,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cACnC,UAAU,oBAAC,YAAS,MAAK,UAAU;KAChC;GACN,oBAAC;IAAI,WAAW,GAAG,aAAa,YAAY,KAAK;cAC/C,oBAAC,SAAS;KAAK,OAAO;KAAI,KAAK;KAAI,GAAI;MAAe;KAClD;;GACF;AAKZ,KAAI,CAAC,MAAM,UAAU,MACnB,QAAO;AAGT,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,WAAW,GACT,eACA,+CAED;cAEA;KACE,CACL;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC9C,MAAM,KAAK,MAAM,MAAM,WAAW,MAAM,EAAE,CAAC;KAC3C,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAE1D,oBAAC,SAAI,KAAK,YAAa;;KACnB;;GACF;;AAIV,KAAK,OAAO"}

package/dist/components/organisms/Modal/index.d.mts

@@ -0,0 +1,66 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/organisms/Modal/index.d.ts
+interface Props {
+  open?: boolean;
+  maskClosable?: boolean;
+  closable?: boolean | {
+    closeIcon?: React.ReactNode;
+    disabled?: boolean;
+  };
+  closeIcon?: React.ReactNode;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  classNames?: {
+    mask?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+  };
+  style?: React.CSSProperties;
+  okText?: string;
+  cancelText?: string;
+  container?: HTMLElement;
+  children?: React.ReactNode;
+  onOk?: () => void;
+  onCancel?: () => void;
+}
+interface StaticProps extends Props {
+  type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';
+  id?: string;
+  icon?: React.ReactNode;
+  container?: HTMLElement;
+}
+declare const Modal: {
+  ({
+    open,
+    maskClosable,
+    closable,
+    closeIcon,
+    className,
+    classNames,
+    style,
+    title,
+    footer,
+    container,
+    children,
+    okText,
+    cancelText,
+    onOk,
+    onCancel,
+    ...props
+  }: Props): react_jsx_runtime0.JSX.Element | null;
+  destroy(id?: string): void;
+  destroyAll(): void;
+  info(props: StaticProps): string | undefined;
+  success(props: StaticProps): string | undefined;
+  error(props: StaticProps): string | undefined;
+  warning(props: StaticProps): string | undefined;
+  confirm(props: StaticProps): string | undefined;
+};
+//#endregion
+export { Modal };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/organisms/Modal/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/Modal/index.tsx"],"mappings":";;;;UA4BU,KAAA;EACR,IAAA;EACA,YAAA;EACA,QAAA;IAGM,SAAA,GAAY,KAAA,CAAM,SAAA;IAClB,QAAA;EAAA;EAEN,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA,GAAU,KAAA,CAAM,SAAA;EAChB,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,SAAA;EACA,UAAA;IACE,IAAA;IACA,MAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,MAAA;EACA,UAAA;EACA,SAAA,GAAY,WAAA;EACZ,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,IAAA;EACA,QAAA;AAAA;AAAA,UAGQ,WAAA,SAAoB,KAAA;EAC5B,IAAA;EACA,EAAA;EACA,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,SAAA,GAAY,WAAA;AAAA;AAAA,cAiCR,KAAA;EAAA;;;;;;;;;;;;;;;;;KAiBH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cA+Na,WAAA;iBACG,WAAA;eAEF,WAAA;iBACE,WAAA;iBAEA,WAAA;AAAA"}

package/dist/components/organisms/Modal/index.mjs

@@ -0,0 +1,197 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import { dialog_exports } from "../../../core/dialog.mjs";
+import "../../../core.mjs";
+import Button from "../../atoms/Button/index.mjs";
+import "../../../index.mjs";
+import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { v4 } from "uuid";
+
+//#region src/components/organisms/Modal/index.tsx
+const { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } = dialog_exports;
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+let modalRoot = null;
+let modalStack = [];
+let updateStack = null;
+const createModalRoot = (container) => {
+	if (!isBrowser) return null;
+	const targetContainer = container || document.body;
+	let rootEl = targetContainer.querySelector("#modal-root");
+	if (!rootEl) {
+		rootEl = document.createElement("div");
+		rootEl.setAttribute("id", "modal-root");
+		rootEl.setAttribute("role", "dialog");
+		rootEl.setAttribute("aria-modal", "true");
+		rootEl.style.zIndex = "10000";
+		rootEl.style.position = "absolute";
+		targetContainer.appendChild(rootEl);
+	}
+	return rootEl;
+};
+const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon, className, classNames, style, title, footer, container, children, okText = "OK", cancelText = "Cancel", onOk, onCancel, ...props }) => {
+	if (typeof window === "undefined") return null;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (open) => {
+			if (!open && maskClosable) onCancel?.();
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("rounded-lg p-4 max-sm:max-w-[80%]", "border-none outline-none", className),
+			classNames: {
+				...classNames,
+				mask: cn("bg-black/60", classNames?.mask)
+			},
+			style,
+			showCloseButton: !!closable,
+			closeIcon,
+			container,
+			onCancel,
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, {
+					className: cn(classNames?.header, !title && "hidden"),
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { className: "hidden" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("break-all", classNames?.body),
+					children
+				}),
+				footer !== null && /* @__PURE__ */ jsx(DialogFooter, {
+					className: cn("flex-row justify-end gap-x-2", classNames?.footer),
+					children: footer || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+						onClick: onOk,
+						children: okText
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "outlined",
+						onClick: onCancel,
+						children: cancelText
+					})] })
+				})
+			]
+		})
+	});
+};
+const STATIC_ICONS = {
+	info: /* @__PURE__ */ jsx(Info, { className: "text-blue-400" }),
+	success: /* @__PURE__ */ jsx(Check, { className: "text-green-400" }),
+	error: /* @__PURE__ */ jsx(OctagonX, { className: "text-red-400" }),
+	warning: /* @__PURE__ */ jsx(OctagonAlert, { className: "text-yellow-400" }),
+	confirm: /* @__PURE__ */ jsx(CircleQuestionMark, {})
+};
+const StaticModal = ({ type, title, content, okText = "OK", cancelText = "Cancel", id, container, icon, onOk, onCancel, ...props }) => {
+	const [open, setOpen] = useState(true);
+	const closeModal = (callback) => {
+		callback?.();
+		setOpen(false);
+		setTimeout(() => {
+			Modal.destroy(id);
+		}, 200);
+	};
+	const footer = type === "confirm" ? /* @__PURE__ */ jsxs("div", {
+		className: "grid w-full grid-cols-5 gap-x-2",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "outlined",
+			className: "col-span-2",
+			onClick: () => closeModal(onCancel),
+			children: cancelText
+		}), /* @__PURE__ */ jsx(Button, {
+			className: "col-span-3",
+			onClick: () => closeModal(onOk),
+			children: okText
+		})]
+	}) : /* @__PURE__ */ jsx(Button, {
+		className: cn("grow"),
+		onClick: () => closeModal(onOk),
+		children: okText
+	});
+	if (!isBrowser) return null;
+	return createPortal(/* @__PURE__ */ jsx(Modal, {
+		open,
+		footer,
+		className: cn("z-10000", "box-content w-100", "rounded-3xl p-4", "gap-y-0"),
+		classNames: {
+			mask: "z-10000 bg-black/[.6]",
+			body: cn("text-black-70 whitespace-pre-wrap text-center", content && "mt-3"),
+			footer: "mt-9"
+		},
+		title: /* @__PURE__ */ jsxs("p", {
+			className: cn("text-center text-lg leading-normal whitespace-pre-wrap", "flex items-center justify-center gap-x-2"),
+			children: [icon || type && STATIC_ICONS[type], title]
+		}),
+		container,
+		onCancel: () => closeModal(onOk),
+		...props,
+		children: content
+	}), createModalRoot(container));
+};
+const ModalStackRenderer = () => {
+	const [, forceUpdate] = useState({});
+	useEffect(() => {
+		updateStack = () => forceUpdate({});
+		return () => {
+			updateStack = null;
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(Fragment, { children: modalStack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticModal, {
+		id,
+		...props
+	}, id)) });
+};
+const modalRoots = /* @__PURE__ */ new Map();
+const renderModal = (props) => {
+	if (!isBrowser) return;
+	const targetContainer = props.container || document.body;
+	const rootElement = createModalRoot(targetContainer);
+	if (!modalRoots.has(targetContainer)) {
+		const root = createRoot(rootElement);
+		modalRoots.set(targetContainer, root);
+		root.render(/* @__PURE__ */ jsx(ModalStackRenderer, {}));
+	}
+	const id = props.id || v4();
+	modalStack.push({
+		...props,
+		id
+	});
+	updateStack?.();
+	return id;
+};
+Modal.destroy = (id) => {
+	modalStack = id ? modalStack.filter((modal) => modal.id !== id) : [];
+	updateStack?.();
+	if (!modalStack.length && modalRoot) {
+		modalRoot.unmount();
+		modalRoot = null;
+	}
+};
+Modal.destroyAll = () => {
+	Modal.destroy();
+};
+Modal.info = (props) => renderModal({
+	type: "info",
+	...props
+});
+Modal.success = (props) => renderModal({
+	type: "success",
+	...props
+});
+Modal.error = (props) => renderModal({
+	type: "error",
+	...props
+});
+Modal.warning = (props) => renderModal({
+	type: "warning",
+	...props
+});
+Modal.confirm = (props) => renderModal({
+	type: "confirm",
+	...props
+});
+
+//#endregion
+export { Modal as default };
+//# sourceMappingURL=index.mjs.map