@customafk/lunas-ui 0.0.57 → 0.0.60

package/dist/ui/dialog.d.cts

@@ -1,2 +1,2 @@
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "../dialog-DBHKJa6T.cjs";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "../dialog-uj9sAbgt.cjs";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/ui/dialog.d.ts

@@ -1,2 +1,2 @@
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "../dialog-Dt7Z19tQ.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "../dialog-Dra_FGdL.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/ui/dropdown-menu.d.cts

@@ -1,25 +1,25 @@
-import * as react_jsx_runtime103 from "react/jsx-runtime";
+import * as react_jsx_runtime100 from "react/jsx-runtime";
 import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
 
 //#region packages/components/ui/dropdown-menu.d.ts
 declare function DropdownMenu({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuPortal({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuTrigger({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuContent({
   className,
   sideOffset,
   align,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuItem({
   className,
   inset,
@@ -28,39 +28,39 @@ declare function DropdownMenuItem({
 }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
   inset?: boolean;
   variant?: 'default' | 'destructive';
-}): react_jsx_runtime103.JSX.Element;
+}): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuRadioGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuRadioItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuLabel({
   className,
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenu$1.Label> & {
   inset?: boolean;
-}): react_jsx_runtime103.JSX.Element;
+}): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<'span'>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuSub({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuSubTrigger({
   className,
   inset,
@@ -68,11 +68,11 @@ declare function DropdownMenuSubTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
   inset?: boolean;
-}): react_jsx_runtime103.JSX.Element;
+}): react_jsx_runtime100.JSX.Element;
 declare function DropdownMenuSubContent({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react_jsx_runtime103.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react_jsx_runtime100.JSX.Element;
 //#endregion
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
 //# sourceMappingURL=dropdown-menu.d.cts.map

package/dist/ui/dropdown-menu.d.ts

@@ -1,25 +1,25 @@
-import * as react_jsx_runtime77 from "react/jsx-runtime";
+import * as react_jsx_runtime85 from "react/jsx-runtime";
 import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
 
 //#region packages/components/ui/dropdown-menu.d.ts
 declare function DropdownMenu({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuPortal({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuTrigger({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuContent({
   className,
   sideOffset,
   align,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuItem({
   className,
   inset,
@@ -28,39 +28,39 @@ declare function DropdownMenuItem({
 }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
   inset?: boolean;
   variant?: 'default' | 'destructive';
-}): react_jsx_runtime77.JSX.Element;
+}): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuRadioGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuRadioItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuLabel({
   className,
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenu$1.Label> & {
   inset?: boolean;
-}): react_jsx_runtime77.JSX.Element;
+}): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<'span'>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuSub({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuSubTrigger({
   className,
   inset,
@@ -68,11 +68,11 @@ declare function DropdownMenuSubTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
   inset?: boolean;
-}): react_jsx_runtime77.JSX.Element;
+}): react_jsx_runtime85.JSX.Element;
 declare function DropdownMenuSubContent({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react_jsx_runtime77.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react_jsx_runtime85.JSX.Element;
 //#endregion
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
 //# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/ui/file-uploader.cjs

@@ -1,3 +1,3 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../button-ChpGfVjG.cjs`),n=require(`../progress-MyGITZ3w.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`@customafk/react-toolkit/utils`)),a=e.__toESM(require(`react/jsx-runtime`)),o=e.__toESM(require(`lucide-react`)),s=e.__toESM(require(`react-dropzone`)),c=e.__toESM(require(`sonner`)),l=e.__toESM(require(`@customafk/react-toolkit/hooks/useControllableState`));function u(e){let{value:t,onValueChange:n,onUpload:u,progresses:p,accept:m={"image/*":[]},maxSize:h=1024*1024*2,maxFileCount:g=1,multiple:_=!1,disabled:v=!1,showText:y=!0,iconSize:b,className:x,...S}=e,[C,w]=(0,l.useControllableState)({prop:t,onChange:n}),T=r.default.useCallback((e,t)=>{if(!_&&g===1&&e.length>1){c.toast.error(`Cannot upload more than 1 file at a time`);return}if((C?.length??0)+e.length>g){c.toast.error(`Cannot upload more than ${g} files`);return}let n=e.map(e=>Object.assign(e,{preview:URL.createObjectURL(e)})),r=C?[...C,...n]:n;if(w(r),t.length>0&&t.forEach(({file:e})=>{c.toast.error(`File ${e.name} was rejected`)}),u&&r.length>0&&r.length<=g){let e=r.length>0?`${r.length} files`:`file`;u(r).then(()=>{w([]),(0,c.toast)(`${e} uploaded`)})}},[C,g,_,u,w]);function E(e){if(!C)return;f(C[e])&&URL.revokeObjectURL(C[e].preview);let t=C.filter((t,n)=>n!==e);w(t),n?.(t)}r.default.useEffect(()=>()=>{C&&C.forEach(e=>{f(e)&&URL.revokeObjectURL(e.preview)})},[]);let D=v||(C?.length??0)>=g;return(0,a.jsxs)(`div`,{className:`relative flex w-full flex-col gap-6`,children:[(0,a.jsx)(s.default,{onDrop:T,accept:m,maxSize:h,maxFiles:g,multiple:g>1||_,disabled:D,children:({getRootProps:e,getInputProps:t,isDragActive:n})=>(0,a.jsxs)(`div`,{...e(),className:(0,i.cn)(`group`,`border-border-weak`,`hover:bg-border-weak/20`,`relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition`,`ring-offset-background`,`focus-visible:ring-primary-weak`,`focus-visible:ring-2`,`focus-visible:ring-offset-2`,`focus-visible:outline-hidden`,n&&`border-border-primary-strong bg-border-weak/40`,D&&`pointer-events-none opacity-60`,x),...S,children:[(0,a.jsx)(`input`,{...t()}),n?(0,a.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,a.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,a.jsx)(o.Upload,{className:`text-text-positive-muted size-7`,"aria-hidden":`true`})}),(0,a.jsx)(`p`,{className:`text-text-positive-muted font-medium`,children:`Drop the files here`})]}):(0,a.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,a.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,a.jsx)(o.Upload,{size:b||24,className:`text-muted-foreground`,"aria-hidden":`true`})}),y&&(0,a.jsxs)(`div`,{className:`flex flex-col gap-px`,children:[(0,a.jsxs)(`p`,{className:`text-text-positive-weak text-xs font-medium`,children:[`Drag `,`'n'`,` drop files here, or click to select files`]}),(0,a.jsxs)(`p`,{className:`text-text-positive-muted text-xs`,children:[`You can upload`,g>1?` ${g===1/0?`multiple`:g}
-                      files (up to ${(0,i.formatBytes)(h)} each)`:` a file with ${(0,i.formatBytes)(h)}`]})]})]})]})}),C?.length?(0,a.jsxs)(`div`,{className:`h-fit w-full overflow-y-auto`,children:[(0,a.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-2.5`,children:[(0,a.jsxs)(`div`,{className:`text-text-positive-weak flex items-center gap-1`,children:[(0,a.jsx)(o.Image,{size:16,"aria-hidden":`true`}),(0,a.jsxs)(`p`,{className:`text-sm`,children:[`Ảnh đã tải lên (`,C.length,`)`]})]}),(0,a.jsxs)(`button`,{className:`hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200`,onClick:()=>{C&&(C.forEach(e=>{f(e)&&URL.revokeObjectURL(e.preview)}),w([]),n?.([]))},children:[(0,a.jsx)(o.Trash2,{size:16,"aria-hidden":`true`}),(0,a.jsx)(`p`,{className:`text-sm`,children:`Xóa tất cả`})]})]}),(0,a.jsx)(`div`,{className:`flex flex-col gap-2.5`,children:C?.map((e,t)=>(0,a.jsx)(d,{file:e,onRemove:()=>E(t),progress:p?.[e.name]},t))})]}):null]})}function d({file:e,progress:r,onRemove:s}){return(0,a.jsxs)(`div`,{className:`border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors`,children:[(0,a.jsxs)(`div`,{className:`flex flex-1 gap-2.5`,children:[f(e)?(0,a.jsx)(p,{file:e}):null,(0,a.jsxs)(`div`,{className:`flex w-full flex-col gap-2`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-y-0.5`,children:[(0,a.jsx)(`p`,{className:`text-text-positive line-clamp-1 text-sm`,children:e.name}),(0,a.jsx)(`p`,{className:`text-text-positive-muted text-xs`,children:(0,i.formatBytes)(e.size)})]}),r?(0,a.jsx)(n.Progress,{value:r}):null]})]}),(0,a.jsx)(`div`,{className:`flex items-center gap-2`,children:(0,a.jsxs)(t.Button,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,className:`size-7`,onClick:s,children:[(0,a.jsx)(o.Trash2,{size:16,className:`text-text-positive-muted`,"aria-hidden":`true`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Remove file`})]})})]})}function f(e){return`preview`in e&&typeof e.preview==`string`}function p({file:e}){return e.type.startsWith(`image/`)?(0,a.jsx)(`img`,{src:e.preview,className:`border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm`}):(0,a.jsx)(o.FileText,{className:`text-text-positive-muted size-10 border`,"aria-hidden":`true`})}exports.FileUploader=u;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../button-ChpGfVjG.cjs`),n=require(`../progress-IkXemE6u.cjs`),r=e.__toESM(require(`@customafk/react-toolkit/utils`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`react`)),o=e.__toESM(require(`lucide-react`)),s=e.__toESM(require(`react-dropzone`)),c=e.__toESM(require(`@customafk/react-toolkit/hooks/useControllableState`)),l=e.__toESM(require(`sonner`));function u(e){let{value:t,onValueChange:n,onUpload:u,progresses:p,accept:m={"image/*":[]},maxSize:h=1024*1024*2,maxFileCount:g=1,multiple:_=!1,disabled:v=!1,showText:y=!0,iconSize:b,className:x,...S}=e,[C,w]=(0,c.useControllableState)({prop:t,onChange:n}),T=a.default.useCallback((e,t)=>{if(!_&&g===1&&e.length>1){l.toast.error(`Cannot upload more than 1 file at a time`);return}if((C?.length??0)+e.length>g){l.toast.error(`Cannot upload more than ${g} files`);return}let n=e.map(e=>Object.assign(e,{preview:URL.createObjectURL(e)})),r=C?[...C,...n]:n;if(w(r),t.length>0&&t.forEach(({file:e})=>{l.toast.error(`File ${e.name} was rejected`)}),u&&r.length>0&&r.length<=g){let e=r.length>0?`${r.length} files`:`file`;u(r).then(()=>{w([]),(0,l.toast)(`${e} uploaded`)})}},[C,g,_,u,w]);function E(e){if(!C)return;f(C[e])&&URL.revokeObjectURL(C[e].preview);let t=C.filter((t,n)=>n!==e);w(t),n?.(t)}a.default.useEffect(()=>()=>{C&&C.forEach(e=>{f(e)&&URL.revokeObjectURL(e.preview)})},[]);let D=v||(C?.length??0)>=g;return(0,i.jsxs)(`div`,{className:`relative flex w-full flex-col gap-6`,children:[(0,i.jsx)(s.default,{onDrop:T,accept:m,maxSize:h,maxFiles:g,multiple:g>1||_,disabled:D,children:({getRootProps:e,getInputProps:t,isDragActive:n})=>(0,i.jsxs)(`div`,{...e(),className:(0,r.cn)(`group`,`border-border-weak`,`hover:bg-border-weak/20`,`relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition`,`ring-offset-background`,`focus-visible:ring-primary-weak`,`focus-visible:ring-2`,`focus-visible:ring-offset-2`,`focus-visible:outline-hidden`,n&&`border-border-primary-strong bg-border-weak/40`,D&&`pointer-events-none opacity-60`,x),...S,children:[(0,i.jsx)(`input`,{...t()}),n?(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,i.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,i.jsx)(o.Upload,{className:`text-text-positive-muted size-7`,"aria-hidden":`true`})}),(0,i.jsx)(`p`,{className:`text-text-positive-muted font-medium`,children:`Drop the files here`})]}):(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,i.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,i.jsx)(o.Upload,{size:b||24,className:`text-muted-foreground`,"aria-hidden":`true`})}),y&&(0,i.jsxs)(`div`,{className:`flex flex-col gap-px`,children:[(0,i.jsxs)(`p`,{className:`text-text-positive-weak text-xs font-medium`,children:[`Drag `,`'n'`,` drop files here, or click to select files`]}),(0,i.jsxs)(`p`,{className:`text-text-positive-muted text-xs`,children:[`You can upload`,g>1?` ${g===1/0?`multiple`:g}
+                      files (up to ${(0,r.formatBytes)(h)} each)`:` a file with ${(0,r.formatBytes)(h)}`]})]})]})]})}),C?.length?(0,i.jsxs)(`div`,{className:`h-fit w-full overflow-y-auto`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-2.5`,children:[(0,i.jsxs)(`div`,{className:`text-text-positive-weak flex items-center gap-1`,children:[(0,i.jsx)(o.Image,{size:16,"aria-hidden":`true`}),(0,i.jsxs)(`p`,{className:`text-sm`,children:[`Ảnh đã tải lên (`,C.length,`)`]})]}),(0,i.jsxs)(`button`,{className:`hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200`,onClick:()=>{C&&(C.forEach(e=>{f(e)&&URL.revokeObjectURL(e.preview)}),w([]),n?.([]))},children:[(0,i.jsx)(o.Trash2,{size:16,"aria-hidden":`true`}),(0,i.jsx)(`p`,{className:`text-sm`,children:`Xóa tất cả`})]})]}),(0,i.jsx)(`div`,{className:`flex flex-col gap-2.5`,children:C?.map((e,t)=>(0,i.jsx)(d,{file:e,onRemove:()=>E(t),progress:p?.[e.name]},t))})]}):null]})}function d({file:e,progress:a,onRemove:s}){return(0,i.jsxs)(`div`,{className:`border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors`,children:[(0,i.jsxs)(`div`,{className:`flex flex-1 gap-2.5`,children:[f(e)?(0,i.jsx)(p,{file:e}):null,(0,i.jsxs)(`div`,{className:`flex w-full flex-col gap-2`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-y-0.5`,children:[(0,i.jsx)(`p`,{className:`text-text-positive line-clamp-1 text-sm`,children:e.name}),(0,i.jsx)(`p`,{className:`text-text-positive-muted text-xs`,children:(0,r.formatBytes)(e.size)})]}),a?(0,i.jsx)(n.Progress,{value:a}):null]})]}),(0,i.jsx)(`div`,{className:`flex items-center gap-2`,children:(0,i.jsxs)(t.Button,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,className:`size-7`,onClick:s,children:[(0,i.jsx)(o.Trash2,{size:16,className:`text-text-positive-muted`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Remove file`})]})})]})}function f(e){return`preview`in e&&typeof e.preview==`string`}function p({file:e}){return e.type.startsWith(`image/`)?(0,i.jsx)(`img`,{src:e.preview,className:`border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm`}):(0,i.jsx)(o.FileText,{className:`text-text-positive-muted size-10 border`,"aria-hidden":`true`})}exports.FileUploader=u;
 //# sourceMappingURL=file-uploader.cjs.map

package/dist/ui/file-uploader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader.cjs","names":["React","Dropzone","Upload","Image","Trash2","Progress","Button","FileText"],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { FileText, Image, Trash2, Upload } from 'lucide-react'\nimport Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone'\nimport { toast } from 'sonner'\n\nimport { Button } from '@/components/ui/button'\nimport { Progress } from '@/components/ui/progress'\nimport { useControllableState } from '@customafk/react-toolkit/hooks/useControllableState'\nimport { cn, formatBytes } from '@customafk/react-toolkit/utils'\n\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Value of the uploader.\n   * @type File[]\n   * @default undefined\n   * @example value={files}\n   */\n  value?: File[]\n\n  /**\n   * Function to be called when the value changes.\n   * @type (files: File[]) => void\n   * @default undefined\n   * @example onValueChange={(files) => setFiles(files)}\n   */\n  onValueChange?: (files: File[]) => void\n\n  /**\n   * Function to be called when files are uploaded.\n   * @type (files: File[]) => Promise<void>\n   * @default undefined\n   * @example onUpload={(files) => uploadFiles(files)}\n   */\n  onUpload?: (files: File[]) => Promise<void>\n\n  /**\n   * Progress of the uploaded files.\n   * @type Record<string, number> | undefined\n   * @default undefined\n   * @example progresses={{ \"file1.png\": 50 }}\n   */\n  progresses?: Record<string, number>\n\n  /**\n   * Accepted file types for the uploader.\n   * @type { [key: string]: string[]}\n   * @default\n   * ```ts\n   * { \"image/*\": [] }\n   * ```\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\n   */\n  accept?: DropzoneProps['accept']\n\n  /**\n   * Maximum file size for the uploader.\n   * @type number | undefined\n   * @default 1024 * 1024 * 2 // 2MB\n   * @example maxSize={1024 * 1024 * 2} // 2MB\n   */\n  maxSize?: DropzoneProps['maxSize']\n\n  /**\n   * Maximum number of files for the uploader.\n   * @type number | undefined\n   * @default 1\n   * @example maxFileCount={4}\n   */\n  maxFileCount?: DropzoneProps['maxFiles']\n\n  /**\n   * Whether the uploader should accept multiple files.\n   * @type boolean\n   * @default false\n   * @example multiple\n   */\n  multiple?: boolean\n\n  /**\n   * Whether the uploader is disabled.\n   * @type boolean\n   * @default false\n   * @example disabled\n   */\n  disabled?: boolean\n\n  showText?: boolean\n  iconSize?: number\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const {\n    value: valueProp,\n    onValueChange,\n    onUpload,\n    progresses,\n    accept = {\n      'image/*': [],\n    },\n    maxSize = 1024 * 1024 * 2,\n    maxFileCount = 1,\n    multiple = false,\n    disabled = false,\n    showText = true,\n    iconSize,\n    className,\n    ...dropzoneProps\n  } = props\n\n  const [files, setFiles] = useControllableState({\n    prop: valueProp,\n    onChange: onValueChange,\n  })\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n        toast.error('Cannot upload more than 1 file at a time')\n\n        return\n      }\n\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n        toast.error(`Cannot upload more than ${maxFileCount} files`)\n        return\n      }\n\n      const newFiles = acceptedFiles.map((file) =>\n        Object.assign(file, {\n          preview: URL.createObjectURL(file),\n        }),\n      )\n\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles\n\n      setFiles(updatedFiles)\n\n      if (rejectedFiles.length > 0) {\n        rejectedFiles.forEach(({ file }) => {\n          toast.error(`File ${file.name} was rejected`)\n        })\n      }\n\n      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {\n        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`\n\n        onUpload(updatedFiles).then(() => {\n          setFiles([])\n          toast(`${target} uploaded`)\n        })\n      }\n    },\n\n    [files, maxFileCount, multiple, onUpload, setFiles],\n  )\n\n  function onRemove(index: number) {\n    if (!files) return\n\n    if (isFileWithPreview(files[index])) {\n      URL.revokeObjectURL(files[index].preview)\n    }\n\n    const newFiles = files.filter((_, i) => i !== index)\n    setFiles(newFiles)\n    onValueChange?.(newFiles)\n  }\n\n  // Revoke preview url when component unmounts\n  React.useEffect(() => {\n    return () => {\n      if (!files) return\n      files.forEach((file) => {\n        if (isFileWithPreview(file)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount\n\n  return (\n    <div className=\"relative flex w-full flex-col gap-6\">\n      <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 || multiple} disabled={isDisabled}>\n        {({ getRootProps, getInputProps, isDragActive }) => (\n          <div\n            {...getRootProps()}\n            className={cn(\n              'group',\n              'border-border-weak',\n              'hover:bg-border-weak/20',\n              'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',\n              'ring-offset-background',\n              'focus-visible:ring-primary-weak',\n              'focus-visible:ring-2',\n              'focus-visible:ring-offset-2',\n              'focus-visible:outline-hidden',\n              isDragActive && 'border-border-primary-strong bg-border-weak/40',\n              isDisabled && 'pointer-events-none opacity-60',\n              className,\n            )}\n            {...dropzoneProps}\n          >\n            <input {...getInputProps()} />\n            {isDragActive ? (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload className=\"text-text-positive-muted size-7\" aria-hidden=\"true\" />\n                </div>\n                <p className=\"text-text-positive-muted font-medium\">Drop the files here</p>\n              </div>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload size={iconSize || 24} className=\"text-muted-foreground\" aria-hidden=\"true\" />\n                </div>\n                {showText && (\n                  <div className=\"flex flex-col gap-px\">\n                    <p className=\"text-text-positive-weak text-xs font-medium\">Drag {`'n'`} drop files here, or click to select files</p>\n                    <p className=\"text-text-positive-muted text-xs\">\n                      You can upload\n                      {maxFileCount > 1\n                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}\n                      files (up to ${formatBytes(maxSize)} each)`\n                        : ` a file with ${formatBytes(maxSize)}`}\n                    </p>\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </Dropzone>\n      {files?.length ? (\n        <div className=\"h-fit w-full overflow-y-auto\">\n          <div className=\"flex items-center justify-between px-3 py-2.5\">\n            <div className=\"text-text-positive-weak flex items-center gap-1\">\n              <Image size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n            </div>\n            <button\n              className=\"hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200\"\n              onClick={() => {\n                if (!files) return\n                files.forEach((file) => {\n                  if (!isFileWithPreview(file)) return\n                  URL.revokeObjectURL(file.preview)\n                })\n                setFiles([])\n                onValueChange?.([])\n              }}\n            >\n              <Trash2 size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Xóa tất cả</p>\n            </button>\n          </div>\n          <div className=\"flex flex-col gap-2.5\">\n            {files?.map((file, index) => (\n              <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\ninterface FileCardProps {\n  file: File\n  onRemove: () => void\n  progress?: number\n}\n\nfunction FileCard({ file, progress, onRemove }: FileCardProps) {\n  return (\n    <div className=\"border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors\">\n      <div className=\"flex flex-1 gap-2.5\">\n        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\n        <div className=\"flex w-full flex-col gap-2\">\n          <div className=\"flex flex-col gap-y-0.5\">\n            <p className=\"text-text-positive line-clamp-1 text-sm\">{file.name}</p>\n            <p className=\"text-text-positive-muted text-xs\">{formatBytes(file.size)}</p>\n          </div>\n          {progress ? <Progress value={progress} /> : null}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"size-7\" onClick={onRemove}>\n          <Trash2 size={16} className=\"text-text-positive-muted\" aria-hidden=\"true\" />\n          <span className=\"sr-only\">Remove file</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nfunction isFileWithPreview(file: File): file is File & { preview: string } {\n  return 'preview' in file && typeof file.preview === 'string'\n}\n\ninterface FilePreviewProps {\n  file: File & { preview: string }\n}\n\nfunction FilePreview({ file }: FilePreviewProps) {\n  if (file.type.startsWith('image/')) {\n    return <img src={file.preview} className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\" />\n  }\n\n  return <FileText className=\"text-text-positive-muted size-10 border\" aria-hidden=\"true\" />\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-uploader.cjs","names":["React","Dropzone","Upload","Image","Trash2","Progress","Button","FileText"],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone'\nimport { useControllableState } from '@customafk/react-toolkit/hooks/useControllableState'\nimport { cn, formatBytes } from '@customafk/react-toolkit/utils'\n\nimport { FileText, Image, Trash2, Upload } from 'lucide-react'\nimport { toast } from 'sonner'\n\nimport { Button } from '@/components/ui/button'\nimport { Progress } from '@/components/ui/progress'\n\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Value of the uploader.\n   * @type File[]\n   * @default undefined\n   * @example value={files}\n   */\n  value?: File[]\n\n  /**\n   * Function to be called when the value changes.\n   * @type (files: File[]) => void\n   * @default undefined\n   * @example onValueChange={(files) => setFiles(files)}\n   */\n  onValueChange?: (files: File[]) => void\n\n  /**\n   * Function to be called when files are uploaded.\n   * @type (files: File[]) => Promise<void>\n   * @default undefined\n   * @example onUpload={(files) => uploadFiles(files)}\n   */\n  onUpload?: (files: File[]) => Promise<void>\n\n  /**\n   * Progress of the uploaded files.\n   * @type Record<string, number> | undefined\n   * @default undefined\n   * @example progresses={{ \"file1.png\": 50 }}\n   */\n  progresses?: Record<string, number>\n\n  /**\n   * Accepted file types for the uploader.\n   * @type { [key: string]: string[]}\n   * @default\n   * ```ts\n   * { \"image/*\": [] }\n   * ```\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\n   */\n  accept?: DropzoneProps['accept']\n\n  /**\n   * Maximum file size for the uploader.\n   * @type number | undefined\n   * @default 1024 * 1024 * 2 // 2MB\n   * @example maxSize={1024 * 1024 * 2} // 2MB\n   */\n  maxSize?: DropzoneProps['maxSize']\n\n  /**\n   * Maximum number of files for the uploader.\n   * @type number | undefined\n   * @default 1\n   * @example maxFileCount={4}\n   */\n  maxFileCount?: DropzoneProps['maxFiles']\n\n  /**\n   * Whether the uploader should accept multiple files.\n   * @type boolean\n   * @default false\n   * @example multiple\n   */\n  multiple?: boolean\n\n  /**\n   * Whether the uploader is disabled.\n   * @type boolean\n   * @default false\n   * @example disabled\n   */\n  disabled?: boolean\n\n  showText?: boolean\n  iconSize?: number\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const {\n    value: valueProp,\n    onValueChange,\n    onUpload,\n    progresses,\n    accept = {\n      'image/*': [],\n    },\n    maxSize = 1024 * 1024 * 2,\n    maxFileCount = 1,\n    multiple = false,\n    disabled = false,\n    showText = true,\n    iconSize,\n    className,\n    ...dropzoneProps\n  } = props\n\n  const [files, setFiles] = useControllableState({\n    prop: valueProp,\n    onChange: onValueChange,\n  })\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n        toast.error('Cannot upload more than 1 file at a time')\n\n        return\n      }\n\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n        toast.error(`Cannot upload more than ${maxFileCount} files`)\n        return\n      }\n\n      const newFiles = acceptedFiles.map((file) =>\n        Object.assign(file, {\n          preview: URL.createObjectURL(file),\n        }),\n      )\n\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles\n\n      setFiles(updatedFiles)\n\n      if (rejectedFiles.length > 0) {\n        rejectedFiles.forEach(({ file }) => {\n          toast.error(`File ${file.name} was rejected`)\n        })\n      }\n\n      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {\n        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`\n\n        onUpload(updatedFiles).then(() => {\n          setFiles([])\n          toast(`${target} uploaded`)\n        })\n      }\n    },\n\n    [files, maxFileCount, multiple, onUpload, setFiles],\n  )\n\n  function onRemove(index: number) {\n    if (!files) return\n\n    if (isFileWithPreview(files[index])) {\n      URL.revokeObjectURL(files[index].preview)\n    }\n\n    const newFiles = files.filter((_, i) => i !== index)\n    setFiles(newFiles)\n    onValueChange?.(newFiles)\n  }\n\n  // Revoke preview url when component unmounts\n  React.useEffect(() => {\n    return () => {\n      if (!files) return\n      files.forEach((file) => {\n        if (isFileWithPreview(file)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount\n\n  return (\n    <div className=\"relative flex w-full flex-col gap-6\">\n      <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 || multiple} disabled={isDisabled}>\n        {({ getRootProps, getInputProps, isDragActive }) => (\n          <div\n            {...getRootProps()}\n            className={cn(\n              'group',\n              'border-border-weak',\n              'hover:bg-border-weak/20',\n              'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',\n              'ring-offset-background',\n              'focus-visible:ring-primary-weak',\n              'focus-visible:ring-2',\n              'focus-visible:ring-offset-2',\n              'focus-visible:outline-hidden',\n              isDragActive && 'border-border-primary-strong bg-border-weak/40',\n              isDisabled && 'pointer-events-none opacity-60',\n              className,\n            )}\n            {...dropzoneProps}\n          >\n            <input {...getInputProps()} />\n            {isDragActive ? (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload className=\"text-text-positive-muted size-7\" aria-hidden=\"true\" />\n                </div>\n                <p className=\"text-text-positive-muted font-medium\">Drop the files here</p>\n              </div>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload size={iconSize || 24} className=\"text-muted-foreground\" aria-hidden=\"true\" />\n                </div>\n                {showText && (\n                  <div className=\"flex flex-col gap-px\">\n                    <p className=\"text-text-positive-weak text-xs font-medium\">Drag {`'n'`} drop files here, or click to select files</p>\n                    <p className=\"text-text-positive-muted text-xs\">\n                      You can upload\n                      {maxFileCount > 1\n                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}\n                      files (up to ${formatBytes(maxSize)} each)`\n                        : ` a file with ${formatBytes(maxSize)}`}\n                    </p>\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </Dropzone>\n      {files?.length ? (\n        <div className=\"h-fit w-full overflow-y-auto\">\n          <div className=\"flex items-center justify-between px-3 py-2.5\">\n            <div className=\"text-text-positive-weak flex items-center gap-1\">\n              <Image size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n            </div>\n            <button\n              className=\"hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200\"\n              onClick={() => {\n                if (!files) return\n                files.forEach((file) => {\n                  if (!isFileWithPreview(file)) return\n                  URL.revokeObjectURL(file.preview)\n                })\n                setFiles([])\n                onValueChange?.([])\n              }}\n            >\n              <Trash2 size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Xóa tất cả</p>\n            </button>\n          </div>\n          <div className=\"flex flex-col gap-2.5\">\n            {files?.map((file, index) => (\n              <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\ninterface FileCardProps {\n  file: File\n  onRemove: () => void\n  progress?: number\n}\n\nfunction FileCard({ file, progress, onRemove }: FileCardProps) {\n  return (\n    <div className=\"border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors\">\n      <div className=\"flex flex-1 gap-2.5\">\n        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\n        <div className=\"flex w-full flex-col gap-2\">\n          <div className=\"flex flex-col gap-y-0.5\">\n            <p className=\"text-text-positive line-clamp-1 text-sm\">{file.name}</p>\n            <p className=\"text-text-positive-muted text-xs\">{formatBytes(file.size)}</p>\n          </div>\n          {progress ? <Progress value={progress} /> : null}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"size-7\" onClick={onRemove}>\n          <Trash2 size={16} className=\"text-text-positive-muted\" aria-hidden=\"true\" />\n          <span className=\"sr-only\">Remove file</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nfunction isFileWithPreview(file: File): file is File & { preview: string } {\n  return 'preview' in file && typeof file.preview === 'string'\n}\n\ninterface FilePreviewProps {\n  file: File & { preview: string }\n}\n\nfunction FilePreview({ file }: FilePreviewProps) {\n  if (file.type.startsWith('image/')) {\n    return <img src={file.preview} className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\" />\n  }\n\n  return <FileText className=\"text-text-positive-muted size-10 border\" aria-hidden=\"true\" />\n}\n"],"mappings":"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"}

package/dist/ui/file-uploader.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime83 from "react/jsx-runtime";
+import * as react_jsx_runtime159 from "react/jsx-runtime";
 import React from "react";
 import { DropzoneProps } from "react-dropzone";
 
@@ -73,7 +73,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
   showText?: boolean;
   iconSize?: number;
 }
-declare function FileUploader(props: FileUploaderProps): react_jsx_runtime83.JSX.Element;
+declare function FileUploader(props: FileUploaderProps): react_jsx_runtime159.JSX.Element;
 //#endregion
 export { FileUploader };
 //# sourceMappingURL=file-uploader.d.cts.map

package/dist/ui/file-uploader.d.ts

@@ -1,5 +1,5 @@
+import * as react_jsx_runtime123 from "react/jsx-runtime";
 import React from "react";
-import * as react_jsx_runtime165 from "react/jsx-runtime";
 import { DropzoneProps } from "react-dropzone";
 
 //#region packages/components/ui/file-uploader.d.ts
@@ -73,7 +73,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
   showText?: boolean;
   iconSize?: number;
 }
-declare function FileUploader(props: FileUploaderProps): react_jsx_runtime165.JSX.Element;
+declare function FileUploader(props: FileUploaderProps): react_jsx_runtime123.JSX.Element;
 //#endregion
 export { FileUploader };
 //# sourceMappingURL=file-uploader.d.ts.map

package/dist/ui/file-uploader.js

@@ -1,3 +1,3 @@
-"use client";import{Button as e}from"../button-DL_i4AVi.js";import{Progress as t}from"../progress-DPisovgi.js";import n from"react";import{cn as r,formatBytes as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{FileText as s,Image as c,Trash2 as l,Upload as u}from"lucide-react";import d from"react-dropzone";import{toast as f}from"sonner";import{useControllableState as p}from"@customafk/react-toolkit/hooks/useControllableState";function m(e){let{value:t,onValueChange:s,onUpload:m,progresses:_,accept:v={"image/*":[]},maxSize:y=1024*1024*2,maxFileCount:b=1,multiple:x=!1,disabled:S=!1,showText:C=!0,iconSize:w,className:T,...E}=e,[D,O]=p({prop:t,onChange:s}),k=n.useCallback((e,t)=>{if(!x&&b===1&&e.length>1){f.error(`Cannot upload more than 1 file at a time`);return}if((D?.length??0)+e.length>b){f.error(`Cannot upload more than ${b} files`);return}let n=e.map(e=>Object.assign(e,{preview:URL.createObjectURL(e)})),r=D?[...D,...n]:n;if(O(r),t.length>0&&t.forEach(({file:e})=>{f.error(`File ${e.name} was rejected`)}),m&&r.length>0&&r.length<=b){let e=r.length>0?`${r.length} files`:`file`;m(r).then(()=>{O([]),f(`${e} uploaded`)})}},[D,b,x,m,O]);function A(e){if(!D)return;g(D[e])&&URL.revokeObjectURL(D[e].preview);let t=D.filter((t,n)=>n!==e);O(t),s?.(t)}n.useEffect(()=>()=>{D&&D.forEach(e=>{g(e)&&URL.revokeObjectURL(e.preview)})},[]);let j=S||(D?.length??0)>=b;return o(`div`,{className:`relative flex w-full flex-col gap-6`,children:[a(d,{onDrop:k,accept:v,maxSize:y,maxFiles:b,multiple:b>1||x,disabled:j,children:({getRootProps:e,getInputProps:t,isDragActive:n})=>o(`div`,{...e(),className:r(`group`,`border-border-weak`,`hover:bg-border-weak/20`,`relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition`,`ring-offset-background`,`focus-visible:ring-primary-weak`,`focus-visible:ring-2`,`focus-visible:ring-offset-2`,`focus-visible:outline-hidden`,n&&`border-border-primary-strong bg-border-weak/40`,j&&`pointer-events-none opacity-60`,T),...E,children:[a(`input`,{...t()}),n?o(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[a(`div`,{className:`rounded-full border border-dashed p-3`,children:a(u,{className:`text-text-positive-muted size-7`,"aria-hidden":`true`})}),a(`p`,{className:`text-text-positive-muted font-medium`,children:`Drop the files here`})]}):o(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[a(`div`,{className:`rounded-full border border-dashed p-3`,children:a(u,{size:w||24,className:`text-muted-foreground`,"aria-hidden":`true`})}),C&&o(`div`,{className:`flex flex-col gap-px`,children:[o(`p`,{className:`text-text-positive-weak text-xs font-medium`,children:[`Drag `,`'n'`,` drop files here, or click to select files`]}),o(`p`,{className:`text-text-positive-muted text-xs`,children:[`You can upload`,b>1?` ${b===1/0?`multiple`:b}
-                      files (up to ${i(y)} each)`:` a file with ${i(y)}`]})]})]})]})}),D?.length?o(`div`,{className:`h-fit w-full overflow-y-auto`,children:[o(`div`,{className:`flex items-center justify-between px-3 py-2.5`,children:[o(`div`,{className:`text-text-positive-weak flex items-center gap-1`,children:[a(c,{size:16,"aria-hidden":`true`}),o(`p`,{className:`text-sm`,children:[`Ảnh đã tải lên (`,D.length,`)`]})]}),o(`button`,{className:`hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200`,onClick:()=>{D&&(D.forEach(e=>{g(e)&&URL.revokeObjectURL(e.preview)}),O([]),s?.([]))},children:[a(l,{size:16,"aria-hidden":`true`}),a(`p`,{className:`text-sm`,children:`Xóa tất cả`})]})]}),a(`div`,{className:`flex flex-col gap-2.5`,children:D?.map((e,t)=>a(h,{file:e,onRemove:()=>A(t),progress:_?.[e.name]},t))})]}):null]})}function h({file:n,progress:r,onRemove:s}){return o(`div`,{className:`border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors`,children:[o(`div`,{className:`flex flex-1 gap-2.5`,children:[g(n)?a(_,{file:n}):null,o(`div`,{className:`flex w-full flex-col gap-2`,children:[o(`div`,{className:`flex flex-col gap-y-0.5`,children:[a(`p`,{className:`text-text-positive line-clamp-1 text-sm`,children:n.name}),a(`p`,{className:`text-text-positive-muted text-xs`,children:i(n.size)})]}),r?a(t,{value:r}):null]})]}),a(`div`,{className:`flex items-center gap-2`,children:o(e,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,className:`size-7`,onClick:s,children:[a(l,{size:16,className:`text-text-positive-muted`,"aria-hidden":`true`}),a(`span`,{className:`sr-only`,children:`Remove file`})]})})]})}function g(e){return`preview`in e&&typeof e.preview==`string`}function _({file:e}){return e.type.startsWith(`image/`)?a(`img`,{src:e.preview,className:`border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm`}):a(s,{className:`text-text-positive-muted size-10 border`,"aria-hidden":`true`})}export{m as FileUploader};
+"use client";import{Button as e}from"../button-DL_i4AVi.js";import{Progress as t}from"../progress-CMMXIQct.js";import{cn as n,formatBytes as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";import o from"react";import{FileText as s,Image as c,Trash2 as l,Upload as u}from"lucide-react";import d from"react-dropzone";import{useControllableState as f}from"@customafk/react-toolkit/hooks/useControllableState";import{toast as p}from"sonner";function m(e){let{value:t,onValueChange:s,onUpload:m,progresses:_,accept:v={"image/*":[]},maxSize:y=1024*1024*2,maxFileCount:b=1,multiple:x=!1,disabled:S=!1,showText:C=!0,iconSize:w,className:T,...E}=e,[D,O]=f({prop:t,onChange:s}),k=o.useCallback((e,t)=>{if(!x&&b===1&&e.length>1){p.error(`Cannot upload more than 1 file at a time`);return}if((D?.length??0)+e.length>b){p.error(`Cannot upload more than ${b} files`);return}let n=e.map(e=>Object.assign(e,{preview:URL.createObjectURL(e)})),r=D?[...D,...n]:n;if(O(r),t.length>0&&t.forEach(({file:e})=>{p.error(`File ${e.name} was rejected`)}),m&&r.length>0&&r.length<=b){let e=r.length>0?`${r.length} files`:`file`;m(r).then(()=>{O([]),p(`${e} uploaded`)})}},[D,b,x,m,O]);function A(e){if(!D)return;g(D[e])&&URL.revokeObjectURL(D[e].preview);let t=D.filter((t,n)=>n!==e);O(t),s?.(t)}o.useEffect(()=>()=>{D&&D.forEach(e=>{g(e)&&URL.revokeObjectURL(e.preview)})},[]);let j=S||(D?.length??0)>=b;return a(`div`,{className:`relative flex w-full flex-col gap-6`,children:[i(d,{onDrop:k,accept:v,maxSize:y,maxFiles:b,multiple:b>1||x,disabled:j,children:({getRootProps:e,getInputProps:t,isDragActive:o})=>a(`div`,{...e(),className:n(`group`,`border-border-weak`,`hover:bg-border-weak/20`,`relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition`,`ring-offset-background`,`focus-visible:ring-primary-weak`,`focus-visible:ring-2`,`focus-visible:ring-offset-2`,`focus-visible:outline-hidden`,o&&`border-border-primary-strong bg-border-weak/40`,j&&`pointer-events-none opacity-60`,T),...E,children:[i(`input`,{...t()}),o?a(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[i(`div`,{className:`rounded-full border border-dashed p-3`,children:i(u,{className:`text-text-positive-muted size-7`,"aria-hidden":`true`})}),i(`p`,{className:`text-text-positive-muted font-medium`,children:`Drop the files here`})]}):a(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[i(`div`,{className:`rounded-full border border-dashed p-3`,children:i(u,{size:w||24,className:`text-muted-foreground`,"aria-hidden":`true`})}),C&&a(`div`,{className:`flex flex-col gap-px`,children:[a(`p`,{className:`text-text-positive-weak text-xs font-medium`,children:[`Drag `,`'n'`,` drop files here, or click to select files`]}),a(`p`,{className:`text-text-positive-muted text-xs`,children:[`You can upload`,b>1?` ${b===1/0?`multiple`:b}
+                      files (up to ${r(y)} each)`:` a file with ${r(y)}`]})]})]})]})}),D?.length?a(`div`,{className:`h-fit w-full overflow-y-auto`,children:[a(`div`,{className:`flex items-center justify-between px-3 py-2.5`,children:[a(`div`,{className:`text-text-positive-weak flex items-center gap-1`,children:[i(c,{size:16,"aria-hidden":`true`}),a(`p`,{className:`text-sm`,children:[`Ảnh đã tải lên (`,D.length,`)`]})]}),a(`button`,{className:`hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200`,onClick:()=>{D&&(D.forEach(e=>{g(e)&&URL.revokeObjectURL(e.preview)}),O([]),s?.([]))},children:[i(l,{size:16,"aria-hidden":`true`}),i(`p`,{className:`text-sm`,children:`Xóa tất cả`})]})]}),i(`div`,{className:`flex flex-col gap-2.5`,children:D?.map((e,t)=>i(h,{file:e,onRemove:()=>A(t),progress:_?.[e.name]},t))})]}):null]})}function h({file:n,progress:o,onRemove:s}){return a(`div`,{className:`border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors`,children:[a(`div`,{className:`flex flex-1 gap-2.5`,children:[g(n)?i(_,{file:n}):null,a(`div`,{className:`flex w-full flex-col gap-2`,children:[a(`div`,{className:`flex flex-col gap-y-0.5`,children:[i(`p`,{className:`text-text-positive line-clamp-1 text-sm`,children:n.name}),i(`p`,{className:`text-text-positive-muted text-xs`,children:r(n.size)})]}),o?i(t,{value:o}):null]})]}),i(`div`,{className:`flex items-center gap-2`,children:a(e,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,className:`size-7`,onClick:s,children:[i(l,{size:16,className:`text-text-positive-muted`,"aria-hidden":`true`}),i(`span`,{className:`sr-only`,children:`Remove file`})]})})]})}function g(e){return`preview`in e&&typeof e.preview==`string`}function _({file:e}){return e.type.startsWith(`image/`)?i(`img`,{src:e.preview,className:`border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm`}):i(s,{className:`text-text-positive-muted size-10 border`,"aria-hidden":`true`})}export{m as FileUploader};
 //# sourceMappingURL=file-uploader.js.map

package/dist/ui/file-uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader.js","names":[],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { FileText, Image, Trash2, Upload } from 'lucide-react'\nimport Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone'\nimport { toast } from 'sonner'\n\nimport { Button } from '@/components/ui/button'\nimport { Progress } from '@/components/ui/progress'\nimport { useControllableState } from '@customafk/react-toolkit/hooks/useControllableState'\nimport { cn, formatBytes } from '@customafk/react-toolkit/utils'\n\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Value of the uploader.\n   * @type File[]\n   * @default undefined\n   * @example value={files}\n   */\n  value?: File[]\n\n  /**\n   * Function to be called when the value changes.\n   * @type (files: File[]) => void\n   * @default undefined\n   * @example onValueChange={(files) => setFiles(files)}\n   */\n  onValueChange?: (files: File[]) => void\n\n  /**\n   * Function to be called when files are uploaded.\n   * @type (files: File[]) => Promise<void>\n   * @default undefined\n   * @example onUpload={(files) => uploadFiles(files)}\n   */\n  onUpload?: (files: File[]) => Promise<void>\n\n  /**\n   * Progress of the uploaded files.\n   * @type Record<string, number> | undefined\n   * @default undefined\n   * @example progresses={{ \"file1.png\": 50 }}\n   */\n  progresses?: Record<string, number>\n\n  /**\n   * Accepted file types for the uploader.\n   * @type { [key: string]: string[]}\n   * @default\n   * ```ts\n   * { \"image/*\": [] }\n   * ```\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\n   */\n  accept?: DropzoneProps['accept']\n\n  /**\n   * Maximum file size for the uploader.\n   * @type number | undefined\n   * @default 1024 * 1024 * 2 // 2MB\n   * @example maxSize={1024 * 1024 * 2} // 2MB\n   */\n  maxSize?: DropzoneProps['maxSize']\n\n  /**\n   * Maximum number of files for the uploader.\n   * @type number | undefined\n   * @default 1\n   * @example maxFileCount={4}\n   */\n  maxFileCount?: DropzoneProps['maxFiles']\n\n  /**\n   * Whether the uploader should accept multiple files.\n   * @type boolean\n   * @default false\n   * @example multiple\n   */\n  multiple?: boolean\n\n  /**\n   * Whether the uploader is disabled.\n   * @type boolean\n   * @default false\n   * @example disabled\n   */\n  disabled?: boolean\n\n  showText?: boolean\n  iconSize?: number\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const {\n    value: valueProp,\n    onValueChange,\n    onUpload,\n    progresses,\n    accept = {\n      'image/*': [],\n    },\n    maxSize = 1024 * 1024 * 2,\n    maxFileCount = 1,\n    multiple = false,\n    disabled = false,\n    showText = true,\n    iconSize,\n    className,\n    ...dropzoneProps\n  } = props\n\n  const [files, setFiles] = useControllableState({\n    prop: valueProp,\n    onChange: onValueChange,\n  })\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n        toast.error('Cannot upload more than 1 file at a time')\n\n        return\n      }\n\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n        toast.error(`Cannot upload more than ${maxFileCount} files`)\n        return\n      }\n\n      const newFiles = acceptedFiles.map((file) =>\n        Object.assign(file, {\n          preview: URL.createObjectURL(file),\n        }),\n      )\n\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles\n\n      setFiles(updatedFiles)\n\n      if (rejectedFiles.length > 0) {\n        rejectedFiles.forEach(({ file }) => {\n          toast.error(`File ${file.name} was rejected`)\n        })\n      }\n\n      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {\n        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`\n\n        onUpload(updatedFiles).then(() => {\n          setFiles([])\n          toast(`${target} uploaded`)\n        })\n      }\n    },\n\n    [files, maxFileCount, multiple, onUpload, setFiles],\n  )\n\n  function onRemove(index: number) {\n    if (!files) return\n\n    if (isFileWithPreview(files[index])) {\n      URL.revokeObjectURL(files[index].preview)\n    }\n\n    const newFiles = files.filter((_, i) => i !== index)\n    setFiles(newFiles)\n    onValueChange?.(newFiles)\n  }\n\n  // Revoke preview url when component unmounts\n  React.useEffect(() => {\n    return () => {\n      if (!files) return\n      files.forEach((file) => {\n        if (isFileWithPreview(file)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount\n\n  return (\n    <div className=\"relative flex w-full flex-col gap-6\">\n      <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 || multiple} disabled={isDisabled}>\n        {({ getRootProps, getInputProps, isDragActive }) => (\n          <div\n            {...getRootProps()}\n            className={cn(\n              'group',\n              'border-border-weak',\n              'hover:bg-border-weak/20',\n              'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',\n              'ring-offset-background',\n              'focus-visible:ring-primary-weak',\n              'focus-visible:ring-2',\n              'focus-visible:ring-offset-2',\n              'focus-visible:outline-hidden',\n              isDragActive && 'border-border-primary-strong bg-border-weak/40',\n              isDisabled && 'pointer-events-none opacity-60',\n              className,\n            )}\n            {...dropzoneProps}\n          >\n            <input {...getInputProps()} />\n            {isDragActive ? (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload className=\"text-text-positive-muted size-7\" aria-hidden=\"true\" />\n                </div>\n                <p className=\"text-text-positive-muted font-medium\">Drop the files here</p>\n              </div>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload size={iconSize || 24} className=\"text-muted-foreground\" aria-hidden=\"true\" />\n                </div>\n                {showText && (\n                  <div className=\"flex flex-col gap-px\">\n                    <p className=\"text-text-positive-weak text-xs font-medium\">Drag {`'n'`} drop files here, or click to select files</p>\n                    <p className=\"text-text-positive-muted text-xs\">\n                      You can upload\n                      {maxFileCount > 1\n                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}\n                      files (up to ${formatBytes(maxSize)} each)`\n                        : ` a file with ${formatBytes(maxSize)}`}\n                    </p>\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </Dropzone>\n      {files?.length ? (\n        <div className=\"h-fit w-full overflow-y-auto\">\n          <div className=\"flex items-center justify-between px-3 py-2.5\">\n            <div className=\"text-text-positive-weak flex items-center gap-1\">\n              <Image size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n            </div>\n            <button\n              className=\"hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200\"\n              onClick={() => {\n                if (!files) return\n                files.forEach((file) => {\n                  if (!isFileWithPreview(file)) return\n                  URL.revokeObjectURL(file.preview)\n                })\n                setFiles([])\n                onValueChange?.([])\n              }}\n            >\n              <Trash2 size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Xóa tất cả</p>\n            </button>\n          </div>\n          <div className=\"flex flex-col gap-2.5\">\n            {files?.map((file, index) => (\n              <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\ninterface FileCardProps {\n  file: File\n  onRemove: () => void\n  progress?: number\n}\n\nfunction FileCard({ file, progress, onRemove }: FileCardProps) {\n  return (\n    <div className=\"border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors\">\n      <div className=\"flex flex-1 gap-2.5\">\n        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\n        <div className=\"flex w-full flex-col gap-2\">\n          <div className=\"flex flex-col gap-y-0.5\">\n            <p className=\"text-text-positive line-clamp-1 text-sm\">{file.name}</p>\n            <p className=\"text-text-positive-muted text-xs\">{formatBytes(file.size)}</p>\n          </div>\n          {progress ? <Progress value={progress} /> : null}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"size-7\" onClick={onRemove}>\n          <Trash2 size={16} className=\"text-text-positive-muted\" aria-hidden=\"true\" />\n          <span className=\"sr-only\">Remove file</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nfunction isFileWithPreview(file: File): file is File & { preview: string } {\n  return 'preview' in file && typeof file.preview === 'string'\n}\n\ninterface FilePreviewProps {\n  file: File & { preview: string }\n}\n\nfunction FilePreview({ file }: FilePreviewProps) {\n  if (file.type.startsWith('image/')) {\n    return <img src={file.preview} className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\" />\n  }\n\n  return <FileText className=\"text-text-positive-muted size-10 border\" aria-hidden=\"true\" />\n}\n"],"mappings":"8dA2FA,SAAgB,EAAa,EAA0B,CACrD,GAAM,CACJ,MAAO,EACP,gBACA,WACA,aACA,SAAS,CACP,UAAW,IAEb,UAAU,KAAO,KAAO,EACxB,eAAe,EACf,WAAW,GACX,WAAW,GACX,WAAW,GACX,WACA,YACA,GAAG,GACD,EAEE,CAAC,EAAO,GAAY,EAAqB,CAC7C,KAAM,EACN,SAAU,IAGN,EAAS,EAAM,aAClB,EAAuB,IAAmC,CACzD,GAAI,CAAC,GAAY,IAAiB,GAAK,EAAc,OAAS,EAAG,CAC/D,EAAM,MAAM,4CAEZ,OAGF,IAAK,GAAO,QAAU,GAAK,EAAc,OAAS,EAAc,CAC9D,EAAM,MAAM,2BAA2B,EAAa,SACpD,OAGF,IAAM,EAAW,EAAc,IAAK,GAClC,OAAO,OAAO,EAAM,CAClB,QAAS,IAAI,gBAAgB,MAI3B,EAAe,EAAQ,CAAC,GAAG,EAAO,GAAG,GAAY,EAUvD,GARA,EAAS,GAEL,EAAc,OAAS,GACzB,EAAc,SAAS,CAAE,UAAW,CAClC,EAAM,MAAM,QAAQ,EAAK,KAAK,kBAI9B,GAAY,EAAa,OAAS,GAAK,EAAa,QAAU,EAAc,CAC9E,IAAM,EAAS,EAAa,OAAS,EAAI,GAAG,EAAa,OAAO,QAAU,OAE1E,EAAS,GAAc,SAAW,CAChC,EAAS,IACT,EAAM,GAAG,EAAO,gBAKtB,CAAC,EAAO,EAAc,EAAU,EAAU,IAG5C,SAAS,EAAS,EAAe,CAC/B,GAAI,CAAC,EAAO,OAER,EAAkB,EAAM,KAC1B,IAAI,gBAAgB,EAAM,GAAO,SAGnC,IAAM,EAAW,EAAM,QAAQ,EAAG,IAAM,IAAM,GAC9C,EAAS,GACT,IAAgB,GAIlB,EAAM,kBACS,CACN,GACL,EAAM,QAAS,GAAS,CAClB,EAAkB,IACpB,IAAI,gBAAgB,EAAK,YAK9B,IAEH,IAAM,EAAa,IAAa,GAAO,QAAU,IAAM,EAEvD,OACE,EAAC,MAAA,CAAI,UAAU,gDACb,EAAC,EAAA,CAAiB,SAAgB,SAAiB,UAAS,SAAU,EAAc,SAAU,EAAe,GAAK,EAAU,SAAU,YAClI,CAAE,eAAc,gBAAe,kBAC/B,EAAC,MAAA,CACC,GAAI,IACJ,UAAW,EACT,QACA,qBACA,0BACA,mIACA,yBACA,kCACA,uBACA,8BACA,+BACA,GAAgB,iDAChB,GAAc,iCACd,GAEF,GAAI,YAEJ,EAAC,QAAA,CAAM,GAAI,MACV,EACC,EAAC,MAAA,CAAI,UAAU,oEACb,EAAC,MAAA,CAAI,UAAU,iDACb,EAAC,EAAA,CAAO,UAAU,kCAAkC,cAAY,WAElE,EAAC,IAAA,CAAE,UAAU,gDAAuC,2BAGtD,EAAC,MAAA,CAAI,UAAU,oEACb,EAAC,MAAA,CAAI,UAAU,iDACb,EAAC,EAAA,CAAO,KAAM,GAAY,GAAI,UAAU,wBAAwB,cAAY,WAE7E,GACC,EAAC,MAAA,CAAI,UAAU,iCACb,EAAC,IAAA,CAAE,UAAU,wDAA8C,QAAM,MAAM,gDACvE,EAAC,IAAA,CAAE,UAAU,6CAAmC,iBAE7C,EAAe,EACZ,IAAI,IAAiB,IAAW,WAAa,EAAa;qCAC/C,EAAY,GAAS,QAChC,gBAAgB,EAAY,mBAS/C,GAAO,OACN,EAAC,MAAA,CAAI,UAAU,yCACb,EAAC,MAAA,CAAI,UAAU,0DACb,EAAC,MAAA,CAAI,UAAU,4DACb,EAAC,EAAA,CAAM,KAAM,GAAI,cAAY,SAC7B,EAAC,IAAA,CAAE,UAAU,oBAAU,mBAAiB,EAAM,OAAO,UAEvD,EAAC,SAAA,CACC,UAAU,0HACV,YAAe,CACR,IACL,EAAM,QAAS,GAAS,CACjB,EAAkB,IACvB,IAAI,gBAAgB,EAAK,WAE3B,EAAS,IACT,IAAgB,gBAGlB,EAAC,EAAA,CAAO,KAAM,GAAI,cAAY,SAC9B,EAAC,IAAA,CAAE,UAAU,mBAAU,qBAG3B,EAAC,MAAA,CAAI,UAAU,iCACZ,GAAO,KAAK,EAAM,IACjB,EAAC,EAAA,CAA2B,OAAM,aAAgB,EAAS,GAAQ,SAAU,IAAa,EAAK,OAAhF,SAInB,QAWV,SAAS,EAAS,CAAE,OAAM,WAAU,YAA2B,CAC7D,OACE,EAAC,MAAA,CAAI,UAAU,iJACb,EAAC,MAAA,CAAI,UAAU,gCACZ,EAAkB,GAAQ,EAAC,EAAA,CAAkB,SAAW,KACzD,EAAC,MAAA,CAAI,UAAU,uCACb,EAAC,MAAA,CAAI,UAAU,oCACb,EAAC,IAAA,CAAE,UAAU,mDAA2C,EAAK,OAC7D,EAAC,IAAA,CAAE,UAAU,4CAAoC,EAAY,EAAK,WAEnE,EAAW,EAAC,EAAA,CAAS,MAAO,IAAe,WAGhD,EAAC,MAAA,CAAI,UAAU,mCACb,EAAC,EAAA,CAAO,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,UAAU,SAAS,QAAS,YAC9F,EAAC,EAAA,CAAO,KAAM,GAAI,UAAU,2BAA2B,cAAY,SACnE,EAAC,OAAA,CAAK,UAAU,mBAAU,wBAOpC,SAAS,EAAkB,EAAgD,CACzE,MAAO,YAAa,GAAQ,OAAO,EAAK,SAAY,SAOtD,SAAS,EAAY,CAAE,QAA0B,CAK/C,OAJI,EAAK,KAAK,WAAW,UAChB,EAAC,MAAA,CAAI,IAAK,EAAK,QAAS,UAAU,kGAGpC,EAAC,EAAA,CAAS,UAAU,0CAA0C,cAAY"}
+{"version":3,"file":"file-uploader.js","names":[],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone'\nimport { useControllableState } from '@customafk/react-toolkit/hooks/useControllableState'\nimport { cn, formatBytes } from '@customafk/react-toolkit/utils'\n\nimport { FileText, Image, Trash2, Upload } from 'lucide-react'\nimport { toast } from 'sonner'\n\nimport { Button } from '@/components/ui/button'\nimport { Progress } from '@/components/ui/progress'\n\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Value of the uploader.\n   * @type File[]\n   * @default undefined\n   * @example value={files}\n   */\n  value?: File[]\n\n  /**\n   * Function to be called when the value changes.\n   * @type (files: File[]) => void\n   * @default undefined\n   * @example onValueChange={(files) => setFiles(files)}\n   */\n  onValueChange?: (files: File[]) => void\n\n  /**\n   * Function to be called when files are uploaded.\n   * @type (files: File[]) => Promise<void>\n   * @default undefined\n   * @example onUpload={(files) => uploadFiles(files)}\n   */\n  onUpload?: (files: File[]) => Promise<void>\n\n  /**\n   * Progress of the uploaded files.\n   * @type Record<string, number> | undefined\n   * @default undefined\n   * @example progresses={{ \"file1.png\": 50 }}\n   */\n  progresses?: Record<string, number>\n\n  /**\n   * Accepted file types for the uploader.\n   * @type { [key: string]: string[]}\n   * @default\n   * ```ts\n   * { \"image/*\": [] }\n   * ```\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\n   */\n  accept?: DropzoneProps['accept']\n\n  /**\n   * Maximum file size for the uploader.\n   * @type number | undefined\n   * @default 1024 * 1024 * 2 // 2MB\n   * @example maxSize={1024 * 1024 * 2} // 2MB\n   */\n  maxSize?: DropzoneProps['maxSize']\n\n  /**\n   * Maximum number of files for the uploader.\n   * @type number | undefined\n   * @default 1\n   * @example maxFileCount={4}\n   */\n  maxFileCount?: DropzoneProps['maxFiles']\n\n  /**\n   * Whether the uploader should accept multiple files.\n   * @type boolean\n   * @default false\n   * @example multiple\n   */\n  multiple?: boolean\n\n  /**\n   * Whether the uploader is disabled.\n   * @type boolean\n   * @default false\n   * @example disabled\n   */\n  disabled?: boolean\n\n  showText?: boolean\n  iconSize?: number\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const {\n    value: valueProp,\n    onValueChange,\n    onUpload,\n    progresses,\n    accept = {\n      'image/*': [],\n    },\n    maxSize = 1024 * 1024 * 2,\n    maxFileCount = 1,\n    multiple = false,\n    disabled = false,\n    showText = true,\n    iconSize,\n    className,\n    ...dropzoneProps\n  } = props\n\n  const [files, setFiles] = useControllableState({\n    prop: valueProp,\n    onChange: onValueChange,\n  })\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n        toast.error('Cannot upload more than 1 file at a time')\n\n        return\n      }\n\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n        toast.error(`Cannot upload more than ${maxFileCount} files`)\n        return\n      }\n\n      const newFiles = acceptedFiles.map((file) =>\n        Object.assign(file, {\n          preview: URL.createObjectURL(file),\n        }),\n      )\n\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles\n\n      setFiles(updatedFiles)\n\n      if (rejectedFiles.length > 0) {\n        rejectedFiles.forEach(({ file }) => {\n          toast.error(`File ${file.name} was rejected`)\n        })\n      }\n\n      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {\n        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`\n\n        onUpload(updatedFiles).then(() => {\n          setFiles([])\n          toast(`${target} uploaded`)\n        })\n      }\n    },\n\n    [files, maxFileCount, multiple, onUpload, setFiles],\n  )\n\n  function onRemove(index: number) {\n    if (!files) return\n\n    if (isFileWithPreview(files[index])) {\n      URL.revokeObjectURL(files[index].preview)\n    }\n\n    const newFiles = files.filter((_, i) => i !== index)\n    setFiles(newFiles)\n    onValueChange?.(newFiles)\n  }\n\n  // Revoke preview url when component unmounts\n  React.useEffect(() => {\n    return () => {\n      if (!files) return\n      files.forEach((file) => {\n        if (isFileWithPreview(file)) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount\n\n  return (\n    <div className=\"relative flex w-full flex-col gap-6\">\n      <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 || multiple} disabled={isDisabled}>\n        {({ getRootProps, getInputProps, isDragActive }) => (\n          <div\n            {...getRootProps()}\n            className={cn(\n              'group',\n              'border-border-weak',\n              'hover:bg-border-weak/20',\n              'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',\n              'ring-offset-background',\n              'focus-visible:ring-primary-weak',\n              'focus-visible:ring-2',\n              'focus-visible:ring-offset-2',\n              'focus-visible:outline-hidden',\n              isDragActive && 'border-border-primary-strong bg-border-weak/40',\n              isDisabled && 'pointer-events-none opacity-60',\n              className,\n            )}\n            {...dropzoneProps}\n          >\n            <input {...getInputProps()} />\n            {isDragActive ? (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload className=\"text-text-positive-muted size-7\" aria-hidden=\"true\" />\n                </div>\n                <p className=\"text-text-positive-muted font-medium\">Drop the files here</p>\n              </div>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n                <div className=\"rounded-full border border-dashed p-3\">\n                  <Upload size={iconSize || 24} className=\"text-muted-foreground\" aria-hidden=\"true\" />\n                </div>\n                {showText && (\n                  <div className=\"flex flex-col gap-px\">\n                    <p className=\"text-text-positive-weak text-xs font-medium\">Drag {`'n'`} drop files here, or click to select files</p>\n                    <p className=\"text-text-positive-muted text-xs\">\n                      You can upload\n                      {maxFileCount > 1\n                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}\n                      files (up to ${formatBytes(maxSize)} each)`\n                        : ` a file with ${formatBytes(maxSize)}`}\n                    </p>\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </Dropzone>\n      {files?.length ? (\n        <div className=\"h-fit w-full overflow-y-auto\">\n          <div className=\"flex items-center justify-between px-3 py-2.5\">\n            <div className=\"text-text-positive-weak flex items-center gap-1\">\n              <Image size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n            </div>\n            <button\n              className=\"hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200\"\n              onClick={() => {\n                if (!files) return\n                files.forEach((file) => {\n                  if (!isFileWithPreview(file)) return\n                  URL.revokeObjectURL(file.preview)\n                })\n                setFiles([])\n                onValueChange?.([])\n              }}\n            >\n              <Trash2 size={16} aria-hidden=\"true\" />\n              <p className=\"text-sm\">Xóa tất cả</p>\n            </button>\n          </div>\n          <div className=\"flex flex-col gap-2.5\">\n            {files?.map((file, index) => (\n              <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\ninterface FileCardProps {\n  file: File\n  onRemove: () => void\n  progress?: number\n}\n\nfunction FileCard({ file, progress, onRemove }: FileCardProps) {\n  return (\n    <div className=\"border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors\">\n      <div className=\"flex flex-1 gap-2.5\">\n        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\n        <div className=\"flex w-full flex-col gap-2\">\n          <div className=\"flex flex-col gap-y-0.5\">\n            <p className=\"text-text-positive line-clamp-1 text-sm\">{file.name}</p>\n            <p className=\"text-text-positive-muted text-xs\">{formatBytes(file.size)}</p>\n          </div>\n          {progress ? <Progress value={progress} /> : null}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"size-7\" onClick={onRemove}>\n          <Trash2 size={16} className=\"text-text-positive-muted\" aria-hidden=\"true\" />\n          <span className=\"sr-only\">Remove file</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nfunction isFileWithPreview(file: File): file is File & { preview: string } {\n  return 'preview' in file && typeof file.preview === 'string'\n}\n\ninterface FilePreviewProps {\n  file: File & { preview: string }\n}\n\nfunction FilePreview({ file }: FilePreviewProps) {\n  if (file.type.startsWith('image/')) {\n    return <img src={file.preview} className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\" />\n  }\n\n  return <FileText className=\"text-text-positive-muted size-10 border\" aria-hidden=\"true\" />\n}\n"],"mappings":"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"}

package/dist/ui/form.cjs

@@ -1 +1 @@
-"use client";require(`../label-3eYQRRYp.cjs`);const e=require(`../form-CXu8t0VS.cjs`);exports.Form=e.Form,exports.FormControl=e.FormControl,exports.FormDescription=e.FormDescription,exports.FormField=e.FormField,exports.FormItem=e.FormItem,exports.FormLabel=e.FormLabel,exports.FormMessage=e.FormMessage,exports.useFormField=e.useFormField;
+"use client";require(`../label-BvHMsK0O.cjs`);const e=require(`../form-Dcd2HzUB.cjs`);exports.Form=e.Form,exports.FormControl=e.FormControl,exports.FormDescription=e.FormDescription,exports.FormField=e.FormField,exports.FormItem=e.FormItem,exports.FormLabel=e.FormLabel,exports.FormMessage=e.FormMessage,exports.useFormField=e.useFormField;

package/dist/ui/form.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime97 from "react/jsx-runtime";
+import * as react_jsx_runtime94 from "react/jsx-runtime";
 import React from "react";
 import { Label, Slot } from "radix-ui";
 import * as react_hook_form0 from "react-hook-form";
@@ -8,7 +8,7 @@ import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
   ...props
-}: ControllerProps<TFieldValues, TName>) => react_jsx_runtime97.JSX.Element;
+}: ControllerProps<TFieldValues, TName>) => react_jsx_runtime94.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
   isDirty: boolean;
@@ -26,23 +26,23 @@ declare const useFormField: () => {
 declare function FormItem({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime97.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime94.JSX.Element;
 declare function FormLabel({
   className,
   ...props
-}: React.ComponentProps<typeof Label.Root>): react_jsx_runtime97.JSX.Element;
+}: React.ComponentProps<typeof Label.Root>): react_jsx_runtime94.JSX.Element;
 declare function FormControl({
   ...props
-}: React.ComponentProps<typeof Slot.Slot>): react_jsx_runtime97.JSX.Element;
+}: React.ComponentProps<typeof Slot.Slot>): react_jsx_runtime94.JSX.Element;
 declare function FormDescription({
   className,
   ...props
-}: React.ComponentProps<'p'>): react_jsx_runtime97.JSX.Element;
+}: React.ComponentProps<'p'>): react_jsx_runtime94.JSX.Element;
 declare function FormMessage({
   className,
   children,
   ...props
-}: React.ComponentProps<'p'>): react_jsx_runtime97.JSX.Element;
+}: React.ComponentProps<'p'>): react_jsx_runtime94.JSX.Element;
 //#endregion
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
 //# sourceMappingURL=form.d.cts.map

package/dist/ui/form.d.ts

@@ -1,5 +1,5 @@
+import * as react_jsx_runtime103 from "react/jsx-runtime";
 import React from "react";
-import * as react_jsx_runtime130 from "react/jsx-runtime";
 import { Label, Slot } from "radix-ui";
 import * as react_hook_form0 from "react-hook-form";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
@@ -8,7 +8,7 @@ import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
   ...props
-}: ControllerProps<TFieldValues, TName>) => react_jsx_runtime130.JSX.Element;
+}: ControllerProps<TFieldValues, TName>) => react_jsx_runtime103.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
   isDirty: boolean;
@@ -26,23 +26,23 @@ declare const useFormField: () => {
 declare function FormItem({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime130.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime103.JSX.Element;
 declare function FormLabel({
   className,
   ...props
-}: React.ComponentProps<typeof Label.Root>): react_jsx_runtime130.JSX.Element;
+}: React.ComponentProps<typeof Label.Root>): react_jsx_runtime103.JSX.Element;
 declare function FormControl({
   ...props
-}: React.ComponentProps<typeof Slot.Slot>): react_jsx_runtime130.JSX.Element;
+}: React.ComponentProps<typeof Slot.Slot>): react_jsx_runtime103.JSX.Element;
 declare function FormDescription({
   className,
   ...props
-}: React.ComponentProps<'p'>): react_jsx_runtime130.JSX.Element;
+}: React.ComponentProps<'p'>): react_jsx_runtime103.JSX.Element;
 declare function FormMessage({
   className,
   children,
   ...props
-}: React.ComponentProps<'p'>): react_jsx_runtime130.JSX.Element;
+}: React.ComponentProps<'p'>): react_jsx_runtime103.JSX.Element;
 //#endregion
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
 //# sourceMappingURL=form.d.ts.map

package/dist/ui/form.js

@@ -1 +1 @@
-"use client";import"../label-BQ52Pjw-.js";import{Form as e,FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o,useFormField as s}from"../form-BzvxUv0a.js";export{e as Form,t as FormControl,n as FormDescription,r as FormField,i as FormItem,a as FormLabel,o as FormMessage,s as useFormField};
+"use client";import"../label-BpefWj7m.js";import{Form as e,FormControl as t,FormDescription as n,FormField as r,FormItem as i,FormLabel as a,FormMessage as o,useFormField as s}from"../form-RRTCXIG6.js";export{e as Form,t as FormControl,n as FormDescription,r as FormField,i as FormItem,a as FormLabel,o as FormMessage,s as useFormField};

package/dist/ui/hover-card.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=e.__toESM(require(`react`)),n=e.__toESM(require(`@customafk/react-toolkit/utils`)),r=e.__toESM(require(`react/jsx-runtime`)),i=e.__toESM(require(`radix-ui`));function a({...e}){return(0,r.jsx)(i.HoverCard.Root,{"data-slot":`hover-card`,...e})}function o({...e}){return(0,r.jsx)(i.HoverCard.Trigger,{"data-slot":`hover-card-trigger`,...e})}function s({className:e,align:t=`center`,sideOffset:a=4,...o}){return(0,r.jsx)(i.HoverCard.Portal,{"data-slot":`hover-card-portal`,children:(0,r.jsx)(i.HoverCard.Content,{"data-slot":`hover-card-content`,align:t,sideOffset:a,className:(0,n.cn)(`bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden`,e),...o})})}exports.HoverCard=a,exports.HoverCardContent=s,exports.HoverCardTrigger=o;
+"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=e.__toESM(require(`@customafk/react-toolkit/utils`)),n=e.__toESM(require(`react/jsx-runtime`)),r=e.__toESM(require(`react`)),i=e.__toESM(require(`radix-ui`));function a({...e}){return(0,n.jsx)(i.HoverCard.Root,{"data-slot":`hover-card`,...e})}function o({...e}){return(0,n.jsx)(i.HoverCard.Trigger,{"data-slot":`hover-card-trigger`,...e})}function s({className:e,align:r=`center`,sideOffset:a=4,...o}){return(0,n.jsx)(i.HoverCard.Portal,{"data-slot":`hover-card-portal`,children:(0,n.jsx)(i.HoverCard.Content,{"data-slot":`hover-card-content`,align:r,sideOffset:a,className:(0,t.cn)(`bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden`,e),...o})})}exports.HoverCard=a,exports.HoverCardContent=s,exports.HoverCardTrigger=o;
 //# sourceMappingURL=hover-card.cjs.map

package/dist/ui/hover-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.cjs","names":["HoverCardPrimitive"],"sources":["../../packages/components/ui/hover-card.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { HoverCard as HoverCardPrimitive } from 'radix-ui'\n\nimport { cn } from '@customafk/react-toolkit/utils'\n\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n}\n\nfunction HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger }\n"],"mappings":"sNAMA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAAA,EAAA,KAACA,EAAAA,UAAmB,KAAA,CAAK,YAAU,aAAa,GAAI,IAG7D,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAAA,EAAA,KAACA,EAAAA,UAAmB,QAAA,CAAQ,YAAU,qBAAqB,GAAI,IAGxE,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAAA,EAAA,KAACA,EAAAA,UAAmB,OAAA,CAAO,YAAU,8BACnC,EAAA,EAAA,KAACA,EAAAA,UAAmB,QAAA,CAClB,YAAU,qBACH,QACK,aACZ,WAAA,EAAA,EAAA,IACE,oeACA,GAEF,GAAI"}
+{"version":3,"file":"hover-card.cjs","names":["HoverCardPrimitive"],"sources":["../../packages/components/ui/hover-card.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { HoverCard as HoverCardPrimitive } from 'radix-ui'\n\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n}\n\nfunction HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger }\n"],"mappings":"sNAMA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAAA,EAAA,KAACA,EAAAA,UAAmB,KAAA,CAAK,YAAU,aAAa,GAAI,IAG7D,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAAA,EAAA,KAACA,EAAAA,UAAmB,QAAA,CAAQ,YAAU,qBAAqB,GAAI,IAGxE,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAAA,EAAA,KAACA,EAAAA,UAAmB,OAAA,CAAO,YAAU,8BACnC,EAAA,EAAA,KAACA,EAAAA,UAAmB,QAAA,CAClB,YAAU,qBACH,QACK,aACZ,WAAA,EAAA,EAAA,IACE,oeACA,GAEF,GAAI"}

package/dist/ui/hover-card.d.cts

@@ -1,20 +1,20 @@
-import * as react_jsx_runtime84 from "react/jsx-runtime";
+import * as react_jsx_runtime115 from "react/jsx-runtime";
 import React from "react";
 import { HoverCard as HoverCard$1 } from "radix-ui";
 
 //#region packages/components/ui/hover-card.d.ts
 declare function HoverCard({
   ...props
-}: React.ComponentProps<typeof HoverCard$1.Root>): react_jsx_runtime84.JSX.Element;
+}: React.ComponentProps<typeof HoverCard$1.Root>): react_jsx_runtime115.JSX.Element;
 declare function HoverCardTrigger({
   ...props
-}: React.ComponentProps<typeof HoverCard$1.Trigger>): react_jsx_runtime84.JSX.Element;
+}: React.ComponentProps<typeof HoverCard$1.Trigger>): react_jsx_runtime115.JSX.Element;
 declare function HoverCardContent({
   className,
   align,
   sideOffset,
   ...props
-}: React.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime84.JSX.Element;
+}: React.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime115.JSX.Element;
 //#endregion
 export { HoverCard, HoverCardContent, HoverCardTrigger };
 //# sourceMappingURL=hover-card.d.cts.map