@customafk/lunas-ui 0.0.21 → 0.0.23

package/packages/components/ui/file-uploader.tsx

@@ -1,16 +1,13 @@
-"use client";
-import React from "react";
-import { FileText, Image, Trash2, Upload } from "lucide-react";
-import Dropzone, {
-  type DropzoneProps,
-  type FileRejection,
-} from "react-dropzone";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
-import { Progress } from "@/components/ui/progress";
-import { useControllableState } from "@/hooks/use-controllable-state";
-import { cn, formatBytes } from "@/lib/utils";
+'use client'
+import React from 'react'
+import { FileText, Image, Trash2, Upload } from 'lucide-react'
+import Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone'
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import { Progress } from '@/components/ui/progress'
+import { useControllableState } from '@/hooks/use-controllable-state'
+import { cn, formatBytes } from '@/lib/utils'
 
 interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -19,7 +16,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default undefined
    * @example value={files}
    */
-  value?: File[];
+  value?: File[]
 
   /**
    * Function to be called when the value changes.
@@ -27,7 +24,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default undefined
    * @example onValueChange={(files) => setFiles(files)}
    */
-  onValueChange?: (files: File[]) => void;
+  onValueChange?: (files: File[]) => void
 
   /**
    * Function to be called when files are uploaded.
@@ -35,7 +32,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default undefined
    * @example onUpload={(files) => uploadFiles(files)}
    */
-  onUpload?: (files: File[]) => Promise<void>;
+  onUpload?: (files: File[]) => Promise<void>
 
   /**
    * Progress of the uploaded files.
@@ -43,7 +40,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default undefined
    * @example progresses={{ "file1.png": 50 }}
    */
-  progresses?: Record<string, number>;
+  progresses?: Record<string, number>
 
   /**
    * Accepted file types for the uploader.
@@ -54,7 +51,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * ```
    * @example accept={["image/png", "image/jpeg"]}
    */
-  accept?: DropzoneProps["accept"];
+  accept?: DropzoneProps['accept']
 
   /**
    * Maximum file size for the uploader.
@@ -62,7 +59,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default 1024 * 1024 * 2 // 2MB
    * @example maxSize={1024 * 1024 * 2} // 2MB
    */
-  maxSize?: DropzoneProps["maxSize"];
+  maxSize?: DropzoneProps['maxSize']
 
   /**
    * Maximum number of files for the uploader.
@@ -70,7 +67,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default 1
    * @example maxFileCount={4}
    */
-  maxFileCount?: DropzoneProps["maxFiles"];
+  maxFileCount?: DropzoneProps['maxFiles']
 
   /**
    * Whether the uploader should accept multiple files.
@@ -78,7 +75,7 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    * @example multiple
    */
-  multiple?: boolean;
+  multiple?: boolean
 
   /**
    * Whether the uploader is disabled.
@@ -86,10 +83,10 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    * @example disabled
    */
-  disabled?: boolean;
+  disabled?: boolean
 
-  showText?: boolean;
-  iconSize?: number;
+  showText?: boolean
+  iconSize?: number
 }
 
 export function FileUploader(props: FileUploaderProps) {
@@ -99,7 +96,7 @@ export function FileUploader(props: FileUploaderProps) {
     onUpload,
     progresses,
     accept = {
-      "image/*": [],
+      'image/*': [],
     },
     maxSize = 1024 * 1024 * 2,
     maxFileCount = 1,
@@ -109,112 +106,100 @@ export function FileUploader(props: FileUploaderProps) {
     iconSize,
     className,
     ...dropzoneProps
-  } = props;
+  } = props
 
   const [files, setFiles] = useControllableState({
     prop: valueProp,
     onChange: onValueChange,
-  });
+  })
 
   const onDrop = React.useCallback(
     (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
       if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
-        toast.error("Cannot upload more than 1 file at a time");
+        toast.error('Cannot upload more than 1 file at a time')
 
-        return;
+        return
       }
 
       if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
-        toast.error(`Cannot upload more than ${maxFileCount} files`);
-        return;
+        toast.error(`Cannot upload more than ${maxFileCount} files`)
+        return
       }
 
       const newFiles = acceptedFiles.map((file) =>
         Object.assign(file, {
           preview: URL.createObjectURL(file),
         }),
-      );
+      )
 
-      const updatedFiles = files ? [...files, ...newFiles] : newFiles;
+      const updatedFiles = files ? [...files, ...newFiles] : newFiles
 
-      setFiles(updatedFiles);
+      setFiles(updatedFiles)
 
       if (rejectedFiles.length > 0) {
         rejectedFiles.forEach(({ file }) => {
-          toast.error(`File ${file.name} was rejected`);
-        });
+          toast.error(`File ${file.name} was rejected`)
+        })
       }
 
-      if (
-        onUpload &&
-        updatedFiles.length > 0 &&
-        updatedFiles.length <= maxFileCount
-      ) {
-        const target =
-          updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;
+      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {
+        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`
 
         onUpload(updatedFiles).then(() => {
-          setFiles([]);
-          toast(`${target} uploaded`);
-        });
+          setFiles([])
+          toast(`${target} uploaded`)
+        })
       }
     },
 
     [files, maxFileCount, multiple, onUpload, setFiles],
-  );
+  )
 
   function onRemove(index: number) {
-    if (!files) return;
+    if (!files) return
 
     if (isFileWithPreview(files[index])) {
-      URL.revokeObjectURL(files[index].preview);
+      URL.revokeObjectURL(files[index].preview)
     }
 
-    const newFiles = files.filter((_, i) => i !== index);
-    setFiles(newFiles);
-    onValueChange?.(newFiles);
+    const newFiles = files.filter((_, i) => i !== index)
+    setFiles(newFiles)
+    onValueChange?.(newFiles)
   }
 
   // Revoke preview url when component unmounts
   React.useEffect(() => {
     return () => {
-      if (!files) return;
+      if (!files) return
       files.forEach((file) => {
         if (isFileWithPreview(file)) {
-          URL.revokeObjectURL(file.preview);
+          URL.revokeObjectURL(file.preview)
         }
-      });
-    };
+      })
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
-  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
+  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount
 
   return (
     <div className="relative flex w-full flex-col gap-6">
-      <Dropzone
-        onDrop={onDrop}
-        accept={accept}
-        maxSize={maxSize}
-        maxFiles={maxFileCount}
-        multiple={maxFileCount > 1 || multiple}
-        disabled={isDisabled}
-      >
+      <Dropzone onDrop={onDrop} accept={accept} maxSize={maxSize} maxFiles={maxFileCount} multiple={maxFileCount > 1 || multiple} disabled={isDisabled}>
         {({ getRootProps, getInputProps, isDragActive }) => (
           <div
             {...getRootProps()}
             className={cn(
-              "group",
-              "border-muted-foreground/25",
-              "hover:bg-muted/25",
-              "relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition",
-              "ring-offset-background",
-              "focus-visible:ring-ring",
-              "focus-visible:ring-2",
-              "focus-visible:ring-offset-2",
-              "focus-visible:outline-hidden",
-              isDragActive && "border-muted-foreground/50",
-              isDisabled && "pointer-events-none opacity-60",
+              'group',
+              'border-border-weak',
+              'hover:bg-border-weak/20',
+              'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',
+              'ring-offset-background',
+              'focus-visible:ring-primary-weak',
+              'focus-visible:ring-2',
+              'focus-visible:ring-offset-2',
+              'focus-visible:outline-hidden',
+              isDragActive && 'border-border-primary-strong bg-border-weak/40',
+              isDisabled && 'pointer-events-none opacity-60',
               className,
             )}
             {...dropzoneProps}
@@ -223,33 +208,22 @@ export function FileUploader(props: FileUploaderProps) {
             {isDragActive ? (
               <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
                 <div className="rounded-full border border-dashed p-3">
-                  <Upload
-                    className="text-muted-foreground size-7"
-                    aria-hidden="true"
-                  />
+                  <Upload className="text-text-positive-muted size-7" aria-hidden="true" />
                 </div>
-                <p className="text-muted-foreground font-medium">
-                  Drop the files here
-                </p>
+                <p className="text-text-positive-muted font-medium">Drop the files here</p>
               </div>
             ) : (
               <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
                 <div className="rounded-full border border-dashed p-3">
-                  <Upload
-                    size={iconSize || 24}
-                    className="text-muted-foreground"
-                    aria-hidden="true"
-                  />
+                  <Upload size={iconSize || 24} className="text-muted-foreground" aria-hidden="true" />
                 </div>
                 {showText && (
                   <div className="flex flex-col gap-px">
-                    <p className="text-muted-foreground text-xs font-medium">
-                      Drag {`'n'`} drop files here, or click to select files
-                    </p>
-                    <p className="text-muted-foreground/70 text-xs">
+                    <p className="text-text-positive-weak text-xs font-medium">Drag {`'n'`} drop files here, or click to select files</p>
+                    <p className="text-text-positive-muted text-xs">
                       You can upload
                       {maxFileCount > 1
-                        ? ` ${maxFileCount === Infinity ? "multiple" : maxFileCount}
+                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
                       files (up to ${formatBytes(maxSize)} each)`
                         : ` a file with ${formatBytes(maxSize)}`}
                     </p>
@@ -263,23 +237,20 @@ export function FileUploader(props: FileUploaderProps) {
       {files?.length ? (
         <div className="h-fit w-full overflow-y-auto">
           <div className="flex items-center justify-between px-3 py-2.5">
-            <div className="flex items-center gap-1">
-              <Image
-                className="text-muted-foreground size-4"
-                aria-hidden="true"
-              />
+            <div className="text-text-positive-weak flex items-center gap-1">
+              <Image size={16} aria-hidden="true" />
               <p className="text-sm">Ảnh đã tải lên ({files.length})</p>
             </div>
             <button
-              className="hover:text-muted-foreground text-muted-foreground/60 flex cursor-pointer items-center gap-1 transition-colors duration-200"
+              className="hover:text-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200"
               onClick={() => {
-                if (!files) return;
+                if (!files) return
                 files.forEach((file) => {
-                  if (!isFileWithPreview(file)) return;
-                  URL.revokeObjectURL(file.preview);
-                });
-                setFiles([]);
-                onValueChange?.([]);
+                  if (!isFileWithPreview(file)) return
+                  URL.revokeObjectURL(file.preview)
+                })
+                setFiles([])
+                onValueChange?.([])
               }}
             >
               <Trash2 size={16} aria-hidden="true" />
@@ -288,85 +259,56 @@ export function FileUploader(props: FileUploaderProps) {
           </div>
           <div className="flex flex-col gap-2.5">
             {files?.map((file, index) => (
-              <FileCard
-                key={index}
-                file={file}
-                onRemove={() => onRemove(index)}
-                progress={progresses?.[file.name]}
-              />
+              <FileCard key={index} file={file} onRemove={() => onRemove(index)} progress={progresses?.[file.name]} />
             ))}
           </div>
         </div>
       ) : null}
     </div>
-  );
+  )
 }
 
 interface FileCardProps {
-  file: File;
-  onRemove: () => void;
-  progress?: number;
+  file: File
+  onRemove: () => void
+  progress?: number
 }
 
 function FileCard({ file, progress, onRemove }: FileCardProps) {
   return (
-    <div className="border-border/40 hover:border-border relative flex items-center gap-4 rounded-md border py-2 pr-3 pl-2 shadow-xs">
+    <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">
       <div className="flex flex-1 gap-2.5">
         {isFileWithPreview(file) ? <FilePreview file={file} /> : null}
         <div className="flex w-full flex-col gap-2">
           <div className="flex flex-col gap-y-0.5">
-            <p className="text-accent-foreground line-clamp-1 text-sm">
-              {file.name}
-            </p>
-            <p className="text-muted-foreground text-xs">
-              {formatBytes(file.size)}
-            </p>
+            <p className="text-text-positive line-clamp-1 text-sm">{file.name}</p>
+            <p className="text-text-positive-muted text-xs">{formatBytes(file.size)}</p>
           </div>
           {progress ? <Progress value={progress} /> : null}
         </div>
       </div>
       <div className="flex items-center gap-2">
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="size-7"
-          onClick={onRemove}
-        >
-          <Trash2
-            size={16}
-            className="text-muted-foreground/60"
-            aria-hidden="true"
-          />
+        <Button type="button" variant="ghost" color="secondary" size="icon" className="size-7" onClick={onRemove}>
+          <Trash2 size={16} className="text-text-positive-muted" aria-hidden="true" />
           <span className="sr-only">Remove file</span>
         </Button>
       </div>
     </div>
-  );
+  )
 }
 
 function isFileWithPreview(file: File): file is File & { preview: string } {
-  return "preview" in file && typeof file.preview === "string";
+  return 'preview' in file && typeof file.preview === 'string'
 }
 
 interface FilePreviewProps {
-  file: File & { preview: string };
+  file: File & { preview: string }
 }
 
 function FilePreview({ file }: FilePreviewProps) {
-  if (file.type.startsWith("image/")) {
-    return (
-      <img
-        src={file.preview}
-        className="border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm"
-      />
-    );
+  if (file.type.startsWith('image/')) {
+    return <img src={file.preview} className="border-border aspect-square size-10 shrink-0 rounded border object-cover object-top shadow-sm" />
   }
 
-  return (
-    <FileText
-      className="text-muted-foreground size-10 border"
-      aria-hidden="true"
-    />
-  );
+  return <FileText className="text-text-positive-muted size-10 border" aria-hidden="true" />
 }

package/packages/components/ui/form.tsx

@@ -1,57 +1,41 @@
-"use client";
-import React from "react";
-import {
-  Controller,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-  FormProvider,
-  useFormContext,
-  useFormState,
-} from "react-hook-form";
-import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
-
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
+'use client'
+import React from 'react'
+import { Controller, type ControllerProps, type FieldPath, type FieldValues, FormProvider, useFormContext, useFormState } from 'react-hook-form'
+import { Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui'
+
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+
+const Form = FormProvider
+
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+
+const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
   return (
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  );
-};
+  )
+}
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, control, resetField } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, control, resetField } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
+    throw new Error('useFormField should be used within <FormField>')
   }
 
-  const { id } = itemContext;
+  const { id } = itemContext
 
   return {
     id,
@@ -62,107 +46,59 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  };
-};
+  }
+}
 
 type FormItemContextValue = {
-  id: string;
-};
+  id: string
+}
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
 
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-1", className)}
-        {...props}
-      />
+      <div data-slot="form-item" className={cn('grid gap-1', className)} {...props} />
     </FormItemContext.Provider>
-  );
+  )
 }
 
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { formItemId } = useFormField();
-  return (
-    <Label
-      data-slot="form-label"
-      className={cn("text-xs", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { formItemId } = useFormField()
+  return <Label data-slot="form-label" className={cn('text-xs', className)} htmlFor={formItemId} {...props} />
 }
 
-function FormControl({
-  ...props
-}: React.ComponentProps<typeof SlotPrimitive.Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+function FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
     <SlotPrimitive.Slot
       data-slot="form-control"
       id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
       {...props}
     />
-  );
+  )
 }
 
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
 
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
+  return <p data-slot="form-description" id={formDescriptionId} className={cn('text-text-positive-muted text-sm', className)} {...props} />
 }
 
-function FormMessage({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
+function FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
 
   return (
-    <span
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-xs", className)}
-      {...props}
-    >
-      {error ? String(error?.message ?? "") : children}
+    <span data-slot="form-message" id={formMessageId} className={cn('text-danger text-xs', className)} {...props}>
+      {error ? String(error?.message ?? '') : children}
     </span>
-  );
+  )
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useFormField,
-};
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField }