@customafk/lunas-ui 0.2.42 → 0.2.43

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

@@ -1,4 +1,4 @@
-import * as react121 from "react";
+import * as react147 from "react";
 import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
 
 //#region packages/components/ui/dropdown-menu.d.ts
@@ -26,26 +26,26 @@ import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
  */
 declare function DropdownMenu({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Root>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Root>): react147.JSX.Element;
 /** Portals DropdownMenu content outside the current DOM hierarchy. */
 declare function DropdownMenuPortal({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react147.JSX.Element;
 /** Element that opens the DropdownMenu when activated. */
 declare function DropdownMenuTrigger({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react147.JSX.Element;
 /** Animated floating panel that contains the dropdown items. */
 declare function DropdownMenuContent({
   className,
   sideOffset,
   align,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Content>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Content>): react147.JSX.Element;
 /** Groups related DropdownMenuItems under a shared logical section. */
 declare function DropdownMenuGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Group>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Group>): react147.JSX.Element;
 /**
  * A single clickable row inside a DropdownMenuContent.
  *
@@ -60,24 +60,24 @@ declare function DropdownMenuItem({
 }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
   inset?: boolean;
   variant?: 'default' | 'destructive';
-}): react121.JSX.Element;
+}): react147.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>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): react147.JSX.Element;
 /** Groups DropdownMenuRadioItems so only one can be selected at a time. */
 declare function DropdownMenuRadioGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react147.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>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): react147.JSX.Element;
 /**
  * Non-interactive label used to describe a group of items.
  *
@@ -89,21 +89,21 @@ declare function DropdownMenuLabel({
   ...props
 }: React.ComponentProps<typeof DropdownMenu$1.Label> & {
   inset?: boolean;
-}): react121.JSX.Element;
+}): react147.JSX.Element;
 /** Horizontal dividing line between groups of dropdown items. */
 declare function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react147.JSX.Element;
 /** Displays a keyboard shortcut hint aligned to the right of a menu item. */
 declare function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react121.JSX.Element;
+}: React.ComponentProps<'span'>): react147.JSX.Element;
 /** Root container for a nested sub-menu inside a DropdownMenu. */
 declare function DropdownMenuSub({
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react147.JSX.Element;
 /**
  * Menu item that reveals a nested DropdownMenuSubContent on hover or activation.
  *
@@ -116,12 +116,12 @@ declare function DropdownMenuSubTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
   inset?: boolean;
-}): react121.JSX.Element;
+}): react147.JSX.Element;
 /** Floating panel that contains the items of a nested sub-menu. */
 declare function DropdownMenuSubContent({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react121.JSX.Element;
+}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react147.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.mts

@@ -0,0 +1,127 @@
+import * as react117 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>): react117.JSX.Element;
+/** Portals DropdownMenu content outside the current DOM hierarchy. */
+declare function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Portal>): react117.JSX.Element;
+/** Element that opens the DropdownMenu when activated. */
+declare function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): react117.JSX.Element;
+/** Animated floating panel that contains the dropdown items. */
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  align,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Content>): react117.JSX.Element;
+/** Groups related DropdownMenuItems under a shared logical section. */
+declare function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Group>): react117.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';
+}): react117.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>): react117.JSX.Element;
+/** Groups DropdownMenuRadioItems so only one can be selected at a time. */
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): react117.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>): react117.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;
+}): react117.JSX.Element;
+/** Horizontal dividing line between groups of dropdown items. */
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Separator>): react117.JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a menu item. */
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): react117.JSX.Element;
+/** Root container for a nested sub-menu inside a DropdownMenu. */
+declare function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Sub>): react117.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;
+}): react117.JSX.Element;
+/** Floating panel that contains the items of a nested sub-menu. */
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): react117.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+//# sourceMappingURL=dropdown-menu.d.mts.map

package/dist/ui/dropdown-menu.mjs

@@ -0,0 +1 @@
+"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-BWhiVsEf.mjs";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

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`);function i({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty`,className:(0,t.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`,e),...n})}function a({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-header`,className:(0,t.cn)(`flex max-w-sm flex-col items-center gap-2 text-center`,e),...n})}const o=(0,n.cva)(`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 s({className:e,variant:n=`default`,...i}){return(0,r.jsx)(`div`,{"data-slot":`empty-icon`,"data-variant":n,className:(0,t.cn)(o({variant:n,className:e})),...i})}function c({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-title`,className:(0,t.cn)(`text-lg font-medium tracking-tight`,e),...n})}function l({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-description`,className:(0,t.cn)(`text-text-positive-weak [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4`,e),...n})}function u({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-content`,className:(0,t.cn)(`flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance`,e),...n})}exports.Empty=i,exports.EmptyContent=u,exports.EmptyDescription=l,exports.EmptyHeader=a,exports.EmptyMedia=s,exports.EmptyTitle=c;
+const e=require(`../chunk-350yNsax.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`);function i({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty`,className:(0,t.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`,e),...n})}function a({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-header`,className:(0,t.cn)(`flex max-w-sm flex-col items-center gap-2 text-center`,e),...n})}const o=(0,n.cva)(`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 s({className:e,variant:n=`default`,...i}){return(0,r.jsx)(`div`,{"data-slot":`empty-icon`,"data-variant":n,className:(0,t.cn)(o({variant:n,className:e})),...i})}function c({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-title`,className:(0,t.cn)(`text-lg font-medium tracking-tight`,e),...n})}function l({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-description`,className:(0,t.cn)(`text-text-positive-weak [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4`,e),...n})}function u({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`empty-content`,className:(0,t.cn)(`flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance`,e),...n})}exports.Empty=i,exports.EmptyContent=u,exports.EmptyDescription=l,exports.EmptyHeader=a,exports.EmptyMedia=s,exports.EmptyTitle=c;
 //# sourceMappingURL=empty.cjs.map

package/dist/ui/empty.d.cts

@@ -1,5 +1,5 @@
-import * as react115 from "react";
-import * as class_variance_authority_types4 from "class-variance-authority/types";
+import * as react66 from "react";
+import * as class_variance_authority_types5 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region packages/components/ui/empty.d.ts
@@ -29,15 +29,15 @@ import { VariantProps } from "class-variance-authority";
 declare function Empty({
   className,
   ...props
-}: React.ComponentProps<'div'>): react115.JSX.Element;
+}: React.ComponentProps<'div'>): react66.JSX.Element;
 /** Centred column container for the media, title, and description of an empty state. */
 declare function EmptyHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>): react115.JSX.Element;
+}: React.ComponentProps<'div'>): react66.JSX.Element;
 declare const emptyMediaVariants: (props?: ({
   variant?: "default" | "icon" | null | undefined;
-} & class_variance_authority_types4.ClassProp) | undefined) => string;
+} & class_variance_authority_types5.ClassProp) | undefined) => string;
 /**
  * Container for the visual element (illustration, icon, or image) in an empty state.
  *
@@ -47,22 +47,22 @@ declare function EmptyMedia({
   className,
   variant,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): react115.JSX.Element;
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): react66.JSX.Element;
 /** Prominent heading text for the empty state. */
 declare function EmptyTitle({
   className,
   ...props
-}: React.ComponentProps<'div'>): react115.JSX.Element;
+}: React.ComponentProps<'div'>): react66.JSX.Element;
 /** Supporting body text that explains the empty state to the user. */
 declare function EmptyDescription({
   className,
   ...props
-}: React.ComponentProps<'p'>): react115.JSX.Element;
+}: React.ComponentProps<'p'>): react66.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'>): react115.JSX.Element;
+}: React.ComponentProps<'div'>): react66.JSX.Element;
 //#endregion
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
 //# sourceMappingURL=empty.d.cts.map

package/dist/ui/empty.d.mts

@@ -0,0 +1,68 @@
+import * as react163 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types6 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'>): react163.JSX.Element;
+/** Centred column container for the media, title, and description of an empty state. */
+declare function EmptyHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react163.JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & class_variance_authority_types6.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>): react163.JSX.Element;
+/** Prominent heading text for the empty state. */
+declare function EmptyTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): react163.JSX.Element;
+/** Supporting body text that explains the empty state to the user. */
+declare function EmptyDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): react163.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'>): react163.JSX.Element;
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+//# sourceMappingURL=empty.d.mts.map

package/dist/ui/empty.mjs

@@ -0,0 +1,2 @@
+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.mjs.map

package/dist/ui/empty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.mjs","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.cjs

@@ -1 +1 @@
-"use client";const e=require(`../field-0gaEKxov.cjs`);exports.Field=e.t,exports.FieldContent=e.n,exports.FieldDescription=e.r,exports.FieldError=e.i,exports.FieldGroup=e.a,exports.FieldLabel=e.o,exports.FieldLegend=e.s,exports.FieldSeparator=e.c,exports.FieldSet=e.l,exports.FieldTitle=e.u;
+"use client";require(`../separator-KuymG9g0.cjs`),require(`../label-CC6fXVbC.cjs`);const e=require(`../field-BrlETeXX.cjs`);exports.Field=e.t,exports.FieldContent=e.n,exports.FieldDescription=e.r,exports.FieldError=e.i,exports.FieldGroup=e.a,exports.FieldLabel=e.o,exports.FieldLegend=e.s,exports.FieldSeparator=e.c,exports.FieldSet=e.l,exports.FieldTitle=e.u;

package/dist/ui/field.d.cts

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

package/dist/ui/field.d.mts

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

package/dist/ui/field.mjs

@@ -0,0 +1 @@
+"use client";import"../separator-D3Gmkxzq.mjs";import"../label-CUCpwS5D.mjs";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-dYemS0hQ.mjs";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

@@ -1,3 +1,3 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`),i=require(`react`),a=require(`@/components/ui/button`),o=require(`@/components/ui/progress`),s=require(`react-dropzone`);s=e.t(s);let c=require(`@customafk/react-toolkit/hooks/useControllableState`),l=require(`sonner`);function u(e){let{value:a,onValueChange:o,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:a,onChange:o}),T=(0,i.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),o?.(t)}(0,i.useEffect)(()=>()=>{C&&C.forEach(e=>{f(e)&&URL.revokeObjectURL(e.preview)})},[]);let D=v||(C?.length??0)>=g;return(0,r.jsxs)(`div`,{className:`relative flex w-full flex-col gap-6`,children:[(0,r.jsx)(s.default,{onDrop:T,accept:m,maxSize:h,maxFiles:g,multiple:g>1||_,disabled:D,children:({getRootProps:e,getInputProps:i,isDragActive:a})=>(0,r.jsxs)(`div`,{...e(),className:(0,n.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`,a&&`border-border-primary-strong bg-border-weak/40`,D&&`pointer-events-none opacity-60`,x),...S,children:[(0,r.jsx)(`input`,{...i()}),a?(0,r.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,r.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,r.jsx)(t.Upload,{className:`text-text-positive-muted size-7`,"aria-hidden":`true`})}),(0,r.jsx)(`p`,{className:`text-text-positive-muted font-medium`,children:`Drop the files here`})]}):(0,r.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,r.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,r.jsx)(t.Upload,{size:b||24,className:`text-muted-foreground`,"aria-hidden":`true`})}),y&&(0,r.jsxs)(`div`,{className:`flex flex-col gap-px`,children:[(0,r.jsxs)(`p`,{className:`text-text-positive-weak text-xs font-medium`,children:[`Drag `,`'n'`,` drop files here, or click to select files`]}),(0,r.jsxs)(`p`,{className:`text-text-positive-muted text-xs`,children:[`You can upload`,g>1?` ${g===1/0?`multiple`:g}
-                      files (up to ${(0,n.formatBytes)(h)} each)`:` a file with ${(0,n.formatBytes)(h)}`]})]})]})]})}),C?.length?(0,r.jsxs)(`div`,{className:`h-fit w-full overflow-y-auto`,children:[(0,r.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-2.5`,children:[(0,r.jsxs)(`div`,{className:`text-text-positive-weak flex items-center gap-1`,children:[(0,r.jsx)(t.Image,{size:16,"aria-hidden":`true`}),(0,r.jsxs)(`p`,{className:`text-sm`,children:[`Ảnh đã tải lên (`,C.length,`)`]})]}),(0,r.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([]),o?.([]))},children:[(0,r.jsx)(t.Trash2,{size:16,"aria-hidden":`true`}),(0,r.jsx)(`p`,{className:`text-sm`,children:`Xóa tất cả`})]})]}),(0,r.jsx)(`div`,{className:`flex flex-col gap-2.5`,children:C?.map((e,t)=>(0,r.jsx)(d,{file:e,onRemove:()=>E(t),progress:p?.[e.name]},t))})]}):null]})}function d({file:e,progress:i,onRemove:s}){return(0,r.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,r.jsxs)(`div`,{className:`flex flex-1 gap-2.5`,children:[f(e)?(0,r.jsx)(p,{file:e}):null,(0,r.jsxs)(`div`,{className:`flex w-full flex-col gap-2`,children:[(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-0.5`,children:[(0,r.jsx)(`p`,{className:`text-text-positive line-clamp-1 text-sm`,children:e.name}),(0,r.jsx)(`p`,{className:`text-text-positive-muted text-xs`,children:(0,n.formatBytes)(e.size)})]}),i?(0,r.jsx)(o.Progress,{value:i}):null]})]}),(0,r.jsx)(`div`,{className:`flex items-center gap-2`,children:(0,r.jsxs)(a.Button,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,className:`size-7`,onClick:s,children:[(0,r.jsx)(t.Trash2,{size:16,className:`text-text-positive-muted`,"aria-hidden":`true`}),(0,r.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,r.jsx)(`img`,{src:e.preview,className:`border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm`}):(0,r.jsx)(t.FileText,{className:`text-text-positive-muted size-10 border`,"aria-hidden":`true`})}exports.FileUploader=u;
+"use client";const e=require(`../chunk-350yNsax.cjs`);require(`../button.variants-4kw6plrv.cjs`);const t=require(`../button-C--DAN1D.cjs`),n=require(`../progress-gvBqNiHp.cjs`);let r=require(`lucide-react`),i=require(`react`),a=require(`@customafk/react-toolkit/utils`),o=require(`react/jsx-runtime`),s=require(`react-dropzone`);s=e.n(s);let c=require(`@customafk/react-toolkit/hooks/useControllableState`),l=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=(0,i.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)}(0,i.useEffect)(()=>()=>{C&&C.forEach(e=>{f(e)&&URL.revokeObjectURL(e.preview)})},[]);let D=v||(C?.length??0)>=g;return(0,o.jsxs)(`div`,{className:`relative flex w-full flex-col gap-6`,children:[(0,o.jsx)(s.default,{onDrop:T,accept:m,maxSize:h,maxFiles:g,multiple:g>1||_,disabled:D,children:({getRootProps:e,getInputProps:t,isDragActive:n})=>(0,o.jsxs)(`div`,{...e(),className:(0,a.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,o.jsx)(`input`,{...t()}),n?(0,o.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,o.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,o.jsx)(r.Upload,{className:`text-text-positive-muted size-7`,"aria-hidden":`true`})}),(0,o.jsx)(`p`,{className:`text-text-positive-muted font-medium`,children:`Drop the files here`})]}):(0,o.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-4 sm:px-5`,children:[(0,o.jsx)(`div`,{className:`rounded-full border border-dashed p-3`,children:(0,o.jsx)(r.Upload,{size:b||24,className:`text-muted-foreground`,"aria-hidden":`true`})}),y&&(0,o.jsxs)(`div`,{className:`flex flex-col gap-px`,children:[(0,o.jsxs)(`p`,{className:`text-text-positive-weak text-xs font-medium`,children:[`Drag `,`'n'`,` drop files here, or click to select files`]}),(0,o.jsxs)(`p`,{className:`text-text-positive-muted text-xs`,children:[`You can upload`,g>1?` ${g===1/0?`multiple`:g}
+                      files (up to ${(0,a.formatBytes)(h)} each)`:` a file with ${(0,a.formatBytes)(h)}`]})]})]})]})}),C?.length?(0,o.jsxs)(`div`,{className:`h-fit w-full overflow-y-auto`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-2.5`,children:[(0,o.jsxs)(`div`,{className:`text-text-positive-weak flex items-center gap-1`,children:[(0,o.jsx)(r.Image,{size:16,"aria-hidden":`true`}),(0,o.jsxs)(`p`,{className:`text-sm`,children:[`Ảnh đã tải lên (`,C.length,`)`]})]}),(0,o.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,o.jsx)(r.Trash2,{size:16,"aria-hidden":`true`}),(0,o.jsx)(`p`,{className:`text-sm`,children:`Xóa tất cả`})]})]}),(0,o.jsx)(`div`,{className:`flex flex-col gap-2.5`,children:C?.map((e,t)=>(0,o.jsx)(d,{file:e,onRemove:()=>E(t),progress:p?.[e.name]},t))})]}):null]})}function d({file:e,progress:i,onRemove:s}){return(0,o.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,o.jsxs)(`div`,{className:`flex flex-1 gap-2.5`,children:[f(e)?(0,o.jsx)(p,{file:e}):null,(0,o.jsxs)(`div`,{className:`flex w-full flex-col gap-2`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-y-0.5`,children:[(0,o.jsx)(`p`,{className:`text-text-positive line-clamp-1 text-sm`,children:e.name}),(0,o.jsx)(`p`,{className:`text-text-positive-muted text-xs`,children:(0,a.formatBytes)(e.size)})]}),i?(0,o.jsx)(n.t,{value:i}):null]})]}),(0,o.jsx)(`div`,{className:`flex items-center gap-2`,children:(0,o.jsxs)(t.t,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,className:`size-7`,onClick:s,children:[(0,o.jsx)(r.Trash2,{size:16,className:`text-text-positive-muted`,"aria-hidden":`true`}),(0,o.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,o.jsx)(`img`,{src:e.preview,className:`border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm`}):(0,o.jsx)(r.FileText,{className:`text-text-positive-muted size-10 border`,"aria-hidden":`true`})}exports.FileUploader=u;
 //# sourceMappingURL=file-uploader.cjs.map