@jbpark/ui-kit 3.0.0 → 3.2.0

package/dist/components/atoms/date-picker.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/atoms/date-picker.d.ts
+interface Props {
+  defaultValue?: Date;
+  value?: Date;
+  placeholder?: string;
+  className?: string;
+  onChange?: (date: Date | undefined) => void;
+}
+declare const DatePicker: ({
+  defaultValue,
+  value: _value,
+  placeholder,
+  className,
+  onChange: _onChange
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DatePicker };
+//# sourceMappingURL=date-picker.d.mts.map

package/dist/components/atoms/date-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../../src/components/atoms/date-picker.tsx"],"mappings":";;;UAeU,KAAA;EACR,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,WAAA;EACA,SAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;AAAA;AAAA,cAGd,UAAA;EAAc,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,WAAA;EAAA,SAAA;EAAA,QAAA,EAAA;AAAA,GAMjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/date-picker.mjs

@@ -0,0 +1,41 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import { calendar_exports } from "../../core/calendar.mjs";
+import Button from "../../Button.mjs";
+import Popover from "./popover.mjs";
+import { CalendarIcon } from "lucide-react";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { format } from "date-fns";
+
+//#region src/components/atoms/date-picker.tsx
+const { Calendar } = calendar_exports;
+const DatePicker = ({ defaultValue, value: _value, placeholder = "Pick a date", className, onChange: _onChange = () => {} }) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const controlled = _value !== void 0;
+	const value = controlled ? _value : uncontrolledValue;
+	const onChange = (date) => {
+		if (!controlled) setUncontrolledValue(date);
+		_onChange(date);
+	};
+	return /* @__PURE__ */ jsx(Popover, {
+		placement: "bottomLeft",
+		content: /* @__PURE__ */ jsx(Calendar, {
+			mode: "single",
+			selected: value,
+			onSelect: onChange
+		}),
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "default",
+			icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
+			"data-empty": !value,
+			className: cn("w-full justify-start text-left font-normal", "data-[empty=true]:text-muted-foreground", className),
+			children: value ? format(value, "PPP") : placeholder
+		})
+	});
+};
+
+//#endregion
+export { DatePicker as default };
+//# sourceMappingURL=date-picker.mjs.map

package/dist/components/atoms/date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.mjs","names":["calendar"],"sources":["../../../src/components/atoms/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\n\nimport { calendar } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\nimport Popover from './popover';\n\nconst { Calendar } = calendar;\n\ninterface Props {\n  defaultValue?: Date;\n  value?: Date;\n  placeholder?: string;\n  className?: string;\n  onChange?: (date: Date | undefined) => void;\n}\n\nconst DatePicker = ({\n  defaultValue,\n  value: _value,\n  placeholder = 'Pick a date',\n  className,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<Date | undefined>(\n    defaultValue,\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const onChange = (date: Date | undefined) => {\n    if (!controlled) {\n      setUncontrolledValue(date);\n    }\n    _onChange(date);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<Calendar mode=\"single\" selected={value} onSelect={onChange} />}\n    >\n      <Button\n        type=\"default\"\n        icon={<CalendarIcon />}\n        data-empty={!value}\n        className={cn(\n          'w-full justify-start text-left font-normal',\n          'data-[empty=true]:text-muted-foreground',\n          className,\n          //\n        )}\n      >\n        {value ? format(value, 'PPP') : placeholder}\n      </Button>\n    </Popover>\n  );\n};\n\nexport default DatePicker;\nexport type { Props };\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAE,aAAaA;AAUrB,MAAM,cAAc,EAClB,cACA,OAAO,QACP,cAAc,eACd,WACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,aACD;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,SAA2B;AAC3C,MAAI,CAAC,WACH,sBAAqB,KAAK;AAE5B,YAAU,KAAK;;AAGjB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAS,MAAK;GAAS,UAAU;GAAO,UAAU;IAAY;YAExE,oBAAC;GACC,MAAK;GACL,MAAM,oBAAC,iBAAe;GACtB,cAAY,CAAC;GACb,WAAW,GACT,8CACA,2CACA,UAED;aAEA,QAAQ,OAAO,OAAO,MAAM,GAAG;IACzB;GACD"}

package/dist/components/atoms/float-button/back-top.mjs

@@ -4,17 +4,17 @@ import { cn } from "../../../utils.mjs";
 import FloatButton from "./float-button.mjs";
 import { ArrowUp } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
-import { useWindowScroll } from "@uidotdev/usehooks";
+import { useWindowScroll } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/float-button/back-top.tsx
 const BackTop = ({ visibilityHeight = 450, className, onClick, ...props }) => {
-	const [{ y }, scrollTo] = useWindowScroll();
+	const { y } = useWindowScroll();
 	return /* @__PURE__ */ jsx(FloatButton, {
 		"aria-label": "맨 위로",
 		icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 		className: cn(className, (!y || visibilityHeight > y) && "hidden"),
 		onClick: (e) => {
-			scrollTo({
+			window.scrollTo({
 				left: 0,
 				top: 0,
 				behavior: "smooth"

package/dist/components/atoms/float-button/back-top.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@uidotdev/usehooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n  visibilityHeight?: number;\n  onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n  visibilityHeight = 450,\n  className,\n  onClick,\n  ...props\n}: Props) => {\n  const [{ y }, scrollTo] = useWindowScroll();\n\n  return (\n    <FloatButton\n      aria-label=\"맨 위로\"\n      icon={<ArrowUp />}\n      className={cn(\n        className,\n        (!y || visibilityHeight > y) && 'hidden',\n        //\n      )}\n      onClick={e => {\n        scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,CAAC,EAAE,KAAK,YAAY,iBAAiB;AAE3C,QACE,oBAAC;EACC,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,YAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACjD,aAAU,EAAE;;EAEd,GAAI;GACJ"}
+{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@jbpark/use-hooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n  visibilityHeight?: number;\n  onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n  visibilityHeight = 450,\n  className,\n  onClick,\n  ...props\n}: Props) => {\n  const { y } = useWindowScroll();\n\n  return (\n    <FloatButton\n      aria-label=\"맨 위로\"\n      icon={<ArrowUp />}\n      className={cn(\n        className,\n        (!y || visibilityHeight > y) && 'hidden',\n        //\n      )}\n      onClick={e => {\n        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,EAAE,MAAM,iBAAiB;AAE/B,QACE,oBAAC;EACC,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,UAAO,SAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACxD,aAAU,EAAE;;EAEd,GAAI;GACJ"}

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

@@ -3,6 +3,7 @@ import Tag from "../../Tag.mjs";
 import Typography from "../../Typography.mjs";
 import { Checkbox } from "./checkbox/index.mjs";
 import { ColorPicker } from "./color-picker.mjs";
+import { DatePicker } from "./date-picker.mjs";
 import { FloatButton } from "./float-button/index.mjs";
 import { Input } from "./input/index.mjs";
 import { Popover } from "./popover.mjs";

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

@@ -6,4 +6,5 @@ import Space from "../../Space.mjs";
 import { Collapse } from "./collapse.mjs";
 import { Dropdown } from "./dropdown.mjs";
 import { Marquees } from "./marquees/index.mjs";
-import { Splitter } from "./splitter/index.mjs";
+import { Splitter } from "./splitter/index.mjs";
+import { Upload, UploadFile } from "./upload.mjs";

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

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/molecules/upload.d.ts
+interface UploadFile {
+  uid: string;
+  name: string;
+  url: string;
+}
+interface Props {
+  defaultValue?: UploadFile[];
+  value?: UploadFile[];
+  multiple?: boolean;
+  accept?: string;
+  maxCount?: number;
+  disabled?: boolean;
+  className?: string;
+  classNames?: {
+    dropzone?: string;
+    list?: string;
+    item?: string;
+  };
+  onChange?: (files: UploadFile[]) => void;
+}
+declare const Upload: ({
+  defaultValue,
+  value: _value,
+  multiple,
+  accept,
+  maxCount,
+  disabled,
+  className,
+  classNames,
+  onChange: _onChange
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Upload, UploadFile };
+//# sourceMappingURL=upload.d.mts.map

package/dist/components/molecules/upload.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.d.mts","names":[],"sources":["../../../src/components/molecules/upload.tsx"],"mappings":";;;UAWiB,UAAA;EACf,GAAA;EACA,IAAA;EACA,GAAA;AAAA;AAAA,UAGe,KAAA;EACf,YAAA,GAAe,UAAA;EACf,KAAA,GAAQ,UAAA;EACR,QAAA;EACA,MAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,IAAA;EAAA;EAEF,QAAA,IAAY,KAAA,EAAO,UAAA;AAAA;AAAA,cAOf,MAAA;EAAU,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA,EAAA;AAAA,GAUb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/upload.mjs

@@ -0,0 +1,104 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import Button from "../../Button.mjs";
+import { Upload, X } from "lucide-react";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFileToDataUrl } from "@jbpark/use-hooks";
+
+//#region src/components/molecules/upload.tsx
+const isImage = (file) => /^data:image\//.test(file.url) || /\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);
+const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept = "image/*", maxCount, disabled, className, classNames, onChange: _onChange = () => {} }) => {
+	const inputId = useId();
+	const readAsDataUrl = useFileToDataUrl();
+	const [isDragOver, setIsDragOver] = useState(false);
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const controlled = _value !== void 0;
+	const files = controlled ? _value : uncontrolledValue;
+	const onChange = (next) => {
+		if (!controlled) setUncontrolledValue(next);
+		_onChange(next);
+	};
+	const addFiles = async (fileList) => {
+		const incoming = Array.from(fileList);
+		const remaining = typeof maxCount === "number" ? Math.max(0, maxCount - files.length) : incoming.length;
+		const accepted = incoming.slice(0, remaining);
+		const uploaded = await Promise.all(accepted.map(async (file) => ({
+			uid: `${file.name}-${file.lastModified}-${file.size}`,
+			name: file.name,
+			url: await readAsDataUrl(file)
+		})));
+		onChange([...files, ...uploaded]);
+	};
+	const removeFile = (uid) => {
+		onChange(files.filter((file) => file.uid !== uid));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-3", className),
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: inputId,
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (!disabled) setIsDragOver(true);
+			},
+			onDragLeave: () => setIsDragOver(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setIsDragOver(false);
+				if (disabled) return;
+				if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+			},
+			className: cn("flex cursor-pointer flex-col items-center justify-center gap-2", "rounded-md border border-dashed p-6 text-center", "text-muted-foreground text-sm", "transition-colors", isDragOver && "border-primary bg-accent", disabled && "pointer-events-none cursor-not-allowed opacity-50", classNames?.dropzone),
+			children: [
+				/* @__PURE__ */ jsx(Upload, { className: "size-6" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"Click or drag file",
+					multiple ? "s" : "",
+					" to upload"
+				] }),
+				/* @__PURE__ */ jsx("input", {
+					id: inputId,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					className: "hidden",
+					onChange: (e) => {
+						if (e.target.files?.length) addFiles(e.target.files);
+						e.target.value = "";
+					}
+				})
+			]
+		}), files.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: cn("flex flex-col gap-2", classNames?.list),
+			children: files.map((file) => /* @__PURE__ */ jsxs("li", {
+				className: cn("flex items-center gap-2 rounded-md border p-2", classNames?.item),
+				children: [
+					isImage(file) && /* @__PURE__ */ jsx("img", {
+						src: file.url,
+						alt: "",
+						className: "size-10 shrink-0 rounded object-cover"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate text-sm",
+						children: file.name
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "text",
+						shape: "circle",
+						size: "small",
+						icon: /* @__PURE__ */ jsx(X, { className: "size-4" }),
+						onClick: () => removeFile(file.uid),
+						className: "text-muted-foreground hover:text-foreground shrink-0",
+						"aria-label": `Remove ${file.name}`
+					})
+				]
+			}, file.uid))
+		})]
+	});
+};
+
+//#endregion
+export { Upload$1 as default };
+//# sourceMappingURL=upload.mjs.map

package/dist/components/molecules/upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { useFileToDataUrl } from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [isDragOver, setIsDragOver] = useState(false);\n  const [uncontrolledValue, setUncontrolledValue] =\n    useState<UploadFile[]>(defaultValue);\n\n  const controlled = _value !== undefined;\n  const files = controlled ? _value : uncontrolledValue;\n\n  const onChange = (next: UploadFile[]) => {\n    if (!controlled) {\n      setUncontrolledValue(next);\n    }\n    _onChange(next);\n  };\n\n  const addFiles = async (fileList: FileList) => {\n    const incoming = Array.from(fileList);\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n\n    const uploaded = await Promise.all(\n      accepted.map(async file => ({\n        uid: `${file.name}-${file.lastModified}-${file.size}`,\n        name: file.name,\n        url: await readAsDataUrl(file),\n      })),\n    );\n\n    onChange([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    onChange(files.filter(file => file.uid !== uid));\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        htmlFor={inputId}\n        onDragOver={e => {\n          e.preventDefault();\n          if (!disabled) {\n            setIsDragOver(true);\n          }\n        }}\n        onDragLeave={() => setIsDragOver(false)}\n        onDrop={e => {\n          e.preventDefault();\n          setIsDragOver(false);\n\n          if (disabled) {\n            return;\n          }\n\n          if (e.dataTransfer.files.length) {\n            addFiles(e.dataTransfer.files);\n          }\n        }}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragOver && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(e.target.files);\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'flex flex-col gap-2',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                'flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                type=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;;AAiCA,MAAM,WAAW,SACf,gBAAgB,KAAK,KAAK,IAAI,IAC9B,+BAA+B,KAAK,KAAK,KAAK;AAEhD,MAAMA,YAAU,EACd,eAAe,EAAE,EACjB,OAAO,QACP,WAAW,MACX,SAAS,WACT,UACA,UACA,WACA,YACA,UAAU,kBAAkB,SACjB;CACX,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,mBAAmB,wBACxB,SAAuB,aAAa;CAEtC,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,SAAuB;AACvC,MAAI,CAAC,WACH,sBAAqB,KAAK;AAE5B,YAAU,KAAK;;CAGjB,MAAM,WAAW,OAAO,aAAuB;EAC7C,MAAM,WAAW,MAAM,KAAK,SAAS;EACrC,MAAM,YACJ,OAAO,aAAa,WAChB,KAAK,IAAI,GAAG,WAAW,MAAM,OAAO,GACpC,SAAS;EAEf,MAAM,WAAW,SAAS,MAAM,GAAG,UAAU;EAE7C,MAAM,WAAW,MAAM,QAAQ,IAC7B,SAAS,IAAI,OAAM,UAAS;GAC1B,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,aAAa,GAAG,KAAK;GAC/C,MAAM,KAAK;GACX,KAAK,MAAM,cAAc,KAAK;GAC/B,EAAE,CACJ;AAED,WAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;;CAGnC,MAAM,cAAc,QAAgB;AAClC,WAAS,MAAM,QAAO,SAAQ,KAAK,QAAQ,IAAI,CAAC;;AAGlD,QACE,qBAAC;EACC,WAAW,GACT,uBACA,UAED;aAED,qBAAC;GACC,SAAS;GACT,aAAY,MAAK;AACf,MAAE,gBAAgB;AAClB,QAAI,CAAC,SACH,eAAc,KAAK;;GAGvB,mBAAmB,cAAc,MAAM;GACvC,SAAQ,MAAK;AACX,MAAE,gBAAgB;AAClB,kBAAc,MAAM;AAEpB,QAAI,SACF;AAGF,QAAI,EAAE,aAAa,MAAM,OACvB,UAAS,EAAE,aAAa,MAAM;;GAGlC,WAAW,GACT,kEACA,mDACA,iCACA,qBACA,cAAc,4BACd,YAAY,qDACZ,YAAY,SAEb;;IAED,oBAACC,UAAW,WAAU,WAAW;IACjC,qBAAC;KAAK;KAAmB,WAAW,MAAM;KAAG;QAAiB;IAC9D,oBAAC;KACC,IAAI;KACJ,MAAK;KACG;KACE;KACA;KACV,WAAU;KACV,WAAU,MAAK;AACb,UAAI,EAAE,OAAO,OAAO,OAClB,UAAS,EAAE,OAAO,MAAM;AAE1B,QAAE,OAAO,QAAQ;;MAEnB;;IACI,EAEP,MAAM,SAAS,KACd,oBAAC;GACC,WAAW,GACT,uBACA,YAAY,KAEb;aAEA,MAAM,KAAI,SACT,qBAAC;IAEC,WAAW,GACT,iDACA,YAAY,KAEb;;KAEA,QAAQ,KAAK,IACZ,oBAAC;MACC,KAAK,KAAK;MACV,KAAI;MACJ,WAAU;OACV;KAEJ,oBAAC;MAAK,WAAU;gBAA2B,KAAK;OAAY;KAC5D,oBAAC;MACC,MAAK;MACL,OAAM;MACN,MAAK;MACL,MAAM,oBAAC,KAAE,WAAU,WAAW;MAC9B,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;OAC3B;;MAvBG,KAAK,IAwBP,CACL;IACC;GAEH"}

package/dist/components/organisms/list/list.mjs

@@ -5,7 +5,7 @@ import Title from "../../atoms/typography/title.mjs";
 import Skeleton from "../../atoms/skeleton/index.mjs";
 import React, { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntersectionObserver } from "@uidotdev/usehooks";
+import { useIntersectionObserver } from "@jbpark/use-hooks";
 
 //#region src/components/organisms/list/list.tsx
 const List = ({ loading, loaderProps, loader, header, title, titleLevel = 2, empty, scroll, data, className, classNames, renderItem = () => null, itemKey, ...props }) => {

package/dist/components/organisms/list/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useIntersectionObserver } from '@uidotdev/usehooks';\n\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/skeleton';\nimport { Title } from '../../atoms/typography';\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  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\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    /**\n     * Called when more items should be fetched. `List` tracks in-flight\n     * requests via `loading` — the caller MUST flip `loading` back to\n     * `false` when the fetch settles, including on failure/rejection.\n     * If `loading` never becomes `false` again after a failed fetch,\n     * `List` will stop calling `next()` for subsequent intersections.\n     */\n    next: () => void;\n  };\n  data?: T[];\n  renderItem?: (item: T, index: number) => React.ReactNode;\n  itemKey?: (item: T, index: number) => React.Key;\n}\n\nconst List = <T,>({\n  loading,\n  loaderProps,\n  loader,\n  header,\n  title,\n  titleLevel = 2,\n  empty,\n  scroll,\n  data,\n  className,\n  classNames,\n  renderItem = () => null,\n  itemKey,\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  // `scroll` is typically a new object identity every render, so this\n  // effect re-runs often. Guard with a ref (updated synchronously, unlike\n  // the `loading` prop which only reflects the caller's next state update)\n  // to avoid firing `next()` again for the same in-flight request before\n  // the caller's `loading` has had a chance to become true.\n  const fetchingRef = useRef(false);\n\n  useEffect(() => {\n    if (!scroll) {\n      return;\n    }\n\n    if (scroll.loading) {\n      fetchingRef.current = false;\n      return;\n    }\n\n    if (entry?.isIntersecting && scroll.hasMore && !fetchingRef.current) {\n      fetchingRef.current = true;\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 (\n      <div className={cn(className)} {...props}>\n        {empty}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <Title\n          level={titleLevel}\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        </Title>\n      ))}\n      <div className={cn(classNames?.header)}>{header}</div>\n      <div role=\"list\" className={cn('space-y-2', classNames?.body)}>\n        {data?.map((item, i) =>\n          itemKey ? (\n            <React.Fragment key={itemKey(item, i)}>\n              {renderItem(item, i)}\n            </React.Fragment>\n          ) : (\n            renderItem(item, i)\n          ),\n        )}\n        {scroll?.loading &&\n          (scroll?.loader ?? (\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          ))}\n        {scroll && <div ref={loaderRef} />}\n      </div>\n    </div>\n  );\n};\n\nexport default List;\n"],"mappings":";;;;;;;;;;AA8CA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,aAAa,GACb,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,SACA,GAAG,YACW;CACd,MAAM,CAAC,WAAW,SAAS,wBAAwB;EACjD,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;CAOF,MAAM,cAAc,OAAO,MAAM;AAEjC,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,SAAS;AAClB,eAAY,UAAU;AACtB;;AAGF,MAAI,OAAO,kBAAkB,OAAO,WAAW,CAAC,YAAY,SAAS;AACnE,eAAY,UAAU;AACtB,UAAO,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,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;YAChC;GACG;AAIV,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,OAAO;IACP,WAAW,GACT,eACA,+CAED;cAEA;KACK,CACR;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,MAAK;IAAO,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC1D,MAAM,KAAK,MAAM,MAChB,UACE,oBAAC,MAAM,sBACJ,WAAW,MAAM,EAAE,IADD,QAAQ,MAAM,EAAE,CAEpB,GAEjB,WAAW,MAAM,EAAE,CAEtB;KACA,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAEzD,UAAU,oBAAC,SAAI,KAAK,YAAa;;KAC9B;;GACF"}
+{"version":3,"file":"list.mjs","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useIntersectionObserver } from '@jbpark/use-hooks';\n\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/skeleton';\nimport { Title } from '../../atoms/typography';\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  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\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    /**\n     * Called when more items should be fetched. `List` tracks in-flight\n     * requests via `loading` — the caller MUST flip `loading` back to\n     * `false` when the fetch settles, including on failure/rejection.\n     * If `loading` never becomes `false` again after a failed fetch,\n     * `List` will stop calling `next()` for subsequent intersections.\n     */\n    next: () => void;\n  };\n  data?: T[];\n  renderItem?: (item: T, index: number) => React.ReactNode;\n  itemKey?: (item: T, index: number) => React.Key;\n}\n\nconst List = <T,>({\n  loading,\n  loaderProps,\n  loader,\n  header,\n  title,\n  titleLevel = 2,\n  empty,\n  scroll,\n  data,\n  className,\n  classNames,\n  renderItem = () => null,\n  itemKey,\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  // `scroll` is typically a new object identity every render, so this\n  // effect re-runs often. Guard with a ref (updated synchronously, unlike\n  // the `loading` prop which only reflects the caller's next state update)\n  // to avoid firing `next()` again for the same in-flight request before\n  // the caller's `loading` has had a chance to become true.\n  const fetchingRef = useRef(false);\n\n  useEffect(() => {\n    if (!scroll) {\n      return;\n    }\n\n    if (scroll.loading) {\n      fetchingRef.current = false;\n      return;\n    }\n\n    if (entry?.isIntersecting && scroll.hasMore && !fetchingRef.current) {\n      fetchingRef.current = true;\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 (\n      <div className={cn(className)} {...props}>\n        {empty}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <Title\n          level={titleLevel}\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        </Title>\n      ))}\n      <div className={cn(classNames?.header)}>{header}</div>\n      <div role=\"list\" className={cn('space-y-2', classNames?.body)}>\n        {data?.map((item, i) =>\n          itemKey ? (\n            <React.Fragment key={itemKey(item, i)}>\n              {renderItem(item, i)}\n            </React.Fragment>\n          ) : (\n            renderItem(item, i)\n          ),\n        )}\n        {scroll?.loading &&\n          (scroll?.loader ?? (\n            <Skeleton.Node count={10} gap={10} {...loaderProps} />\n          ))}\n        {scroll && <div ref={loaderRef} />}\n      </div>\n    </div>\n  );\n};\n\nexport default List;\n"],"mappings":";;;;;;;;;;AA8CA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,aAAa,GACb,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,SACA,GAAG,YACW;CACd,MAAM,CAAC,WAAW,SAAS,wBAAwB;EACjD,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;CAOF,MAAM,cAAc,OAAO,MAAM;AAEjC,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,SAAS;AAClB,eAAY,UAAU;AACtB;;AAGF,MAAI,OAAO,kBAAkB,OAAO,WAAW,CAAC,YAAY,SAAS;AACnE,eAAY,UAAU;AACtB,UAAO,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,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;YAChC;GACG;AAIV,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,OAAO;IACP,WAAW,GACT,eACA,+CAED;cAEA;KACK,CACR;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,MAAK;IAAO,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC1D,MAAM,KAAK,MAAM,MAChB,UACE,oBAAC,MAAM,sBACJ,WAAW,MAAM,EAAE,IADD,QAAQ,MAAM,EAAE,CAEpB,GAEjB,WAAW,MAAM,EAAE,CAEtB;KACA,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAEzD,UAAU,oBAAC,SAAI,KAAK,YAAa;;KAC9B;;GACF"}

package/dist/core/button.d.mts

@@ -9,7 +9,7 @@ declare namespace button_d_exports {
 }
 declare const buttonVariants: (props?: ({
   variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;
@@ -22,5 +22,5 @@ declare function Button({
   ...props
 }: Props): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type Props, button_d_exports };
+export { Button, type Props, button_d_exports };
 //# sourceMappingURL=button.d.mts.map

package/dist/core/button.mjs

@@ -51,5 +51,5 @@ function Button({ className, variant = "default", size = "default", asChild = fa
 }
 
 //#endregion
-export { Button, button_exports };
+export { Button, buttonVariants, button_exports };
 //# sourceMappingURL=button.mjs.map

package/dist/core/calendar.d.mts

@@ -0,0 +1,30 @@
+import { Button } from "./button.mjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DayButton, DayPicker } from "react-day-picker";
+
+//#region src/core/calendar.d.ts
+declare namespace calendar_d_exports {
+  export { Calendar, CalendarDayButton };
+}
+declare function Calendar({
+  className,
+  classNames,
+  showOutsideDays,
+  captionLayout,
+  buttonVariant,
+  formatters,
+  components,
+  ...props
+}: React$1.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React$1.ComponentProps<typeof Button>['variant'];
+}): react_jsx_runtime0.JSX.Element;
+declare function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { calendar_d_exports };
+//# sourceMappingURL=calendar.d.mts.map

package/dist/core/calendar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.mts","names":[],"sources":["../../src/core/calendar.tsx"],"mappings":";;;;;;;;;iBAeS,QAAA,CAAA;EACP,SAAA;EACA,UAAA;EACA,eAAA;EACA,aAAA;EACA,aAAA;EACA,UAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,SAAA;EAC7B,aAAA,GAAgB,OAAA,CAAM,cAAA,QAAsB,MAAA;AAAA,IAC7C,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkKQ,iBAAA,CAAA;EACP,SAAA;EACA,GAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,SAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/calendar.mjs

@@ -0,0 +1,136 @@
+'use client';
+
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { cn } from "../utils.mjs";
+import { Button, buttonVariants } from "./button.mjs";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+
+//#region src/core/calendar.tsx
+var calendar_exports = /* @__PURE__ */ __exportAll({
+	Calendar: () => Calendar,
+	CalendarDayButton: () => CalendarDayButton
+});
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn(`bg-background group/calendar p-3 [--cell-size:2rem]
+        [[data-slot=card-content]_&]:bg-transparent
+        [[data-slot=popover-content]_&]:bg-transparent`, String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		captionLayout,
+		formatters: {
+			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+			button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({ variant: buttonVariant }), "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_next),
+			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn(`has-focus:border-ring border-input shadow-xs
+          has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md
+          border`, defaultClassNames.dropdown_root),
+			dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("select-none font-medium", captionLayout === "label" ? "text-sm" : `[&>svg]:text-muted-foreground flex h-8 items-center gap-1
+              rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5`, defaultClassNames.caption_label),
+			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal", defaultClassNames.weekday),
+			week: cn("mt-2 flex w-full", defaultClassNames.week),
+			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
+			day: cn(`group/day relative aspect-square h-full w-full select-none p-0
+          text-center [&:first-child[data-selected=true]_button]:rounded-l-md
+          [&:last-child[data-selected=true]_button]:rounded-r-md`, defaultClassNames.day),
+			range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+			today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: CalendarDayButton,
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center\n                  text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		variant: "ghost",
+		size: "icon",
+		"data-day": day.date.toLocaleDateString(),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn(`data-[selected-single=true]:bg-primary
+        data-[selected-single=true]:text-primary-foreground
+        data-[range-middle=true]:bg-accent
+        data-[range-middle=true]:text-accent-foreground
+        data-[range-start=true]:bg-primary
+        data-[range-start=true]:text-primary-foreground
+        data-[range-end=true]:bg-primary
+        data-[range-end=true]:text-primary-foreground
+        group-data-[focused=true]/day:border-ring
+        group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto
+        w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal
+        group-data-[focused=true]/day:relative
+        group-data-[focused=true]/day:z-10
+        group-data-[focused=true]/day:ring-[3px]
+        data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none
+        data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70`, defaultClassNames.day, className),
+		...props
+	});
+}
+
+//#endregion
+export { calendar_exports };
+//# sourceMappingURL=calendar.mjs.map

package/dist/core/calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.mjs","names":["React"],"sources":["../../src/core/calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Button, buttonVariants } from './button';\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'ghost',\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        `bg-background group/calendar p-3 [--cell-size:2rem]\n        [[data-slot=card-content]_&]:bg-transparent\n        [[data-slot=popover-content]_&]:bg-transparent`,\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: date =>\n          date.toLocaleString('default', { month: 'short' }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn('w-fit', defaultClassNames.root),\n        months: cn(\n          'relative flex flex-col gap-4 md:flex-row',\n          defaultClassNames.months,\n        ),\n        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n        nav: cn(\n          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          `has-focus:border-ring border-input shadow-xs\n          has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md\n          border`,\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\n          'bg-popover absolute inset-0 opacity-0',\n          defaultClassNames.dropdown,\n        ),\n        caption_label: cn(\n          'select-none font-medium',\n          captionLayout === 'label'\n            ? 'text-sm'\n            : `[&>svg]:text-muted-foreground flex h-8 items-center gap-1\n              rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5`,\n          defaultClassNames.caption_label,\n        ),\n        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n        weekdays: cn('flex', defaultClassNames.weekdays),\n        weekday: cn(\n          'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',\n          defaultClassNames.weekday,\n        ),\n        week: cn('mt-2 flex w-full', defaultClassNames.week),\n        week_number_header: cn(\n          'w-(--cell-size) select-none',\n          defaultClassNames.week_number_header,\n        ),\n        week_number: cn(\n          'text-muted-foreground select-none text-[0.8rem]',\n          defaultClassNames.week_number,\n        ),\n        day: cn(\n          `group/day relative aspect-square h-full w-full select-none p-0\n          text-center [&:first-child[data-selected=true]_button]:rounded-l-md\n          [&:last-child[data-selected=true]_button]:rounded-r-md`,\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          'bg-accent rounded-l-md',\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn('rounded-none', defaultClassNames.range_middle),\n        range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),\n        today: cn(\n          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          'text-muted-foreground aria-selected:text-muted-foreground',\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\n          'text-muted-foreground opacity-50',\n          defaultClassNames.disabled,\n        ),\n        hidden: cn('invisible', defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        // eslint-disable-next-line react/prop-types -- typed via DayPicker's `components` prop, not local PropTypes\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          );\n        },\n        // eslint-disable-next-line react/prop-types -- typed via DayPicker's `components` prop, not local PropTypes\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === 'left') {\n            return (\n              <ChevronLeftIcon className={cn('size-4', className)} {...props} />\n            );\n          }\n\n          if (orientation === 'right') {\n            return (\n              <ChevronRightIcon\n                className={cn('size-4', className)}\n                {...props}\n              />\n            );\n          }\n\n          return (\n            <ChevronDownIcon className={cn('size-4', className)} {...props} />\n          );\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div\n                className=\"flex size-(--cell-size) items-center justify-center\n                  text-center\"\n              >\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        `data-[selected-single=true]:bg-primary\n        data-[selected-single=true]:text-primary-foreground\n        data-[range-middle=true]:bg-accent\n        data-[range-middle=true]:text-accent-foreground\n        data-[range-start=true]:bg-primary\n        data-[range-start=true]:text-primary-foreground\n        data-[range-end=true]:bg-primary\n        data-[range-end=true]:text-primary-foreground\n        group-data-[focused=true]/day:border-ring\n        group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto\n        w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal\n        group-data-[focused=true]/day:relative\n        group-data-[focused=true]/day:z-10\n        group-data-[focused=true]/day:ring-[3px]\n        data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none\n        data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70`,\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAS,SAAS,EAChB,WACA,YACA,kBAAkB,MAClB,gBAAgB,SAChB,gBAAgB,SAChB,YACA,YACA,GAAG,SAGF;CACD,MAAM,oBAAoB,sBAAsB;AAEhD,QACE,oBAAC;EACkB;EACjB,WAAW,GACT;;yDAGA,OAAO,GAAG,6CACV,OAAO,GAAG,iDACV,UACD;EACc;EACf,YAAY;GACV,sBAAqB,SACnB,KAAK,eAAe,WAAW,EAAE,OAAO,SAAS,CAAC;GACpD,GAAG;GACJ;EACD,YAAY;GACV,MAAM,GAAG,SAAS,kBAAkB,KAAK;GACzC,QAAQ,GACN,4CACA,kBAAkB,OACnB;GACD,OAAO,GAAG,8BAA8B,kBAAkB,MAAM;GAChE,KAAK,GACH,2EACA,kBAAkB,IACnB;GACD,iBAAiB,GACf,eAAe,EAAE,SAAS,eAAe,CAAC,EAC1C,4EACA,kBAAkB,gBACnB;GACD,aAAa,GACX,eAAe,EAAE,SAAS,eAAe,CAAC,EAC1C,4EACA,kBAAkB,YACnB;GACD,eAAe,GACb,4EACA,kBAAkB,cACnB;GACD,WAAW,GACT,uFACA,kBAAkB,UACnB;GACD,eAAe,GACb;;mBAGA,kBAAkB,cACnB;GACD,UAAU,GACR,yCACA,kBAAkB,SACnB;GACD,eAAe,GACb,2BACA,kBAAkB,UACd,YACA;8DAEJ,kBAAkB,cACnB;GACD,YAAY,GAAG,0BAA0B,kBAAkB,WAAW;GACtE,UAAU,GAAG,QAAQ,kBAAkB,SAAS;GAChD,SAAS,GACP,iFACA,kBAAkB,QACnB;GACD,MAAM,GAAG,oBAAoB,kBAAkB,KAAK;GACpD,oBAAoB,GAClB,+BACA,kBAAkB,mBACnB;GACD,aAAa,GACX,mDACA,kBAAkB,YACnB;GACD,KAAK,GACH;;mEAGA,kBAAkB,IACnB;GACD,aAAa,GACX,0BACA,kBAAkB,YACnB;GACD,cAAc,GAAG,gBAAgB,kBAAkB,aAAa;GAChE,WAAW,GAAG,0BAA0B,kBAAkB,UAAU;GACpE,OAAO,GACL,iFACA,kBAAkB,MACnB;GACD,SAAS,GACP,6DACA,kBAAkB,QACnB;GACD,UAAU,GACR,oCACA,kBAAkB,SACnB;GACD,QAAQ,GAAG,aAAa,kBAAkB,OAAO;GACjD,GAAG;GACJ;EACD,YAAY;GAEV,OAAO,EAAE,WAAW,SAAS,GAAG,YAAY;AAC1C,WACE,oBAAC;KACC,aAAU;KACV,KAAK;KACL,WAAW,GAAG,UAAU;KACxB,GAAI;MACJ;;GAIN,UAAU,EAAE,WAAW,aAAa,GAAG,YAAY;AACjD,QAAI,gBAAgB,OAClB,QACE,oBAAC;KAAgB,WAAW,GAAG,UAAU,UAAU;KAAE,GAAI;MAAS;AAItE,QAAI,gBAAgB,QAClB,QACE,oBAAC;KACC,WAAW,GAAG,UAAU,UAAU;KAClC,GAAI;MACJ;AAIN,WACE,oBAAC;KAAgB,WAAW,GAAG,UAAU,UAAU;KAAE,GAAI;MAAS;;GAGtE,WAAW;GACX,aAAa,EAAE,UAAU,GAAG,YAAY;AACtC,WACE,oBAAC;KAAG,GAAI;eACN,oBAAC;MACC,WAAU;MAGT;OACG;MACH;;GAGT,GAAG;GACJ;EACD,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,KACA,WACA,GAAG,SACsC;CACzC,MAAM,oBAAoB,sBAAsB;CAEhD,MAAM,MAAMA,QAAM,OAA0B,KAAK;AACjD,SAAM,gBAAgB;AACpB,MAAI,UAAU,QAAS,KAAI,SAAS,OAAO;IAC1C,CAAC,UAAU,QAAQ,CAAC;AAEvB,QACE,oBAAC;EACM;EACL,SAAQ;EACR,MAAK;EACL,YAAU,IAAI,KAAK,oBAAoB;EACvC,wBACE,UAAU,YACV,CAAC,UAAU,eACX,CAAC,UAAU,aACX,CAAC,UAAU;EAEb,oBAAkB,UAAU;EAC5B,kBAAgB,UAAU;EAC1B,qBAAmB,UAAU;EAC7B,WAAW,GACT;;;;;;;;;;;;;;;kFAgBA,kBAAkB,KAClB,UACD;EACD,GAAI;GACJ"}

package/dist/core.d.mts

@@ -1,6 +1,7 @@
 import { accordion_d_exports } from "./core/accordion.mjs";
 import { badge_d_exports } from "./core/badge.mjs";
 import { button_d_exports } from "./core/button.mjs";
+import { calendar_d_exports } from "./core/calendar.mjs";
 import { checkbox_d_exports } from "./core/checkbox.mjs";
 import { dialog_d_exports } from "./core/dialog.mjs";
 import { drawer_d_exports } from "./core/drawer.mjs";
@@ -16,4 +17,4 @@ import { separator_d_exports } from "./core/separator.mjs";
 import { skeleton_d_exports } from "./core/skeleton.mjs";
 import { switch_d_exports } from "./core/switch.mjs";
 import { textarea_d_exports } from "./core/textarea.mjs";
-export { accordion_d_exports as accordion, badge_d_exports as badge, button_d_exports as button, checkbox_d_exports as checkbox, dialog_d_exports as dialog, drawer_d_exports as drawer, field_d_exports as field, input_d_exports as input, label_d_exports as label, popover_d_exports as popover, progress_d_exports as progress, radio_group_d_exports as radio, resizable_d_exports as resizable, select_d_exports as select, separator_d_exports as separator, skeleton_d_exports as skeleton, switch_d_exports as switchComponent, textarea_d_exports as textarea };
+export { accordion_d_exports as accordion, badge_d_exports as badge, button_d_exports as button, calendar_d_exports as calendar, checkbox_d_exports as checkbox, dialog_d_exports as dialog, drawer_d_exports as drawer, field_d_exports as field, input_d_exports as input, label_d_exports as label, popover_d_exports as popover, progress_d_exports as progress, radio_group_d_exports as radio, resizable_d_exports as resizable, select_d_exports as select, separator_d_exports as separator, skeleton_d_exports as skeleton, switch_d_exports as switchComponent, textarea_d_exports as textarea };

package/dist/core.mjs

@@ -1,6 +1,7 @@
 import { accordion_exports } from "./core/accordion.mjs";
 import { badge_exports } from "./core/badge.mjs";
 import { button_exports } from "./core/button.mjs";
+import { calendar_exports } from "./core/calendar.mjs";
 import { checkbox_exports } from "./core/checkbox.mjs";
 import { dialog_exports } from "./core/dialog.mjs";
 import { drawer_exports } from "./core/drawer.mjs";
@@ -17,4 +18,4 @@ import { skeleton_exports } from "./core/skeleton.mjs";
 import { switch_exports } from "./core/switch.mjs";
 import { textarea_exports } from "./core/textarea.mjs";
 
-export { accordion_exports as accordion, badge_exports as badge, button_exports as button, checkbox_exports as checkbox, dialog_exports as dialog, drawer_exports as drawer, field_exports as field, input_exports as input, label_exports as label, popover_exports as popover, progress_exports as progress, radio_group_exports as radio, resizable_exports as resizable, select_exports as select, separator_exports as separator, skeleton_exports as skeleton, switch_exports as switchComponent, textarea_exports as textarea };
+export { accordion_exports as accordion, badge_exports as badge, button_exports as button, calendar_exports as calendar, checkbox_exports as checkbox, dialog_exports as dialog, drawer_exports as drawer, field_exports as field, input_exports as input, label_exports as label, popover_exports as popover, progress_exports as progress, radio_group_exports as radio, resizable_exports as resizable, select_exports as select, separator_exports as separator, skeleton_exports as skeleton, switch_exports as switchComponent, textarea_exports as textarea };

package/dist/index.d.mts

@@ -8,6 +8,7 @@ import Space from "./Space.mjs";
 import Layout from "./Layout.mjs";
 import { Checkbox } from "./components/atoms/checkbox/index.mjs";
 import { ColorPicker } from "./components/atoms/color-picker.mjs";
+import { DatePicker } from "./components/atoms/date-picker.mjs";
 import { FloatButton } from "./components/atoms/float-button/index.mjs";
 import { Input } from "./components/atoms/input/index.mjs";
 import { Popover } from "./components/atoms/popover.mjs";
@@ -22,6 +23,7 @@ import { Collapse } from "./components/molecules/collapse.mjs";
 import { Dropdown } from "./components/molecules/dropdown.mjs";
 import { Marquees } from "./components/molecules/marquees/index.mjs";
 import { Splitter } from "./components/molecules/splitter/index.mjs";
+import { Upload, UploadFile } from "./components/molecules/upload.mjs";
 import "./components/molecules/index.mjs";
 import { Drawer, Props as Props$1 } from "./components/organisms/drawer.mjs";
 import { List } from "./components/organisms/list/index.mjs";
@@ -33,4 +35,4 @@ import { ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
 import { Config, Props } from "./providers/Config/index.mjs";
 import "./providers/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Typography, useConfig };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Props as ConfigProps, DatePicker, Drawer, Props$1 as DrawerProps, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, ThemeConfig, ThemeToken, Typography, Upload, UploadFile, useConfig };

package/dist/index.mjs

@@ -4,6 +4,7 @@ import Checkbox from "./components/atoms/checkbox/index.mjs";
 import Typography from "./Typography.mjs";
 import Popover from "./components/atoms/popover.mjs";
 import ColorPicker from "./components/atoms/color-picker.mjs";
+import DatePicker from "./components/atoms/date-picker.mjs";
 import FloatButton from "./components/atoms/float-button/index.mjs";
 import Input from "./components/atoms/input/index.mjs";
 import Progress from "./components/atoms/progress.mjs";
@@ -21,6 +22,7 @@ import Marquees from "./components/molecules/marquees/index.mjs";
 import Reveals from "./Reveals.mjs";
 import Splitter from "./components/molecules/splitter/index.mjs";
 import Space from "./Space.mjs";
+import Upload from "./components/molecules/upload.mjs";
 import Drawer from "./components/organisms/drawer.mjs";
 import List from "./components/organisms/list/index.mjs";
 import Modal from "./components/organisms/modal.mjs";
@@ -29,4 +31,4 @@ import Layout from "./Layout.mjs";
 import { useConfig } from "./providers/Config/context.mjs";
 import Config from "./providers/Config/index.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Typography, useConfig };
+export { Button, Card, Checkbox, Collapse, ColorPicker, Config, DatePicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Typography, Upload, useConfig };

package/dist/style.css

@@ -207,6 +207,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -239,6 +242,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -347,6 +353,9 @@
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -422,6 +431,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-\(--cell-size\) {
+    width: var(--cell-size);
+    height: var(--cell-size);
+  }
   .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -462,6 +475,9 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .h-\(--cell-size\) {
+    height: var(--cell-size);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -501,6 +517,9 @@
   .h-50 {
     height: calc(var(--spacing) * 50);
   }
+  .h-\[--cell-size\] {
+    height: --cell-size;
+  }
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
@@ -525,6 +544,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-\(--cell-size\) {
+    width: var(--cell-size);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -582,6 +604,9 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .min-w-\(--cell-size\) {
+    min-width: var(--cell-size);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -618,6 +643,9 @@
   .basis-auto {
     flex-basis: auto;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-\(--radix-popover-content-transform-origin\) {
     transform-origin: var(--radix-popover-content-transform-origin);
   }
@@ -739,6 +767,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
@@ -785,6 +816,11 @@
   .gap-y-5 {
     row-gap: calc(var(--spacing) * 5);
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -838,6 +874,10 @@
     border-top-left-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
   }
+  .rounded-l-md {
+    border-top-left-radius: calc(var(--radius) - 2px);
+    border-bottom-left-radius: calc(var(--radius) - 2px);
+  }
   .rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -846,6 +886,10 @@
     border-top-right-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
   }
+  .rounded-r-md {
+    border-top-right-radius: calc(var(--radius) - 2px);
+    border-bottom-right-radius: calc(var(--radius) - 2px);
+  }
   .rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -1000,6 +1044,9 @@
   .fill-primary {
     fill: var(--primary);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1009,6 +1056,12 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1018,6 +1071,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .px-\(--cell-size\) {
+    padding-inline: var(--cell-size);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1066,6 +1122,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1128,6 +1187,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.8rem\] {
+    font-size: 0.8rem;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -1178,6 +1240,9 @@
   .text-\(--btn-fg\) {
     color: var(--btn-fg);
   }
+  .text-accent-foreground {
+    color: var(--accent-foreground);
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -1364,6 +1429,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[--cell-size\:2rem\] {
+    --cell-size: 2rem;
+  }
   .group-hover\:border-current {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1391,6 +1459,35 @@
       opacity: 50%;
     }
   }
+  .group-data-\[focused\=true\]\/day\:relative {
+    &:is(:where(.group\/day)[data-focused="true"] *) {
+      position: relative;
+    }
+  }
+  .group-data-\[focused\=true\]\/day\:z-10 {
+    &:is(:where(.group\/day)[data-focused="true"] *) {
+      z-index: 10;
+    }
+  }
+  .group-data-\[focused\=true\]\/day\:border-ring {
+    &:is(:where(.group\/day)[data-focused="true"] *) {
+      border-color: var(--ring);
+    }
+  }
+  .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
+    &:is(:where(.group\/day)[data-focused="true"] *) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
+    &:is(:where(.group\/day)[data-focused="true"] *) {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+  }
   .group-data-\[size\=default\]\/switch\:size-4 {
     &:is(:where(.group\/switch)[data-size="default"] *) {
       width: calc(var(--spacing) * 4);
@@ -1937,6 +2034,13 @@
       }
     }
   }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
+    }
+  }
   .hover\:no-underline {
     &:hover {
       @media (hover: hover) {
@@ -2076,6 +2180,25 @@
       opacity: 50%;
     }
   }
+  .has-focus\:border-ring {
+    &:has(*:focus) {
+      border-color: var(--ring);
+    }
+  }
+  .has-focus\:ring-\[3px\] {
+    &:has(*:focus) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .has-focus\:ring-ring\/50 {
+    &:has(*:focus) {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+  }
   .has-data-\[state\=checked\]\:border-primary {
     &:has(*[data-state="checked"]) {
       border-color: var(--primary);
@@ -2145,6 +2268,11 @@
       padding-inline: calc(var(--spacing) * 4);
     }
   }
+  .aria-disabled\:opacity-50 {
+    &[aria-disabled="true"] {
+      opacity: 50%;
+    }
+  }
   .aria-invalid\:border-destructive {
     &[aria-invalid="true"] {
       border-color: var(--destructive);
@@ -2158,6 +2286,11 @@
       }
     }
   }
+  .aria-selected\:text-muted-foreground {
+    &[aria-selected="true"] {
+      color: var(--muted-foreground);
+    }
+  }
   .aria-\[orientation\=horizontal\]\:h-px {
     &[aria-orientation="horizontal"] {
       height: 1px;
@@ -2230,6 +2363,11 @@
       opacity: 50%;
     }
   }
+  .data-\[empty\=true\]\:text-muted-foreground {
+    &[data-empty="true"] {
+      color: var(--muted-foreground);
+    }
+  }
   .data-\[invalid\=true\]\:text-destructive {
     &[data-invalid="true"] {
       color: var(--destructive);
@@ -2260,6 +2398,66 @@
       color: var(--muted-foreground);
     }
   }
+  .data-\[range-end\=true\]\:rounded-md {
+    &[data-range-end="true"] {
+      border-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .data-\[range-end\=true\]\:bg-primary {
+    &[data-range-end="true"] {
+      background-color: var(--primary);
+    }
+  }
+  .data-\[range-end\=true\]\:text-primary-foreground {
+    &[data-range-end="true"] {
+      color: var(--primary-foreground);
+    }
+  }
+  .data-\[range-middle\=true\]\:rounded-none {
+    &[data-range-middle="true"] {
+      border-radius: 0;
+    }
+  }
+  .data-\[range-middle\=true\]\:bg-accent {
+    &[data-range-middle="true"] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\[range-middle\=true\]\:text-accent-foreground {
+    &[data-range-middle="true"] {
+      color: var(--accent-foreground);
+    }
+  }
+  .data-\[range-start\=true\]\:rounded-md {
+    &[data-range-start="true"] {
+      border-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .data-\[range-start\=true\]\:bg-primary {
+    &[data-range-start="true"] {
+      background-color: var(--primary);
+    }
+  }
+  .data-\[range-start\=true\]\:text-primary-foreground {
+    &[data-range-start="true"] {
+      color: var(--primary-foreground);
+    }
+  }
+  .data-\[selected-single\=true\]\:bg-primary {
+    &[data-selected-single="true"] {
+      background-color: var(--primary);
+    }
+  }
+  .data-\[selected-single\=true\]\:text-primary-foreground {
+    &[data-selected-single="true"] {
+      color: var(--primary-foreground);
+    }
+  }
+  .data-\[selected\=true\]\:rounded-none {
+    &[data-selected="true"] {
+      border-radius: 0;
+    }
+  }
   .data-\[side\=bottom\]\:translate-y-1 {
     &[data-side="bottom"] {
       --tw-translate-y: calc(var(--spacing) * 1);
@@ -2605,6 +2803,11 @@
       }
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
   .md\:gap-1\.5 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 1.5);
@@ -2833,6 +3036,30 @@
       display: none;
     }
   }
+  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md {
+    &:first-child[data-selected=true] button {
+      border-top-left-radius: calc(var(--radius) - 2px);
+      border-bottom-left-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      :is(& *) {
+        &:is(.rdp-button_next>svg) {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
+  .rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      :is(& *) {
+        &:is(.rdp-button_previous>svg) {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
   .\*\:\[span\]\:last\:flex {
     :is(& > *) {
       &:is(span) {
@@ -2860,6 +3087,12 @@
       }
     }
   }
+  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md {
+    &:last-child[data-selected=true] button {
+      border-top-right-radius: calc(var(--radius) - 2px);
+      border-bottom-right-radius: calc(var(--radius) - 2px);
+    }
+  }
   .\[\&\>\*\]\:w-full {
     &>* {
       width: 100%;
@@ -2932,6 +3165,17 @@
       color: var(--primary);
     }
   }
+  .\[\&\>span\]\:text-xs {
+    &>span {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
+  .\[\&\>span\]\:opacity-70 {
+    &>span {
+      opacity: 70%;
+    }
+  }
   .\[\&\>svg\]\:pointer-events-none {
     &>svg {
       pointer-events: none;
@@ -2943,6 +3187,17 @@
       height: calc(var(--spacing) * 3);
     }
   }
+  .\[\&\>svg\]\:size-3\.5 {
+    &>svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
+  .\[\&\>svg\]\:text-muted-foreground {
+    &>svg {
+      color: var(--muted-foreground);
+    }
+  }
   .\[\&\[aria-orientation\=horizontal\]\>div\]\:rotate-90 {
     &[aria-orientation=horizontal]>div {
       rotate: 90deg;
@@ -2953,6 +3208,16 @@
       rotate: 180deg;
     }
   }
+  .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
+    [data-slot=card-content] & {
+      background-color: transparent;
+    }
+  }
+  .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
+    [data-slot=popover-content] & {
+      background-color: transparent;
+    }
+  }
   .\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5 {
     [data-variant=legend]+& {
       margin-top: calc(var(--spacing) * -1.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -126,7 +126,7 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@jbpark/use-hooks": "^2.1.0",
+    "@jbpark/use-hooks": "^2.6.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -135,15 +135,16 @@
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
-    "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
     "gsap": "^3.15.0",
     "lucide-react": "^0.542.0",
     "motion": "^12.23.12",
     "postcss": "^8.4.31",
     "radix-ui": "^1.4.3",
     "react-colorful": "^5.6.1",
+    "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.10.0",
     "react-use": "^17.6.0",
     "swiper": "^11.2.10",