@jbpark/ui-kit 3.1.0 → 3.2.0

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

@@ -1,17 +1,16 @@
 'use client';
 
 import { cn } from "../../utils.mjs";
-import { button_exports } from "../../core/button.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, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { format } from "date-fns";
 
 //#region src/components/atoms/date-picker.tsx
 const { Calendar } = calendar_exports;
-const { buttonVariants } = button_exports;
 const DatePicker = ({ defaultValue, value: _value, placeholder = "Pick a date", className, onChange: _onChange = () => {} }) => {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const controlled = _value !== void 0;
@@ -27,11 +26,12 @@ const DatePicker = ({ defaultValue, value: _value, placeholder = "Pick a date",
 			selected: value,
 			onSelect: onChange
 		}),
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "default",
+			icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
 			"data-empty": !value,
-			className: cn(buttonVariants({ variant: "outline" }), "w-full justify-start text-left font-normal", "data-[empty=true]:text-muted-foreground", className),
-			children: [/* @__PURE__ */ jsx(CalendarIcon, {}), value ? format(value, "PPP") : placeholder]
+			className: cn("w-full justify-start text-left font-normal", "data-[empty=true]:text-muted-foreground", className),
+			children: value ? format(value, "PPP") : placeholder
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.mjs","names":["calendar","button"],"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 { button, calendar } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Popover from './popover';\n\nconst { Calendar } = calendar;\nconst { buttonVariants } = button;\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=\"button\"\n        data-empty={!value}\n        className={cn(\n          buttonVariants({ variant: 'outline' }),\n          'w-full justify-start text-left font-normal',\n          'data-[empty=true]:text-muted-foreground',\n          className,\n          //\n        )}\n      >\n        <CalendarIcon />\n        {value ? format(value, 'PPP') : placeholder}\n      </button>\n    </Popover>\n  );\n};\n\nexport default DatePicker;\nexport type { Props };\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,EAAE,aAAaA;AACrB,MAAM,EAAE,mBAAmBC;AAU3B,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,qBAAC;GACC,MAAK;GACL,cAAY,CAAC;GACb,WAAW,GACT,eAAe,EAAE,SAAS,WAAW,CAAC,EACtC,8CACA,2CACA,UAED;cAED,oBAAC,iBAAe,EACf,QAAQ,OAAO,OAAO,MAAM,GAAG;IACzB;GACD"}
+{"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/molecules/upload.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"upload.d.mts","names":[],"sources":["../../../src/components/molecules/upload.tsx"],"mappings":";;;UASiB,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"}
+{"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

@@ -1,6 +1,7 @@
 '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";
@@ -83,12 +84,14 @@ const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept =
 						className: "flex-1 truncate text-sm",
 						children: file.name
 					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
+					/* @__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}`,
-						children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+						"aria-label": `Remove ${file.name}`
 					})
 				]
 			}, file.uid))

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

@@ -1 +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\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=\"button\"\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              >\n                <X className=\"size-4\" />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":";;;;;;;;;AA+BA,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,eAAe,WAAW,KAAK,IAAI;MACnC,WAAU;MACV,cAAY,UAAU,KAAK;gBAE3B,oBAAC,KAAE,WAAU,WAAW;OACjB;;MAtBJ,KAAK,IAuBP,CACL;IACC;GAEH"}
+{"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/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;

package/dist/core/calendar.mjs

@@ -30,10 +30,10 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 			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),
+			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),
@@ -44,7 +44,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 			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_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
@@ -86,7 +86,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 				return /* @__PURE__ */ jsx("td", {
 					...props,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "flex size-[--cell-size] items-center justify-center\n                  text-center",
+						className: "flex size-(--cell-size) items-center justify-center\n                  text-center",
 						children
 					})
 				});
@@ -121,7 +121,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
         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
+        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]

package/dist/core/calendar.mjs.map

@@ -1 +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":"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"}
+{"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":"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"}

package/dist/style.css

@@ -431,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);
@@ -471,9 +475,8 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
-  .size-\[--cell-size\] {
-    width: --cell-size;
-    height: --cell-size;
+  .h-\(--cell-size\) {
+    height: var(--cell-size);
   }
   .h-2 {
     height: calc(var(--spacing) * 2);
@@ -541,6 +544,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-\(--cell-size\) {
+    width: var(--cell-size);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -574,9 +580,6 @@
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
-  .w-\[--cell-size\] {
-    width: --cell-size;
-  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -601,15 +604,15 @@
   .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);
   }
   .min-w-80 {
     min-width: calc(var(--spacing) * 80);
   }
-  .min-w-\[--cell-size\] {
-    min-width: --cell-size;
-  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1068,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);
   }
@@ -1092,9 +1098,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-\[--cell-size\] {
-    padding-inline: --cell-size;
-  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "3.1.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",