npm - @customafk/lunas-ui - Versions diffs - 0.2.75 → 0.2.77 - Mend

@customafk/lunas-ui 0.2.75 → 0.2.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (806) hide show

package/dist/ui/field.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field.mjs","names":[],"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":"mUAYA,MAAM,EAAW,GAAM,CAAE,YAAW,GAAG,KAEnC,EAAC,WAAD,CACE,YAAU,YACV,UAAW,EAAG,sBAAuB,+EAAgF,CAAS,EAC9H,GAAI,CACL,CAAA,CAEJ,EACD,EAAS,YAAc,WAEvB,MAAM,EAAc,GAAM,CAAE,YAAW,UAAU,SAAU,GAAG,KAE1D,EAAC,SAAD,CACE,YAAU,eACV,eAAc,EACd,UAAW,EAAG,mBAAoB,kCAAmC,+BAAgC,CAAS,EAC9G,GAAI,CACL,CAAA,CAEJ,EACD,EAAY,YAAc,cAE1B,MAAM,EAAa,GAAM,CAAE,YAAW,GAAG,KAErC,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EACT,uIACA,CACF,EACA,GAAI,CACL,CAAA,CAEJ,EACD,EAAW,YAAc,aAEzB,MAAM,EAAgB,EAAI,qEAAsE,CAC9F,SAAU,CACR,YAAa,CACX,SAAU,CAAC,uCAAuC,EAClD,WAAY,CACV,wBACA,sCACA,+CACA,yEACF,EACA,WAAY,CACV,wCACA,2BACA,+BACA,2BACA,sDACA,+DACA,yFACF,CACF,CACF,EACA,gBAAiB,CACf,YAAa,UACf,CACF,CAAC,EAEK,EAAQ,GAAM,CAAE,YAAW,cAAc,WAAY,GAAG,KACrD,EAAC,MAAD,CAAK,YAAU,QAAQ,mBAAkB,EAAa,UAAW,EAAG,EAAc,CAAE,aAAY,CAAC,EAAG,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpI,EACD,EAAM,YAAc,QAEpB,MAAM,EAAe,GAAM,CAAE,YAAW,GAAG,KAClC,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAW,EAAG,mEAAoE,CAAS,EAAG,GAAI,CAAQ,CAAA,CACjJ,EACD,EAAa,YAAc,eAE3B,MAAM,EAAa,GAAM,CAAE,YAAW,GAAG,KAErC,EAAC,EAAD,CACE,YAAU,cACV,UAAW,EACT,mEACA,8CACA,kCACA,oCACA,sCACA,kCACA,0BACA,wCACA,0CACA,CACF,EACA,GAAI,CACL,CAAA,CAEJ,EACD,EAAW,YAAc,aAEzB,MAAM,EAAa,GAAM,CAAE,YAAW,GAAG,KAErC,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAG,6GAA8G,CAAS,EACrI,GAAI,CACL,CAAA,CAEJ,EACD,EAAW,YAAc,aAEzB,MAAM,EAAmB,GAAM,CAAE,YAAW,GAAG,KAE3C,EAAC,IAAD,CACE,YAAU,oBACV,UAAW,EACT,wHACA,+DACA,oEACA,CACF,EACA,GAAI,CACL,CAAA,CAEJ,EACD,EAAiB,YAAc,mBAE/B,MAAM,EAAiB,GACpB,CACC,WACA,YACA,GAAG,KAKD,EAAC,MAAD,CACE,YAAU,kBACV,eAAc,CAAC,CAAC,EAChB,UAAW,EAAG,4EAA6E,CAAS,EACpG,GAAI,~~WAJN~~,CAME,EAAC,EAAD,CAAW,UAAU,0BAA4B,CAAA,EAChD,GACC,EAAC,OAAD,CAAM,UAAU,0EAA0E,YAAU,0BACjG,UACG,CAAA,CAEL,GAGX,EACA,EAAe,YAAc,iBAE7B,MAAM,EAAa,GAChB,CACC,YACA,WACA,SACA,GAAG,KAGC,CACJ,IAAM,EAAU,MACV,IAIC,EAID,GAAQ,SAAW,GAAK,EAAO,EAAE,EAAE,QAEnC,EAAC,MAAD,CAAK,UAAU,~~8DAAf~~,CACE,EAAC,EAAD,CAAS,KAAM,EAAK,CAAA,EACpB,EAAC,IAAD,CAAA,SAAI,EAAO,EAAE,CAAC,OAAW,CAAA,CACtB,IAKP,EAAC,KAAD,CAAI,UAAU,~~8CACX~~,EAAO,IAAI,GACN,OAAO,GAAU,SAAiB,EAAC,KAAD,CAAA,SAAiB,CAAU,EAAlB,CAAkB,EAC5D,GAAO,QACL,EAAC,KAAD,CAAA,SAAyB,EAAM,OAAY,EAAlC,EAAM,OAA4B,EADtB,IAE7B,CACC,CAAA,EAnBG,MAqBR,CAAC,EAAU,CAAM,CAAC,EAMrB,OAJK,EAKH,EAAC,MAAD,CAAK,KAAK,QAAQ,YAAU,cAAc,UAAW,EAAG,yCAA0C,CAAS,EAAG,GAAI,~~WAC~~/G,CACE,CAAA,EANE,IAQX,CACF,EACA,EAAW,YAAc"}
1	+ {"version":3,"file":"field.mjs","names":[],"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/ui/file-uploader.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-uploader.cjs","names":["Dropzone","Upload","Image","Trash2","Progress","Button","FileText"],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect } from 'react';\nimport Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone';\nimport { useControllableState } from '@customafk/react-toolkit/hooks/useControllableState';\nimport { cn, formatBytes } from '@customafk/react-toolkit/utils';\n\nimport { FileText, Image, Trash2, Upload } from 'lucide-react';\nimport { toast } from 'sonner';\n\nimport { Button } from '@/components/ui/button';\nimport { Progress } from '@/components/ui/progress';\n\n/*\n Props for the FileUploader component.\n \n @example\n * ```tsx\n * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';\n \n <FileUploader\n * accept={{ 'image/': [] }}\n maxSize={1024 * 1024 * 5}\n * maxFileCount={3}\n * multiple\n * onUpload={async (files) => { await uploadFiles(files); }}\n * />\n * ```\n /\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n Value of the uploader.\n * @type File[]\n * @default undefined\n * @example value={files}\n /\n value?: File[];\n\n /\n Function to be called when the value changes.\n * @type (files: File[]) => void\n * @default undefined\n * @example onValueChange={(files) => setFiles(files)}\n /\n onValueChange?: (files: File[]) => void;\n\n /\n Function to be called when files are uploaded.\n * @type (files: File[]) => Promise<void>\n * @default undefined\n * @example onUpload={(files) => uploadFiles(files)}\n /\n onUpload?: (files: File[]) => Promise<void>;\n\n /\n Progress of the uploaded files.\n * @type Record<string, number> \| undefined\n * @default undefined\n * @example progresses={{ \"file1.png\": 50 }}\n /\n progresses?: Record<string, number>;\n\n /\n Accepted file types for the uploader.\n * @type { [key: string]: string[]}\n * @default\n * ```ts\n * { \"image/\": [] }\n ```\n * @example accept={[\"image/png\", \"image/jpeg\"]}\n /\n accept?: DropzoneProps['accept'];\n\n /\n Maximum file size for the uploader.\n * @type number \| undefined\n * @default 1024 * 1024 * 2 // 2MB\n * @example maxSize={1024 * 1024 * 2} // 2MB\n /\n maxSize?: DropzoneProps['maxSize'];\n\n /\n Maximum number of files for the uploader.\n * @type number \| undefined\n * @default 1\n * @example maxFileCount={4}\n /\n maxFileCount?: DropzoneProps['maxFiles'];\n\n /\n Whether the uploader should accept multiple files.\n * @type boolean\n * @default false\n * @example multiple\n /\n multiple?: boolean;\n\n /\n Whether the uploader is disabled.\n * @type boolean\n * @default false\n * @example disabled\n /\n disabled?: boolean;\n\n /\n Whether to show the instructional drag-and-drop text inside the drop zone.\n * @default true\n /\n showText?: boolean;\n /* Size in pixels for the upload icon. /\n iconSize?: number;\n}\n\n/\n A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.\n /\nexport function FileUploader(props: FileUploaderProps) {\n const {\n value: valueProp,\n onValueChange,\n onUpload,\n progresses,\n accept = {\n 'image/': [],\n },\n maxSize = 1024 * 1024 * 2,\n maxFileCount = 1,\n multiple = false,\n disabled = false,\n showText = true,\n iconSize,\n className,\n ...dropzoneProps\n } = props;\n\n const [files, setFiles] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n });\n\n const onDrop = useCallback(\n (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n toast.error('Cannot upload more than 1 file at a time');\n\n return;\n }\n\n if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n toast.error(`Cannot upload more than ${maxFileCount} files`);\n return;\n }\n\n const newFiles = acceptedFiles.map(file =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n );\n\n const updatedFiles = files ? [...files, ...newFiles] : newFiles;\n\n setFiles(updatedFiles);\n\n if (rejectedFiles.length > 0) {\n rejectedFiles.forEach(({ file }) => {\n toast.error(`File ${file.name} was rejected`);\n });\n }\n\n if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {\n const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;\n\n onUpload(updatedFiles).then(() => {\n setFiles([]);\n toast(`${target} uploaded`);\n });\n }\n },\n\n [files, maxFileCount, multiple, onUpload, setFiles]\n );\n\n function onRemove(index: number) {\n if (!files) return;\n\n if (isFileWithPreview(files[index])) {\n URL.revokeObjectURL(files[index].preview);\n }\n\n const newFiles = files.filter((_, i) => i !== index);\n setFiles(newFiles);\n onValueChange?.(newFiles);\n }\n\n // Revoke preview url when component unmounts\n useEffect(() => {\n return () => {\n if (!files) return;\n files.forEach(file => {\n if (isFileWithPreview(file)) {\n URL.revokeObjectURL(file.preview);\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const isDisabled = disabled \|\| (files?.length ?? 0) >= maxFileCount;\n\n return (\n <div className=\"relative flex w-full flex-col gap-6\">\n <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 \|\| multiple} disabled={isDisabled}>\n {({ getRootProps, getInputProps, isDragActive }) => (\n <div\n {...getRootProps()}\n className={cn(\n 'group',\n 'border-border-weak',\n 'hover:bg-border-weak/20',\n 'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',\n 'ring-offset-background',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-2',\n 'focus-visible:ring-offset-2',\n 'focus-visible:outline-hidden',\n isDragActive && 'border-border-primary-strong bg-border-weak/40',\n isDisabled && 'pointer-events-none opacity-60',\n className\n )}\n {...dropzoneProps}\n >\n <input {...getInputProps()} />\n {isDragActive ? (\n <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n <div className=\"rounded-full border border-dashed p-3\">\n <Upload className=\"text-text-positive-muted size-7\" aria-hidden=\"true\" />\n </div>\n <p className=\"text-text-positive-muted font-medium\">Drop the files here</p>\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n <div className=\"rounded-full border border-dashed p-3\">\n <Upload size={iconSize \|\| 24} className=\"text-muted-foreground\" aria-hidden=\"true\" />\n </div>\n {showText && (\n <div className=\"flex flex-col gap-px\">\n <p className=\"text-text-positive-weak text-xs font-medium\">Drag {`'n'`} drop files here, or click to select files</p>\n <p className=\"text-text-positive-muted text-xs\">\n You can upload\n {maxFileCount > 1\n ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}\n files (up to ${formatBytes(maxSize)} each)`\n : ` a file with ${formatBytes(maxSize)}`}\n </p>\n </div>\n )}\n </div>\n )}\n </div>\n )}\n </Dropzone>\n {files?.length ? (\n <div className=\"h-fit w-full overflow-y-auto\">\n <div className=\"flex items-center justify-between px-3 py-2.5\">\n <div className=\"text-text-positive-weak flex items-center gap-1\">\n <Image size={16} aria-hidden=\"true\" />\n <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n </div>\n <button\n className=\"hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200\"\n onClick={() => {\n if (!files) return;\n files.forEach(file => {\n if (!isFileWithPreview(file)) return;\n URL.revokeObjectURL(file.preview);\n });\n setFiles([]);\n onValueChange?.([]);\n }}\n >\n <Trash2 size={16} aria-hidden=\"true\" />\n <p className=\"text-sm\">Xóa tất cả</p>\n </button>\n </div>\n <div className=\"flex flex-col gap-2.5\">\n {files?.map((file, index) => (\n <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />\n ))}\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n\ninterface FileCardProps {\n file: File;\n onRemove: () => void;\n progress?: number;\n}\n\nfunction FileCard({ file, progress, onRemove }: FileCardProps) {\n return (\n <div className=\"border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors\">\n <div className=\"flex flex-1 gap-2.5\">\n {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\n <div className=\"flex w-full flex-col gap-2\">\n <div className=\"flex flex-col gap-y-0.5\">\n <p className=\"text-text-positive line-clamp-1 text-sm\">{file.name}</p>\n <p className=\"text-text-positive-muted text-xs\">{formatBytes(file.size)}</p>\n </div>\n {progress ? <Progress value={progress} /> : null}\n </div>\n </div>\n <div className=\"flex items-center gap-2\">\n <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"size-7\" onClick={onRemove}>\n <Trash2 size={16} className=\"text-text-positive-muted\" aria-hidden=\"true\" />\n <span className=\"sr-only\">Remove file</span>\n </Button>\n </div>\n </div>\n );\n}\n\nfunction isFileWithPreview(file: File): file is File & { preview: string } {\n return 'preview' in file && typeof file.preview === 'string';\n}\n\ninterface FilePreviewProps {\n file: File & { preview: string };\n}\n\nfunction FilePreview({ file }: FilePreviewProps) {\n if (file.type.startsWith('image/')) {\n return <img src={file.preview} className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\" />;\n }\n\n return <FileText className=\"text-text-positive-muted size-10 border\" aria-hidden=\"true\" />;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"file-uploader.cjs","names":["Dropzone","Upload","Image","Trash2","Progress","Button","FileText"],"sources":["../../packages/components/ui/file-uploader.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect } from 'react';\nimport Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone';\nimport { useControllableState } from '@customafk/react-toolkit/hooks/useControllableState';\nimport { cn, formatBytes } from '@customafk/react-toolkit/utils';\n\nimport { FileText, Image, Trash2, Upload } from 'lucide-react';\nimport { toast } from 'sonner';\n\nimport { Button } from '@/components/ui/button';\nimport { Progress } from '@/components/ui/progress';\n\n/*\n Props for the FileUploader component.\n \n @example\n * ```tsx\n * import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader';\n \n <FileUploader\n * accept={{ 'image/': [] }}\n maxSize={1024 * 1024 * 5}\n * maxFileCount={3}\n * multiple\n * onUpload={async (files) => { await uploadFiles(files); }}\n * />\n * ```\n /\ninterface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n Value of the uploader.\n * @type File[]\n * @default undefined\n * @example value={files}\n /\n value?: File[];\n\n /\n Function to be called when the value changes.\n * @type (files: File[]) => void\n * @default undefined\n * @example onValueChange={(files) => setFiles(files)}\n /\n onValueChange?: (files: File[]) => void;\n\n /\n Function to be called when files are uploaded.\n * @type (files: File[]) => Promise<void>\n * @default undefined\n * @example onUpload={(files) => uploadFiles(files)}\n /\n onUpload?: (files: File[]) => Promise<void>;\n\n /\n Progress of the uploaded files.\n * @type Record<string, number> \| undefined\n * @default undefined\n * @example progresses={{ \"file1.png\": 50 }}\n /\n progresses?: Record<string, number>;\n\n /\n Accepted file types for the uploader.\n * @type { [key: string]: string[]}\n * @default\n * ```ts\n * { \"image/\": [] }\n ```\n * @example accept={[\"image/png\", \"image/jpeg\"]}\n /\n accept?: DropzoneProps['accept'];\n\n /\n Maximum file size for the uploader.\n * @type number \| undefined\n * @default 1024 * 1024 * 2 // 2MB\n * @example maxSize={1024 * 1024 * 2} // 2MB\n /\n maxSize?: DropzoneProps['maxSize'];\n\n /\n Maximum number of files for the uploader.\n * @type number \| undefined\n * @default 1\n * @example maxFileCount={4}\n /\n maxFileCount?: DropzoneProps['maxFiles'];\n\n /\n Whether the uploader should accept multiple files.\n * @type boolean\n * @default false\n * @example multiple\n /\n multiple?: boolean;\n\n /\n Whether the uploader is disabled.\n * @type boolean\n * @default false\n * @example disabled\n /\n disabled?: boolean;\n\n /\n Whether to show the instructional drag-and-drop text inside the drop zone.\n * @default true\n /\n showText?: boolean;\n /* Size in pixels for the upload icon. /\n iconSize?: number;\n}\n\n/\n A drag-and-drop file upload zone that manages file selection, validation, preview generation, and optional async upload with progress tracking.\n /\nexport function FileUploader(props: FileUploaderProps) {\n const {\n value: valueProp,\n onValueChange,\n onUpload,\n progresses,\n accept = {\n 'image/': [],\n },\n maxSize = 1024 * 1024 * 2,\n maxFileCount = 1,\n multiple = false,\n disabled = false,\n showText = true,\n iconSize,\n className,\n ...dropzoneProps\n } = props;\n\n const [files, setFiles] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n });\n\n const onDrop = useCallback(\n (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\n toast.error('Cannot upload more than 1 file at a time');\n\n return;\n }\n\n if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\n toast.error(`Cannot upload more than ${maxFileCount} files`);\n return;\n }\n\n const newFiles = acceptedFiles.map(file =>\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n );\n\n const updatedFiles = files ? [...files, ...newFiles] : newFiles;\n\n setFiles(updatedFiles);\n\n if (rejectedFiles.length > 0) {\n rejectedFiles.forEach(({ file }) => {\n toast.error(`File ${file.name} was rejected`);\n });\n }\n\n if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {\n const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;\n\n onUpload(updatedFiles).then(() => {\n setFiles([]);\n toast(`${target} uploaded`);\n });\n }\n },\n\n [files, maxFileCount, multiple, onUpload, setFiles]\n );\n\n function onRemove(index: number) {\n if (!files) return;\n\n if (isFileWithPreview(files[index])) {\n URL.revokeObjectURL(files[index].preview);\n }\n\n const newFiles = files.filter((_, i) => i !== index);\n setFiles(newFiles);\n onValueChange?.(newFiles);\n }\n\n // Revoke preview url when component unmounts\n useEffect(() => {\n return () => {\n if (!files) return;\n files.forEach(file => {\n if (isFileWithPreview(file)) {\n URL.revokeObjectURL(file.preview);\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const isDisabled = disabled \|\| (files?.length ?? 0) >= maxFileCount;\n\n return (\n <div className=\"relative flex w-full flex-col gap-6\">\n <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 \|\| multiple} disabled={isDisabled}>\n {({ getRootProps, getInputProps, isDragActive }) => (\n <div\n {...getRootProps()}\n className={cn(\n 'group',\n 'border-border-weak',\n 'hover:bg-border-weak/20',\n 'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',\n 'ring-offset-background',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-2',\n 'focus-visible:ring-offset-2',\n 'focus-visible:outline-hidden',\n isDragActive && 'border-border-primary-strong bg-border-weak/40',\n isDisabled && 'pointer-events-none opacity-60',\n className\n )}\n {...dropzoneProps}\n >\n <input {...getInputProps()} />\n {isDragActive ? (\n <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n <div className=\"rounded-full border border-dashed p-3\">\n <Upload className=\"text-text-positive-muted size-7\" aria-hidden=\"true\" />\n </div>\n <p className=\"text-text-positive-muted font-medium\">Drop the files here</p>\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\n <div className=\"rounded-full border border-dashed p-3\">\n <Upload size={iconSize \|\| 24} className=\"text-muted-foreground\" aria-hidden=\"true\" />\n </div>\n {showText && (\n <div className=\"flex flex-col gap-px\">\n <p className=\"text-text-positive-weak text-xs font-medium\">Drag {`'n'`} drop files here, or click to select files</p>\n <p className=\"text-text-positive-muted text-xs\">\n You can upload\n {maxFileCount > 1\n ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}\n files (up to ${formatBytes(maxSize)} each)`\n : ` a file with ${formatBytes(maxSize)}`}\n </p>\n </div>\n )}\n </div>\n )}\n </div>\n )}\n </Dropzone>\n {files?.length ? (\n <div className=\"h-fit w-full overflow-y-auto\">\n <div className=\"flex items-center justify-between px-3 py-2.5\">\n <div className=\"text-text-positive-weak flex items-center gap-1\">\n <Image size={16} aria-hidden=\"true\" />\n <p className=\"text-sm\">Ảnh đã tải lên ({files.length})</p>\n </div>\n <button\n className=\"hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200\"\n onClick={() => {\n if (!files) return;\n files.forEach(file => {\n if (!isFileWithPreview(file)) return;\n URL.revokeObjectURL(file.preview);\n });\n setFiles([]);\n onValueChange?.([]);\n }}\n >\n <Trash2 size={16} aria-hidden=\"true\" />\n <p className=\"text-sm\">Xóa tất cả</p>\n </button>\n </div>\n <div className=\"flex flex-col gap-2.5\">\n {files?.map((file, index) => (\n <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />\n ))}\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n\ninterface FileCardProps {\n file: File;\n onRemove: () => void;\n progress?: number;\n}\n\nfunction FileCard({ file, progress, onRemove }: FileCardProps) {\n return (\n <div className=\"border-border-weak hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs transition-colors\">\n <div className=\"flex flex-1 gap-2.5\">\n {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\n <div className=\"flex w-full flex-col gap-2\">\n <div className=\"flex flex-col gap-y-0.5\">\n <p className=\"text-text-positive line-clamp-1 text-sm\">{file.name}</p>\n <p className=\"text-text-positive-muted text-xs\">{formatBytes(file.size)}</p>\n </div>\n {progress ? <Progress value={progress} /> : null}\n </div>\n </div>\n <div className=\"flex items-center gap-2\">\n <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" className=\"size-7\" onClick={onRemove}>\n <Trash2 size={16} className=\"text-text-positive-muted\" aria-hidden=\"true\" />\n <span className=\"sr-only\">Remove file</span>\n </Button>\n </div>\n </div>\n );\n}\n\nfunction isFileWithPreview(file: File): file is File & { preview: string } {\n return 'preview' in file && typeof file.preview === 'string';\n}\n\ninterface FilePreviewProps {\n file: File & { preview: string };\n}\n\nfunction FilePreview({ file }: FilePreviewProps) {\n if (file.type.startsWith('image/')) {\n return <img src={file.preview} className=\"border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm\" />;\n }\n\n return <FileText className=\"text-text-positive-muted size-10 border\" aria-hidden=\"true\" />;\n}\n"],"mappings":"sbAoHA,SAAgB,EAAa,EAA0B,CACrD,GAAM,CACJ,MAAO,EACP,gBACA,WACA,aACA,SAAS,CACP,UAAW,CAAC,CACd,EACA,UAAU,KAAO,KAAO,EACxB,eAAe,EACf,WAAW,GACX,WAAW,GACX,WAAW,GACX,WACA,YACA,GAAG,GACD,EAEE,CAAC,EAAO,IAAA,EAAA,EAAA,qBAAA,CAAiC,CAC7C,KAAM,EACN,SAAU,CACZ,CAAC,EAEK,GAAA,EAAA,EAAA,YAAA,EACH,EAAuB,IAAmC,CACzD,GAAI,CAAC,GAAY,IAAiB,GAAK,EAAc,OAAS,EAAG,CAC/D,EAAA,MAAM,MAAM,0CAA0C,EAEtD,MACF,CAEA,IAAK,GAAO,QAAU,GAAK,EAAc,OAAS,EAAc,CAC9D,EAAA,MAAM,MAAM,2BAA2B,EAAa,OAAO,EAC3D,MACF,CAEA,IAAM,EAAW,EAAc,IAAI,GACjC,OAAO,OAAO,EAAM,CAClB,QAAS,IAAI,gBAAgB,CAAI,CACnC,CAAC,CACH,EAEM,EAAe,EAAQ,CAAC,GAAG,EAAO,GAAG,CAAQ,EAAI,EAUvD,GARA,EAAS,CAAY,EAEjB,EAAc,OAAS,GACzB,EAAc,SAAS,CAAE,UAAW,CAClC,EAAA,MAAM,MAAM,QAAQ,EAAK,KAAK,cAAc,CAC9C,CAAC,EAGC,GAAY,EAAa,OAAS,GAAK,EAAa,QAAU,EAAc,CAC9E,IAAM,EAAS,EAAa,OAAS,EAAI,GAAG,EAAa,OAAO,QAAU,OAE1E,EAAS,CAAY,CAAC,CAAC,SAAW,CAChC,EAAS,CAAC,CAAC,GACX,EAAA,EAAA,MAAA,CAAM,GAAG,EAAO,UAAU,CAC5B,CAAC,CACH,CACF,EAEA,CAAC,EAAO,EAAc,EAAU,EAAU,CAAQ,CACpD,EAEA,SAAS,EAAS,EAAe,CAC/B,GAAI,CAAC,EAAO,OAER,EAAkB,EAAM,EAAM,GAChC,IAAI,gBAAgB,EAAM,EAAM,CAAC,OAAO,EAG1C,IAAM,EAAW,EAAM,QAAQ,EAAG,IAAM,IAAM,CAAK,EACnD,EAAS,CAAQ,EACjB,IAAgB,CAAQ,CAC1B,EAGA,EAAA,EAAA,UAAA,SACe,CACN,GACL,EAAM,QAAQ,GAAQ,CAChB,EAAkB,CAAI,GACxB,IAAI,gBAAgB,EAAK,OAAO,CAEpC,CAAC,CACH,EAEC,CAAC,CAAC,EAEL,IAAM,EAAa,IAAa,GAAO,QAAU,IAAM,EAEvD,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,sCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAD,CAAkB,SAAgB,SAAiB,UAAS,SAAU,EAAc,SAAU,EAAe,GAAK,EAAU,SAAU,EAClI,UAAA,CAAE,eAAc,gBAAe,mBAC/B,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,GAAI,EAAa,EACjB,WAAA,EAAA,EAAA,GAAA,CACE,QACA,qBACA,0BACA,mIACA,yBACA,kCACA,uBACA,8BACA,+BACA,GAAgB,iDAChB,GAAc,iCACd,CACF,EACA,GAAI,EAhBN,SAAA,EAkBE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,GAAI,EAAc,CAAI,CAAA,EAC5B,GACC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0DAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wCACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,UAAU,kCAAkC,cAAY,MAAQ,CAAA,CACrE,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,uCAAuC,SAAA,qBAAsB,CAAA,CACvE,CAEL,CAAA,GAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0DAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wCACb,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,KAAM,GAAY,GAAI,UAAU,wBAAwB,cAAY,MAAQ,CAAA,CACjF,CAAA,EACJ,IACC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,8CAAb,SAAA,CAA2D,QAAM,MAAM,4CAA6C,CACpH,CAAA,GAAA,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,mCAAb,SAAA,CAAgD,iBAE7C,EAAe,EACZ,IAAI,IAAiB,IAAW,WAAa,EAAa;sCACnC,EAAA,EAAA,YAAA,CAAA,CAAO,EAAE,QAChC,iBAAA,EAAA,EAAA,YAAA,CAA4B,CAAO,GACtC,CACA,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,CAAA,GAEC,CAAA,EACT,GAAO,QACN,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+BAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gDAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kDAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,GACrC,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,UAAb,SAAA,CAAuB,mBAAiB,EAAM,OAAO,GAAI,CACtD,CAAA,CAAA,CACL,CAAA,GAAA,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,UAAU,0HACV,YAAe,CACR,IACL,EAAM,QAAQ,GAAQ,CACf,EAAkB,CAAI,GAC3B,IAAI,gBAAgB,EAAK,OAAO,CAClC,CAAC,EACD,EAAS,CAAC,CAAC,EACX,IAAgB,CAAC,CAAC,EACpB,EAVF,SAAA,EAYE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,GAAI,cAAY,MAAQ,CAAA,GACtC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,UAAU,SAAA,YAAa,CAAA,CAC9B,CACL,CAAA,CAAA,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBACZ,SAAA,GAAO,KAAK,EAAM,KACjB,EAAA,EAAA,IAAA,CAAC,EAAD,CAA4B,OAAM,aAAgB,EAAS,CAAK,EAAG,SAAU,IAAa,EAAK,KAAQ,EAAxF,CAAwF,CACxG,CACE,CAAA,CACF,CACH,CAAA,EAAA,IACD,GAET,CAQA,SAAS,EAAS,CAAE,OAAM,WAAU,YAA2B,CAC7D,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uIAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,CACG,EAAkB,CAAI,GAAI,EAAA,EAAA,IAAA,CAAC,EAAD,CAAmB,MAAO,CAAA,EAAI,MACzD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6BAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,0CAA2C,SAAA,EAAK,IAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,mCAAgD,UAAA,EAAA,EAAA,YAAA,CAAA,EAAK,IAAI,CAAK,CAAA,CACxE,CACJ,CAAA,EAAA,GAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,MAAO,CAAW,CAAA,EAAI,IACzC,CACF,CAAA,CAAA,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0BACb,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,UAAU,SAAS,QAAS,EAAhG,SAAA,EACE,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAD,CAAQ,KAAM,GAAI,UAAU,2BAA2B,cAAY,MAAQ,CAAA,GAC3E,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAU,SAAA,aAAiB,CAAA,CACrC,GACL,CAAA,CACF,GAET,CAEA,SAAS,EAAkB,EAAgD,CACzE,MAAO,YAAa,GAAQ,OAAO,EAAK,SAAY,QACtD,CAMA,SAAS,EAAY,CAAE,QAA0B,CAK/C,OAJI,EAAK,KAAK,WAAW,QAAQ,GACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,IAAK,EAAK,QAAS,UAAU,+FAAiG,CAAA,GAGrI,EAAA,EAAA,IAAA,CAACG,EAAAA,SAAD,CAAU,UAAU,0CAA0C,cAAY,MAAQ,CAAA,CAC3F"}

package/dist/ui/file-uploader.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as FileUploader } from "../file-uploader-U64lH0zG.cjs";
+import { t as FileUploader } from "../file-uploader-DyHOMFK3.cjs";
 export { FileUploader };

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

@@ -1,2 +1,2 @@
-import { t as FileUploader } from "../file-uploader-U64lH0zG.mjs";
+import { t as FileUploader } from "../file-uploader-DyHOMFK3.mjs";
 export { FileUploader };

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form.cjs","names":["FormProvider","Controller","Field","FieldLabel","SlotPrimitive","FieldDescription"],"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":"oQAoCA,MAAM,EAAOA,EAAAA,aAMP,GAAA,EAAA,EAAA,cAAA,CAAwD,CAAC,CAA0B,EAKnF,GAA8H,CAClI,GAAG,MAGD,EAAA,EAAA,IAAA,CAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,KAAM,EAAM,IAAK,~~YACnD~~,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,CAAQ,CAAA,CACC,CAAA,EAQzB,MAAqB,CACzB,IAAM,GAAA,EAAA,EAAA,IAAA,CAAmB,CAAgB,EACnC,GAAA,EAAA,EAAA,IAAA,CAAkB,CAAe,EACjC,CAAE,gBAAe,UAAS,eAAA,EAAA,EAAA,eAAA,CAA8B,EACxD,GAAA,EAAA,EAAA,aAAA,CAAyB,CAAE,KAAM,EAAa,IAAK,CAAC,EACpD,EAAa,EAAc,EAAa,KAAM,CAAS,EAE7D,GAAI,CAAC,EACH,MAAU,MAAM,gDAAgD,EAGlE,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,CACL,CACF,EAMM,GAAA,EAAA,EAAA,cAAA,CAAsD,CAAC,CAAyB,EAOhF,GAAA,EAAA,EAAA,KAAA,EACH,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EAEjB,OACE,EAAA,EAAA,IAAA,CAAC,EAAgB,SAAjB,CAA0B,MAAO,CAAE,IAAG,~~YACpC~~,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,GAAI,EAAkB,WAAY,CAAA,CAC3C,CAAA,CAE9B,CACF,EACA,EAAS,YAAc,WAGvB,MAAM,GAAA,EAAA,EAAA,KAAA,EAAkB,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,EAAa,EACpC,OAAO,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAY,GAAI,CAAQ,CAAA,CACtD,CAAC,EACD,EAAU,YAAc,YAGxB,MAAM,GAAA,EAAA,EAAA,KAAA,EAAoB,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,EAAa,EAE7E,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAc,KAAf,CACE,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,CACL,CAAA,CAEL,CAAC,EACD,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,EAAa,EAE3C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CACE,GAAI,EACJ,WAAA,EAAA,EAAA,GAAA,CACE,+DACA,6DACA,+DACA,oEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,EAAa,EAE9C,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,eAAe,GAAI,EAAe,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAG,GAAI,~~WACpG~~,EAAQ,OAAO,GAAO,SAAW,EAAE,EAAI,CACpC,CAAA,CAEV"}
1	+ {"version":3,"file":"form.cjs","names":["FormProvider","Controller","Field","FieldLabel","SlotPrimitive","FieldDescription"],"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":"oQAoCA,MAAM,EAAOA,EAAAA,aAMP,GAAA,EAAA,EAAA,cAAA,CAAwD,CAAC,CAA0B,EAKnF,GAA8H,CAClI,GAAG,MAGD,EAAA,EAAA,IAAA,CAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,KAAM,EAAM,IAAK,EACnD,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,CAAQ,CAAA,CACC,CAAA,EAQzB,MAAqB,CACzB,IAAM,GAAA,EAAA,EAAA,IAAA,CAAmB,CAAgB,EACnC,GAAA,EAAA,EAAA,IAAA,CAAkB,CAAe,EACjC,CAAE,gBAAe,UAAS,eAAA,EAAA,EAAA,eAAA,CAA8B,EACxD,GAAA,EAAA,EAAA,aAAA,CAAyB,CAAE,KAAM,EAAa,IAAK,CAAC,EACpD,EAAa,EAAc,EAAa,KAAM,CAAS,EAE7D,GAAI,CAAC,EACH,MAAU,MAAM,gDAAgD,EAGlE,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,CACL,CACF,EAMM,GAAA,EAAA,EAAA,cAAA,CAAsD,CAAC,CAAyB,EAOhF,GAAA,EAAA,EAAA,KAAA,EACH,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EAEjB,OACE,EAAA,EAAA,IAAA,CAAC,EAAgB,SAAjB,CAA0B,MAAO,CAAE,IAAG,EACpC,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,GAAI,EAAkB,WAAY,CAAA,CAC3C,CAAA,CAE9B,CACF,EACA,EAAS,YAAc,WAGvB,MAAM,GAAA,EAAA,EAAA,KAAA,EAAkB,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,EAAa,EACpC,OAAO,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAY,GAAI,CAAQ,CAAA,CACtD,CAAC,EACD,EAAU,YAAc,YAGxB,MAAM,GAAA,EAAA,EAAA,KAAA,EAAoB,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,EAAa,EAE7E,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAc,KAAf,CACE,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,CACL,CAAA,CAEL,CAAC,EACD,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,EAAa,EAE3C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CACE,GAAI,EACJ,WAAA,EAAA,EAAA,GAAA,CACE,+DACA,6DACA,+DACA,oEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,EAAa,EAE9C,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,YAAU,eAAe,GAAI,EAAe,WAAA,EAAA,EAAA,GAAA,CAAc,sBAAuB,CAAS,EAAG,GAAI,EACpG,SAAA,EAAQ,OAAO,GAAO,SAAW,EAAE,EAAI,CACpC,CAAA,CAEV"}

package/dist/ui/form.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../form-CMP15S4r.cjs";
+import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../form-D0M_qGX_.cjs";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/ui/form.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../form-CMP15S4r.mjs";
+import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../form-D0M_qGX_.mjs";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/ui/form.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":"4XAoCA,MAAM,EAAO,EAMP,EAAmB,EAAqC,CAAC,CAA0B,EAKnF,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,KAAM,EAAM,IAAK,~~WACnD~~,EAAC,EAAD,CAAY,GAAI,CAAQ,CAAA,CACC,CAAA,EAQzB,MAAqB,CACzB,IAAM,EAAe,EAAI,CAAgB,EACnC,EAAc,EAAI,CAAe,EACjC,CAAE,gBAAe,UAAS,cAAe,EAAe,EACxD,EAAY,EAAa,CAAE,KAAM,EAAa,IAAK,CAAC,EACpD,EAAa,EAAc,EAAa,KAAM,CAAS,EAE7D,GAAI,CAAC,EACH,MAAU,MAAM,gDAAgD,EAGlE,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,CACL,CACF,EAMM,EAAkB,EAAoC,CAAC,CAAyB,EAOhF,EAAW,GACd,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,EAAK,EAAM,EAEjB,OACE,EAAC,EAAgB,SAAjB,CAA0B,MAAO,CAAE,IAAG,~~WACpC~~,EAAC,EAAD,CAAoB,cAAa,GAAI,EAAkB,WAAY,CAAA,CAC3C,CAAA,CAE9B,CACF,EACA,EAAS,YAAc,WAGvB,MAAM,EAAY,GAAM,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,EAAa,EACpC,OAAO,EAAC,EAAD,CAAY,QAAS,EAAY,GAAI,CAAQ,CAAA,CACtD,CAAC,EACD,EAAU,YAAc,YAGxB,MAAM,EAAc,GAAM,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,EAAa,EAE7E,OACE,EAACA,EAAc,KAAf,CACE,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,CACL,CAAA,CAEL,CAAC,EACD,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,EAAa,EAE3C,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,+DACA,6DACA,+DACA,oEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,EAAa,EAE9C,OACE,EAAC,OAAD,CAAM,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,CAAS,EAAG,GAAI,~~WACpG~~,EAAQ,OAAO,GAAO,SAAW,EAAE,EAAI,CACpC,CAAA,CAEV"}
1	+ {"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":"4XAoCA,MAAM,EAAO,EAMP,EAAmB,EAAqC,CAAC,CAA0B,EAKnF,GAA8H,CAClI,GAAG,KAGD,EAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,KAAM,EAAM,IAAK,EACnD,SAAA,EAAC,EAAD,CAAY,GAAI,CAAQ,CAAA,CACC,CAAA,EAQzB,MAAqB,CACzB,IAAM,EAAe,EAAI,CAAgB,EACnC,EAAc,EAAI,CAAe,EACjC,CAAE,gBAAe,UAAS,cAAe,EAAe,EACxD,EAAY,EAAa,CAAE,KAAM,EAAa,IAAK,CAAC,EACpD,EAAa,EAAc,EAAa,KAAM,CAAS,EAE7D,GAAI,CAAC,EACH,MAAU,MAAM,gDAAgD,EAGlE,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,CACL,CACF,EAMM,EAAkB,EAAoC,CAAC,CAAyB,EAOhF,EAAW,GACd,CACC,YACA,cAAc,aACd,GAAG,KAGC,CACJ,IAAM,EAAK,EAAM,EAEjB,OACE,EAAC,EAAgB,SAAjB,CAA0B,MAAO,CAAE,IAAG,EACpC,SAAA,EAAC,EAAD,CAAoB,cAAa,GAAI,EAAkB,WAAY,CAAA,CAC3C,CAAA,CAE9B,CACF,EACA,EAAS,YAAc,WAGvB,MAAM,EAAY,GAAM,CAAE,GAAG,KAA8D,CACzF,GAAM,CAAE,cAAe,EAAa,EACpC,OAAO,EAAC,EAAD,CAAY,QAAS,EAAY,GAAI,CAAQ,CAAA,CACtD,CAAC,EACD,EAAU,YAAc,YAGxB,MAAM,EAAc,GAAM,CAAE,GAAG,KAA6D,CAC1F,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAAkB,EAAa,EAE7E,OACE,EAACA,EAAc,KAAf,CACE,YAAU,eACV,GAAI,EACJ,mBAAmB,EAAiC,GAAG,EAAkB,GAAG,IAAjD,GAAG,IAC9B,eAAc,CAAC,CAAC,EAChB,GAAI,CACL,CAAA,CAEL,CAAC,EACD,EAAY,YAAc,cAG1B,SAAS,EAAgB,CAAE,YAAW,GAAG,GAAoC,CAC3E,GAAM,CAAE,qBAAsB,EAAa,EAE3C,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,+DACA,6DACA,+DACA,oEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAY,CAAE,YAAW,WAAU,GAAG,GAAoC,CACjF,GAAM,CAAE,QAAO,iBAAkB,EAAa,EAE9C,OACE,EAAC,OAAD,CAAM,YAAU,eAAe,GAAI,EAAe,UAAW,EAAG,sBAAuB,CAAS,EAAG,GAAI,EACpG,SAAA,EAAQ,OAAO,GAAO,SAAW,EAAE,EAAI,CACpC,CAAA,CAEV"}

package/dist/ui/hover-card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hover-card.cjs","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":"qLAoBA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,KAApB,CAAyB,YAAU,aAAa,GAAI,CAAQ,CAAA,CACrE,CAGA,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,QAApB,CAA4B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAChF,CAGA,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,OAApB,CAA2B,YAAU,~~8BACnC~~,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,QAApB,CACE,YAAU,qBACH,QACK,aACZ,WAAA,EAAA,EAAA,GAAA,CACE,oeACA,CACF,EACA,GAAI,CACL,CAAA,CACwB,CAAA,CAE/B"}
1	+ {"version":3,"file":"hover-card.cjs","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":"qLAoBA,SAAS,EAAU,CAAE,GAAG,GAA+D,CACrF,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,KAApB,CAAyB,YAAU,aAAa,GAAI,CAAQ,CAAA,CACrE,CAGA,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,QAApB,CAA4B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAChF,CAGA,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,OAApB,CAA2B,YAAU,oBACnC,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAmB,QAApB,CACE,YAAU,qBACH,QACK,aACZ,WAAA,EAAA,EAAA,GAAA,CACE,oeACA,CACF,EACA,GAAI,CACL,CAAA,CACwB,CAAA,CAE/B"}

package/dist/ui/hover-card.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../hover-card-Prwm-0Q4.cjs";
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../hover-card-JeShfV9g.cjs";
 export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -1,2 +1,2 @@
-import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../hover-card-Prwm-0Q4.mjs";
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../hover-card-JeShfV9g.mjs";
 export { HoverCard, HoverCardContent, HoverCardTrigger };

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

	@@ -1 +1 @@
1	- {"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,KAApB,CAAyB,YAAU,aAAa,GAAI,CAAQ,CAAA,CACrE,CAGA,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAACA,EAAmB,QAApB,CAA4B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAChF,CAGA,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAACA,EAAmB,OAApB,CAA2B,YAAU,~~6BACnC~~,EAACA,EAAmB,QAApB,CACE,YAAU,qBACH,QACK,aACZ,UAAW,EACT,oeACA,CACF,EACA,GAAI,CACL,CAAA,CACwB,CAAA,CAE/B"}
1	+ {"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,KAApB,CAAyB,YAAU,aAAa,GAAI,CAAQ,CAAA,CACrE,CAGA,SAAS,EAAiB,CAAE,GAAG,GAAkE,CAC/F,OAAO,EAACA,EAAmB,QAApB,CAA4B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAChF,CAGA,SAAS,EAAiB,CAAE,YAAW,QAAQ,SAAU,aAAa,EAAG,GAAG,GAAkE,CAC5I,OACE,EAACA,EAAmB,OAApB,CAA2B,YAAU,oBACnC,SAAA,EAACA,EAAmB,QAApB,CACE,YAAU,qBACH,QACK,aACZ,UAAW,EACT,oeACA,CACF,EACA,GAAI,CACL,CAAA,CACwB,CAAA,CAE/B"}

package/dist/ui/image.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./skeleton.cjs");let t=require("lucide-react"),n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({src:a,alt:o,width:s,height:c,maxRetries:l=3,retryDelay:u=500,className:d,imageClassName:f,onClick:p})=>{let m=(0,n.useRef)(null),[h,g]=(0,n.useState)(a),[_,v]=(0,n.useState)(0),[y,b]=(0,n.useState)(!1),[x,S]=(0,n.useState)(!1),C=(0,n.useCallback)(()=>{b(!0)},[]),w=(0,n.useCallback)(()=>{if(_<l){S(!1);let e=_+1;v(e),setTimeout(()=>{g(a+`?retry=${Date.now()}&attempt=${e}`)},u*e);return}S(!0),b(!0),g(a)},[l,_,u,a]);return x?(0,i.jsx)(`div`,{style:{width:s,height:c},className:(0,r.cn)(`@container relative inline-block`,d),children:(0,i.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[(0,i.jsx)(t.AlertCircleIcon,{className:`@max-[52px]:size-6 size-8 text-danger`}),(0,i.jsx)(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):(0,i.jsxs)(`div`,{style:{width:s,height:c},className:(0,r.cn)(`relative flex items-center justify-center overflow-hidden rounded`,d),onClick:p,children:[!y&&(0,i.jsx)(e.Skeleton,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),(0,i.jsx)(`img`,{src:h,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),(0,i.jsx)(`img`,{id:h,ref:m,src:h,alt:o,loading:`lazy`,className:(0,r.cn)(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,y&&`opacity-100`,!y&&`pointer-events-none opacity-0`,f),onLoad:C,onError:w})]})};exports.Image=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./skeleton.cjs");let t=require("lucide-react"),n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime");const a=({src:a,alt:o,width:s,height:c,maxRetries:l=3,retryDelay:u=500,className:d,imageClassName:f,onClick:p})=>{let m=(0,n.useRef)(null),[h,g]=(0,n.useState)(a),[_,v]=(0,n.useState)(0),[y,b]=(0,n.useState)(!1),[x,S]=(0,n.useState)(!1),C=(0,n.useCallback)(()=>{b(!0)},[]),w=(0,n.useCallback)(()=>{if(_<l){S(!1);let e=_+1;v(e),setTimeout(()=>{let t=`?retry=${Date.now()}&attempt=${e}`;g(a+t)},u*e);return}S(!0),b(!0),g(a)},[l,_,u,a]);return x?(0,i.jsx)(`div`,{style:{width:s,height:c},className:(0,r.cn)(`@container relative inline-block`,d),children:(0,i.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[(0,i.jsx)(t.AlertCircleIcon,{className:`@max-[52px]:size-6 size-8 text-danger`}),(0,i.jsx)(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):(0,i.jsxs)(`div`,{style:{width:s,height:c},className:(0,r.cn)(`relative flex items-center justify-center overflow-hidden rounded`,d),onClick:p,children:[!y&&(0,i.jsx)(e.Skeleton,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),(0,i.jsx)(`img`,{src:h,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),(0,i.jsx)(`img`,{id:h,ref:m,src:h,alt:o,loading:`lazy`,className:(0,r.cn)(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,y&&`opacity-100`,!y&&`pointer-events-none opacity-0`,f),onLoad:C,onError:w})]})};exports.Image=a;
 //# sourceMappingURL=image.cjs.map

package/dist/ui/image.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.cjs","names":["AlertCircleIcon","Skeleton"],"sources":["../../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. /\ntype Props = {\n /* URL of the image to display. /\n src?: string;\n /* Accessible alt text for the image. /\n alt?: string;\n /* Width of the image container (number treated as pixels). /\n width?: number \| string;\n /* Height of the image container (number treated as pixels). /\n height?: number \| string;\n /* Maximum number of retry attempts on load failure before showing an error state. @default 3 /\n maxRetries?: number;\n /* Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 /\n retryDelay?: number;\n /* Class name applied to the outer container div. /\n className?: string;\n /* Class name applied to the `<img>` element. /\n imageClassName?: string;\n /* Click handler for the image container. /\n onClick?: () => void;\n};\n\n/\n A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n \n @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n \n <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n /\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [currentSrc, setCurrentSrc] = useState<string \| undefined>(src);\n const [retryCount, setRetryCount] = useState<number>(0);\n const [isLoaded, setIsLoaded] = useState<boolean>(false);\n const [hasError, setHasError] = useState<boolean>(false);\n\n const handleLoad = useCallback(() => {\n setIsLoaded(true);\n }, []);\n\n const handleError = useCallback(() => {\n if (retryCount < maxRetries) {\n // imageRef.current?.style.setProperty('display', 'none')\n setHasError(false);\n const newRetryCount = retryCount + 1;\n setRetryCount(newRetryCount);\n\n // Retry with exponential backoff and cache busting\n setTimeout(() => {\n const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n setCurrentSrc(src + cacheBuster);\n }, retryDelay newRetryCount);\n return;\n }\n\n setHasError(true);\n setIsLoaded(true);\n setCurrentSrc(src);\n }, [maxRetries, retryCount, retryDelay, src]);\n\n if (hasError) {\n return (\n <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n </div>\n </div>\n );\n }\n\n return (\n <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n <img\n id={currentSrc}\n ref={imageRef}\n src={currentSrc}\n alt={alt}\n loading=\"lazy\"\n className={cn(\n 'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n isLoaded && 'opacity-100',\n !isLoaded && 'pointer-events-none opacity-0',\n imageClassName\n )}\n onLoad={handleLoad}\n onError={handleError}\n />\n </div>\n );\n};\n"],"mappings":"iOAwCA,MAAa,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,OAAA,CAAoC,IAAI,EACxC,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA8C,CAAG,EAC9D,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAAkC,CAAC,EAChD,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EACjD,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EAEjD,GAAA,EAAA,EAAA,YAAA,KAA+B,CACnC,EAAY,EAAI,CAClB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,YAAA,KAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,EAAK,EACjB,IAAM,EAAgB,EAAa,EACnC,EAAc,CAAa,EAG3B,eAAiB,~~CAEf~~,EAAc,~~EAAM~~,~~UADU,~~KAAK,IAAI,EAAE,WAAW,~~GACrB~~,CACjC,EAAG,EAAa,CAAa,EAC7B,MACF,CAEA,EAAY,EAAI,EAChB,EAAY,EAAI,EAChB,EAAc,CAAG,CACnB,EAAG,CAAC,EAAY,EAAY,EAAY,CAAG,CAAC,EAa5C,OAXI,GAEA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,WAAA,EAAA,EAAA,GAAA,CAAc,mCAAoC,CAAS,~~YACxF~~,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,~~2GAAf~~,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,UAAU,uCAAyC,CAAA,GACpE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,~~oEAA2D~~,sBAA0B,CAAA,CAClG,GACF,CAAA,GAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,WAAA,EAAA,EAAA,GAAA,CAAc,oEAAqE,CAAS,EAAY,~~mBAAvI~~,CACG,CAAC,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,2EAA6E,CAAA,GAC/G,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,IAAK,EAAY,UAAU,6EAA+E,CAAA,GAC/G,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,GAAA,CACE,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,CACF,EACA,OAAQ,EACR,QAAS,CACV,CAAA,CACE,GAET"}
1	+ {"version":3,"file":"image.cjs","names":["AlertCircleIcon","Skeleton"],"sources":["../../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. /\ntype Props = {\n /* URL of the image to display. /\n src?: string;\n /* Accessible alt text for the image. /\n alt?: string;\n /* Width of the image container (number treated as pixels). /\n width?: number \| string;\n /* Height of the image container (number treated as pixels). /\n height?: number \| string;\n /* Maximum number of retry attempts on load failure before showing an error state. @default 3 /\n maxRetries?: number;\n /* Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 /\n retryDelay?: number;\n /* Class name applied to the outer container div. /\n className?: string;\n /* Class name applied to the `<img>` element. /\n imageClassName?: string;\n /* Click handler for the image container. /\n onClick?: () => void;\n};\n\n/\n A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n \n @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n \n <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n /\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [currentSrc, setCurrentSrc] = useState<string \| undefined>(src);\n const [retryCount, setRetryCount] = useState<number>(0);\n const [isLoaded, setIsLoaded] = useState<boolean>(false);\n const [hasError, setHasError] = useState<boolean>(false);\n\n const handleLoad = useCallback(() => {\n setIsLoaded(true);\n }, []);\n\n const handleError = useCallback(() => {\n if (retryCount < maxRetries) {\n // imageRef.current?.style.setProperty('display', 'none')\n setHasError(false);\n const newRetryCount = retryCount + 1;\n setRetryCount(newRetryCount);\n\n // Retry with exponential backoff and cache busting\n setTimeout(() => {\n const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n setCurrentSrc(src + cacheBuster);\n }, retryDelay newRetryCount);\n return;\n }\n\n setHasError(true);\n setIsLoaded(true);\n setCurrentSrc(src);\n }, [maxRetries, retryCount, retryDelay, src]);\n\n if (hasError) {\n return (\n <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n </div>\n </div>\n );\n }\n\n return (\n <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n <img\n id={currentSrc}\n ref={imageRef}\n src={currentSrc}\n alt={alt}\n loading=\"lazy\"\n className={cn(\n 'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n isLoaded && 'opacity-100',\n !isLoaded && 'pointer-events-none opacity-0',\n imageClassName\n )}\n onLoad={handleLoad}\n onError={handleError}\n />\n </div>\n );\n};\n"],"mappings":"iOAwCA,MAAa,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,OAAA,CAAoC,IAAI,EACxC,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA8C,CAAG,EAC9D,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAAkC,CAAC,EAChD,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EACjD,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EAEjD,GAAA,EAAA,EAAA,YAAA,KAA+B,CACnC,EAAY,EAAI,CAClB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,YAAA,KAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,EAAK,EACjB,IAAM,EAAgB,EAAa,EACnC,EAAc,CAAa,EAG3B,eAAiB,CACf,IAAM,EAAc,UAAU,KAAK,IAAI,EAAE,WAAW,IACpD,EAAc,EAAM,CAAW,CACjC,EAAG,EAAa,CAAa,EAC7B,MACF,CAEA,EAAY,EAAI,EAChB,EAAY,EAAI,EAChB,EAAc,CAAG,CACnB,EAAG,CAAC,EAAY,EAAY,EAAY,CAAG,CAAC,EAa5C,OAXI,GAEA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,WAAA,EAAA,EAAA,GAAA,CAAc,mCAAoC,CAAS,EACxF,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kGAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,gBAAD,CAAiB,UAAU,uCAAyC,CAAA,GACpE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2DAA2D,SAAA,sBAA0B,CAAA,CAClG,GACF,CAAA,GAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,WAAA,EAAA,EAAA,GAAA,CAAc,oEAAqE,CAAS,EAAY,UAAvI,SAAA,CACG,CAAC,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,UAAU,2EAA6E,CAAA,GAC/G,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,IAAK,EAAY,UAAU,6EAA+E,CAAA,GAC/G,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,GAAA,CACE,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,CACF,EACA,OAAQ,EACR,QAAS,CACV,CAAA,CACE,GAET"}

package/dist/ui/image.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Image } from "../image-Cln0r7Eb.cjs";
+import { t as Image } from "../image-BvDGi_G7.cjs";
 export { Image };

package/dist/ui/image.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Image } from "../image-Cln0r7Eb.mjs";
+import { t as Image } from "../image-BvDGi_G7.mjs";
 export { Image };

package/dist/ui/image.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Skeleton as e}from"./skeleton.mjs";import{AlertCircleIcon as t}from"lucide-react";import{useCallback as n,useRef as r,useState as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({src:c,alt:l,width:u,height:d,maxRetries:f=3,retryDelay:p=500,className:m,imageClassName:h,onClick:g})=>{let _=r(null),[v,y]=i(c),[b,x]=i(0),[S,C]=i(!1),[w,T]=i(!1),E=n(()=>{C(!0)},[]),D=n(()=>{if(b<f){T(!1);let e=b+1;x(e),setTimeout(()=>{y(c+`?retry=${Date.now()}&attempt=${e}`)},p*e);return}T(!0),C(!0),y(c)},[f,b,p,c]);return w?o(`div`,{style:{width:u,height:d},className:a(`@container relative inline-block`,m),children:s(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[o(t,{className:`@max-[52px]:size-6 size-8 text-danger`}),o(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):s(`div`,{style:{width:u,height:d},className:a(`relative flex items-center justify-center overflow-hidden rounded`,m),onClick:g,children:[!S&&o(e,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),o(`img`,{src:v,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),o(`img`,{id:v,ref:_,src:v,alt:l,loading:`lazy`,className:a(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,S&&`opacity-100`,!S&&`pointer-events-none opacity-0`,h),onLoad:E,onError:D})]})};export{c as Image};
+import{Skeleton as e}from"./skeleton.mjs";import{AlertCircleIcon as t}from"lucide-react";import{useCallback as n,useRef as r,useState as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({src:c,alt:l,width:u,height:d,maxRetries:f=3,retryDelay:p=500,className:m,imageClassName:h,onClick:g})=>{let _=r(null),[v,y]=i(c),[b,x]=i(0),[S,C]=i(!1),[w,T]=i(!1),E=n(()=>{C(!0)},[]),D=n(()=>{if(b<f){T(!1);let e=b+1;x(e),setTimeout(()=>{let t=`?retry=${Date.now()}&attempt=${e}`;y(c+t)},p*e);return}T(!0),C(!0),y(c)},[f,b,p,c]);return w?o(`div`,{style:{width:u,height:d},className:a(`@container relative inline-block`,m),children:s(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[o(t,{className:`@max-[52px]:size-6 size-8 text-danger`}),o(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):s(`div`,{style:{width:u,height:d},className:a(`relative flex items-center justify-center overflow-hidden rounded`,m),onClick:g,children:[!S&&o(e,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),o(`img`,{src:v,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),o(`img`,{id:v,ref:_,src:v,alt:l,loading:`lazy`,className:a(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,S&&`opacity-100`,!S&&`pointer-events-none opacity-0`,h),onLoad:E,onError:D})]})};export{c as Image};
 //# sourceMappingURL=image.mjs.map

package/dist/ui/image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.mjs","names":[],"sources":["../../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. /\ntype Props = {\n /* URL of the image to display. /\n src?: string;\n /* Accessible alt text for the image. /\n alt?: string;\n /* Width of the image container (number treated as pixels). /\n width?: number \| string;\n /* Height of the image container (number treated as pixels). /\n height?: number \| string;\n /* Maximum number of retry attempts on load failure before showing an error state. @default 3 /\n maxRetries?: number;\n /* Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 /\n retryDelay?: number;\n /* Class name applied to the outer container div. /\n className?: string;\n /* Class name applied to the `<img>` element. /\n imageClassName?: string;\n /* Click handler for the image container. /\n onClick?: () => void;\n};\n\n/\n A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n \n @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n \n <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n /\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [currentSrc, setCurrentSrc] = useState<string \| undefined>(src);\n const [retryCount, setRetryCount] = useState<number>(0);\n const [isLoaded, setIsLoaded] = useState<boolean>(false);\n const [hasError, setHasError] = useState<boolean>(false);\n\n const handleLoad = useCallback(() => {\n setIsLoaded(true);\n }, []);\n\n const handleError = useCallback(() => {\n if (retryCount < maxRetries) {\n // imageRef.current?.style.setProperty('display', 'none')\n setHasError(false);\n const newRetryCount = retryCount + 1;\n setRetryCount(newRetryCount);\n\n // Retry with exponential backoff and cache busting\n setTimeout(() => {\n const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n setCurrentSrc(src + cacheBuster);\n }, retryDelay newRetryCount);\n return;\n }\n\n setHasError(true);\n setIsLoaded(true);\n setCurrentSrc(src);\n }, [maxRetries, retryCount, retryDelay, src]);\n\n if (hasError) {\n return (\n <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n </div>\n </div>\n );\n }\n\n return (\n <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n <img\n id={currentSrc}\n ref={imageRef}\n src={currentSrc}\n alt={alt}\n loading=\"lazy\"\n className={cn(\n 'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n isLoaded && 'opacity-100',\n !isLoaded && 'pointer-events-none opacity-0',\n imageClassName\n )}\n onLoad={handleLoad}\n onError={handleError}\n />\n </div>\n );\n};\n"],"mappings":"6PAwCA,MAAa,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,IAAI,EACxC,CAAC,EAAY,GAAiB,EAA6B,CAAG,EAC9D,CAAC,EAAY,GAAiB,EAAiB,CAAC,EAChD,CAAC,EAAU,GAAe,EAAkB,EAAK,EACjD,CAAC,EAAU,GAAe,EAAkB,EAAK,EAEjD,EAAa,MAAkB,CACnC,EAAY,EAAI,CAClB,EAAG,CAAC,CAAC,EAEC,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,EAAK,EACjB,IAAM,EAAgB,EAAa,EACnC,EAAc,CAAa,EAG3B,eAAiB,~~CAEf~~,EAAc,~~EAAM~~,~~UADU,~~KAAK,IAAI,EAAE,WAAW,~~GACrB~~,CACjC,EAAG,EAAa,CAAa,EAC7B,MACF,CAEA,EAAY,EAAI,EAChB,EAAY,EAAI,EAChB,EAAc,CAAG,CACnB,EAAG,CAAC,EAAY,EAAY,EAAY,CAAG,CAAC,EAa5C,OAXI,EAEA,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,UAAW,EAAG,mCAAoC,CAAS,~~WACxF~~,EAAC,MAAD,CAAK,UAAU,~~2GAAf~~,CACE,EAAC,EAAD,CAAiB,UAAU,uCAAyC,CAAA,EACpE,EAAC,OAAD,CAAM,UAAU,~~oEAA2D~~,sBAA0B,CAAA,CAClG,GACF,CAAA,EAKP,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,UAAW,EAAG,oEAAqE,CAAS,EAAY,~~mBAAvI~~,CACG,CAAC,GAAY,EAAC,EAAD,CAAU,UAAU,2EAA6E,CAAA,EAC/G,EAAC,MAAD,CAAK,IAAK,EAAY,UAAU,6EAA+E,CAAA,EAC/G,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,CACF,EACA,OAAQ,EACR,QAAS,CACV,CAAA,CACE,GAET"}
1	+ {"version":3,"file":"image.mjs","names":[],"sources":["../../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. /\ntype Props = {\n /* URL of the image to display. /\n src?: string;\n /* Accessible alt text for the image. /\n alt?: string;\n /* Width of the image container (number treated as pixels). /\n width?: number \| string;\n /* Height of the image container (number treated as pixels). /\n height?: number \| string;\n /* Maximum number of retry attempts on load failure before showing an error state. @default 3 /\n maxRetries?: number;\n /* Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 /\n retryDelay?: number;\n /* Class name applied to the outer container div. /\n className?: string;\n /* Class name applied to the `<img>` element. /\n imageClassName?: string;\n /* Click handler for the image container. /\n onClick?: () => void;\n};\n\n/\n A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n \n @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n \n <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n /\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [currentSrc, setCurrentSrc] = useState<string \| undefined>(src);\n const [retryCount, setRetryCount] = useState<number>(0);\n const [isLoaded, setIsLoaded] = useState<boolean>(false);\n const [hasError, setHasError] = useState<boolean>(false);\n\n const handleLoad = useCallback(() => {\n setIsLoaded(true);\n }, []);\n\n const handleError = useCallback(() => {\n if (retryCount < maxRetries) {\n // imageRef.current?.style.setProperty('display', 'none')\n setHasError(false);\n const newRetryCount = retryCount + 1;\n setRetryCount(newRetryCount);\n\n // Retry with exponential backoff and cache busting\n setTimeout(() => {\n const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n setCurrentSrc(src + cacheBuster);\n }, retryDelay newRetryCount);\n return;\n }\n\n setHasError(true);\n setIsLoaded(true);\n setCurrentSrc(src);\n }, [maxRetries, retryCount, retryDelay, src]);\n\n if (hasError) {\n return (\n <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n </div>\n </div>\n );\n }\n\n return (\n <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n <img\n id={currentSrc}\n ref={imageRef}\n src={currentSrc}\n alt={alt}\n loading=\"lazy\"\n className={cn(\n 'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n isLoaded && 'opacity-100',\n !isLoaded && 'pointer-events-none opacity-0',\n imageClassName\n )}\n onLoad={handleLoad}\n onError={handleError}\n />\n </div>\n );\n};\n"],"mappings":"6PAwCA,MAAa,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,IAAI,EACxC,CAAC,EAAY,GAAiB,EAA6B,CAAG,EAC9D,CAAC,EAAY,GAAiB,EAAiB,CAAC,EAChD,CAAC,EAAU,GAAe,EAAkB,EAAK,EACjD,CAAC,EAAU,GAAe,EAAkB,EAAK,EAEjD,EAAa,MAAkB,CACnC,EAAY,EAAI,CAClB,EAAG,CAAC,CAAC,EAEC,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,EAAK,EACjB,IAAM,EAAgB,EAAa,EACnC,EAAc,CAAa,EAG3B,eAAiB,CACf,IAAM,EAAc,UAAU,KAAK,IAAI,EAAE,WAAW,IACpD,EAAc,EAAM,CAAW,CACjC,EAAG,EAAa,CAAa,EAC7B,MACF,CAEA,EAAY,EAAI,EAChB,EAAY,EAAI,EAChB,EAAc,CAAG,CACnB,EAAG,CAAC,EAAY,EAAY,EAAY,CAAG,CAAC,EAa5C,OAXI,EAEA,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,UAAW,EAAG,mCAAoC,CAAS,EACxF,SAAA,EAAC,MAAD,CAAK,UAAU,kGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,UAAU,uCAAyC,CAAA,EACpE,EAAC,OAAD,CAAM,UAAU,2DAA2D,SAAA,sBAA0B,CAAA,CAClG,GACF,CAAA,EAKP,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,EAAG,UAAW,EAAG,oEAAqE,CAAS,EAAY,UAAvI,SAAA,CACG,CAAC,GAAY,EAAC,EAAD,CAAU,UAAU,2EAA6E,CAAA,EAC/G,EAAC,MAAD,CAAK,IAAK,EAAY,UAAU,6EAA+E,CAAA,EAC/G,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,CACF,EACA,OAAQ,EACR,QAAS,CACV,CAAA,CACE,GAET"}

package/dist/ui/input-otp.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-otp.cjs","names":["OTPInput","OTPInputContext","MinusIcon"],"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":"mOA+BA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAIF,CACD,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,SAAD,CACE,YAAU,YACV,oBAAA,EAAA,EAAA,GAAA,CAAuB,kDAAmD,CAAkB,EAC5F,WAAA,EAAA,EAAA,GAAA,CAAc,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,WAAA,EAAA,EAAA,GAAA,CAAc,oBAAqB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrG,CAOA,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,aAAA,EAAA,EAAA,IAAA,CADAC,EAAAA,eAC2B,CAAC,EAAE,MAAM,IAAU,CAAC,EAE3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,iBACV,cAAa,EACb,WAAA,EAAA,EAAA,GAAA,CACE,2fACA,CACF,EACA,GAAI,~~WAPN~~,CASG,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,~~kFACb~~,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0DAA4D,CAAA,CACxE,CAAA,CAEJ,GAET,CAGA,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,sBAAsB,KAAK,YAAY,GAAI,~~YACxD~~,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,CACT,CAAA,CAET"}
1	+ {"version":3,"file":"input-otp.cjs","names":["OTPInput","OTPInputContext","MinusIcon"],"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":"mOA+BA,SAAS,EAAS,CAChB,YACA,qBACA,GAAG,GAIF,CACD,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,SAAD,CACE,YAAU,YACV,oBAAA,EAAA,EAAA,GAAA,CAAuB,kDAAmD,CAAkB,EAC5F,WAAA,EAAA,EAAA,GAAA,CAAc,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,kBAAkB,WAAA,EAAA,EAAA,GAAA,CAAc,oBAAqB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrG,CAOA,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,aAAA,EAAA,EAAA,IAAA,CADAC,EAAAA,eAC2B,CAAC,EAAE,MAAM,IAAU,CAAC,EAE3E,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,YAAU,iBACV,cAAa,EACb,WAAA,EAAA,EAAA,GAAA,CACE,2fACA,CACF,EACA,GAAI,EAPN,SAAA,CASG,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wEACb,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0DAA4D,CAAA,CACxE,CAAA,CAEJ,GAET,CAGA,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,sBAAsB,KAAK,YAAY,GAAI,EACxD,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,CACT,CAAA,CAET"}

package/dist/ui/input-otp.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../input-otp-6hJfhBHX.cjs";
+import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../input-otp-DGf28Nq2.cjs";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

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

@@ -1,2 +1,2 @@
-import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../input-otp-6hJfhBHX.mjs";
+import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../input-otp-DGf28Nq2.mjs";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

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

	@@ -1 +1 @@
1	- {"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,EAAD,CACE,YAAU,YACV,mBAAoB,EAAG,kDAAmD,CAAkB,EAC5F,UAAW,EAAG,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAC,MAAD,CAAK,YAAU,kBAAkB,UAAW,EAAG,oBAAqB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrG,CAOA,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,YADJ,EAAI,CAC2B,CAAC,EAAE,MAAM,IAAU,CAAC,EAE3E,OACE,EAAC,MAAD,CACE,YAAU,iBACV,cAAa,EACb,UAAW,EACT,2fACA,CACF,EACA,GAAI,~~WAPN~~,CASG,EACA,GACC,EAAC,MAAD,CAAK,UAAU,~~iFACb~~,EAAC,MAAD,CAAK,UAAU,0DAA4D,CAAA,CACxE,CAAA,CAEJ,GAET,CAGA,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAC,MAAD,CAAK,YAAU,sBAAsB,KAAK,YAAY,GAAI,~~WACxD~~,EAAC,EAAD,CAAY,CAAA,CACT,CAAA,CAET"}
1	+ {"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,EAAD,CACE,YAAU,YACV,mBAAoB,EAAG,kDAAmD,CAAkB,EAC5F,UAAW,EAAG,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAGA,SAAS,EAAc,CAAE,YAAW,GAAG,GAAsC,CAC3E,OAAO,EAAC,MAAD,CAAK,YAAU,kBAAkB,UAAW,EAAG,oBAAqB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrG,CAOA,SAAS,EAAa,CACpB,QACA,YACA,GAAG,GAGF,CAED,GAAM,CAAE,OAAM,eAAc,YADJ,EAAI,CAC2B,CAAC,EAAE,MAAM,IAAU,CAAC,EAE3E,OACE,EAAC,MAAD,CACE,YAAU,iBACV,cAAa,EACb,UAAW,EACT,2fACA,CACF,EACA,GAAI,EAPN,SAAA,CASG,EACA,GACC,EAAC,MAAD,CAAK,UAAU,wEACb,SAAA,EAAC,MAAD,CAAK,UAAU,0DAA4D,CAAA,CACxE,CAAA,CAEJ,GAET,CAGA,SAAS,EAAkB,CAAE,GAAG,GAAsC,CACpE,OACE,EAAC,MAAD,CAAK,YAAU,sBAAsB,KAAK,YAAY,GAAI,EACxD,SAAA,EAAC,EAAD,CAAY,CAAA,CACT,CAAA,CAET"}

package/dist/ui/input.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-BieGEIDf.cjs";
+import { n as InputVariantProps, r as inputVariants, t as Input } from "../input-D73TrUof.cjs";
 export { Input, InputVariantProps, inputVariants };

package/dist/ui/input.d.mts CHANGED Viewed

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

package/dist/ui/inputs/search-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.cjs","names":["Input","SearchIcon","ArrowRightIcon"],"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":"4MAwBA,MAAa,GAAe,CAAE,YAAW,GAAG,MAExC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,~~oBAAf~~,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,CAAO,GAAI,EAAM,KAAK,SAAS,WAAA,EAAA,EAAA,GAAA,CAAc,YAAa,CAAS,CAAI,CAAA,GACvE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,~~kJACb~~,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,0XACV,aAAW,gBACX,KAAK,~~mBAEL~~,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,GAAI,cAAY,MAAQ,CAAA,CACxC,CAAA,CACL"}
1	+ {"version":3,"file":"search-input.cjs","names":["Input","SearchIcon","ArrowRightIcon"],"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":"4MAwBA,MAAa,GAAe,CAAE,YAAW,GAAG,MAExC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,CAAO,GAAI,EAAM,KAAK,SAAS,WAAA,EAAA,EAAA,GAAA,CAAc,YAAa,CAAS,CAAI,CAAA,GACvE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wIACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,0XACV,aAAW,gBACX,KAAK,SAEL,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,GAAI,cAAY,MAAQ,CAAA,CACxC,CAAA,CACL"}

package/dist/ui/inputs/search-input.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as SearchInput } from "../../search-input-Bq4enQzR.cjs";
+import { t as SearchInput } from "../../search-input-h_3MoMqK.cjs";
 export { SearchInput };

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

@@ -1,2 +1,2 @@
-import { t as SearchInput } from "../../search-input-D51_mAY-.mjs";
+import { t as SearchInput } from "../../search-input-DEvYI6Rm.mjs";
 export { SearchInput };