@customafk/lunas-ui 0.0.4 → 0.0.5

package/dist/dropdown-menu.d.cts

@@ -0,0 +1,78 @@
+import React from "react";
+import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
+
+//#region packages/components/ui/dropdown-menu.d.ts
+declare function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  align,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Group>): React.JSX.Element;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Label> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): React.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/dropdown-menu.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import { DropdownMenu as DropdownMenu$1 } from "radix-ui";
+
+//#region packages/components/ui/dropdown-menu.d.ts
+declare function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  align,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Group>): React.JSX.Element;
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Label> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu$1.SubContent>): React.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/dropdown-menu.js

@@ -0,0 +1,2 @@
+"use client";import{cn as e}from"./utils-D9AH0PUV.js";import t from"react";import{DropdownMenu as n}from"radix-ui";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{CheckIcon as a,ChevronRightIcon as o,CircleIcon as s}from"lucide-react";function c({...e}){return r(n.Root,{"data-slot":`dropdown-menu`,...e})}function l({...e}){return r(n.Portal,{"data-slot":`dropdown-menu-portal`,...e})}function u({...e}){return r(n.Trigger,{"data-slot":`dropdown-menu-trigger`,...e})}function d({className:t,sideOffset:i=4,align:a=`start`,...o}){return r(n.Portal,{children:r(n.Content,{"data-slot":`dropdown-menu-content`,sideOffset:i,className:e(`bg-popover text-popover-foreground`,`z-50`,`min-w-32`,`overflow-x-hidden overflow-y-auto`,`rounded-md border p-1.5 shadow-md`,`max-h-(--radix-dropdown-menu-content-available-height)`,`origin-(--radix-dropdown-menu-content-transform-origin)`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-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`,t),...o,align:a})})}function f({...e}){return r(n.Group,{"data-slot":`dropdown-menu-group`,...e})}function p({className:t,inset:i,variant:a=`default`,...o}){return r(n.Item,{"data-slot":`dropdown-menu-item`,"data-inset":i,"data-variant":a,className:e(`relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 text-sm outline-hidden transition-all select-none`,`focus:bg-accent/70`,`focus:text-accent-foreground`,`dark:data-[variant=destructive]:focus:bg-destructive/20`,`data-[inset]:pl-8`,`data-[disabled]:pointer-events-none`,`data-[disabled]:opacity-50`,`data-[variant=destructive]:text-destructive`,`data-[variant=destructive]:focus:bg-destructive/10`,`data-[variant=destructive]:focus:text-destructive`,`data-[variant=destructive]:*:[svg]:!text-destructive`,`[&_svg]:shrink-0`,`[&_svg]:pointer-events-none`,`[&_svg:not([class*='size-'])]:size-4`,`[&_svg:not([class*='text-'])]:text-muted-foreground`,t),...o})}function m({className:t,children:o,checked:s,...c}){return i(n.CheckboxItem,{"data-slot":`dropdown-menu-checkbox-item`,className:e(`relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none`,`focus:bg-accent`,`focus:text-accent-foreground`,`data-[disabled]:opacity-50`,`data-[disabled]:pointer-events-none`,`[&_svg]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg:not([class*='size-'])]:size-4`,t),checked:s,...c,children:[r(`span`,{className:`pointer-events-none absolute left-2 flex size-3.5 items-center justify-center`,children:r(n.ItemIndicator,{children:r(a,{size:16})})}),o]})}function h({...e}){return r(n.RadioGroup,{"data-slot":`dropdown-menu-radio-group`,...e})}function g({className:t,children:a,...o}){return i(n.RadioItem,{"data-slot":`dropdown-menu-radio-item`,className:e(`relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none`,`focus:bg-accent`,`focus:text-accent-foreground`,`data-[disabled]:pointer-events-none`,`data-[disabled]:opacity-50`,`[&_svg]:pointer-events-none`,`[&_svg]:shrink-0`,`[&_svg:not([class*='size-'])]:size-4`,t),...o,children:[r(`span`,{className:`pointer-events-none absolute left-2 flex size-3.5 items-center justify-center`,children:r(n.ItemIndicator,{children:r(s,{className:`size-2 fill-current`})})}),a]})}function _({className:t,inset:i,...a}){return r(n.Label,{"data-slot":`dropdown-menu-label`,"data-inset":i,className:e(`px-2 py-1.5 text-sm font-medium data-[inset]:pl-8`,t),...a})}function v({className:t,...i}){return r(n.Separator,{"data-slot":`dropdown-menu-separator`,className:e(`bg-border -mx-1 my-1 h-px`,t),...i})}function y({className:t,...n}){return r(`span`,{"data-slot":`dropdown-menu-shortcut`,className:e(`text-muted-foreground ml-auto text-xs tracking-widest`,t),...n})}function b({...e}){return r(n.Sub,{"data-slot":`dropdown-menu-sub`,...e})}function x({className:t,inset:a,children:s,...c}){return i(n.SubTrigger,{"data-slot":`dropdown-menu-sub-trigger`,"data-inset":a,className:e(`flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none`,`focus:bg-accent`,`focus:text-accent-foreground`,`data-[state=open]:bg-accent`,`data-[state=open]:text-accent-foreground`,`data-[inset]:pl-8`,t),...c,children:[s,r(o,{className:`ml-auto size-4`})]})}function S({className:t,...i}){return r(n.SubContent,{"data-slot":`dropdown-menu-sub-content`,className:e(`bg-popover text-popover-foreground`,`z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg`,`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`,t),...i})}export{c as DropdownMenu,m as DropdownMenuCheckboxItem,d as DropdownMenuContent,f as DropdownMenuGroup,p as DropdownMenuItem,_ as DropdownMenuLabel,l as DropdownMenuPortal,h as DropdownMenuRadioGroup,g as DropdownMenuRadioItem,v as DropdownMenuSeparator,y as DropdownMenuShortcut,b as DropdownMenuSub,S as DropdownMenuSubContent,x as DropdownMenuSubTrigger,u as DropdownMenuTrigger};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenuPrimitive"],"sources":["../packages/components/ui/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  align = \"start\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground\",\n          \"z-50\",\n          \"min-w-32\",\n          \"overflow-x-hidden overflow-y-auto\",\n          \"rounded-md border p-1.5 shadow-md\",\n          \"max-h-(--radix-dropdown-menu-content-available-height)\",\n          \"origin-(--radix-dropdown-menu-content-transform-origin)\",\n          \"data-[state=open]:animate-in\",\n          \"data-[state=open]:fade-in-0\",\n          \"data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:animate-out\",\n          \"data-[state=closed]:fade-out-0\",\n          \"data-[state=closed]:zoom-out-95\",\n          \"data-[side=bottom]:slide-in-from-top-2\",\n          \"data-[side=left]:slide-in-from-right-2\",\n          \"data-[side=right]:slide-in-from-left-2\",\n          \"data-[side=top]:slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n        align={align}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 text-sm outline-hidden transition-all select-none\",\n        \"focus:bg-accent/70\",\n        \"focus:text-accent-foreground\",\n        \"dark:data-[variant=destructive]:focus:bg-destructive/20\",\n        \"data-[inset]:pl-8\",\n        \"data-[disabled]:pointer-events-none\",\n        \"data-[disabled]:opacity-50\",\n        \"data-[variant=destructive]:text-destructive\",\n        \"data-[variant=destructive]:focus:bg-destructive/10\",\n        \"data-[variant=destructive]:focus:text-destructive\",\n        \"data-[variant=destructive]:*:[svg]:!text-destructive\",\n        \"[&_svg]:shrink-0\",\n        \"[&_svg]:pointer-events-none\",\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        \"[&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-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]:opacity-50\",\n        \"data-[disabled]:pointer-events-none\",\n        \"[&_svg]:pointer-events-none\",\n        \"[&_svg]:shrink-0\",\n        \"[&_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        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon size={16} />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-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        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none\",\n        \"focus:bg-accent\",\n        \"focus:text-accent-foreground\",\n        \"data-[state=open]:bg-accent\",\n        \"data-[state=open]:text-accent-foreground\",\n        \"data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground\",\n        \"z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        \"data-[state=open]:animate-in\",\n        \"data-[state=closed]:animate-out\",\n        \"data-[state=closed]:fade-out-0\",\n        \"data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95\",\n        \"data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2\",\n        \"data-[side=left]:slide-in-from-right-2\",\n        \"data-[side=right]:slide-in-from-left-2\",\n        \"data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n"],"mappings":"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"}

package/dist/file-uploader.cjs

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

package/dist/file-uploader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-uploader.cjs","names":["React","setValue: React.Dispatch<React.SetStateAction<T | undefined>>","React","value","React","Dropzone","cn","Upload","formatBytes","Image","Trash2","Progress","Button","FileText"],"sources":["../packages/hooks/use-callback-ref.ts","../packages/hooks/use-controllable-state.ts","../packages/components/ui/file-uploader.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx\n */\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef<T extends (...args: never[]) => unknown>(\n  callback: T | undefined,\n): T {\n  const callbackRef = React.useRef(callback);\n\n  React.useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // https://github.com/facebook/react/issues/19240\n  return React.useMemo(\n    () => ((...args) => callbackRef.current?.(...args)) as T,\n    [],\n  );\n}\n\nexport { useCallbackRef };\n","import React from \"react\";\n\nimport { useCallbackRef } from \"./use-callback-ref\";\n\n/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n */\n\ntype UseControllableStateParams<T> = {\n  prop?: T | undefined;\n  defaultProp?: T | undefined;\n  onChange?: (state: T) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nfunction useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange = () => {},\n}: UseControllableStateParams<T>) {\n  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({\n    defaultProp,\n    onChange,\n  });\n  const isControlled = prop !== undefined;\n  const value = isControlled ? prop : uncontrolledProp;\n  const handleChange = useCallbackRef(onChange);\n\n  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =\n    React.useCallback(\n      (nextValue) => {\n        if (isControlled) {\n          const setter = nextValue as SetStateFn<T>;\n          const value =\n            typeof nextValue === \"function\" ? setter(prop) : nextValue;\n          if (value !== prop) handleChange(value as T);\n        } else {\n          setUncontrolledProp(nextValue);\n        }\n      },\n      [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n  return [value, setValue] as const;\n}\n\nfunction useUncontrolledState<T>({\n  defaultProp,\n  onChange,\n}: Omit<UseControllableStateParams<T>, \"prop\">) {\n  const uncontrolledState = React.useState<T | undefined>(defaultProp);\n  const [value] = uncontrolledState;\n  const prevValueRef = React.useRef(value);\n  const handleChange = useCallbackRef(onChange);\n\n  React.useEffect(() => {\n    if (prevValueRef.current !== value) {\n      handleChange(value as T);\n      prevValueRef.current = value;\n    }\n  }, [value, prevValueRef, handleChange]);\n\n  return uncontrolledState;\n}\n\nexport { useControllableState };\n","\"use client\";\nimport React from \"react\";\nimport { FileText, Image, Trash2, Upload } from \"lucide-react\";\nimport Dropzone, {\n  type DropzoneProps,\n  type FileRejection,\n} from \"react-dropzone\";\nimport { toast } from \"sonner\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { useControllableState } from \"@/hooks/use-controllable-state\";\nimport { cn, formatBytes } from \"@/lib/utils\";\n\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Value of the uploader.\n   * @type File[]\n   * @default undefined\n   * @example value={files}\n   */\n  value?: File[];\n\n  /**\n   * Function to be called when the value changes.\n   * @type (files: File[]) => void\n   * @default undefined\n   * @example onValueChange={(files) => setFiles(files)}\n   */\n  onValueChange?: (files: File[]) => void;\n\n  /**\n   * Function to be called when files are uploaded.\n   * @type (files: File[]) => Promise<void>\n   * @default undefined\n   * @example onUpload={(files) => uploadFiles(files)}\n   */\n  onUpload?: (files: File[]) => Promise<void>;\n\n  /**\n   * Progress of the uploaded files.\n   * @type Record<string, number> | undefined\n   * @default undefined\n   * @example progresses={{ \"file1.png\": 50 }}\n   */\n  progresses?: Record<string, number>;\n\n  /**\n   * Accepted file types for the uploader.\n   * @type { [key: string]: string[]}\n   * @default\n   * ```ts\n   * { \"image/*\": [] }\n   * ```\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\n   */\n  accept?: DropzoneProps[\"accept\"];\n\n  /**\n   * Maximum file size for the uploader.\n   * @type number | undefined\n   * @default 1024 * 1024 * 2 // 2MB\n   * @example maxSize={1024 * 1024 * 2} // 2MB\n   */\n  maxSize?: DropzoneProps[\"maxSize\"];\n\n  /**\n   * Maximum number of files for the uploader.\n   * @type number | undefined\n   * @default 1\n   * @example maxFileCount={4}\n   */\n  maxFileCount?: DropzoneProps[\"maxFiles\"];\n\n  /**\n   * Whether the uploader should accept multiple files.\n   * @type boolean\n   * @default false\n   * @example multiple\n   */\n  multiple?: boolean;\n\n  /**\n   * Whether the uploader is disabled.\n   * @type boolean\n   * @default false\n   * @example disabled\n   */\n  disabled?: boolean;\n\n  showText?: boolean;\n  iconSize?: number;\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const {\n    value: valueProp,\n    onValueChange,\n    onUpload,\n    progresses,\n    accept = {\n      \"image/*\": [],\n    },\n    maxSize = 1024 * 1024 * 2,\n    maxFileCount = 1,\n    multiple = false,\n    disabled = false,\n    showText = true,\n    iconSize,\n    className,\n    ...dropzoneProps\n  } = props;\n\n  const [files, setFiles] = useControllableState({\n    prop: valueProp,\n    onChange: onValueChange,\n  });\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n        toast.error(\"Cannot upload more than 1 file at a time\");\n\n        return;\n      }\n\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n        toast.error(`Cannot upload more than ${maxFileCount} files`);\n        return;\n      }\n\n      const newFiles = acceptedFiles.map((file) =>\n        Object.assign(file, {\n          preview: URL.createObjectURL(file),\n        }),\n      );\n\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles;\n\n      setFiles(updatedFiles);\n\n      if (rejectedFiles.length > 0) {\n        rejectedFiles.forEach(({ file }) => {\n          toast.error(`File ${file.name} was rejected`);\n        });\n      }\n\n      if (\n        onUpload &&\n        updatedFiles.length > 0 &&\n        updatedFiles.length <= maxFileCount\n      ) {\n        const target =\n          updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;\n\n        onUpload(updatedFiles).then(() => {\n          setFiles([]);\n          toast(`${target} uploaded`);\n        });\n      }\n    },\n\n    [files, maxFileCount, multiple, onUpload, setFiles],\n  );\n\n  function onRemove(index: number) {\n    if (!files) return;\n\n    if (isFileWithPreview(files[index])) {\n      URL.revokeObjectURL(files[index].preview);\n    }\n\n    const newFiles = files.filter((_, i) => i !== index);\n    setFiles(newFiles);\n    onValueChange?.(newFiles);\n  }\n\n  // Revoke preview url when component unmounts\n  React.useEffect(() => {\n    return () => {\n      if (!files) return;\n      files.forEach((file) => {\n        if (isFileWithPreview(file)) {\n          URL.revokeObjectURL(file.preview);\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;\n\n  return (\n    <div className=\"relative flex w-full flex-col gap-6\">\n      <Dropzone\n        onDrop={onDrop}\n        accept={accept}\n        maxSize={maxSize}\n        maxFiles={maxFileCount}\n        multiple={maxFileCount > 1 || multiple}\n        disabled={isDisabled}\n      >\n        {({ getRootProps, getInputProps, isDragActive }) => (\n          <div\n            {...getRootProps()}\n            className={cn(\n              \"group\",\n              \"border-muted-foreground/25\",\n              \"hover:bg-muted/25\",\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-ring\",\n              \"focus-visible:ring-2\",\n              \"focus-visible:ring-offset-2\",\n              \"focus-visible:outline-hidden\",\n              isDragActive && \"border-muted-foreground/50\",\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\n                    className=\"text-muted-foreground size-7\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                <p className=\"text-muted-foreground font-medium\">\n                  Drop the files here\n                </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\n                    size={iconSize || 24}\n                    className=\"text-muted-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                {showText && (\n                  <div className=\"flex flex-col gap-px\">\n                    <p className=\"text-muted-foreground text-xs font-medium\">\n                      Drag {`'n'`} drop files here, or click to select files\n                    </p>\n                    <p className=\"text-muted-foreground/70 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=\"flex items-center gap-1\">\n              <Image\n                className=\"text-muted-foreground size-4\"\n                aria-hidden=\"true\"\n              />\n              <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n            </div>\n            <button\n              className=\"hover:text-muted-foreground text-muted-foreground/60 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\n                key={index}\n                file={file}\n                onRemove={() => onRemove(index)}\n                progress={progresses?.[file.name]}\n              />\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/40 hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs\">\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-accent-foreground line-clamp-1 text-sm\">\n              {file.name}\n            </p>\n            <p className=\"text-muted-foreground text-xs\">\n              {formatBytes(file.size)}\n            </p>\n          </div>\n          {progress ? <Progress value={progress} /> : null}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"size-7\"\n          onClick={onRemove}\n        >\n          <Trash2\n            size={16}\n            className=\"text-muted-foreground/60\"\n            aria-hidden=\"true\"\n          />\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 (\n      <img\n        src={file.preview}\n        className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\"\n      />\n    );\n  }\n\n  return (\n    <FileText\n      className=\"text-muted-foreground size-10 border\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/file-uploader.d.cts

@@ -0,0 +1,78 @@
+import React from "react";
+import { DropzoneProps } from "react-dropzone";
+
+//#region packages/components/ui/file-uploader.d.ts
+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;
+  showText?: boolean;
+  iconSize?: number;
+}
+declare function FileUploader(props: FileUploaderProps): React.JSX.Element;
+//#endregion
+export { FileUploader };
+//# sourceMappingURL=file-uploader.d.cts.map

package/dist/file-uploader.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import { DropzoneProps } from "react-dropzone";
+
+//#region packages/components/ui/file-uploader.d.ts
+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;
+  showText?: boolean;
+  iconSize?: number;
+}
+declare function FileUploader(props: FileUploaderProps): React.JSX.Element;
+//#endregion
+export { FileUploader };
+//# sourceMappingURL=file-uploader.d.ts.map

package/dist/file-uploader.js

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

package/dist/file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-uploader.js","names":["setValue: React.Dispatch<React.SetStateAction<T | undefined>>","value"],"sources":["../packages/hooks/use-callback-ref.ts","../packages/hooks/use-controllable-state.ts","../packages/components/ui/file-uploader.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx\n */\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef<T extends (...args: never[]) => unknown>(\n  callback: T | undefined,\n): T {\n  const callbackRef = React.useRef(callback);\n\n  React.useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // https://github.com/facebook/react/issues/19240\n  return React.useMemo(\n    () => ((...args) => callbackRef.current?.(...args)) as T,\n    [],\n  );\n}\n\nexport { useCallbackRef };\n","import React from \"react\";\n\nimport { useCallbackRef } from \"./use-callback-ref\";\n\n/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n */\n\ntype UseControllableStateParams<T> = {\n  prop?: T | undefined;\n  defaultProp?: T | undefined;\n  onChange?: (state: T) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nfunction useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange = () => {},\n}: UseControllableStateParams<T>) {\n  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({\n    defaultProp,\n    onChange,\n  });\n  const isControlled = prop !== undefined;\n  const value = isControlled ? prop : uncontrolledProp;\n  const handleChange = useCallbackRef(onChange);\n\n  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =\n    React.useCallback(\n      (nextValue) => {\n        if (isControlled) {\n          const setter = nextValue as SetStateFn<T>;\n          const value =\n            typeof nextValue === \"function\" ? setter(prop) : nextValue;\n          if (value !== prop) handleChange(value as T);\n        } else {\n          setUncontrolledProp(nextValue);\n        }\n      },\n      [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n  return [value, setValue] as const;\n}\n\nfunction useUncontrolledState<T>({\n  defaultProp,\n  onChange,\n}: Omit<UseControllableStateParams<T>, \"prop\">) {\n  const uncontrolledState = React.useState<T | undefined>(defaultProp);\n  const [value] = uncontrolledState;\n  const prevValueRef = React.useRef(value);\n  const handleChange = useCallbackRef(onChange);\n\n  React.useEffect(() => {\n    if (prevValueRef.current !== value) {\n      handleChange(value as T);\n      prevValueRef.current = value;\n    }\n  }, [value, prevValueRef, handleChange]);\n\n  return uncontrolledState;\n}\n\nexport { useControllableState };\n","\"use client\";\nimport React from \"react\";\nimport { FileText, Image, Trash2, Upload } from \"lucide-react\";\nimport Dropzone, {\n  type DropzoneProps,\n  type FileRejection,\n} from \"react-dropzone\";\nimport { toast } from \"sonner\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { useControllableState } from \"@/hooks/use-controllable-state\";\nimport { cn, formatBytes } from \"@/lib/utils\";\n\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Value of the uploader.\n   * @type File[]\n   * @default undefined\n   * @example value={files}\n   */\n  value?: File[];\n\n  /**\n   * Function to be called when the value changes.\n   * @type (files: File[]) => void\n   * @default undefined\n   * @example onValueChange={(files) => setFiles(files)}\n   */\n  onValueChange?: (files: File[]) => void;\n\n  /**\n   * Function to be called when files are uploaded.\n   * @type (files: File[]) => Promise<void>\n   * @default undefined\n   * @example onUpload={(files) => uploadFiles(files)}\n   */\n  onUpload?: (files: File[]) => Promise<void>;\n\n  /**\n   * Progress of the uploaded files.\n   * @type Record<string, number> | undefined\n   * @default undefined\n   * @example progresses={{ \"file1.png\": 50 }}\n   */\n  progresses?: Record<string, number>;\n\n  /**\n   * Accepted file types for the uploader.\n   * @type { [key: string]: string[]}\n   * @default\n   * ```ts\n   * { \"image/*\": [] }\n   * ```\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\n   */\n  accept?: DropzoneProps[\"accept\"];\n\n  /**\n   * Maximum file size for the uploader.\n   * @type number | undefined\n   * @default 1024 * 1024 * 2 // 2MB\n   * @example maxSize={1024 * 1024 * 2} // 2MB\n   */\n  maxSize?: DropzoneProps[\"maxSize\"];\n\n  /**\n   * Maximum number of files for the uploader.\n   * @type number | undefined\n   * @default 1\n   * @example maxFileCount={4}\n   */\n  maxFileCount?: DropzoneProps[\"maxFiles\"];\n\n  /**\n   * Whether the uploader should accept multiple files.\n   * @type boolean\n   * @default false\n   * @example multiple\n   */\n  multiple?: boolean;\n\n  /**\n   * Whether the uploader is disabled.\n   * @type boolean\n   * @default false\n   * @example disabled\n   */\n  disabled?: boolean;\n\n  showText?: boolean;\n  iconSize?: number;\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n  const {\n    value: valueProp,\n    onValueChange,\n    onUpload,\n    progresses,\n    accept = {\n      \"image/*\": [],\n    },\n    maxSize = 1024 * 1024 * 2,\n    maxFileCount = 1,\n    multiple = false,\n    disabled = false,\n    showText = true,\n    iconSize,\n    className,\n    ...dropzoneProps\n  } = props;\n\n  const [files, setFiles] = useControllableState({\n    prop: valueProp,\n    onChange: onValueChange,\n  });\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n        toast.error(\"Cannot upload more than 1 file at a time\");\n\n        return;\n      }\n\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n        toast.error(`Cannot upload more than ${maxFileCount} files`);\n        return;\n      }\n\n      const newFiles = acceptedFiles.map((file) =>\n        Object.assign(file, {\n          preview: URL.createObjectURL(file),\n        }),\n      );\n\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles;\n\n      setFiles(updatedFiles);\n\n      if (rejectedFiles.length > 0) {\n        rejectedFiles.forEach(({ file }) => {\n          toast.error(`File ${file.name} was rejected`);\n        });\n      }\n\n      if (\n        onUpload &&\n        updatedFiles.length > 0 &&\n        updatedFiles.length <= maxFileCount\n      ) {\n        const target =\n          updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;\n\n        onUpload(updatedFiles).then(() => {\n          setFiles([]);\n          toast(`${target} uploaded`);\n        });\n      }\n    },\n\n    [files, maxFileCount, multiple, onUpload, setFiles],\n  );\n\n  function onRemove(index: number) {\n    if (!files) return;\n\n    if (isFileWithPreview(files[index])) {\n      URL.revokeObjectURL(files[index].preview);\n    }\n\n    const newFiles = files.filter((_, i) => i !== index);\n    setFiles(newFiles);\n    onValueChange?.(newFiles);\n  }\n\n  // Revoke preview url when component unmounts\n  React.useEffect(() => {\n    return () => {\n      if (!files) return;\n      files.forEach((file) => {\n        if (isFileWithPreview(file)) {\n          URL.revokeObjectURL(file.preview);\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;\n\n  return (\n    <div className=\"relative flex w-full flex-col gap-6\">\n      <Dropzone\n        onDrop={onDrop}\n        accept={accept}\n        maxSize={maxSize}\n        maxFiles={maxFileCount}\n        multiple={maxFileCount > 1 || multiple}\n        disabled={isDisabled}\n      >\n        {({ getRootProps, getInputProps, isDragActive }) => (\n          <div\n            {...getRootProps()}\n            className={cn(\n              \"group\",\n              \"border-muted-foreground/25\",\n              \"hover:bg-muted/25\",\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-ring\",\n              \"focus-visible:ring-2\",\n              \"focus-visible:ring-offset-2\",\n              \"focus-visible:outline-hidden\",\n              isDragActive && \"border-muted-foreground/50\",\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\n                    className=\"text-muted-foreground size-7\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                <p className=\"text-muted-foreground font-medium\">\n                  Drop the files here\n                </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\n                    size={iconSize || 24}\n                    className=\"text-muted-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                {showText && (\n                  <div className=\"flex flex-col gap-px\">\n                    <p className=\"text-muted-foreground text-xs font-medium\">\n                      Drag {`'n'`} drop files here, or click to select files\n                    </p>\n                    <p className=\"text-muted-foreground/70 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=\"flex items-center gap-1\">\n              <Image\n                className=\"text-muted-foreground size-4\"\n                aria-hidden=\"true\"\n              />\n              <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n            </div>\n            <button\n              className=\"hover:text-muted-foreground text-muted-foreground/60 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\n                key={index}\n                file={file}\n                onRemove={() => onRemove(index)}\n                progress={progresses?.[file.name]}\n              />\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/40 hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs\">\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-accent-foreground line-clamp-1 text-sm\">\n              {file.name}\n            </p>\n            <p className=\"text-muted-foreground text-xs\">\n              {formatBytes(file.size)}\n            </p>\n          </div>\n          {progress ? <Progress value={progress} /> : null}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"size-7\"\n          onClick={onRemove}\n        >\n          <Trash2\n            size={16}\n            className=\"text-muted-foreground/60\"\n            aria-hidden=\"true\"\n          />\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 (\n      <img\n        src={file.preview}\n        className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\"\n      />\n    );\n  }\n\n  return (\n    <FileText\n      className=\"text-muted-foreground size-10 border\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n"],"mappings":"sXAUA,SAAS,EACP,EACG,CACH,IAAM,EAAc,EAAM,OAAO,GAOjC,OALA,EAAM,cAAgB,CACpB,EAAY,QAAU,CACvB,GAGM,EAAM,cACH,GAAG,IAAS,EAAY,UAAU,GAAG,IAC7C,EAAE,CAEL,CCRD,SAAS,EAAwB,CAC/B,OACA,cACA,eAAiB,CAAE,EACW,CAAE,CAChC,GAAM,CAAC,EAAkB,EAAoB,CAAG,EAAqB,CACnE,cACA,WACD,EACK,EAAe,IAAS,IAAA,GACxB,EAAQ,EAAe,EAAO,EAC9B,EAAe,EAAe,GAE9BA,EACJ,EAAM,YACH,GAAc,CACb,GAAI,EAAc,CAChB,IAAM,EAAS,EACTC,EACJ,OAAO,GAAc,WAAa,EAAO,GAAQ,EAC/CA,IAAU,GAAM,EAAaA,EAClC,MACC,EAAoB,EAEvB,EACD,CAAC,EAAc,EAAM,EAAqB,EAAa,EAG3D,MAAO,CAAC,EAAO,EAAS,AACzB,CAED,SAAS,EAAwB,CAC/B,cACA,WAC4C,CAAE,CAC9C,IAAM,EAAoB,EAAM,SAAwB,GAClD,CAAC,EAAM,CAAG,EACV,EAAe,EAAM,OAAO,GAC5B,EAAe,EAAe,GASpC,OAPA,EAAM,cAAgB,CAChB,EAAa,UAAY,IAC3B,EAAa,GACb,EAAa,QAAU,EAE1B,EAAE,CAAC,EAAO,EAAc,EAAa,EAE/B,CACR,CC8BD,SAAgB,EAAa,EAA0B,CACrD,GAAM,CACJ,MAAO,EACP,gBACA,WACA,aACA,SAAS,CACP,UAAW,EAAE,CACd,CACD,UAAU,KAAO,KAAO,EACxB,eAAe,EACf,WAAW,GACX,WAAW,GACX,WAAW,GACX,WACA,YACA,GAAG,EACJ,CAAG,EAEE,CAAC,EAAO,EAAS,CAAG,EAAqB,CAC7C,KAAM,EACN,SAAU,EACX,EAEK,EAAS,EAAM,aAClB,EAAuB,IAAmC,CACzD,GAAI,CAAC,GAAY,IAAiB,GAAK,EAAc,OAAS,EAAG,CAC/D,EAAM,MAAM,4CAEZ,MACD,CAED,IAAK,GAAO,QAAU,GAAK,EAAc,OAAS,EAAc,CAC9D,EAAM,MAAM,2BAA2B,EAAa,SACpD,MACD,CAED,IAAM,EAAW,EAAc,IAAK,GAClC,OAAO,OAAO,EAAM,CAClB,QAAS,IAAI,gBAAgB,GAC9B,GAGG,EAAe,EAAQ,CAAC,GAAG,EAAO,GAAG,EAAS,CAAG,EAUvD,GARA,EAAS,GAEL,EAAc,OAAS,GACzB,EAAc,SAAS,CAAE,OAAM,GAAK,CAClC,EAAM,MAAM,QAAQ,EAAK,KAAK,eAC/B,GAID,GACA,EAAa,OAAS,GACtB,EAAa,QAAU,EACvB,CACA,IAAM,EACJ,EAAa,OAAS,EAAI,GAAG,EAAa,OAAO,QAAU,OAE7D,EAAS,GAAc,SAAW,CAChC,EAAS,EAAE,EACX,EAAM,GAAG,EAAO,WACjB,EACF,CACF,EAED,CAAC,EAAO,EAAc,EAAU,EAAU,EAAS,EAGrD,SAAS,EAAS,EAAe,CAC/B,GAAI,CAAC,EAAO,OAER,EAAkB,EAAM,KAC1B,IAAI,gBAAgB,EAAM,GAAO,SAGnC,IAAM,EAAW,EAAM,QAAQ,EAAG,IAAM,IAAM,GAC9C,EAAS,GACT,IAAgB,EACjB,CAGD,EAAM,kBACS,CACN,GACL,EAAM,QAAS,GAAS,CAClB,EAAkB,IACpB,IAAI,gBAAgB,EAAK,QAE5B,EACF,EAEA,EAAE,EAEL,IAAM,EAAa,IAAa,GAAO,QAAU,IAAM,EAEvD,OACE,EAAC,MAAA,CAAI,UAAU,gDACb,EAAC,EAAA,CACS,SACA,SACC,UACT,SAAU,EACV,SAAU,EAAe,GAAK,EAC9B,SAAU,YAER,CAAE,eAAc,gBAAe,eAAc,GAC7C,EAAC,MAAA,CACC,GAAI,IACJ,UAAW,EACT,QACA,6BACA,oBACA,mIACA,yBACA,0BACA,uBACA,8BACA,+BACA,GAAgB,6BAChB,GAAc,iCACd,GAEF,GAAI,YAEJ,EAAC,QAAA,CAAM,GAAI,IAAA,EACV,EACC,EAAC,MAAA,CAAI,UAAU,oEACb,EAAC,MAAA,CAAI,UAAU,iDACb,EAAC,EAAA,CACC,UAAU,+BACV,cAAY,WAGhB,EAAC,IAAA,CAAE,UAAU,6CAAoC,2BAKnD,EAAC,MAAA,CAAI,UAAU,oEACb,EAAC,MAAA,CAAI,UAAU,iDACb,EAAC,EAAA,CACC,KAAM,GAAY,GAClB,UAAU,wBACV,cAAY,WAGf,GACC,EAAC,MAAA,CAAI,UAAU,iCACb,EAAC,IAAA,CAAE,UAAU,sDAA4C,QACjD,MAAM,gDAEd,EAAC,IAAA,CAAE,UAAU,6CAAmC,iBAE7C,EAAe,EACZ,IAAI,IAAiB,IAAW,WAAa,EAAa;qCAC/C,EAAY,GAAS,QAChC,gBAAgB,EAAY,KAAA,cAS/C,GAAO,OACN,EAAC,MAAA,CAAI,UAAU,yCACb,EAAC,MAAA,CAAI,UAAU,0DACb,EAAC,MAAA,CAAI,UAAU,oCACb,EAAC,EAAA,CACC,UAAU,+BACV,cAAY,SAEd,EAAC,IAAA,CAAE,UAAU,oBAAU,mBAAiB,EAAM,OAAO,UAEvD,EAAC,SAAA,CACC,UAAU,6HACV,YAAe,CACR,IACL,EAAM,QAAS,GAAS,CACjB,EAAkB,IACvB,IAAI,gBAAgB,EAAK,QAC1B,GACD,EAAS,EAAE,EACX,IAAgB,EAAE,EACnB,YAED,EAAC,EAAA,CAAO,KAAM,GAAI,cAAY,SAC9B,EAAC,IAAA,CAAE,UAAU,mBAAU,qBAG3B,EAAC,MAAA,CAAI,UAAU,iCACZ,GAAO,KAAK,EAAM,IACjB,EAAC,EAAA,CAEO,OACN,aAAgB,EAAS,GACzB,SAAU,IAAa,EAAK,OAHvB,SAQX,KAAA,EAGT,CAQD,SAAS,EAAS,CAAE,OAAM,WAAU,WAAyB,CAAE,CAC7D,OACE,EAAC,MAAA,CAAI,UAAU,6HACb,EAAC,MAAA,CAAI,UAAU,gCACZ,EAAkB,GAAQ,EAAC,EAAA,CAAkB,OAAA,EAAW,KACzD,EAAC,MAAA,CAAI,UAAU,uCACb,EAAC,MAAA,CAAI,UAAU,oCACb,EAAC,IAAA,CAAE,UAAU,uDACV,EAAK,OAER,EAAC,IAAA,CAAE,UAAU,yCACV,EAAY,EAAK,WAGrB,EAAW,EAAC,EAAA,CAAS,MAAO,EAAA,EAAe,KAAA,MAGhD,EAAC,MAAA,CAAI,UAAU,mCACb,EAAC,EAAA,CACC,KAAK,SACL,QAAQ,QACR,KAAK,OACL,UAAU,SACV,QAAS,YAET,EAAC,EAAA,CACC,KAAM,GACN,UAAU,2BACV,cAAY,SAEd,EAAC,OAAA,CAAK,UAAU,mBAAU,uBAKnC,CAED,SAAS,EAAkB,EAAgD,CACzE,MAAO,YAAa,GAAQ,OAAO,EAAK,SAAY,QACrD,CAMD,SAAS,EAAY,CAAE,OAAwB,CAAE,CAU/C,OATI,EAAK,KAAK,WAAW,UAErB,EAAC,MAAA,CACC,IAAK,EAAK,QACV,UAAU,kGAMd,EAAC,EAAA,CACC,UAAU,uCACV,cAAY,QAGjB"}

package/dist/form.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./utils-BsjVK5EW.cjs`),n=require(`./label-BWUQswhZ.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`radix-ui`)),a=e.__toESM(require(`react/jsx-runtime`)),o=e.__toESM(require(`react-hook-form`)),s=o.FormProvider,c=r.default.createContext({}),l=({...e})=>(0,a.jsx)(c.Provider,{value:{name:e.name},children:(0,a.jsx)(o.Controller,{...e})}),u=()=>{let e=r.default.useContext(c),t=r.default.useContext(d),{getFieldState:n,control:i,resetField:a}=(0,o.useFormContext)(),s=(0,o.useFormState)({name:e.name}),l=n(e.name,s);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:u}=t;return{id:u,control:i,resetField:a,name:e.name,formItemId:`${u}-form-item`,formDescriptionId:`${u}-form-item-description`,formMessageId:`${u}-form-item-message`,...l}},d=r.default.createContext({});function f({className:e,...n}){let i=r.default.useId();return(0,a.jsx)(d.Provider,{value:{id:i},children:(0,a.jsx)(`div`,{"data-slot":`form-item`,className:t.cn(`grid gap-1`,e),...n})})}function p({className:e,...r}){let{formItemId:i}=u();return(0,a.jsx)(n.Label,{"data-slot":`form-label`,className:t.cn(`text-xs`,e),htmlFor:i,...r})}function m({...e}){let{error:t,formItemId:n,formDescriptionId:r,formMessageId:o}=u();return(0,a.jsx)(i.Slot.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${o}`:`${r}`,"aria-invalid":!!t,...e})}function h({className:e,...n}){let{formDescriptionId:r}=u();return(0,a.jsx)(`p`,{"data-slot":`form-description`,id:r,className:t.cn(`text-muted-foreground text-sm`,e),...n})}function g({className:e,children:n,...r}){let{error:i,formMessageId:o}=u();return(0,a.jsx)(`span`,{"data-slot":`form-message`,id:o,className:t.cn(`text-destructive text-xs`,e),...r,children:i?String(i?.message??``):n})}exports.Form=s,exports.FormControl=m,exports.FormDescription=h,exports.FormField=l,exports.FormItem=f,exports.FormLabel=p,exports.FormMessage=g,exports.useFormField=u;
+//# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.cjs","names":["FormProvider","React","Controller","cn","Label","SlotPrimitive"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\nimport { Label as LabelPrimitive, Slot as SlotPrimitive } from \"radix-ui\";\n\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue,\n);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue,\n);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-1\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField();\n  return (\n    <Label\n      data-slot=\"form-label\"\n      className={cn(\"text-xs\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({\n  ...props\n}: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField();\n\n  return (\n    <span\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-xs\", className)}\n      {...props}\n    >\n      {error ? String(error?.message ?? \"\") : children}\n    </span>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  useFormField,\n};\n"],"mappings":"0QAgBM,EAAOA,EAAAA,aASP,EAAmBC,EAAAA,QAAM,cAC7B,EAAE,EAGE,GAGJ,CACA,GAAG,EACkC,IAEnC,EAAA,EAAA,KAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,WACpD,EAAA,EAAA,KAACC,EAAAA,WAAAA,CAAW,GAAI,EAAA,IAKhB,MAAqB,CACzB,IAAM,EAAeD,EAAAA,QAAM,WAAW,GAChC,EAAcA,EAAAA,QAAM,WAAW,GAC/B,CAAE,gBAAe,UAAS,aAAY,EAAA,EAAA,EAAA,kBACtC,GAAA,EAAA,EAAA,cAAyB,CAAE,KAAM,EAAa,KAAM,EACpD,EAAa,EAAc,EAAa,KAAM,GAEpD,GAAI,CAAC,EACH,MAAU,MAAM,kDAGlB,GAAM,CAAE,KAAI,CAAG,EAEf,MAAO,CACL,KACA,UACA,aACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,AACF,EAMK,EAAkBA,EAAAA,QAAM,cAC5B,EAAE,EAGJ,SAAS,EAAS,CAAE,YAAW,GAAG,EAAoC,CAAE,CACtE,IAAM,EAAKA,EAAAA,QAAM,QAEjB,OACE,EAAA,EAAA,KAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,WACrC,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,YACV,UAAWE,EAAAA,GAAG,aAAc,GAC5B,GAAI,KAIX,CAED,SAAS,EAAU,CACjB,YACA,GAAG,EAC8C,CAAE,CACnD,GAAM,CAAE,aAAY,CAAG,IACvB,OACE,EAAA,EAAA,KAACC,EAAAA,MAAAA,CACC,YAAU,aACV,UAAWD,EAAAA,GAAG,UAAW,GACzB,QAAS,EACT,GAAI,GAGT,CAED,SAAS,EAAY,CACnB,GAAG,EAC6C,CAAE,CAClD,GAAM,CAAE,QAAO,aAAY,oBAAmB,gBAAe,CAC3D,IAEF,OACE,EAAA,EAAA,KAACE,EAAAA,KAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBACG,EAEG,GAAG,EAAkB,GAAG,IADxB,GAAG,IAGT,eAAc,CAAC,CAAC,EAChB,GAAI,GAGT,CAED,SAAS,EAAgB,CAAE,YAAW,GAAG,EAAkC,CAAE,CAC3E,GAAM,CAAE,oBAAmB,CAAG,IAE9B,OACE,EAAA,EAAA,KAAC,IAAA,CACC,YAAU,mBACV,GAAI,EACJ,UAAWF,EAAAA,GAAG,gCAAiC,GAC/C,GAAI,GAGT,CAED,SAAS,EAAY,CACnB,YACA,WACA,GAAG,EACuB,CAAE,CAC5B,GAAM,CAAE,QAAO,gBAAe,CAAG,IAEjC,OACE,EAAA,EAAA,KAAC,OAAA,CACC,YAAU,eACV,GAAI,EACJ,UAAWA,EAAAA,GAAG,2BAA4B,GAC1C,GAAI,WAEH,EAAQ,OAAO,GAAO,SAAW,IAAM,GAG7C"}

package/dist/form.d.cts

@@ -0,0 +1,47 @@
+import React from "react";
+import { Label, Slot } from "radix-ui";
+import * as react_hook_form0 from "react-hook-form";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/ui/form.d.ts
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: react_hook_form0.FieldError;
+  id: string;
+  control: react_hook_form0.Control<FieldValues, any, FieldValues>;
+  resetField: react_hook_form0.UseFormResetField<FieldValues>;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+};
+declare function FormItem({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element;
+declare function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label.Root>): React.JSX.Element;
+declare function FormControl({
+  ...props
+}: React.ComponentProps<typeof Slot.Slot>): React.JSX.Element;
+declare function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">): React.JSX.Element;
+declare function FormMessage({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"p">): React.JSX.Element;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.d.cts.map

package/dist/form.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { Label, Slot } from "radix-ui";
+import * as react_hook_form0 from "react-hook-form";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+
+//#region packages/components/ui/form.d.ts
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: react_hook_form0.FieldError;
+  id: string;
+  control: react_hook_form0.Control<FieldValues, any, FieldValues>;
+  resetField: react_hook_form0.UseFormResetField<FieldValues>;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+};
+declare function FormItem({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element;
+declare function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label.Root>): React.JSX.Element;
+declare function FormControl({
+  ...props
+}: React.ComponentProps<typeof Slot.Slot>): React.JSX.Element;
+declare function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">): React.JSX.Element;
+declare function FormMessage({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"p">): React.JSX.Element;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.d.ts.map

package/dist/form.js

@@ -0,0 +1,2 @@
+"use client";import{cn as e}from"./utils-D9AH0PUV.js";import{Label as t}from"./label-Bunoo8Hy.js";import n from"react";import{Label as r,Slot as i}from"radix-ui";import{jsx as a}from"react/jsx-runtime";import{Controller as o,FormProvider as s,useFormContext as c,useFormState as l}from"react-hook-form";const u=s,d=n.createContext({}),f=({...e})=>a(d.Provider,{value:{name:e.name},children:a(o,{...e})}),p=()=>{let e=n.useContext(d),t=n.useContext(m),{getFieldState:r,control:i,resetField:a}=c(),o=l({name:e.name}),s=r(e.name,o);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:u}=t;return{id:u,control:i,resetField:a,name:e.name,formItemId:`${u}-form-item`,formDescriptionId:`${u}-form-item-description`,formMessageId:`${u}-form-item-message`,...s}},m=n.createContext({});function h({className:t,...r}){let i=n.useId();return a(m.Provider,{value:{id:i},children:a(`div`,{"data-slot":`form-item`,className:e(`grid gap-1`,t),...r})})}function g({className:n,...r}){let{formItemId:i}=p();return a(t,{"data-slot":`form-label`,className:e(`text-xs`,n),htmlFor:i,...r})}function _({...e}){let{error:t,formItemId:n,formDescriptionId:r,formMessageId:o}=p();return a(i.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${o}`:`${r}`,"aria-invalid":!!t,...e})}function v({className:t,...n}){let{formDescriptionId:r}=p();return a(`p`,{"data-slot":`form-description`,id:r,className:e(`text-muted-foreground text-sm`,t),...n})}function y({className:t,children:n,...r}){let{error:i,formMessageId:o}=p();return a(`span`,{"data-slot":`form-message`,id:o,className:e(`text-destructive text-xs`,t),...r,children:i?String(i?.message??``):n})}export{u as Form,_ as FormControl,v as FormDescription,f as FormField,h as FormItem,g as FormLabel,y as FormMessage,p as useFormField};
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":["Label","SlotPrimitive"],"sources":["../packages/components/ui/form.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\nimport { Label as LabelPrimitive, Slot as SlotPrimitive } from \"radix-ui\";\n\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue,\n);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, control, resetField } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    control,\n    resetField,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue,\n);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-1\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { formItemId } = useFormField();\n  return (\n    <Label\n      data-slot=\"form-label\"\n      className={cn(\"text-xs\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({\n  ...props\n}: React.ComponentProps<typeof SlotPrimitive.Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField();\n\n  return (\n    <span\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-xs\", className)}\n      {...props}\n    >\n      {error ? String(error?.message ?? \"\") : children}\n    </span>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  useFormField,\n};\n"],"mappings":"+SAgBA,MAAM,EAAO,EASP,EAAmB,EAAM,cAC7B,EAAE,EAGE,GAGJ,CACA,GAAG,EACkC,GAEnC,EAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,UACpD,EAAC,EAAA,CAAW,GAAI,EAAA,IAKhB,MAAqB,CACzB,IAAM,EAAe,EAAM,WAAW,GAChC,EAAc,EAAM,WAAW,GAC/B,CAAE,gBAAe,UAAS,aAAY,CAAG,IACzC,EAAY,EAAa,CAAE,KAAM,EAAa,KAAM,EACpD,EAAa,EAAc,EAAa,KAAM,GAEpD,GAAI,CAAC,EACH,MAAU,MAAM,kDAGlB,GAAM,CAAE,KAAI,CAAG,EAEf,MAAO,CACL,KACA,UACA,aACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,AACF,EAMK,EAAkB,EAAM,cAC5B,EAAE,EAGJ,SAAS,EAAS,CAAE,YAAW,GAAG,EAAoC,CAAE,CACtE,IAAM,EAAK,EAAM,QAEjB,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,UACrC,EAAC,MAAA,CACC,YAAU,YACV,UAAW,EAAG,aAAc,GAC5B,GAAI,KAIX,CAED,SAAS,EAAU,CACjB,YACA,GAAG,EAC8C,CAAE,CACnD,GAAM,CAAE,aAAY,CAAG,IACvB,OACE,EAACA,EAAAA,CACC,YAAU,aACV,UAAW,EAAG,UAAW,GACzB,QAAS,EACT,GAAI,GAGT,CAED,SAAS,EAAY,CACnB,GAAG,EAC6C,CAAE,CAClD,GAAM,CAAE,QAAO,aAAY,oBAAmB,gBAAe,CAC3D,IAEF,OACE,EAACC,EAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBACG,EAEG,GAAG,EAAkB,GAAG,IADxB,GAAG,IAGT,eAAc,CAAC,CAAC,EAChB,GAAI,GAGT,CAED,SAAS,EAAgB,CAAE,YAAW,GAAG,EAAkC,CAAE,CAC3E,GAAM,CAAE,oBAAmB,CAAG,IAE9B,OACE,EAAC,IAAA,CACC,YAAU,mBACV,GAAI,EACJ,UAAW,EAAG,gCAAiC,GAC/C,GAAI,GAGT,CAED,SAAS,EAAY,CACnB,YACA,WACA,GAAG,EACuB,CAAE,CAC5B,GAAM,CAAE,QAAO,gBAAe,CAAG,IAEjC,OACE,EAAC,OAAA,CACC,YAAU,eACV,GAAI,EACJ,UAAW,EAAG,2BAA4B,GAC1C,GAAI,WAEH,EAAQ,OAAO,GAAO,SAAW,IAAM,GAG7C"}