@customafk/lunas-ui 0.2.51 → 0.2.53

package/dist/ui/context-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../../packages/components/ui/context-menu.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\nimport { ContextMenu as ContextMenuPrimitive } from 'radix-ui';\n\n/**\n * Root provider for the ContextMenu — revealed on right-click (or long-press) of the trigger area.\n *\n * @example\n * ```tsx\n * import {\n *   ContextMenu, ContextMenuTrigger, ContextMenuContent,\n *   ContextMenuItem, ContextMenuLabel, ContextMenuSeparator,\n * } from '@customafk/lunas-ui/ui/context-menu';\n *\n * <ContextMenu>\n *   <ContextMenuTrigger>Right-click me</ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuLabel>Actions</ContextMenuLabel>\n *     <ContextMenuSeparator />\n *     <ContextMenuItem>Copy</ContextMenuItem>\n *     <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n * ```\n */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The area that listens for right-click to open the ContextMenu. */\nfunction ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related ContextMenuItems under a shared logical section. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals ContextMenu content outside the current DOM hierarchy. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Root container for a nested sub-menu inside a ContextMenu. */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups ContextMenuRadioItems so only one can be selected at a time. */\nfunction ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/**\n * Menu item that reveals a nested ContextMenuSubContent on hover or activation.\n *\n * @param inset - When true, adds left padding to align with inset items.\n */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** Floating panel that contains the items of a nested ContextMenu sub-menu. */\nfunction ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\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 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Animated floating panel that contains the context menu items. */\nfunction ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/**\n * A single clickable row inside a ContextMenuContent.\n *\n * @param inset - When true, adds left padding to align with items that have icons.\n * @param variant - Visual style: `'default'` or `'destructive'`.\n */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A checkable context menu item that displays a checkmark when selected. */\nfunction ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A radio-button context menu item; shows a filled circle when selected. */\nfunction ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        'relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none',\n        'focus:bg-accent',\n        'focus:text-accent-foreground',\n        'data-[disabled]:pointer-events-none',\n        'data-[disabled]:opacity-50',\n        '[&_svg]:pointer-events-none',\n        '[&_svg]:shrink-0',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/**\n * Non-interactive label used to describe a group of context menu items.\n *\n * @param inset - When true, adds left padding to align with inset items.\n */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal dividing line between groups of context menu items. */\nfunction ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return <ContextMenuPrimitive.Separator data-slot=\"context-menu-separator\" className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />;\n}\n\n/** Displays a keyboard shortcut hint aligned to the right of a context menu item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return <span data-slot=\"context-menu-shortcut\" className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;\n}\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],"mappings":"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"}

package/dist/ui/dialog.d.ts

@@ -1,2 +0,0 @@
-import { a as DialogFooter, c as DialogPortal, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../dialog-BIJXF62m.js";
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/ui/dialog.js

@@ -1 +0,0 @@
-"use client";import"../heading-Bz-hSatD.js";import"../paragraph-Cc13ZI4d.js";import"../close-C0PdZGxr.js";import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"../dialog-CmutQ3rp.js";export{c as Dialog,i as DialogClose,o as DialogContent,n as DialogDescription,e as DialogFooter,a as DialogHeader,s as DialogOverlay,t as DialogPortal,r as DialogTitle,l as DialogTrigger};

package/dist/ui/drawer.d.ts

@@ -1,72 +0,0 @@
-import * as react52 from "react";
-import { Drawer as Drawer$1 } from "vaul";
-
-//#region packages/components/ui/drawer.d.ts
-
-/**
- * Root provider for the Drawer — a vaul-powered slide-in panel supporting top, bottom, left, and right directions.
- *
- * @example
- * ```tsx
- * import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@customafk/lunas-ui/ui/drawer';
- *
- * <Drawer>
- *   <DrawerTrigger>Open Drawer</DrawerTrigger>
- *   <DrawerContent>
- *     <DrawerHeader>
- *       <DrawerTitle>Confirm action</DrawerTitle>
- *       <DrawerDescription>This action cannot be undone.</DrawerDescription>
- *     </DrawerHeader>
- *   </DrawerContent>
- * </Drawer>
- * ```
- */
-declare function Drawer({
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Root>): react52.JSX.Element;
-/** Element that opens the Drawer when activated. */
-declare function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Trigger>): react52.JSX.Element;
-/** Portals Drawer content outside the current DOM tree. */
-declare function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Portal>): react52.JSX.Element;
-/** Button that programmatically closes the Drawer. */
-declare function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Close>): react52.JSX.Element;
-/** Dimmed backdrop rendered behind the Drawer panel. */
-declare function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Overlay>): react52.JSX.Element;
-/** The main Drawer panel; automatically positions itself based on the direction set on the root. */
-declare function DrawerContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Content>): react52.JSX.Element;
-/** Padded header section at the top of the Drawer for the title and description. */
-declare function DrawerHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react52.JSX.Element;
-/** Footer section pinned to the bottom of the Drawer, typically used for action buttons. */
-declare function DrawerFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react52.JSX.Element;
-/** Accessible title element for the Drawer, announced by screen readers on open. */
-declare function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Title>): react52.JSX.Element;
-/** Accessible description element for the Drawer, providing supplemental context to the title. */
-declare function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof Drawer$1.Description>): react52.JSX.Element;
-//#endregion
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
-//# sourceMappingURL=drawer.d.ts.map

package/dist/ui/drawer.js

@@ -1 +0,0 @@
-"use client";import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"../drawer-B3qXaN5p.js";export{c as Drawer,i as DrawerClose,o as DrawerContent,n as DrawerDescription,e as DrawerFooter,a as DrawerHeader,s as DrawerOverlay,t as DrawerPortal,r as DrawerTitle,l as DrawerTrigger};

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

@@ -1,127 +0,0 @@
-import * as react221 from "react";
-import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
-
-//#region packages/components/ui/dropdown-menu.d.ts
-
-/**
- * Root provider for the DropdownMenu — wraps all sub-components and controls open state.
- *
- * @example
- * ```tsx
- * import {
- *   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
- *   DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
- * } from '@customafk/lunas-ui/ui/dropdown-menu';
- *
- * <DropdownMenu>
- *   <DropdownMenuTrigger>Options</DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuLabel>My Account</DropdownMenuLabel>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuItem>Profile</DropdownMenuItem>
- *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- */
-declare function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Root>): react221.JSX.Element;
-/** Portals DropdownMenu content outside the current DOM hierarchy. */
-declare function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react221.JSX.Element;
-/** Element that opens the DropdownMenu when activated. */
-declare function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react221.JSX.Element;
-/** Animated floating panel that contains the dropdown items. */
-declare function DropdownMenuContent({
-  className,
-  sideOffset,
-  align,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Content>): react221.JSX.Element;
-/** Groups related DropdownMenuItems under a shared logical section. */
-declare function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Group>): react221.JSX.Element;
-/**
- * A single clickable row inside a DropdownMenuContent.
- *
- * @param inset - When true, adds left padding to align with items that have icons.
- * @param variant - Visual style: `'default'` or `'destructive'`.
- */
-declare function DropdownMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
-}): react221.JSX.Element;
-/** A checkable menu item that displays a checkmark when selected. */
-declare function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react221.JSX.Element;
-/** Groups DropdownMenuRadioItems so only one can be selected at a time. */
-declare function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react221.JSX.Element;
-/** A radio-button menu item; shows a filled circle when selected. */
-declare function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): react221.JSX.Element;
-/**
- * Non-interactive label used to describe a group of items.
- *
- * @param inset - When true, adds left padding to align with inset items.
- */
-declare function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Label> & {
-  inset?: boolean;
-}): react221.JSX.Element;
-/** Horizontal dividing line between groups of dropdown items. */
-declare function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react221.JSX.Element;
-/** Displays a keyboard shortcut hint aligned to the right of a menu item. */
-declare function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>): react221.JSX.Element;
-/** Root container for a nested sub-menu inside a DropdownMenu. */
-declare function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react221.JSX.Element;
-/**
- * Menu item that reveals a nested DropdownMenuSubContent on hover or activation.
- *
- * @param inset - When true, adds left padding to align with inset items.
- */
-declare function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
-  inset?: boolean;
-}): react221.JSX.Element;
-/** Floating panel that contains the items of a nested sub-menu. */
-declare function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react221.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/dropdown-menu.js

@@ -1 +0,0 @@
-"use client";import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"../dropdown-menu-DeHCVyby.js";export{p as DropdownMenu,c as DropdownMenuCheckboxItem,d as DropdownMenuContent,a as DropdownMenuGroup,e as DropdownMenuItem,l as DropdownMenuLabel,f as DropdownMenuPortal,t as DropdownMenuRadioGroup,o as DropdownMenuRadioItem,m as DropdownMenuSeparator,n as DropdownMenuShortcut,r as DropdownMenuSub,u as DropdownMenuSubContent,s as DropdownMenuSubTrigger,i as DropdownMenuTrigger};

package/dist/ui/empty.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"empty.cjs","names":[],"sources":["../../packages/components/ui/empty.tsx"],"sourcesContent":["import { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n/**\n * Full-page or section empty-state container with centred layout and dashed border, composed with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent.\n *\n * @example\n * ```tsx\n * import {\n *   Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,\n * } from '@customafk/lunas-ui/ui/empty';\n * import { SearchX } from 'lucide-react';\n *\n * <Empty>\n *   <EmptyHeader>\n *     <EmptyMedia variant=\"icon\"><SearchX /></EmptyMedia>\n *     <EmptyTitle>No results found</EmptyTitle>\n *     <EmptyDescription>Try adjusting your search filters.</EmptyDescription>\n *   </EmptyHeader>\n *   <EmptyContent>\n *     <button>Reset filters</button>\n *   </EmptyContent>\n * </Empty>\n * ```\n */\nfunction Empty({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12', className)}\n      {...props}\n    />\n  );\n}\n\n/** Centred column container for the media, title, and description of an empty state. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"empty-header\" className={cn('flex max-w-sm flex-col items-center gap-2 text-center', className)} {...props} />;\n}\n\nconst emptyMediaVariants = cva('flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      icon: \"bg-muted-muted text-text-positive-weak flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\n/**\n * Container for the visual element (illustration, icon, or image) in an empty state.\n *\n * @param variant - `'default'` renders a transparent wrapper; `'icon'` renders a rounded muted square with the icon centred inside.\n */\nfunction EmptyMedia({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {\n  return <div data-slot=\"empty-icon\" data-variant={variant} className={cn(emptyMediaVariants({ variant, className }))} {...props} />;\n}\n\n/** Prominent heading text for the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"empty-title\" className={cn('text-lg font-medium tracking-tight', className)} {...props} />;\n}\n\n/** Supporting body text that explains the empty state to the user. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn('text-text-positive-weak [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** Action area below the header — typically holds buttons or links to help the user proceed. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"empty-content\" className={cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', className)} {...props} />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n"],"mappings":"8JA2BA,SAAS,EAAM,CAAE,YAAW,GAAG,GAAsC,CACnE,OACE,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,QACV,WAAA,EAAA,EAAA,IAAc,+HAAgI,EAAU,CACxJ,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,wDAAyD,EAAU,CAAE,GAAI,GAAS,CAGvI,MAAM,GAAA,EAAA,EAAA,KAAyB,8FAA+F,CAC5H,SAAU,CACR,QAAS,CACP,QAAS,iBACT,KAAM,2IACP,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CAAC,CAOF,SAAS,EAAW,CAAE,YAAW,UAAU,UAAW,GAAG,GAAgF,CACvI,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,aAAa,eAAc,EAAS,WAAA,EAAA,EAAA,IAAc,EAAmB,CAAE,UAAS,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS,CAIpI,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,qCAAsC,EAAU,CAAE,GAAI,GAAS,CAInH,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAoC,CAC5E,OACE,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,oBACV,WAAA,EAAA,EAAA,IAAc,4GAA6G,EAAU,CACrI,GAAI,GACJ,CAKN,SAAS,EAAa,CAAE,YAAW,GAAG,GAAsC,CAC1E,OACE,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,gBAAgB,WAAA,EAAA,EAAA,IAAc,gFAAiF,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/empty.d.ts

@@ -1,68 +0,0 @@
-import * as react88 from "react";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types4 from "class-variance-authority/types";
-
-//#region packages/components/ui/empty.d.ts
-
-/**
- * Full-page or section empty-state container with centred layout and dashed border, composed with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent.
- *
- * @example
- * ```tsx
- * import {
- *   Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
- * } from '@customafk/lunas-ui/ui/empty';
- * import { SearchX } from 'lucide-react';
- *
- * <Empty>
- *   <EmptyHeader>
- *     <EmptyMedia variant="icon"><SearchX /></EmptyMedia>
- *     <EmptyTitle>No results found</EmptyTitle>
- *     <EmptyDescription>Try adjusting your search filters.</EmptyDescription>
- *   </EmptyHeader>
- *   <EmptyContent>
- *     <button>Reset filters</button>
- *   </EmptyContent>
- * </Empty>
- * ```
- */
-declare function Empty({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react88.JSX.Element;
-/** Centred column container for the media, title, and description of an empty state. */
-declare function EmptyHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react88.JSX.Element;
-declare const emptyMediaVariants: (props?: ({
-  variant?: "default" | "icon" | null | undefined;
-} & class_variance_authority_types4.ClassProp) | undefined) => string;
-/**
- * Container for the visual element (illustration, icon, or image) in an empty state.
- *
- * @param variant - `'default'` renders a transparent wrapper; `'icon'` renders a rounded muted square with the icon centred inside.
- */
-declare function EmptyMedia({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): react88.JSX.Element;
-/** Prominent heading text for the empty state. */
-declare function EmptyTitle({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react88.JSX.Element;
-/** Supporting body text that explains the empty state to the user. */
-declare function EmptyDescription({
-  className,
-  ...props
-}: React.ComponentProps<'p'>): react88.JSX.Element;
-/** Action area below the header — typically holds buttons or links to help the user proceed. */
-declare function EmptyContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react88.JSX.Element;
-//#endregion
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
-//# sourceMappingURL=empty.d.ts.map

package/dist/ui/empty.js

@@ -1,2 +0,0 @@
-import{cn as e}from"@customafk/react-toolkit/utils";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";function r({className:t,...r}){return n(`div`,{"data-slot":`empty`,className:e(`flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12`,t),...r})}function i({className:t,...r}){return n(`div`,{"data-slot":`empty-header`,className:e(`flex max-w-sm flex-col items-center gap-2 text-center`,t),...r})}const a=t(`flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0`,{variants:{variant:{default:`bg-transparent`,icon:`bg-muted-muted text-text-positive-weak flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6`}},defaultVariants:{variant:`default`}});function o({className:t,variant:r=`default`,...i}){return n(`div`,{"data-slot":`empty-icon`,"data-variant":r,className:e(a({variant:r,className:t})),...i})}function s({className:t,...r}){return n(`div`,{"data-slot":`empty-title`,className:e(`text-lg font-medium tracking-tight`,t),...r})}function c({className:t,...r}){return n(`div`,{"data-slot":`empty-description`,className:e(`text-text-positive-weak [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4`,t),...r})}function l({className:t,...r}){return n(`div`,{"data-slot":`empty-content`,className:e(`flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance`,t),...r})}export{r as Empty,l as EmptyContent,c as EmptyDescription,i as EmptyHeader,o as EmptyMedia,s as EmptyTitle};
-//# sourceMappingURL=empty.js.map

package/dist/ui/empty.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"empty.js","names":[],"sources":["../../packages/components/ui/empty.tsx"],"sourcesContent":["import { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n/**\n * Full-page or section empty-state container with centred layout and dashed border, composed with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent.\n *\n * @example\n * ```tsx\n * import {\n *   Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,\n * } from '@customafk/lunas-ui/ui/empty';\n * import { SearchX } from 'lucide-react';\n *\n * <Empty>\n *   <EmptyHeader>\n *     <EmptyMedia variant=\"icon\"><SearchX /></EmptyMedia>\n *     <EmptyTitle>No results found</EmptyTitle>\n *     <EmptyDescription>Try adjusting your search filters.</EmptyDescription>\n *   </EmptyHeader>\n *   <EmptyContent>\n *     <button>Reset filters</button>\n *   </EmptyContent>\n * </Empty>\n * ```\n */\nfunction Empty({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12', className)}\n      {...props}\n    />\n  );\n}\n\n/** Centred column container for the media, title, and description of an empty state. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"empty-header\" className={cn('flex max-w-sm flex-col items-center gap-2 text-center', className)} {...props} />;\n}\n\nconst emptyMediaVariants = cva('flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      icon: \"bg-muted-muted text-text-positive-weak flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\n/**\n * Container for the visual element (illustration, icon, or image) in an empty state.\n *\n * @param variant - `'default'` renders a transparent wrapper; `'icon'` renders a rounded muted square with the icon centred inside.\n */\nfunction EmptyMedia({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {\n  return <div data-slot=\"empty-icon\" data-variant={variant} className={cn(emptyMediaVariants({ variant, className }))} {...props} />;\n}\n\n/** Prominent heading text for the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"empty-title\" className={cn('text-lg font-medium tracking-tight', className)} {...props} />;\n}\n\n/** Supporting body text that explains the empty state to the user. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn('text-text-positive-weak [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className)}\n      {...props}\n    />\n  );\n}\n\n/** Action area below the header — typically holds buttons or links to help the user proceed. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"empty-content\" className={cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', className)} {...props} />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n"],"mappings":"2IA2BA,SAAS,EAAM,CAAE,YAAW,GAAG,GAAsC,CACnE,OACE,EAAC,MAAA,CACC,YAAU,QACV,UAAW,EAAG,+HAAgI,EAAU,CACxJ,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAO,EAAC,MAAA,CAAI,YAAU,eAAe,UAAW,EAAG,wDAAyD,EAAU,CAAE,GAAI,GAAS,CAGvI,MAAM,EAAqB,EAAI,8FAA+F,CAC5H,SAAU,CACR,QAAS,CACP,QAAS,iBACT,KAAM,2IACP,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CAAC,CAOF,SAAS,EAAW,CAAE,YAAW,UAAU,UAAW,GAAG,GAAgF,CACvI,OAAO,EAAC,MAAA,CAAI,YAAU,aAAa,eAAc,EAAS,UAAW,EAAG,EAAmB,CAAE,UAAS,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS,CAIpI,SAAS,EAAW,CAAE,YAAW,GAAG,GAAsC,CACxE,OAAO,EAAC,MAAA,CAAI,YAAU,cAAc,UAAW,EAAG,qCAAsC,EAAU,CAAE,GAAI,GAAS,CAInH,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAoC,CAC5E,OACE,EAAC,MAAA,CACC,YAAU,oBACV,UAAW,EAAG,4GAA6G,EAAU,CACrI,GAAI,GACJ,CAKN,SAAS,EAAa,CAAE,YAAW,GAAG,GAAsC,CAC1E,OACE,EAAC,MAAA,CAAI,YAAU,gBAAgB,UAAW,EAAG,gFAAiF,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/field.d.ts

@@ -1,65 +0,0 @@
-import { Label } from "./label.js";
-import * as react146 from "react";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types5 from "class-variance-authority/types";
-
-//#region packages/components/ui/field.d.ts
-declare const FieldSet: react146.MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"fieldset">) => react146.JSX.Element>;
-declare const FieldLegend: react146.MemoExoticComponent<({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"legend"> & {
-  variant?: "legend" | "label";
-}) => react146.JSX.Element>;
-declare const FieldGroup: react146.MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"div">) => react146.JSX.Element>;
-declare const fieldVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
-} & class_variance_authority_types5.ClassProp) | undefined) => string;
-declare const Field: react146.MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) => react146.JSX.Element>;
-declare const FieldContent: react146.MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"div">) => react146.JSX.Element>;
-declare const FieldLabel: react146.MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) => react146.JSX.Element>;
-declare const FieldTitle: react146.MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"div">) => react146.JSX.Element>;
-declare const FieldDescription: react146.MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"p">) => react146.JSX.Element>;
-declare const FieldSeparator: react146.MemoExoticComponent<({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode;
-}) => react146.JSX.Element>;
-declare const FieldError: react146.MemoExoticComponent<({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{
-    message?: string;
-  } | undefined>;
-}) => react146.JSX.Element | null>;
-//#endregion
-export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
-//# sourceMappingURL=field.d.ts.map

package/dist/ui/field.js

@@ -1 +0,0 @@
-"use client";import"../separator-BM8hA4DP.js";import"../label-B8cAG2kc.js";import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"../field-DpoKF1nY.js";export{c as Field,i as FieldContent,o as FieldDescription,n as FieldError,e as FieldGroup,a as FieldLabel,s as FieldLegend,t as FieldSeparator,r as FieldSet,l as FieldTitle};

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

@@ -1 +0,0 @@
-{"version":3,"file":"file-uploader.cjs","names":["Dropzone","Upload","Image","Trash2","Progress","Button","FileText"],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect } 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\n/**\n * Props for the FileUploader component.\n *\n * @example\n * ```tsx\n * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';\n *\n * <FileUploader\n *   accept={{ 'image/*': [] }}\n *   maxSize={1024 * 1024 * 5}\n *   maxFileCount={3}\n *   multiple\n *   onUpload={async (files) => { await uploadFiles(files); }}\n * />\n * ```\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  /**\n   * Whether to show the instructional drag-and-drop text inside the drop zone.\n   * @default true\n   */\n  showText?: boolean;\n  /** Size in pixels for the upload icon. */\n  iconSize?: number;\n}\n\n/**\n * A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.\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 = 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  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.ts

@@ -1,103 +0,0 @@
-import * as react211 from "react";
-import { DropzoneProps } from "react-dropzone";
-
-//#region packages/components/ui/file-uploader.d.ts
-
-/**
- * Props for the FileUploader component.
- *
- * @example
- * ```tsx
- * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';
- *
- * <FileUploader
- *   accept={{ 'image/*': [] }}
- *   maxSize={1024 * 1024 * 5}
- *   maxFileCount={3}
- *   multiple
- *   onUpload={async (files) => { await uploadFiles(files); }}
- * />
- * ```
- */
-interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Value of the uploader.
-   * @type File[]
-   * @default undefined
-   * @example value={files}
-   */
-  value?: File[];
-  /**
-   * Function to be called when the value changes.
-   * @type (files: File[]) => void
-   * @default undefined
-   * @example onValueChange={(files) => setFiles(files)}
-   */
-  onValueChange?: (files: File[]) => void;
-  /**
-   * Function to be called when files are uploaded.
-   * @type (files: File[]) => Promise<void>
-   * @default undefined
-   * @example onUpload={(files) => uploadFiles(files)}
-   */
-  onUpload?: (files: File[]) => Promise<void>;
-  /**
-   * Progress of the uploaded files.
-   * @type Record<string, number> | undefined
-   * @default undefined
-   * @example progresses={{ "file1.png": 50 }}
-   */
-  progresses?: Record<string, number>;
-  /**
-   * Accepted file types for the uploader.
-   * @type { [key: string]: string[]}
-   * @default
-   * ```ts
-   * { "image/*": [] }
-   * ```
-   * @example accept={["image/png", "image/jpeg"]}
-   */
-  accept?: DropzoneProps['accept'];
-  /**
-   * Maximum file size for the uploader.
-   * @type number | undefined
-   * @default 1024 * 1024 * 2 // 2MB
-   * @example maxSize={1024 * 1024 * 2} // 2MB
-   */
-  maxSize?: DropzoneProps['maxSize'];
-  /**
-   * Maximum number of files for the uploader.
-   * @type number | undefined
-   * @default 1
-   * @example maxFileCount={4}
-   */
-  maxFileCount?: DropzoneProps['maxFiles'];
-  /**
-   * Whether the uploader should accept multiple files.
-   * @type boolean
-   * @default false
-   * @example multiple
-   */
-  multiple?: boolean;
-  /**
-   * Whether the uploader is disabled.
-   * @type boolean
-   * @default false
-   * @example disabled
-   */
-  disabled?: boolean;
-  /**
-   * Whether to show the instructional drag-and-drop text inside the drop zone.
-   * @default true
-   */
-  showText?: boolean;
-  /** Size in pixels for the upload icon. */
-  iconSize?: number;
-}
-/**
- * A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.
- */
-declare function FileUploader(props: FileUploaderProps): react211.JSX.Element;
-//#endregion
-export { FileUploader };
-//# sourceMappingURL=file-uploader.d.ts.map

package/dist/ui/file-uploader.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"file-uploader.js","names":[],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect } 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\n/**\n * Props for the FileUploader component.\n *\n * @example\n * ```tsx\n * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';\n *\n * <FileUploader\n *   accept={{ 'image/*': [] }}\n *   maxSize={1024 * 1024 * 5}\n *   maxFileCount={3}\n *   multiple\n *   onUpload={async (files) => { await uploadFiles(files); }}\n * />\n * ```\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  /**\n   * Whether to show the instructional drag-and-drop text inside the drop zone.\n   * @default true\n   */\n  showText?: boolean;\n  /** Size in pixels for the upload icon. */\n  iconSize?: number;\n}\n\n/**\n * A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.\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 = 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  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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"}