@customafk/lunas-ui 0.0.26 → 0.0.27

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

@@ -1,314 +0,0 @@
-'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> {
-  /**
-   * Value of the uploader.
-   * @type File[]
-   * @default undefined
-   * @example value={files}
-   */
-  value?: File[]
-
-  /**
-   * Function to be called when the value changes.
-   * @type (files: File[]) => void
-   * @default undefined
-   * @example onValueChange={(files) => setFiles(files)}
-   */
-  onValueChange?: (files: File[]) => void
-
-  /**
-   * Function to be called when files are uploaded.
-   * @type (files: File[]) => Promise<void>
-   * @default undefined
-   * @example onUpload={(files) => uploadFiles(files)}
-   */
-  onUpload?: (files: File[]) => Promise<void>
-
-  /**
-   * Progress of the uploaded files.
-   * @type Record<string, number> | undefined
-   * @default undefined
-   * @example progresses={{ "file1.png": 50 }}
-   */
-  progresses?: Record<string, number>
-
-  /**
-   * Accepted file types for the uploader.
-   * @type { [key: string]: string[]}
-   * @default
-   * ```ts
-   * { "image/*": [] }
-   * ```
-   * @example accept={["image/png", "image/jpeg"]}
-   */
-  accept?: DropzoneProps['accept']
-
-  /**
-   * Maximum file size for the uploader.
-   * @type number | undefined
-   * @default 1024 * 1024 * 2 // 2MB
-   * @example maxSize={1024 * 1024 * 2} // 2MB
-   */
-  maxSize?: DropzoneProps['maxSize']
-
-  /**
-   * Maximum number of files for the uploader.
-   * @type number | undefined
-   * @default 1
-   * @example maxFileCount={4}
-   */
-  maxFileCount?: DropzoneProps['maxFiles']
-
-  /**
-   * Whether the uploader should accept multiple files.
-   * @type boolean
-   * @default false
-   * @example multiple
-   */
-  multiple?: boolean
-
-  /**
-   * Whether the uploader is disabled.
-   * @type boolean
-   * @default false
-   * @example disabled
-   */
-  disabled?: boolean
-
-  showText?: boolean
-  iconSize?: number
-}
-
-export function FileUploader(props: FileUploaderProps) {
-  const {
-    value: valueProp,
-    onValueChange,
-    onUpload,
-    progresses,
-    accept = {
-      'image/*': [],
-    },
-    maxSize = 1024 * 1024 * 2,
-    maxFileCount = 1,
-    multiple = false,
-    disabled = false,
-    showText = true,
-    iconSize,
-    className,
-    ...dropzoneProps
-  } = 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')
-
-        return
-      }
-
-      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
-        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
-
-      setFiles(updatedFiles)
-
-      if (rejectedFiles.length > 0) {
-        rejectedFiles.forEach(({ file }) => {
-          toast.error(`File ${file.name} was rejected`)
-        })
-      }
-
-      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {
-        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`
-
-        onUpload(updatedFiles).then(() => {
-          setFiles([])
-          toast(`${target} uploaded`)
-        })
-      }
-    },
-
-    [files, maxFileCount, multiple, onUpload, setFiles],
-  )
-
-  function onRemove(index: number) {
-    if (!files) return
-
-    if (isFileWithPreview(files[index])) {
-      URL.revokeObjectURL(files[index].preview)
-    }
-
-    const newFiles = files.filter((_, i) => i !== index)
-    setFiles(newFiles)
-    onValueChange?.(newFiles)
-  }
-
-  // Revoke preview url when component unmounts
-  React.useEffect(() => {
-    return () => {
-      if (!files) return
-      files.forEach((file) => {
-        if (isFileWithPreview(file)) {
-          URL.revokeObjectURL(file.preview)
-        }
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  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}>
-        {({ getRootProps, getInputProps, isDragActive }) => (
-          <div
-            {...getRootProps()}
-            className={cn(
-              'group',
-              'border-border-weak',
-              'hover:bg-border-weak/20',
-              'relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition',
-              'ring-offset-background',
-              'focus-visible:ring-primary-weak',
-              'focus-visible:ring-2',
-              'focus-visible:ring-offset-2',
-              'focus-visible:outline-hidden',
-              isDragActive && 'border-border-primary-strong bg-border-weak/40',
-              isDisabled && 'pointer-events-none opacity-60',
-              className,
-            )}
-            {...dropzoneProps}
-          >
-            <input {...getInputProps()} />
-            {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-text-positive-muted size-7" aria-hidden="true" />
-                </div>
-                <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" />
-                </div>
-                {showText && (
-                  <div className="flex flex-col gap-px">
-                    <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}
-                      files (up to ${formatBytes(maxSize)} each)`
-                        : ` a file with ${formatBytes(maxSize)}`}
-                    </p>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </Dropzone>
-      {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="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-text-positive text-text-positive-muted flex cursor-pointer items-center gap-1 transition-colors duration-200"
-              onClick={() => {
-                if (!files) return
-                files.forEach((file) => {
-                  if (!isFileWithPreview(file)) return
-                  URL.revokeObjectURL(file.preview)
-                })
-                setFiles([])
-                onValueChange?.([])
-              }}
-            >
-              <Trash2 size={16} aria-hidden="true" />
-              <p className="text-sm">Xóa tất cả</p>
-            </button>
-          </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]} />
-            ))}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-interface FileCardProps {
-  file: File
-  onRemove: () => void
-  progress?: number
-}
-
-function FileCard({ file, progress, onRemove }: FileCardProps) {
-  return (
-    <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-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" 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'
-}
-
-interface FilePreviewProps {
-  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" />
-  }
-
-  return <FileText className="text-text-positive-muted size-10 border" aria-hidden="true" />
-}

package/packages/components/ui/form.tsx

@@ -1,104 +0,0 @@
-'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)
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    control,
-    resetField,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
-
-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} />
-    </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 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-invalid={!!error}
-      {...props}
-    />
-  )
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  const { formDescriptionId } = useFormField()
-
-  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()
-
-  return (
-    <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 }

package/packages/components/ui/hover-card.tsx

@@ -1,32 +0,0 @@
-'use client'
-import React from 'react'
-import { HoverCard as HoverCardPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
-
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-}
-
-function HoverCardContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          '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',
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
-}
-
-export { HoverCard, HoverCardContent, HoverCardTrigger }

package/packages/components/ui/input-otp.tsx

@@ -1,67 +0,0 @@
-'use client'
-import React from 'react'
-import { OTPInput, OTPInputContext } from 'input-otp'
-import { MinusIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
-      className={cn('disabled:cursor-not-allowed', className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="input-otp-group" className={cn('flex items-center', className)} {...props} />
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<'div'> & {
-  index: number
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        '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]',
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  )
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }

package/packages/components/ui/input.tsx

@@ -1,59 +0,0 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Input({
-  className,
-  type,
-  onChange,
-  onValueChange,
-  ...props
-}: React.ComponentProps<'input'> & {
-  onValueChange?: (value: string) => void
-}) {
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e)
-      onValueChange?.(e.target.value)
-    },
-    [onChange, onValueChange],
-  )
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'flex h-9 w-full min-w-0',
-        'border-border-weak shadow-input rounded-md border',
-        'px-3 py-1',
-        'bg-transparent',
-        'caret-primary text-sm',
-        'transition-[color,box-shadow] outline-none',
-        'placeholder:text-text-positive-muted',
-        'selection:bg-primary',
-        'selection:text-primary-foreground',
-        'file:inline-flex',
-        'file:h-7',
-        'file:border-0',
-        'file:bg-transparent',
-        'file:text-sm',
-        'file:text-foreground',
-        'file:font-medium',
-        'disabled:pointer-events-none',
-        'disabled:cursor-not-allowed',
-        'disabled:opacity-50',
-        'focus-visible:ring-4',
-        'focus-visible:ring-primary-weak',
-        'focus-visible:border-primary-strong',
-        'aria-invalid:ring-danger-muted',
-        'aria-invalid:border-danger',
-        className,
-      )}
-      {...props}
-      onChange={handleChange}
-    />
-  )
-}
-
-export { Input }