@customafk/lunas-ui 0.2.50 → 0.2.52

package/dist/field-fIef7NR0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-fIef7NR0.cjs","names":["Label","Separator","BanIcon"],"sources":["../packages/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { BanIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\nconst FieldSet = memo(({ className, ...props }: React.ComponentProps<'fieldset'>) => {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n      {...props}\n    />\n  );\n});\nFieldSet.displayName = 'FieldSet';\n\nconst FieldLegend = memo(({ className, variant = 'legend', ...props }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) => {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}\n      {...props}\n    />\n  );\n});\nFieldLegend.displayName = 'FieldLegend';\n\nconst FieldGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldGroup.displayName = 'FieldGroup';\n\nconst fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {\n  variants: {\n    orientation: {\n      vertical: ['flex-col *:w-full [&>.sr-only]:w-auto'],\n      horizontal: [\n        'flex-row items-center',\n        '*:data-[slot=field-label]:flex-auto',\n        'has-[>[data-slot=field-content]]:items-start',\n        'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n      responsive: [\n        'flex-col *:w-full [&>.sr-only]:w-auto',\n        '@md/field-group:flex-row',\n        '@md/field-group:items-center',\n        '@md/field-group:*:w-auto',\n        '@md/field-group:*:data-[slot=field-label]:flex-auto',\n        '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n        '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nconst Field = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => {\n  return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n});\nField.displayName = 'Field';\n\nconst FieldContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"field-content\" className={cn('group/field-content flex basis-2/5 flex-col gap-1.5 leading-snug', className)} {...props} />;\n});\nFieldContent.displayName = 'FieldContent';\n\nconst FieldLabel = memo(({ className, ...props }: React.ComponentProps<typeof Label>) => {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        'group/field-label peer/field-label flex w-fit gap-2 leading-snug',\n        'group-data-[disabled=true]/field:opacity-50',\n        'has-[>[data-slot=field]]:w-full',\n        'has-[>[data-slot=field]]:flex-col',\n        'has-[>[data-slot=field]]:rounded-md',\n        'has-[>[data-slot=field]]:border',\n        '*:data-[slot=field]:p-4',\n        'has-data-[state=checked]:bg-primary/5',\n        'has-data-[state=checked]:border-primary',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldLabel.displayName = 'FieldLabel';\n\nconst FieldTitle = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50', className)}\n      {...props}\n    />\n  );\n});\nFieldTitle.displayName = 'FieldTitle';\n\nconst FieldDescription = memo(({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        'text-text-positive-weak text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nFieldDescription.displayName = 'FieldDescription';\n\nconst FieldSeparator = memo(\n  ({\n    children,\n    className,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    children?: React.ReactNode;\n  }) => {\n    return (\n      <div\n        data-slot=\"field-separator\"\n        data-content={!!children}\n        className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n        {...props}\n      >\n        <Separator className=\"absolute inset-0 top-1/2\" />\n        {children && (\n          <span className=\"relative mx-auto block w-fit bg-background px-2 text-text-positive-weak\" data-slot=\"field-separator-content\">\n            {children}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nFieldSeparator.displayName = 'FieldSeparator';\n\nconst FieldError = memo(\n  ({\n    className,\n    children,\n    errors,\n    ...props\n  }: React.ComponentProps<'div'> & {\n    errors?: Array<{ message?: string } | undefined>;\n  }) => {\n    const content = useMemo(() => {\n      if (children) {\n        return children;\n      }\n\n      if (!errors) {\n        return null;\n      }\n\n      if (errors?.length === 1 && errors[0]?.message) {\n        return (\n          <div className=\"flex flex-row items-center justify-start gap-x-0.5\">\n            <BanIcon size={14} />\n            <p>{errors[0].message}</p>\n          </div>\n        );\n      }\n\n      return (\n        <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n          {errors.map(error => {\n            if (typeof error === 'string') return <li key={error}>{error}</li>;\n            if (!error?.message) return null;\n            return <li key={error.message}>{error.message}</li>;\n          })}\n        </ul>\n      );\n    }, [children, errors]);\n\n    if (!content) {\n      return null;\n    }\n\n    return (\n      <div role=\"alert\" data-slot=\"field-error\" className={cn('w-full font-normal text-danger text-xs', className)} {...props}>\n        {content}\n      </div>\n    );\n  }\n);\nFieldError.displayName = 'FieldError';\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };\n"],"mappings":"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"}

package/dist/file-uploader-BM0x9VBh.cjs

@@ -0,0 +1,3 @@
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./button-C--DAN1D.cjs`),n=require(`./progress-Dlgbu5Ff.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`})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
+//# sourceMappingURL=file-uploader-BM0x9VBh.cjs.map

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

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

package/dist/file-uploader-BTWXTBeQ.mjs

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

package/dist/file-uploader-BTWXTBeQ.mjs.map

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

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

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

package/dist/file-uploader-nUOkG_fv.d.mts

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

package/dist/flex-BSTiMh2t.d.mts

@@ -0,0 +1,117 @@
+import * as react187 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types10 from "class-variance-authority/types";
+
+//#region packages/components/layouts/flex.d.ts
+declare const flexVariants: (props?: ({
+  vertical?: boolean | null | undefined;
+  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
+  wrap?: boolean | null | undefined;
+  margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+} & class_variance_authority_types10.ClassProp) | undefined) => string;
+type Props = {
+  /** Additional Tailwind classes merged on top of the variant-generated classes. */
+  className?: string;
+  /**
+   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Controls the width of the flex container.
+   * - `'full'` — `w-full`
+   * - `'auto'` — `w-auto`
+   * - `'fit'`  — `w-fit` (default)
+   * - `'screen'` — `w-screen`
+   * - `'min'` — `w-min`
+   * - `'max'` — `w-max`
+   * - `'null'` — no width utility applied
+   * @default 'fit'
+   */
+  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';
+  /**
+   * Allows children to wrap onto multiple lines when `true`.
+   * @default true
+   */
+  wrap?: boolean;
+  /**
+   * Uniform margin applied to the container.
+   * - `'none'` — `m-0` (default)
+   * - `'sm'` — `m-2`
+   * - `'md'` — `m-4`
+   * - `'lg'` — `m-6`
+   * - `'xl'` — `m-8`
+   * @default 'none'
+   */
+  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Uniform padding applied to the container.
+   * - `'none'` — `p-0`
+   * - `'sm'`  — `p-2` (default)
+   * - `'md'`  — `p-4`
+   * - `'lg'`  — `p-6`
+   * - `'xl'`  — `p-8`
+   * @default 'sm'
+   */
+  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Gap between child elements.
+   * - `'none'` — `gap-0`
+   * - `'xs'`  — `gap-1` (default)
+   * - `'sm'`  — `gap-2`
+   * - `'md'`  — `gap-4`
+   * - `'lg'`  — `gap-6`
+   * - `'xl'`  — `gap-8`
+   * @default 'xs'
+   */
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Justification of children along the main axis (`justify-content`).
+   * @default 'start'
+   */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+  /**
+   * Alignment of children along the cross axis (`align-items`).
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+} & VariantProps<typeof flexVariants>;
+/**
+ * A flexible, variant-driven flex container built on CVA and TailwindCSS.
+ *
+ * @example
+ * ```tsx
+ * import { Flex } from '@customafk/lunas-ui/layouts/flex';
+ *
+ * // Horizontal row with centered children and a medium gap
+ * <Flex gap="md" justify="between" align="center">
+ *   <span>Left</span>
+ *   <span>Right</span>
+ * </Flex>
+ *
+ * // Vertical stack that fills parent width
+ * <Flex vertical width="full" gap="sm" padding="md">
+ *   <p>First item</p>
+ *   <p>Second item</p>
+ * </Flex>
+ * ```
+ */
+declare const Flex: react187.MemoExoticComponent<({
+  vertical,
+  wrap,
+  width,
+  margin,
+  padding,
+  gap,
+  justify,
+  align,
+  className,
+  children
+}: React.PropsWithChildren<Props>) => react187.JSX.Element>;
+//#endregion
+export { Flex as t };
+//# sourceMappingURL=flex-BSTiMh2t.d.mts.map

package/dist/flex-Bx9Nmr53.mjs

@@ -0,0 +1,2 @@
+import{memo as e}from"react";import{cn as t}from"@customafk/react-toolkit/utils";import{cva as n}from"class-variance-authority";import{jsx as r}from"react/jsx-runtime";const i=n([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),a=e(({vertical:e,wrap:n,width:a,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>r(`div`,{className:t(i({vertical:e,width:a,wrap:n,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));a.displayName=`Flex`;export{a as t};
+//# sourceMappingURL=flex-Bx9Nmr53.mjs.map

package/dist/flex-Bx9Nmr53.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-Bx9Nmr53.mjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"wKAOA,MAAM,EAAe,EAAI,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,EAAO,GAAM,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,cAEhG,EAAC,MAAA,CACC,UAAW,EACT,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/flex-ClUVVSda.d.cts

@@ -0,0 +1,117 @@
+import * as react6 from "react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/layouts/flex.d.ts
+declare const flexVariants: (props?: ({
+  vertical?: boolean | null | undefined;
+  width?: "max" | "min" | "full" | "auto" | "fit" | "screen" | "null" | null | undefined;
+  wrap?: boolean | null | undefined;
+  margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type Props = {
+  /** Additional Tailwind classes merged on top of the variant-generated classes. */
+  className?: string;
+  /**
+   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Controls the width of the flex container.
+   * - `'full'` — `w-full`
+   * - `'auto'` — `w-auto`
+   * - `'fit'`  — `w-fit` (default)
+   * - `'screen'` — `w-screen`
+   * - `'min'` — `w-min`
+   * - `'max'` — `w-max`
+   * - `'null'` — no width utility applied
+   * @default 'fit'
+   */
+  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';
+  /**
+   * Allows children to wrap onto multiple lines when `true`.
+   * @default true
+   */
+  wrap?: boolean;
+  /**
+   * Uniform margin applied to the container.
+   * - `'none'` — `m-0` (default)
+   * - `'sm'` — `m-2`
+   * - `'md'` — `m-4`
+   * - `'lg'` — `m-6`
+   * - `'xl'` — `m-8`
+   * @default 'none'
+   */
+  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Uniform padding applied to the container.
+   * - `'none'` — `p-0`
+   * - `'sm'`  — `p-2` (default)
+   * - `'md'`  — `p-4`
+   * - `'lg'`  — `p-6`
+   * - `'xl'`  — `p-8`
+   * @default 'sm'
+   */
+  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Gap between child elements.
+   * - `'none'` — `gap-0`
+   * - `'xs'`  — `gap-1` (default)
+   * - `'sm'`  — `gap-2`
+   * - `'md'`  — `gap-4`
+   * - `'lg'`  — `gap-6`
+   * - `'xl'`  — `gap-8`
+   * @default 'xs'
+   */
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Justification of children along the main axis (`justify-content`).
+   * @default 'start'
+   */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+  /**
+   * Alignment of children along the cross axis (`align-items`).
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+} & VariantProps<typeof flexVariants>;
+/**
+ * A flexible, variant-driven flex container built on CVA and TailwindCSS.
+ *
+ * @example
+ * ```tsx
+ * import { Flex } from '@customafk/lunas-ui/layouts/flex';
+ *
+ * // Horizontal row with centered children and a medium gap
+ * <Flex gap="md" justify="between" align="center">
+ *   <span>Left</span>
+ *   <span>Right</span>
+ * </Flex>
+ *
+ * // Vertical stack that fills parent width
+ * <Flex vertical width="full" gap="sm" padding="md">
+ *   <p>First item</p>
+ *   <p>Second item</p>
+ * </Flex>
+ * ```
+ */
+declare const Flex: react6.MemoExoticComponent<({
+  vertical,
+  wrap,
+  width,
+  margin,
+  padding,
+  gap,
+  justify,
+  align,
+  className,
+  children
+}: React.PropsWithChildren<Props>) => react6.JSX.Element>;
+//#endregion
+export { Flex as t };
+//# sourceMappingURL=flex-ClUVVSda.d.cts.map

package/dist/flex-ld7BqXoM.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-350yNsax.cjs`);let t=require(`react`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`),i=require(`react/jsx-runtime`);const a=(0,r.cva)([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),o=(0,t.memo)(({vertical:e,wrap:t,width:r,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>(0,i.jsx)(`div`,{className:(0,n.cn)(a({vertical:e,width:r,wrap:t,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));o.displayName=`Flex`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=flex-ld7BqXoM.cjs.map

package/dist/flex-ld7BqXoM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-ld7BqXoM.cjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"gLAOA,MAAM,GAAA,EAAA,EAAA,KAAmB,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,GAAA,EAAA,EAAA,OAAa,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,eAEhG,EAAA,EAAA,KAAC,MAAA,CACC,WAAA,EAAA,EAAA,IACE,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}