@customafk/lunas-ui 0.2.37 → 0.2.39

package/dist/ui/empty.mjs

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

package/dist/ui/empty.mjs.map

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

package/dist/ui/field.d.mts

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

package/dist/ui/field.mjs

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

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

@@ -1,103 +0,0 @@
-import * as react134 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): react134.JSX.Element;
-//#endregion
-export { FileUploader };
-//# sourceMappingURL=file-uploader.d.mts.map

package/dist/ui/file-uploader.mjs

@@ -1,3 +0,0 @@
-"use client";import"../button.variants-B8aRZ52K.mjs";import{t as e}from"../button-CfPTDyoq.mjs";import{t}from"../progress-DCBKnTx0.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 FileUploader};
-//# sourceMappingURL=file-uploader.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"file-uploader.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/ui/form.d.mts

@@ -1,112 +0,0 @@
-import * as react293 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
-
-/**
- * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.
- *
- * @example
- * ```tsx
- * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';
- * import { useForm } from 'react-hook-form';
- *
- * const form = useForm<{ username: string }>();
- *
- * <Form {...form}>
- *   <form onSubmit={form.handleSubmit(onSubmit)}>
- *     <FormField
- *       control={form.control}
- *       name="username"
- *       render={({ field }) => (
- *         <FormItem>
- *           <FormLabel>Username</FormLabel>
- *           <FormControl><input {...field} /></FormControl>
- *           <FormMessage />
- *         </FormItem>
- *       )}
- *     />
- *   </form>
- * </Form>
- * ```
- */
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({
-  children,
-  watch,
-  getValues,
-  getFieldState,
-  setError,
-  clearErrors,
-  setValue,
-  setValues,
-  trigger,
-  formState,
-  resetField,
-  reset,
-  handleSubmit,
-  unregister,
-  control,
-  register,
-  setFocus,
-  subscribe
-}: react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-/**
- * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.
- */
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => react293.JSX.Element;
-/**
- * Hook that returns the field state and IDs for the enclosing FormField.
- * Must be called inside a component rendered within a `<FormField>`.
- */
-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;
-};
-/**
- * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.
- *
- * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).
- */
-declare const FormItem: react293.MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & {
-  orientation?: "vertical" | "horizontal" | "responsive";
-}) => react293.JSX.Element>;
-/** Styled label automatically associated with the FormItem's control via `htmlFor`. */
-declare const FormLabel: react293.MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Label.Root>) => react293.JSX.Element>;
-/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */
-declare const FormControl: react293.MemoExoticComponent<({
-  ...props
-}: React.ComponentProps<typeof Slot.Slot>) => react293.JSX.Element>;
-/** Helper text displayed below the control that provides additional context about the field. */
-declare function FormDescription({
-  className,
-  ...props
-}: React.ComponentProps<'p'>): react293.JSX.Element;
-/** Displays the validation error message for the field, or falls back to `children` when there is no error. */
-declare function FormMessage({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'p'>): react293.JSX.Element;
-//#endregion
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
-//# sourceMappingURL=form.d.mts.map

package/dist/ui/form.mjs

@@ -1,2 +0,0 @@
-"use client";import"../separator-C6s-YvlT.mjs";import"../label-D9uNQ9b_.mjs";import{o as e,r as t,t as n}from"../field-DhgAIueI.mjs";import{createContext as r,memo as i,use as a,useId as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c}from"react/jsx-runtime";import{Slot as l}from"radix-ui";import{Controller as u,FormProvider as d,useFormContext as f,useFormState as p}from"react-hook-form";const m=d,h=r({}),g=({...e})=>c(h.Provider,{value:{name:e.name},children:c(u,{...e})}),_=()=>{let e=a(h),t=a(v),{getFieldState:n,control:r,resetField:i}=f(),o=p({name:e.name}),s=n(e.name,o);if(!e)throw Error(`useFormField should be used within <FormField>`);let{id:c}=t;return{id:c,control:r,resetField:i,name:e.name,formItemId:`${c}-form-item`,formDescriptionId:`${c}-form-item-description`,formMessageId:`${c}-form-item-message`,...s}},v=r({}),y=i(({className:e,orientation:t=`responsive`,...r})=>{let i=o();return c(v.Provider,{value:{id:i},children:c(n,{orientation:t,...r,className:e})})});y.displayName=`FormItem`;const b=i(({...t})=>{let{formItemId:n}=_();return c(e,{htmlFor:n,...t})});b.displayName=`FormLabel`;const x=i(({...e})=>{let{error:t,formItemId:n,formDescriptionId:r,formMessageId:i}=_();return c(l.Slot,{"data-slot":`form-control`,id:n,"aria-describedby":t?`${r} ${i}`:`${r}`,"aria-invalid":!!t,...e})});x.displayName=`FormControl`;function S({className:e,...n}){let{formDescriptionId:r}=_();return c(t,{id:r,className:s(`text-text-positive-weak text-sm/6 leading-normal font-normal`,`group-has-data-[orientation=horizontal]/field:text-balance`,`last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5`,`[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4`,e),...n})}function C({className:e,children:t,...n}){let{error:r,formMessageId:i}=_();return c(`span`,{"data-slot":`form-message`,id:i,className:s(`text-danger text-xs`,e),...n,children:r?String(r?.message??``):t})}export{m as Form,x as FormControl,S as FormDescription,g as FormField,y as FormItem,b as FormLabel,C as FormMessage,_ as useFormField};
-//# sourceMappingURL=form.mjs.map

package/dist/ui/form.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.mjs","names":["SlotPrimitive"],"sources":["../../packages/components/ui/form.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { type Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui';\nimport { createContext, memo, use, useId } from 'react';\nimport type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';\nimport { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';\nimport { Field, FieldDescription, FieldLabel } from './field';\n\n/**\n * Re-export of react-hook-form's `FormProvider`; wrap your form with this to give all nested form components access to the form context.\n *\n * @example\n * ```tsx\n * import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@customafk/lunas-ui/ui/form';\n * import { useForm } from 'react-hook-form';\n *\n * const form = useForm<{ username: string }>();\n *\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"username\"\n *       render={({ field }) => (\n *         <FormItem>\n *           <FormLabel>Username</FormLabel>\n *           <FormControl><input {...field} /></FormControl>\n *           <FormMessage />\n *         </FormItem>\n *       )}\n *     />\n *   </form>\n * </Form>\n * ```\n */\nconst Form = FormProvider;\n\ntype FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/**\n * Connects a single react-hook-form field to the form context; renders a `Controller` and passes `name` down to nested FormItem, FormLabel, FormControl, and FormMessage.\n */\nconst FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/**\n * Hook that returns the field state and IDs for the enclosing FormField.\n * Must be called inside a component rendered within a `<FormField>`.\n */\nconst useFormField = () => {\n  const fieldContext = use(FormFieldContext);\n  const itemContext = use(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 = createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/**\n * Container for a single form field — generates a unique ID and provides it via context to FormLabel, FormControl, and FormMessage.\n *\n * @param orientation - Layout direction: `'vertical'`, `'horizontal'`, or `'responsive'` (default).\n */\nconst FormItem = memo(\n  ({\n    className,\n    orientation = 'responsive',\n    ...props\n  }: React.ComponentProps<'div'> & {\n    orientation?: 'vertical' | 'horizontal' | 'responsive';\n  }) => {\n    const id = useId();\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <Field orientation={orientation} {...props} className={className} />\n      </FormItemContext.Provider>\n    );\n  }\n);\nFormItem.displayName = 'FormItem';\n\n/** Styled label automatically associated with the FormItem's control via `htmlFor`. */\nconst FormLabel = memo(({ ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) => {\n  const { formItemId } = useFormField();\n  return <FieldLabel htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = 'FormLabel';\n\n/** Radix Slot wrapper that wires the correct `id`, `aria-describedby`, and `aria-invalid` attributes onto the underlying control element. */\nconst FormControl = memo(({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <SlotPrimitive.Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = 'FormControl';\n\n/** Helper text displayed below the control that provides additional context about the field. */\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <FieldDescription\n      id={formDescriptionId}\n      className={cn(\n        'text-text-positive-weak text-sm/6 leading-normal font-normal',\n        '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}\n\n/** Displays the validation error message for the field, or falls back to `children` when there is no error. */\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n\n  return (\n    <span data-slot=\"form-message\" id={formMessageId} className={cn('text-danger text-xs', className)} {...props}>\n      {error ? String(error?.message ?? '') : children}\n    </span>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };\n"],"mappings":"0aAoCA,MAAM,EAAO,EAMP,EAAmB,EAAqC,EAAE,CAA0B,CAKpF,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAA,CAAS,MAAO,CAAE,KAAM,EAAM,KAAM,UACpD,EAAC,EAAA,CAAW,GAAI,EAAA,CAAS,EACC,CAQ1B,MAAqB,CACzB,IAAM,EAAe,EAAI,EAAiB,CACpC,EAAc,EAAI,EAAgB,CAClC,CAAE,gBAAe,UAAS,cAAe,GAAgB,CACzD,EAAY,EAAa,CAAE,KAAM,EAAa,KAAM,CAAC,CACrD,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,UACA,aACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ,EAOG,EAAkB,EAAoC,EAAE,CAAyB,CAOjF,EAAW,GACd,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,EAAK,GAAO,CAElB,OACE,EAAC,EAAgB,SAAA,CAAS,MAAO,CAAE,KAAI,UACrC,EAAC,EAAA,CAAmB,cAAa,GAAI,EAAkB,aAAa,EAC3C,EAGhC,CACD,EAAS,YAAc,WAGvB,MAAM,EAAY,GAAM,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,GAAc,CACrC,OAAO,EAAC,EAAA,CAAW,QAAS,EAAY,GAAI,GAAS,EACrD,CACF,EAAU,YAAc,YAGxB,MAAM,EAAc,GAAM,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,GAAc,CAE9E,OACE,EAACA,EAAc,KAAA,CACb,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,GACJ,EAEJ,CACF,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAC,EAAA,CACC,GAAI,EACJ,UAAW,EACT,+DACA,6DACA,+DACA,oEACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,GAAc,CAE/C,OACE,EAAC,OAAA,CAAK,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,EAAU,CAAE,GAAI,WACpG,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,GACnC"}

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

@@ -1,37 +0,0 @@
-import * as react152 from "react";
-import { HoverCard as HoverCard$1 } from "radix-ui";
-
-//#region packages/components/ui/hover-card.d.ts
-
-/**
- * Root provider for the HoverCard — shows a floating card when the trigger is hovered.
- *
- * @example
- * ```tsx
- * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';
- *
- * <HoverCard>
- *   <HoverCardTrigger>@username</HoverCardTrigger>
- *   <HoverCardContent>
- *     <p>Profile details here</p>
- *   </HoverCardContent>
- * </HoverCard>
- * ```
- */
-declare function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCard$1.Root>): react152.JSX.Element;
-/** The element that triggers the HoverCard on pointer enter. */
-declare function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCard$1.Trigger>): react152.JSX.Element;
-/** The floating card panel displayed when the trigger is hovered. */
-declare function HoverCardContent({
-  className,
-  align,
-  sideOffset,
-  ...props
-}: React.ComponentProps<typeof HoverCard$1.Content>): react152.JSX.Element;
-//#endregion
-export { HoverCard, HoverCardContent, HoverCardTrigger };
-//# sourceMappingURL=hover-card.d.mts.map

package/dist/ui/hover-card.mjs

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"hover-card.mjs","names":["HoverCardPrimitive"],"sources":["../../packages/components/ui/hover-card.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { HoverCard as HoverCardPrimitive } from 'radix-ui';\n\n/**\n * Root provider for the HoverCard — shows a floating card when the trigger is hovered.\n *\n * @example\n * ```tsx\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@customafk/lunas-ui/ui/hover-card';\n *\n * <HoverCard>\n *   <HoverCardTrigger>@username</HoverCardTrigger>\n *   <HoverCardContent>\n *     <p>Profile details here</p>\n *   </HoverCardContent>\n * </HoverCard>\n * ```\n */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that triggers the HoverCard on pointer enter. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating card panel displayed when the trigger is hovered. */\nfunction HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\n"],"mappings":"8IAoBA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAACA,EAAmB,KAAA,CAAK,YAAU,aAAa,GAAI,GAAS,CAItE,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAACA,EAAmB,QAAA,CAAQ,YAAU,qBAAqB,GAAI,GAAS,CAIjF,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAACA,EAAmB,OAAA,CAAO,YAAU,6BACnC,EAACA,EAAmB,QAAA,CAClB,YAAU,qBACH,QACK,aACZ,UAAW,EACT,oeACA,EACD,CACD,GAAI,GACJ,EACwB"}

package/dist/ui/image.d.mts

@@ -1,36 +0,0 @@
-//#region packages/components/ui/image.d.ts
-/** Props for the Image component. */
-type Props = {
-  /** URL of the image to display. */
-  src?: string;
-  /** Accessible alt text for the image. */
-  alt?: string;
-  /** Width of the image container (number treated as pixels). */
-  width?: number | string;
-  /** Height of the image container (number treated as pixels). */
-  height?: number | string;
-  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */
-  maxRetries?: number;
-  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */
-  retryDelay?: number;
-  /** Class name applied to the outer container div. */
-  className?: string;
-  /** Class name applied to the `<img>` element. */
-  imageClassName?: string;
-  /** Click handler for the image container. */
-  onClick?: () => void;
-};
-/**
- * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.
- *
- * @example
- * ```tsx
- * import { Image } from '@customafk/lunas-ui/ui/image';
- *
- * <Image src="/hero.jpg" alt="Hero" width={400} height={300} maxRetries={3} />
- * ```
- */
-declare const Image: React.FC<Props>;
-//#endregion
-export { Image };
-//# sourceMappingURL=image.d.mts.map

package/dist/ui/image.mjs

@@ -1 +0,0 @@
-import"../skeleton-DupQ91XW.mjs";import{t as e}from"../image-D2U1SBw5.mjs";export{e as Image};

package/dist/ui/input-otp.d.mts

@@ -1,59 +0,0 @@
-import * as react54 from "react";
-import { OTPInput } from "input-otp";
-
-//#region packages/components/ui/input-otp.d.ts
-
-/**
- * One-time password (OTP) input composed of individual character slots.
- *
- * @example
- * ```tsx
- * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@customafk/lunas-ui/ui/input-otp';
- *
- * <InputOTP maxLength={6}>
- *   <InputOTPGroup>
- *     <InputOTPSlot index={0} />
- *     <InputOTPSlot index={1} />
- *     <InputOTPSlot index={2} />
- *   </InputOTPGroup>
- *   <InputOTPSeparator />
- *   <InputOTPGroup>
- *     <InputOTPSlot index={3} />
- *     <InputOTPSlot index={4} />
- *     <InputOTPSlot index={5} />
- *   </InputOTPGroup>
- * </InputOTP>
- * ```
- */
-declare function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  /** Class name applied to the outer container div. */
-  containerClassName?: string;
-}): react54.JSX.Element;
-/** Flex container that groups a sequence of InputOTPSlot elements. */
-declare function InputOTPGroup({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): react54.JSX.Element;
-/**
- * A single character slot in an InputOTP — displays the typed character and a blinking caret when focused.
- *
- * @param index - Zero-based position of this slot within the OTP sequence.
- */
-declare function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<'div'> & {
-  index: number;
-}): react54.JSX.Element;
-/** Visual separator (dash) placed between InputOTPGroup elements. */
-declare function InputOTPSeparator({
-  ...props
-}: React.ComponentProps<'div'>): react54.JSX.Element;
-//#endregion
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
-//# sourceMappingURL=input-otp.d.mts.map

package/dist/ui/input-otp.mjs

@@ -1,2 +0,0 @@
-"use client";import{MinusIcon as e}from"lucide-react";import{use as t}from"react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{OTPInput as a,OTPInputContext as o}from"input-otp";function s({className:e,containerClassName:t,...i}){return r(a,{"data-slot":`input-otp`,containerClassName:n(`flex items-center gap-2 has-disabled:opacity-50`,t),className:n(`disabled:cursor-not-allowed`,e),...i})}function c({className:e,...t}){return r(`div`,{"data-slot":`input-otp-group`,className:n(`flex items-center`,e),...t})}function l({index:e,className:a,...s}){let{char:c,hasFakeCaret:l,isActive:u}=t(o)?.slots[e]??{};return i(`div`,{"data-slot":`input-otp-slot`,"data-active":u,className:n(`data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]`,a),...s,children:[c,l&&r(`div`,{className:`pointer-events-none absolute inset-0 flex items-center justify-center`,children:r(`div`,{className:`animate-caret-blink bg-foreground h-4 w-px duration-1000`})})]})}function u({...t}){return r(`div`,{"data-slot":`input-otp-separator`,role:`separator`,...t,children:r(e,{})})}export{s as InputOTP,c as InputOTPGroup,u as InputOTPSeparator,l as InputOTPSlot};
-//# sourceMappingURL=input-otp.mjs.map

package/dist/ui/input-otp.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-otp.mjs","names":[],"sources":["../../packages/components/ui/input-otp.tsx"],"sourcesContent":["'use client';\nimport { use } from 'react';\n\nimport { MinusIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { OTPInput, OTPInputContext } from 'input-otp';\n\n/**\n * One-time password (OTP) input composed of individual character slots.\n *\n * @example\n * ```tsx\n * import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@customafk/lunas-ui/ui/input-otp';\n *\n * <InputOTP maxLength={6}>\n *   <InputOTPGroup>\n *     <InputOTPSlot index={0} />\n *     <InputOTPSlot index={1} />\n *     <InputOTPSlot index={2} />\n *   </InputOTPGroup>\n *   <InputOTPSeparator />\n *   <InputOTPGroup>\n *     <InputOTPSlot index={3} />\n *     <InputOTPSlot index={4} />\n *     <InputOTPSlot index={5} />\n *   </InputOTPGroup>\n * </InputOTP>\n * ```\n */\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  /** Class name applied to the outer container div. */\n  containerClassName?: string;\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n}\n\n/** Flex container that groups a sequence of InputOTPSlot elements. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"input-otp-group\" className={cn('flex items-center', className)} {...props} />;\n}\n\n/**\n * A single character slot in an InputOTP — displays the typed character and a blinking caret when focused.\n *\n * @param index - Zero-based position of this slot within the OTP sequence.\n */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  index: number;\n}) {\n  const inputOTPContext = use(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Visual separator (dash) placed between InputOTPGroup elements. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n"],"mappings":"kPA+BA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAIF,CACD,OACE,EAAC,EAAA,CACC,YAAU,YACV,mBAAoB,EAAG,kDAAmD,EAAmB,CAC7F,UAAW,EAAG,8BAA+B,EAAU,CACvD,GAAI,GACJ,CAKN,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAC,MAAA,CAAI,YAAU,kBAAkB,UAAW,EAAG,oBAAqB,EAAU,CAAE,GAAI,GAAS,CAQtG,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,YADJ,EAAI,EAAgB,EACc,MAAM,IAAU,EAAE,CAE5E,OACE,EAAC,MAAA,CACC,YAAU,iBACV,cAAa,EACb,UAAW,EACT,2fACA,EACD,CACD,GAAI,YAEH,EACA,GACC,EAAC,MAAA,CAAI,UAAU,iFACb,EAAC,MAAA,CAAI,UAAU,2DAAA,CAA6D,EACxE,CAAA,EAEJ,CAKV,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAC,MAAA,CAAI,YAAU,sBAAsB,KAAK,YAAY,GAAI,WACxD,EAAC,EAAA,EAAA,CAAY,EACT"}

package/dist/ui/input.d.mts

@@ -1,2 +0,0 @@
-import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-DXO2mTgG.mjs";
-export { Input, InputVariantProps, inputVariants };

package/dist/ui/input.mjs

@@ -1 +0,0 @@
-"use client";import{n as e,t}from"../input-5gk-Jv1y.mjs";export{t as Input,e as inputVariants};

package/dist/ui/inputs/search-input.d.mts

@@ -1,29 +0,0 @@
-import { t as Input } from "../../input-DXO2mTgG.mjs";
-import * as react286 from "react";
-
-//#region packages/components/ui/inputs/search-input.d.ts
-
-/**
- * Props for {@link SearchInput}. Accepts all native props of the underlying
- * `Input` component (itself a thin wrapper around `<input>`), including
- * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.
- * The `type` prop is fixed to `"search"` and cannot be overridden.
- */
-type Props = React.ComponentPropsWithoutRef<typeof Input>;
-/**
- * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.
- *
- * @example
- * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';
- *
- * <form onSubmit={handleSearch}>
- *   <SearchInput placeholder="Search…" value={query} onChange={(e) => setQuery(e.target.value)} />
- * </form>
- */
-declare const SearchInput: ({
-  className,
-  ...rest
-}: Props) => react286.JSX.Element;
-//#endregion
-export { SearchInput };
-//# sourceMappingURL=search-input.d.mts.map

package/dist/ui/inputs/search-input.mjs

@@ -1,2 +0,0 @@
-import{t as e}from"../../input-5gk-Jv1y.mjs";import{ArrowRightIcon as t,SearchIcon as n}from"lucide-react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({className:o,...s})=>a(`div`,{className:`relative`,children:[i(e,{...s,type:`search`,className:r(`ps-9 pe-9`,o)}),i(`div`,{className:`pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50`,children:i(n,{size:16})}),i(`button`,{className:`absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":`Submit search`,type:`submit`,children:i(t,{size:16,"aria-hidden":`true`})})]});export{o as SearchInput};
-//# sourceMappingURL=search-input.mjs.map

package/dist/ui/inputs/search-input.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-input.mjs","names":[],"sources":["../../../packages/components/ui/inputs/search-input.tsx"],"sourcesContent":["import { ArrowRightIcon, SearchIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '../input';\n\n/**\n * Props for {@link SearchInput}. Accepts all native props of the underlying\n * `Input` component (itself a thin wrapper around `<input>`), including\n * `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, etc.\n * The `type` prop is fixed to `\"search\"` and cannot be overridden.\n */\ntype Props = React.ComponentPropsWithoutRef<typeof Input>;\n\n/**\n * A search input field with a leading search icon and a trailing arrow submit button, intended for use inside an HTML `<form>` element.\n *\n * @example\n * import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input';\n *\n * <form onSubmit={handleSearch}>\n *   <SearchInput placeholder=\"Search…\" value={query} onChange={(e) => setQuery(e.target.value)} />\n * </form>\n */\nexport const SearchInput = ({ className, ...rest }: Props) => {\n  return (\n    <div className=\"relative\">\n      <Input {...rest} type=\"search\" className={cn('ps-9 pe-9', className)} />\n      <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n"],"mappings":"iNAwBA,MAAa,GAAe,CAAE,YAAW,GAAG,KAExC,EAAC,MAAA,CAAI,UAAU,qBACb,EAAC,EAAA,CAAM,GAAI,EAAM,KAAK,SAAS,UAAW,EAAG,YAAa,EAAU,EAAI,CACxE,EAAC,MAAA,CAAI,UAAU,iJACb,EAAC,EAAA,CAAW,KAAM,GAAA,CAAM,EACpB,CACN,EAAC,SAAA,CACC,UAAU,0XACV,aAAW,gBACX,KAAK,kBAEL,EAAC,EAAA,CAAe,KAAM,GAAI,cAAY,QAAS,EACxC,GACL"}