@jbpark/ui-kit 2.5.0 → 2.7.0

package/dist/components/atoms/Checkbox/index.mjs

@@ -7,7 +7,7 @@ import "../../../core.mjs";
 import Group from "./Group/index.mjs";
 import { Square, SquareCheck } from "lucide-react";
 import { useId, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/Checkbox/index.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
@@ -24,7 +24,7 @@ const Checkbox = ({ placement = "left", value = "", children, className, icons,
 		if (!controlled) setUncontrolledChecked(next);
 		_onChange(next);
 	};
-	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment, { children: [
+	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("input", {
 			id,
 			hidden: true,
@@ -46,7 +46,7 @@ const Checkbox = ({ placement = "left", value = "", children, className, icons,
 			htmlFor: id,
 			children
 		})
-	] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CoreCheckbox, {
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CoreCheckbox, {
 		id,
 		checked,
 		disabled,

package/dist/components/atoms/Checkbox/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Group, { type OptionValue } from './Group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  disabled?: boolean;\n  icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const reactId = useId();\n\n  const id = typeof value === 'boolean' || !value ? reactId : String(value);\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        className={cn(cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nCheckbox.Group = Group;\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAgB7B,MAAM,YAAY,EAChB,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CAEvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;aAGrC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,4CACE,oBAAC;EACK;EACK;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG;;AAIV,SAAS,QAAQ"}
+{"version":3,"file":"index.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Group, { type OptionValue } from './Group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  disabled?: boolean;\n  icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const reactId = useId();\n\n  const id = typeof value === 'boolean' || !value ? reactId : String(value);\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        className={cn(cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nCheckbox.Group = Group;\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAgB7B,MAAM,YAAY,EAChB,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CAEvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;aAGrC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,8CACE,oBAAC;EACK;EACK;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG;;AAIV,SAAS,QAAQ"}

package/dist/components/atoms/Radio/index.mjs

@@ -7,7 +7,7 @@ import "../../../core.mjs";
 import RadioGroup from "./Group/index.mjs";
 import { Circle, CircleCheck } from "lucide-react";
 import { useId, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/Radio/index.tsx
 const { RadioGroup: Core, RadioGroupItem: Item } = radio_group_exports;
@@ -24,7 +24,7 @@ const Radio = ({ placement = "left", value = "", children, className, icons, dis
 		if (!controlled) setUncontrolledChecked(next);
 		_onChange(next);
 	};
-	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment, { children: [
+	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("input", {
 			id,
 			hidden: true,

package/dist/components/atoms/Skeleton/index.d.mts

@@ -36,7 +36,7 @@ declare const Skeleton: {
     height,
     children,
     ...props
-  }: Props): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
+  }: Props): string | number | bigint | boolean | 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 | null | undefined;
   Button: ({
     className,
     ...props

package/dist/components/atoms/Skeleton/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"mappings":";;;;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAA;;;;;;;;;;;;;;;KAeH,KAAA,wCAAK,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,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"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"mappings":";;;;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAA;;;;;;;;;;;;;;;KAeH,KAAA,wCAAK,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/molecules/Marquees/Item/index.mjs

@@ -1,7 +1,7 @@
-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";
+import { gsap } from "gsap";
 
 //#region src/components/molecules/Marquees/Item/index.tsx
 const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = false, pauseOnHover = false, children }) => {
@@ -47,7 +47,7 @@ const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = fa
 	useGSAP(() => {
 		if (!containerRef.current || typeof width === "string") return;
 		if (tweenRef.current) tweenRef.current.kill();
-		tweenRef.current = gsapWithCSS.fromTo(containerRef.current, { x: 0 }, {
+		tweenRef.current = gsap.fromTo(containerRef.current, { x: 0 }, {
 			x: -width,
 			duration: width / speed,
 			repeat: -1,

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

@@ -1 +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"}
+{"version":3,"file":"index.mjs","names":[],"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,UAAU,KAAK,OACtB,aAAa,SACb,EAAE,GAAG,GAAG,EACR;GACE,GAAG,CAAC;GACJ,UAAU,QAAQ;GAClB,QAAQ;GACR,MAAM;GACP,CACF;AAED,eAAa;AACX,YAAS,SAAS,MAAM;;IAG5B;EACE,OAAO;EACP,cAAc,CAAC,OAAO,MAAM;EAC7B,CACF;AAED,iBAAgB;AACd,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,SACF,UAAS,QAAQ,OAAO;MAExB,UAAS,QAAQ,MAAM;IAExB,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,iBACE,WAAY,OAAO,aAAa,YAAY,MAAM,WAAY,EAC/D;IACA,CAAC,SAAS,CAAC;AAEd,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/Space/index.mjs

@@ -1,7 +1,7 @@
 import { cn } from "../../../utils.mjs";
 import Skeleton from "../../atoms/Skeleton/index.mjs";
 import { Children } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/molecules/Space/index.tsx
 const sizes = {
@@ -32,7 +32,7 @@ const Space = ({ loading, loader, children, size = "middle", orientation = "hori
 			...style
 		},
 		...props,
-		children: Children.map(children, (child, i) => /* @__PURE__ */ jsxs(Fragment, { children: [child, split && i < count - 1 && split] }))
+		children: Children.map(children, (child, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [child, split && i < count - 1 && split] }))
 	});
 };
 

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

@@ -1 +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"}
+{"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,8CACG,OACA,SAAS,IAAI,QAAQ,KAAK,SAC1B,CACH;GACE"}

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

@@ -0,0 +1,31 @@
+import { ResizablePanel as ResizablePanel$1, ResizablePanelGroup as ResizablePanelGroup$1 } from "../../../core/resizable.mjs";
+import "../../../core.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/molecules/Splitter/index.d.ts
+declare const ResizablePanel: typeof ResizablePanel$1, ResizablePanelGroup: typeof ResizablePanelGroup$1;
+type SplitterLayout = Parameters<NonNullable<React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']>>[0];
+interface SplitterPanelProps extends React.ComponentProps<typeof ResizablePanel> {
+  children: React.ReactNode;
+}
+interface Props extends Omit<React.ComponentProps<typeof ResizablePanelGroup>, 'children' | 'orientation' | 'onLayoutChange' | 'onLayoutChanged' | 'onResize'> {
+  children: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  withHandle?: boolean;
+  handle?: React.ReactNode;
+  handleClassName?: string;
+  onResize?: (layout: SplitterLayout) => void;
+  onResizeEnd?: (layout: SplitterLayout) => void;
+}
+type SplitterComponent = ((props: Props) => React.ReactNode) & {
+  Panel: typeof SplitterPanel;
+};
+declare const SplitterPanel: ({
+  children,
+  className,
+  ...props
+}: SplitterPanelProps) => react_jsx_runtime0.JSX.Element;
+declare const Splitter: SplitterComponent;
+//#endregion
+export { Splitter };
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/Splitter/index.tsx"],"mappings":";;;;;cAOyB,cAAA,SAAc,gBAAA,EAAE,mBAAA,SAAmB,qBAAA;AAAA,KAEvD,cAAA,GAAiB,UAAA,CACpB,WAAA,CACE,KAAA,CAAM,cAAA,QAAsB,mBAAA;AAAA,UAIf,kBAAA,SAA2B,KAAA,CAAM,cAAA,QACzC,cAAA;EAEP,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,UAGD,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,cAAA,QAAsB,mBAAA;EAG5B,QAAA,EAAU,KAAA,CAAM,SAAA;EAChB,WAAA;EACA,UAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,eAAA;EACA,QAAA,IAAY,MAAA,EAAQ,cAAA;EACpB,WAAA,IAAe,MAAA,EAAQ,cAAA;AAAA;AAAA,KAGpB,iBAAA,KAAsB,KAAA,EAAO,KAAA,KAAU,KAAA,CAAM,SAAA;EAChD,KAAA,SAAc,aAAA;AAAA;AAAA,cAGV,aAAA;EAAiB,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAIpB,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAWf,QAAA,EA0CA,iBAAA"}

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { cn } from "../../../utils.mjs";
+import { resizable_exports } from "../../../core/resizable.mjs";
+import "../../../core.mjs";
+import { Children, Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/molecules/Splitter/index.tsx
+const { ResizableHandle, ResizablePanel, ResizablePanelGroup } = resizable_exports;
+const SplitterPanel = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx(ResizablePanel, {
+		className: cn("min-h-0 min-w-0 overflow-auto", className),
+		...props,
+		children
+	});
+};
+const Splitter = (({ children, className, orientation = "horizontal", withHandle = true, handle, handleClassName, onResize, onResizeEnd, ...props }) => {
+	const panels = Children.toArray(children);
+	return /* @__PURE__ */ jsx(ResizablePanelGroup, {
+		className: cn("border-border/60 h-full w-full rounded-lg border", className),
+		orientation,
+		onLayoutChange: onResize,
+		onLayoutChanged: onResizeEnd,
+		...props,
+		children: panels.map((panel, index) => /* @__PURE__ */ jsxs(Fragment, { children: [panel, index < panels.length - 1 && /* @__PURE__ */ jsx(ResizableHandle, {
+			className: cn("hover:bg-border/80 data-separator-active:bg-border transition-colors", handleClassName),
+			withHandle: withHandle && handle === void 0,
+			children: handle
+		})] }, index))
+	});
+});
+Splitter.Panel = SplitterPanel;
+
+//#endregion
+export { Splitter as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/Splitter/index.tsx"],"sourcesContent":["'use client';\n\nimport { Children, Fragment } from 'react';\n\nimport { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizableHandle, ResizablePanel, ResizablePanelGroup } = resizable;\n\ntype SplitterLayout = Parameters<\n  NonNullable<\n    React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']\n  >\n>[0];\n\nexport interface SplitterPanelProps extends React.ComponentProps<\n  typeof ResizablePanel\n> {\n  children: React.ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof ResizablePanelGroup>,\n  'children' | 'orientation' | 'onLayoutChange' | 'onLayoutChanged' | 'onResize'\n> {\n  children: React.ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  withHandle?: boolean;\n  handle?: React.ReactNode;\n  handleClassName?: string;\n  onResize?: (layout: SplitterLayout) => void;\n  onResizeEnd?: (layout: SplitterLayout) => void;\n}\n\ntype SplitterComponent = ((props: Props) => React.ReactNode) & {\n  Panel: typeof SplitterPanel;\n};\n\nconst SplitterPanel = ({\n  children,\n  className,\n  ...props\n}: SplitterPanelProps) => {\n  return (\n    <ResizablePanel\n      className={cn('min-h-0 min-w-0 overflow-auto', className)}\n      {...props}\n    >\n      {children}\n    </ResizablePanel>\n  );\n};\n\nconst Splitter = (({\n  children,\n  className,\n  orientation = 'horizontal',\n  withHandle = true,\n  handle,\n  handleClassName,\n  onResize,\n  onResizeEnd,\n  ...props\n}: Props) => {\n  const panels = Children.toArray(children);\n\n  return (\n    <ResizablePanelGroup\n      className={cn(\n        'border-border/60 h-full w-full rounded-lg border',\n        className,\n      )}\n      orientation={orientation}\n      onLayoutChange={onResize}\n      onLayoutChanged={onResizeEnd}\n      {...props}\n    >\n      {panels.map((panel, index) => (\n        <Fragment key={index}>\n          {panel}\n          {index < panels.length - 1 && (\n            <ResizableHandle\n              className={cn(\n                'hover:bg-border/80 data-separator-active:bg-border transition-colors',\n                handleClassName,\n              )}\n              withHandle={withHandle && handle === undefined}\n            >\n              {handle}\n            </ResizableHandle>\n          )}\n        </Fragment>\n      ))}\n    </ResizablePanelGroup>\n  );\n}) as SplitterComponent;\n\nSplitter.Panel = SplitterPanel;\n\nexport default Splitter;\n"],"mappings":";;;;;;;;;AAOA,MAAM,EAAE,iBAAiB,gBAAgB,wBAAwBA;AA+BjE,MAAM,iBAAiB,EACrB,UACA,WACA,GAAG,YACqB;AACxB,QACE,oBAAC;EACC,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EAEH;GACc;;AAIrB,MAAM,aAAa,EACjB,UACA,WACA,cAAc,cACd,aAAa,MACb,QACA,iBACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,SAAS,SAAS,QAAQ,SAAS;AAEzC,QACE,oBAAC;EACC,WAAW,GACT,oDACA,UACD;EACY;EACb,gBAAgB;EAChB,iBAAiB;EACjB,GAAI;YAEH,OAAO,KAAK,OAAO,UAClB,qBAAC,uBACE,OACA,QAAQ,OAAO,SAAS,KACvB,oBAAC;GACC,WAAW,GACT,wEACA,gBACD;GACD,YAAY,cAAc,WAAW;aAEpC;IACe,KAXP,MAaJ,CACX;GACkB;;AAI1B,SAAS,QAAQ"}

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

@@ -4,4 +4,5 @@ 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 { Splitter } from "./Splitter/index.mjs";
 import { Space } from "./Space/index.mjs";

package/dist/components/molecules/index.mjs

@@ -4,6 +4,7 @@ import Menu from "../../Menu.mjs";
 import Dropdown from "./Dropdown/index.mjs";
 import Marquees from "./Marquees/index.mjs";
 import Reveals from "../../Reveals.mjs";
+import Splitter from "./Splitter/index.mjs";
 import Space from "./Space/index.mjs";
 
 export {  };

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

@@ -5,10 +5,12 @@ interface Props {
   open: boolean;
   children?: React.ReactNode;
   title?: React.ReactNode;
+  extra?: React.ReactNode;
   footer?: React.ReactNode;
   closable?: boolean;
   closeIcon?: React.ReactNode;
   direction?: 'top' | 'bottom' | 'left' | 'right';
+  size?: 'small' | 'medium' | 'large' | 'full' | string;
   maskClosable?: boolean;
   handlebar?: boolean;
   draggable?: boolean;
@@ -23,6 +25,7 @@ interface Props {
     header?: string;
     title?: string;
     close?: string;
+    extra?: string;
     body?: string;
     footer?: string;
   };
@@ -32,10 +35,12 @@ interface Props {
 declare const Drawer: ({
   open,
   title,
+  extra,
   footer,
   closable,
   closeIcon,
   direction,
+  size,
   maskClosable,
   handlebar,
   draggable,
@@ -48,7 +53,7 @@ declare const Drawer: ({
   container,
   onClose,
   ...props
-}: Props) => react_jsx_runtime0.JSX.Element | null;
+}: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Drawer };
+export { Drawer, Props };
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/Drawer/index.tsx"],"mappings":";;;UAoBiB,KAAA;EACf,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,QAAA;EACA,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,SAAA;EACA,IAAA;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,KAAA;IACA,IAAA;IACA,MAAA;EAAA;EAEF,SAAA,GAAY,WAAA;EACZ,OAAA;AAAA;AAAA,cAqBI,MAAA;EAAU,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;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,GAqBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -3,27 +3,35 @@
 import { cn, renderConditional } from "../../../utils.mjs";
 import { drawer_exports } from "../../../core/drawer.mjs";
 import "../../../core.mjs";
+import Button from "../../atoms/Button/index.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 }) => {
+const SIZES = {
+	small: "30%",
+	medium: "50%",
+	large: "75%",
+	full: "90%"
+};
+const getSizeStyles = (direction, size) => {
+	const value = SIZES[size] || size;
+	return direction === "top" || direction === "bottom" ? { height: value } : { width: value };
+};
+const Drawer = ({ open, title, extra, footer, closable = true, closeIcon, direction = "bottom", size = "medium", 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;
-			};
-		}
+		if (!open || mask) return;
+		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,
@@ -38,20 +46,36 @@ const Drawer = ({ open, title, footer, closable = true, closeIcon, direction = "
 			handlebar,
 			mask,
 			classNames: {
-				mask: cn(classNames?.mask || ""),
-				handlebar: cn(classNames?.handlebar || "")
+				mask: classNames?.mask || "",
+				handlebar: classNames?.handlebar || ""
+			},
+			style: {
+				...getSizeStyles(direction, size),
+				...style
 			},
-			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),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-2",
+						children: [renderConditional(closable ? closeIcon || /* @__PURE__ */ jsx(X, {}) : null, (v) => /* @__PURE__ */ jsx(Button, {
+							type: "text",
+							shape: "circle",
+							size: "small",
+							"aria-label": "닫기",
+							icon: v,
 							onClick: onClose,
-							children: v
-						}))]
+							className: cn(classNames?.close)
+						})), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 items-start justify-between gap-2",
+							children: [/* @__PURE__ */ jsx(DrawerTitle, {
+								className: cn(classNames?.title),
+								children: title
+							}), renderConditional(extra, (v) => /* @__PURE__ */ jsx("div", {
+								className: cn("shrink-0", classNames?.extra),
+								children: v
+							}))]
+						})]
 					}), /* @__PURE__ */ jsx(DrawerDescription, { className: "hidden" })]
 				}),
 				/* @__PURE__ */ jsx("div", {

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

@@ -1 +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"}
+{"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\nimport Button from '../../atoms/Button';\n\nconst {\n  DrawerContent,\n  Drawer: DrawerCore,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} = drawer;\n\nexport interface Props {\n  open: boolean;\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  footer?: React.ReactNode;\n  closable?: boolean;\n  closeIcon?: React.ReactNode;\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n  size?: 'small' | 'medium' | 'large' | 'full' | string;\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    extra?: string;\n    body?: string;\n    footer?: string;\n  };\n  container?: HTMLElement;\n  onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n  small: '30%',\n  medium: '50%',\n  large: '75%',\n  full: '90%',\n};\n\nconst getSizeStyles = (\n  direction: 'top' | 'bottom' | 'left' | 'right',\n  size: string,\n): React.CSSProperties => {\n  const value = SIZES[size] || size;\n\n  return direction === 'top' || direction === 'bottom'\n    ? { height: value }\n    : { width: value };\n};\n\nconst Drawer = ({\n  open,\n  title,\n  extra,\n  footer,\n  closable = true,\n  closeIcon,\n  direction = 'bottom',\n  size = 'medium',\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 || mask) {\n      return;\n    }\n\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  }, [open, mask]);\n\n  return (\n    <DrawerCore\n      open={open}\n      direction={direction}\n      handleOnly={!draggable}\n      container={container}\n      onOpenChange={open => {\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: classNames?.mask || '',\n          handlebar: classNames?.handlebar || '',\n        }}\n        style={{\n          ...getSizeStyles(direction, size),\n          ...style,\n        }}\n      >\n        <DrawerHeader\n          className={cn(\n            classNames?.header,\n            !title && 'p-0',\n            //\n          )}\n        >\n          <div className=\"flex items-start gap-2\">\n            {renderConditional(closable ? closeIcon || <X /> : null, v => (\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                aria-label=\"닫기\"\n                icon={v}\n                onClick={onClose}\n                className={cn(classNames?.close)}\n              />\n            ))}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <DrawerTitle className={cn(classNames?.title)}>\n                {title}\n              </DrawerTitle>\n              {renderConditional(extra, v => (\n                <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n              ))}\n            </div>\n          </div>\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":";;;;;;;;;;;AAWA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAkCJ,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;AACX,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,wBAAwB,SAAS,KAAK,MAAM;EAElD,MAAM,MAAM,OAAO,4BAA4B;AAC7C,YAAS,KAAK,MAAM,gBAAgB;IACpC;AAEF,eAAa;AACX,UAAO,qBAAqB,IAAI;AAChC,YAAS,KAAK,MAAM,gBAAgB;;IAErC,CAAC,MAAM,KAAK,CAAC;AAEhB,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,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,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,kBAAkB,WAAW,aAAa,oBAAC,MAAI,GAAG,OAAM,MACvD,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,cAAW;OACX,MAAM;OACN,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,CACF,EACF,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,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/index.d.mts

@@ -40,7 +40,7 @@ declare const List: {
     classNames,
     renderItem,
     ...props
-  }: Props<T>): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;
+  }: 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,

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

@@ -1 +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,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,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"}
+{"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/Modal/index.mjs

@@ -7,7 +7,7 @@ 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { v4 } from "uuid";
@@ -63,7 +63,7 @@ const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon
 				}),
 				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, {
+					children: footer || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 						onClick: onOk,
 						children: okText
 					}), /* @__PURE__ */ jsx(Button, {
@@ -137,7 +137,7 @@ const ModalStackRenderer = () => {
 			updateStack = null;
 		};
 	}, []);
-	return /* @__PURE__ */ jsx(Fragment, { children: modalStack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticModal, {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: modalStack.map(({ id, ...props }) => /* @__PURE__ */ jsx(StaticModal, {
 		id,
 		...props
 	}, id)) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["dialog","uuid"],"sources":["../../../../src/components/organisms/Modal/index.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport {\n  Check,\n  CircleQuestionMark,\n  Info,\n  OctagonAlert,\n  OctagonX,\n} from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { Button } from '@repo/ui';\nimport { dialog } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} = dialog;\n\ninterface Props {\n  open?: boolean;\n  maskClosable?: boolean;\n  closable?:\n    | boolean\n    | {\n        closeIcon?: React.ReactNode;\n        disabled?: boolean;\n      };\n  closeIcon?: React.ReactNode;\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  classNames?: {\n    mask?: string;\n    header?: string;\n    body?: string;\n    footer?: string;\n  };\n  style?: React.CSSProperties;\n  okText?: string;\n  cancelText?: string;\n  container?: HTMLElement;\n  children?: React.ReactNode;\n  onOk?: () => void;\n  onCancel?: () => void;\n}\n\ninterface StaticProps extends Props {\n  type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';\n  id?: string;\n  icon?: React.ReactNode;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\nlet modalRoot: Root | null = null;\nlet modalStack: StaticProps[] = [];\nlet updateStack: (() => void) | null = null;\n\nconst createModalRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#modal-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'modal-root');\n    rootEl.setAttribute('role', 'dialog');\n    rootEl.setAttribute('aria-modal', 'true');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'absolute';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst Modal = ({\n  open = false,\n  maskClosable = false,\n  closable = false,\n  closeIcon,\n  className,\n  classNames,\n  style,\n  title,\n  footer,\n  container,\n  children,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  onOk,\n  onCancel,\n  ...props\n}: Props) => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && maskClosable) {\n          onCancel?.();\n        }\n      }}\n      {...props}\n    >\n      <DialogContent\n        className={cn(\n          'rounded-lg p-4 max-sm:max-w-[80%]',\n          'border-none outline-none',\n          className,\n        )}\n        classNames={{\n          ...classNames,\n          mask: cn('bg-black/60', classNames?.mask),\n        }}\n        style={style}\n        showCloseButton={!!closable}\n        closeIcon={closeIcon}\n        container={container}\n        onCancel={onCancel}\n      >\n        {/**\n         * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n         * @see https://github.com/radix-ui/primitives/pull/3384\n         **/}\n        <DialogHeader\n          className={cn(\n            classNames?.header,\n            !title && 'hidden',\n            //\n          )}\n        >\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className=\"hidden\" />\n        </DialogHeader>\n        <div className={cn('break-all', classNames?.body)}>{children}</div>\n        {footer !== null && (\n          <DialogFooter\n            className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n          >\n            {footer || (\n              <>\n                <Button onClick={onOk}>{okText}</Button>\n                <Button variant=\"outlined\" onClick={onCancel}>\n                  {cancelText}\n                </Button>\n              </>\n            )}\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst STATIC_ICONS = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n  type,\n  title,\n  content,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  id,\n  container,\n  icon,\n  onOk,\n  onCancel,\n  ...props\n}: StaticProps) => {\n  const [open, setOpen] = useState(true);\n\n  const closeModal = (callback?: () => void) => {\n    callback?.();\n    setOpen(false);\n    setTimeout(() => {\n      Modal.destroy(id);\n    }, 200);\n  };\n\n  const footer =\n    type === 'confirm' ? (\n      <div className=\"grid w-full grid-cols-5 gap-x-2\">\n        <Button\n          variant=\"outlined\"\n          className=\"col-span-2\"\n          onClick={() => closeModal(onCancel)}\n        >\n          {cancelText}\n        </Button>\n        <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n          {okText}\n        </Button>\n      </div>\n    ) : (\n      <Button\n        className={cn(\n          'grow',\n          //\n        )}\n        onClick={() => closeModal(onOk)}\n      >\n        {okText}\n      </Button>\n    );\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <Modal\n      open={open}\n      footer={footer}\n      className={cn(\n        'z-10000',\n        'box-content w-100',\n        'rounded-3xl p-4',\n        'gap-y-0',\n      )}\n      classNames={{\n        mask: 'z-10000 bg-black/[.6]',\n        body: cn(\n          'text-black-70 whitespace-pre-wrap text-center',\n          content && 'mt-3',\n        ),\n        footer: 'mt-9',\n      }}\n      title={\n        <p\n          className={cn(\n            'text-center text-lg leading-normal whitespace-pre-wrap',\n            'flex items-center justify-center gap-x-2',\n            //\n          )}\n        >\n          {icon || (type && STATIC_ICONS[type])}\n          {title}\n        </p>\n      }\n      container={container}\n      onCancel={() => closeModal(onOk)}\n      {...props}\n    >\n      {content}\n    </Modal>,\n    createModalRoot(container)!,\n  );\n};\n\nconst ModalStackRenderer = () => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    updateStack = () => forceUpdate({});\n    return () => {\n      updateStack = null;\n    };\n  }, []);\n\n  return (\n    <>\n      {modalStack.map(({ id, ...props }) => (\n        <StaticModal key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst modalRoots = new Map<HTMLElement, Root>();\n\nconst renderModal = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createModalRoot(targetContainer)!;\n\n  if (!modalRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    modalRoots.set(targetContainer, root);\n    root.render(<ModalStackRenderer />);\n  }\n\n  const id = props.id || uuid();\n  modalStack.push({ ...props, id });\n  updateStack?.();\n\n  return id;\n};\n\nModal.destroy = (id?: string) => {\n  modalStack = id ? modalStack.filter(modal => modal.id !== id) : [];\n\n  updateStack?.();\n\n  if (!modalStack.length && modalRoot) {\n    modalRoot.unmount();\n    modalRoot = null;\n  }\n};\n\nModal.destroyAll = () => {\n  Modal.destroy();\n};\n\nModal.info = (props: StaticProps) => renderModal({ type: 'info', ...props });\nModal.success = (props: StaticProps) =>\n  renderModal({ type: 'success', ...props });\nModal.error = (props: StaticProps) => renderModal({ type: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n  renderModal({ type: 'warning', ...props });\nModal.confirm = (props: StaticProps) =>\n  renderModal({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["dialog","uuid"],"sources":["../../../../src/components/organisms/Modal/index.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport {\n  Check,\n  CircleQuestionMark,\n  Info,\n  OctagonAlert,\n  OctagonX,\n} from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { Button } from '@repo/ui';\nimport { dialog } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} = dialog;\n\ninterface Props {\n  open?: boolean;\n  maskClosable?: boolean;\n  closable?:\n    | boolean\n    | {\n        closeIcon?: React.ReactNode;\n        disabled?: boolean;\n      };\n  closeIcon?: React.ReactNode;\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  classNames?: {\n    mask?: string;\n    header?: string;\n    body?: string;\n    footer?: string;\n  };\n  style?: React.CSSProperties;\n  okText?: string;\n  cancelText?: string;\n  container?: HTMLElement;\n  children?: React.ReactNode;\n  onOk?: () => void;\n  onCancel?: () => void;\n}\n\ninterface StaticProps extends Props {\n  type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';\n  id?: string;\n  icon?: React.ReactNode;\n  container?: HTMLElement;\n}\n\nconst isBrowser =\n  typeof window !== 'undefined' && typeof document !== 'undefined';\n\nlet modalRoot: Root | null = null;\nlet modalStack: StaticProps[] = [];\nlet updateStack: (() => void) | null = null;\n\nconst createModalRoot = (container?: HTMLElement) => {\n  if (!isBrowser) {\n    return null;\n  }\n\n  const targetContainer = container || document.body;\n  let rootEl = targetContainer.querySelector(\n    '#modal-root',\n  ) as HTMLElement | null;\n\n  if (!rootEl) {\n    rootEl = document.createElement('div');\n    rootEl.setAttribute('id', 'modal-root');\n    rootEl.setAttribute('role', 'dialog');\n    rootEl.setAttribute('aria-modal', 'true');\n    rootEl.style.zIndex = '10000';\n    rootEl.style.position = 'absolute';\n    targetContainer.appendChild(rootEl);\n  }\n\n  return rootEl;\n};\n\nconst Modal = ({\n  open = false,\n  maskClosable = false,\n  closable = false,\n  closeIcon,\n  className,\n  classNames,\n  style,\n  title,\n  footer,\n  container,\n  children,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  onOk,\n  onCancel,\n  ...props\n}: Props) => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && maskClosable) {\n          onCancel?.();\n        }\n      }}\n      {...props}\n    >\n      <DialogContent\n        className={cn(\n          'rounded-lg p-4 max-sm:max-w-[80%]',\n          'border-none outline-none',\n          className,\n        )}\n        classNames={{\n          ...classNames,\n          mask: cn('bg-black/60', classNames?.mask),\n        }}\n        style={style}\n        showCloseButton={!!closable}\n        closeIcon={closeIcon}\n        container={container}\n        onCancel={onCancel}\n      >\n        {/**\n         * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n         * @see https://github.com/radix-ui/primitives/pull/3384\n         **/}\n        <DialogHeader\n          className={cn(\n            classNames?.header,\n            !title && 'hidden',\n            //\n          )}\n        >\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className=\"hidden\" />\n        </DialogHeader>\n        <div className={cn('break-all', classNames?.body)}>{children}</div>\n        {footer !== null && (\n          <DialogFooter\n            className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n          >\n            {footer || (\n              <>\n                <Button onClick={onOk}>{okText}</Button>\n                <Button variant=\"outlined\" onClick={onCancel}>\n                  {cancelText}\n                </Button>\n              </>\n            )}\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst STATIC_ICONS = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n  type,\n  title,\n  content,\n  okText = 'OK',\n  cancelText = 'Cancel',\n  id,\n  container,\n  icon,\n  onOk,\n  onCancel,\n  ...props\n}: StaticProps) => {\n  const [open, setOpen] = useState(true);\n\n  const closeModal = (callback?: () => void) => {\n    callback?.();\n    setOpen(false);\n    setTimeout(() => {\n      Modal.destroy(id);\n    }, 200);\n  };\n\n  const footer =\n    type === 'confirm' ? (\n      <div className=\"grid w-full grid-cols-5 gap-x-2\">\n        <Button\n          variant=\"outlined\"\n          className=\"col-span-2\"\n          onClick={() => closeModal(onCancel)}\n        >\n          {cancelText}\n        </Button>\n        <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n          {okText}\n        </Button>\n      </div>\n    ) : (\n      <Button\n        className={cn(\n          'grow',\n          //\n        )}\n        onClick={() => closeModal(onOk)}\n      >\n        {okText}\n      </Button>\n    );\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <Modal\n      open={open}\n      footer={footer}\n      className={cn(\n        'z-10000',\n        'box-content w-100',\n        'rounded-3xl p-4',\n        'gap-y-0',\n      )}\n      classNames={{\n        mask: 'z-10000 bg-black/[.6]',\n        body: cn(\n          'text-black-70 whitespace-pre-wrap text-center',\n          content && 'mt-3',\n        ),\n        footer: 'mt-9',\n      }}\n      title={\n        <p\n          className={cn(\n            'text-center text-lg leading-normal whitespace-pre-wrap',\n            'flex items-center justify-center gap-x-2',\n            //\n          )}\n        >\n          {icon || (type && STATIC_ICONS[type])}\n          {title}\n        </p>\n      }\n      container={container}\n      onCancel={() => closeModal(onOk)}\n      {...props}\n    >\n      {content}\n    </Modal>,\n    createModalRoot(container)!,\n  );\n};\n\nconst ModalStackRenderer = () => {\n  const [, forceUpdate] = useState({});\n\n  useEffect(() => {\n    updateStack = () => forceUpdate({});\n    return () => {\n      updateStack = null;\n    };\n  }, []);\n\n  return (\n    <>\n      {modalStack.map(({ id, ...props }) => (\n        <StaticModal key={id} id={id} {...props} />\n      ))}\n    </>\n  );\n};\n\nconst modalRoots = new Map<HTMLElement, Root>();\n\nconst renderModal = (props: StaticProps) => {\n  if (!isBrowser) {\n    return;\n  }\n\n  const targetContainer = props.container || document.body;\n  const rootElement = createModalRoot(targetContainer)!;\n\n  if (!modalRoots.has(targetContainer)) {\n    const root = createRoot(rootElement);\n    modalRoots.set(targetContainer, root);\n    root.render(<ModalStackRenderer />);\n  }\n\n  const id = props.id || uuid();\n  modalStack.push({ ...props, id });\n  updateStack?.();\n\n  return id;\n};\n\nModal.destroy = (id?: string) => {\n  modalStack = id ? modalStack.filter(modal => modal.id !== id) : [];\n\n  updateStack?.();\n\n  if (!modalStack.length && modalRoot) {\n    modalRoot.unmount();\n    modalRoot = null;\n  }\n};\n\nModal.destroyAll = () => {\n  Modal.destroy();\n};\n\nModal.info = (props: StaticProps) => renderModal({ type: 'info', ...props });\nModal.success = (props: StaticProps) =>\n  renderModal({ type: 'success', ...props });\nModal.error = (props: StaticProps) => renderModal({ type: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n  renderModal({ type: 'warning', ...props });\nModal.confirm = (props: StaticProps) =>\n  renderModal({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { Drawer } from "./Drawer/index.mjs";
+import { Drawer, Props } from "./Drawer/index.mjs";
 import { List } from "./List/index.mjs";
 import { Modal } from "./Modal/index.mjs";
 import { Swiper } from "./Swiper/index.mjs";

package/dist/components/templates/Layout/Content/index.d.mts

@@ -1 +1,7 @@
-import "react/jsx-runtime";
+import "react/jsx-runtime";
+
+//#region src/components/templates/Layout/Content/index.d.ts
+interface Props extends React.ComponentPropsWithoutRef<'main'> {}
+//#endregion
+export { Props };
+//# sourceMappingURL=index.d.mts.map

package/dist/components/templates/Layout/Content/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/templates/Layout/Content/index.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,KAAA,CAAM,wBAAA"}

package/dist/components/templates/Layout/Content/index.mjs

@@ -3,8 +3,8 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/templates/Layout/Content/index.tsx
 const Content = ({ children, className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("shrink grow basis-0", className),
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("min-h-0 min-w-0 shrink grow basis-0", className),
 		...props,
 		children
 	});

package/dist/components/templates/Layout/Content/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/templates/Layout/Content/index.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nconst Content = ({\n  children,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'div'>) => {\n  return (\n    <div className={cn('shrink grow basis-0', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;AAEA,MAAM,WAAW,EACf,UACA,WACA,GAAG,YACwC;AAC3C,QACE,oBAAC;EAAI,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EACvD;GACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/templates/Layout/Content/index.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'main'> {}\n\nconst Content = ({ children, className, ...props }: Props) => {\n  return (\n    <main\n      className={cn('min-h-0 min-w-0 shrink grow basis-0', className)}\n      {...props}\n    >\n      {children}\n    </main>\n  );\n};\n\nexport default Content;\n"],"mappings":";;;;AAIA,MAAM,WAAW,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC5D,QACE,oBAAC;EACC,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EAEH;GACI"}