@customafk/lunas-ui 0.0.21 → 0.0.23

package/packages/components/dialogs/detail-dialog/component/wrapper.tsx

@@ -1,17 +1,15 @@
-import { DialogContent } from "@/components/ui/dialog";
+import { DialogContent } from '@/components/ui/dialog'
 
-export const DetailDialogWrapper: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const DetailDialogWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <DialogContent
       className="relative h-full max-h-[90svh] overflow-hidden rounded-lg border-none p-0 sm:max-w-[calc(100svw-2rem)]"
       onInteractOutside={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
+        e.preventDefault()
+        e.stopPropagation()
       }}
     >
       {children}
     </DialogContent>
-  );
-};
+  )
+}

package/packages/components/dialogs/detail-dialog/index.tsx

@@ -1,10 +1,10 @@
-import { CatIcon } from "lucide-react";
+import { CatIcon } from 'lucide-react'
 
-import { Flex } from "@/components/layouts/flex";
-import { Dialog } from "@/components/ui/dialog";
+import { Flex } from '@/components/layouts/flex'
+import { Dialog } from '@/components/ui/dialog'
 
-import { DetailDialogHeader } from "./component/header";
-import { DetailDialogMain, DetailDialogMainHeader } from "./component/main";
+import { DetailDialogHeader } from './component/header'
+import { DetailDialogMain, DetailDialogMainHeader } from './component/main'
 import {
   Sidebar,
   SidebarContent,
@@ -15,14 +15,12 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
-} from "./component/sidebar";
-import { DetailDialogWrapper } from "./component/wrapper";
+} from './component/sidebar'
+import { DetailDialogWrapper } from './component/wrapper'
 
-const DetailDialogSidebar: React.FC<
-  React.PropsWithChildren<{ title?: string; sidebarFooter?: React.ReactNode }>
-> = ({ title, sidebarFooter, children }) => {
+const DetailDialogSidebar: React.FC<React.PropsWithChildren<{ title?: string; sidebarFooter?: React.ReactNode }>> = ({ title, sidebarFooter, children }) => {
   return (
-    <Sidebar collapsible="icon" className="hidden border-r md:flex">
+    <Sidebar collapsible="icon" className="border-border-weak hidden border-r md:flex">
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
@@ -31,9 +29,7 @@ const DetailDialogSidebar: React.FC<
                 <CatIcon size={16} />
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">
-                  {title || "Detail Dialog"}
-                </span>
+                <span className="truncate font-medium">{title || 'Detail Dialog'}</span>
                 <span className="truncate text-xs">Lunas Enterprise</span>
               </div>
             </SidebarMenuButton>
@@ -45,19 +41,19 @@ const DetailDialogSidebar: React.FC<
       </SidebarContent>
       {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
     </Sidebar>
-  );
-};
+  )
+}
 
 type Props = {
-  open?: boolean;
-  isLoading?: boolean;
-  sidebarTitle?: string;
-  sidebar?: React.ReactNode;
-  sidebarFooter?: React.ReactNode;
-  title: string;
-  createdAt: string | Date | number;
-  onOpenChange?: (open: boolean) => void | Promise<void>;
-};
+  open?: boolean
+  isLoading?: boolean
+  sidebarTitle?: string
+  sidebar?: React.ReactNode
+  sidebarFooter?: React.ReactNode
+  title: string
+  createdAt: string | Date | number
+  onOpenChange?: (open: boolean) => void | Promise<void>
+}
 export const DetailDialog: React.FC<React.PropsWithChildren<Props>> = ({
   open,
   isLoading = false,
@@ -75,26 +71,21 @@ export const DetailDialog: React.FC<React.PropsWithChildren<Props>> = ({
         <DetailDialogHeader />
 
         <SidebarProvider className="h-full min-h-[85svh] items-start">
-          <DetailDialogSidebar
-            title={sidebarTitle}
-            sidebarFooter={sidebarFooter}
-          >
+          <DetailDialogSidebar title={sidebarTitle} sidebarFooter={sidebarFooter}>
             {sidebar}
           </DetailDialogSidebar>
           <DetailDialogMain>
             <DetailDialogMainHeader title={title} createdAt={createdAt} />
             {isLoading ? (
-              <Flex justify="center" className="bg-muted/50 size-full">
+              <Flex justify="center" className="bg-muted-muted/20 size-full">
                 <div className="loader" />
               </Flex>
             ) : (
-              <section className="bg-muted/50 relative flex-1 overflow-y-auto inset-shadow-sm">
-                {children}
-              </section>
+              <section className="bg-muted-muted/20 relative flex-1 overflow-y-auto inset-shadow-sm">{children}</section>
             )}
           </DetailDialogMain>
         </SidebarProvider>
       </DetailDialogWrapper>
     </Dialog>
-  );
-};
+  )
+}

package/packages/components/dialogs/error-dialog.tsx

@@ -1,39 +1,25 @@
-import React from "react";
-import { AlertTriangleIcon } from "lucide-react";
+import React from 'react'
+import { AlertTriangleIcon } from 'lucide-react'
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "../ui/alert-dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog'
 
 type Props = {
-  open?: boolean;
-  title?: string;
-  description?: string;
-  onOpenChange?: (open: boolean) => void;
-};
-export const ErrorDialog: React.FC<React.PropsWithChildren<Props>> = ({
-  open,
-  title,
-  children,
-  onOpenChange,
-}) => {
+  open?: boolean
+  title?: string
+  description?: string
+  onOpenChange?: (open: boolean) => void
+}
+export const ErrorDialog: React.FC<React.PropsWithChildren<Props>> = ({ open, title, children, onOpenChange }) => {
   const handleClose = React.useCallback(() => {
-    onOpenChange?.(false);
-  }, [onOpenChange]);
+    onOpenChange?.(false)
+  }, [onOpenChange])
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent className="gap-8 p-4 sm:max-w-md">
         <AlertDialogHeader>
           <div className="text-destructive flex flex-col items-center">
             <AlertTriangleIcon size={42} />
-            <AlertDialogTitle className="text-xl font-medium">
-              {title || "An error occurred"}
-            </AlertDialogTitle>
+            <AlertDialogTitle className="text-xl font-medium">{title || 'An error occurred'}</AlertDialogTitle>
           </div>
         </AlertDialogHeader>
         {children}
@@ -44,5 +30,5 @@ export const ErrorDialog: React.FC<React.PropsWithChildren<Props>> = ({
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  );
-};
+  )
+}

package/packages/components/dialogs/form-dialog.tsx

@@ -1,43 +1,27 @@
-import type {
-  FieldValues,
-  FormState,
-  SubmitErrorHandler,
-  UseFormProps,
-} from "react-hook-form";
+import type { FieldValues, FormState, SubmitErrorHandler, UseFormProps } from 'react-hook-form'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-import { FormWrapper } from "../forms/form-wrapper";
-import { Button } from "../ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../ui/dialog";
+import { FormWrapper } from '../forms/form-wrapper'
+import { Button } from '../ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog'
 
 type Props<TFieldValues extends FieldValues = FieldValues> = {
-  form: UseFormProps<TFieldValues>;
+  form: UseFormProps<TFieldValues>
 
-  open: boolean;
-  isSubmitting?: boolean;
-  isResetAfterSubmit?: boolean;
-  disableSubmit?: boolean;
-  title?: string;
-  description?: string;
-  className?: string;
+  open: boolean
+  isSubmitting?: boolean
+  isResetAfterSubmit?: boolean
+  disableSubmit?: boolean
+  title?: string
+  description?: string
+  className?: string
 
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (
-    data: TFieldValues,
-    formState: FormState<FieldValues>,
-    dirtyFields: FormState<FieldValues>["dirtyFields"],
-  ) => void | Promise<void>;
-  onError?: SubmitErrorHandler<TFieldValues>;
-  onReset?: () => void;
-};
+  onOpenChange: (open: boolean) => void
+  onSubmit: (data: TFieldValues, formState: FormState<FieldValues>, dirtyFields: FormState<FieldValues>['dirtyFields']) => void | Promise<void>
+  onError?: SubmitErrorHandler<TFieldValues>
+  onReset?: () => void
+}
 export const FormDialog = <TFieldValues extends FieldValues = FieldValues>({
   form,
   open,
@@ -57,18 +41,15 @@ export const FormDialog = <TFieldValues extends FieldValues = FieldValues>({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className={cn("flex flex-col gap-0 border-none p-0", className)}
+        className={cn('flex flex-col gap-0 border-none p-0', className)}
         onInteractOutside={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
+          e.preventDefault()
+          e.stopPropagation()
         }}
       >
         <DialogHeader className="flex-0 gap-2 border-b px-6 pt-6 pb-4">
-          <DialogTitle>{title || "Form Dialog"}</DialogTitle>
-          <DialogDescription>
-            {description ||
-              "This is a form dialog where you can add your form elements."}
-          </DialogDescription>
+          <DialogTitle>{title || 'Form Dialog'}</DialogTitle>
+          <DialogDescription>{description || 'This is a form dialog where you can add your form elements.'}</DialogDescription>
         </DialogHeader>
         <FormWrapper
           form={form}
@@ -79,28 +60,15 @@ export const FormDialog = <TFieldValues extends FieldValues = FieldValues>({
         >
           <main className="flex-1 overflow-y-auto px-6">{children}</main>
           <DialogFooter className="border-t px-6 pt-4 pb-6">
-            <Button
-              tabIndex={-1}
-              type="button"
-              variant="outline"
-              className="w-30 rounded-full"
-              onClick={onReset}
-            >
+            <Button tabIndex={-1} type="button" variant="outline" color="muted" className="w-30 rounded-full" onClick={onReset}>
               Reset
             </Button>
-            <Button
-              autoFocus
-              tabIndex={0}
-              type="submit"
-              isLoading={isSubmitting}
-              disabled={disableSubmit}
-              className="w-30 rounded-full"
-            >
+            <Button autoFocus tabIndex={0} type="submit" isLoading={isSubmitting} disabled={disableSubmit} className="w-30 rounded-full">
               Xác nhận
             </Button>
           </DialogFooter>
         </FormWrapper>
       </DialogContent>
     </Dialog>
-  );
-};
+  )
+}

package/packages/components/dialogs/loading-dialog.tsx

@@ -1,23 +1,20 @@
-import React from "react";
+import React from 'react'
 
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog'
 
 type Props = {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-};
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
 export const LoadingDialog: React.FC<Props> = ({ open, onOpenChange }) => {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        showCloseButton={false}
-        className="pointer-events-none border-none bg-transparent shadow-none outline-0 [&>div]:bg-transparent"
-      >
+      <DialogContent showCloseButton={false} className="pointer-events-none border-none bg-transparent shadow-none outline-0 [&>div]:bg-transparent">
         <DialogTitle />
         <div className="flex items-center justify-center">
           <div className="loader opacity-60" />
         </div>
       </DialogContent>
     </Dialog>
-  );
-};
+  )
+}

package/packages/components/forms/combobox-field.tsx

@@ -1,47 +1,29 @@
-"use client";
-import React from "react";
-import type { FieldPath, FieldValues } from "react-hook-form";
-import { ChevronDownIcon, PlusIcon } from "lucide-react";
+'use client'
+import React from 'react'
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { ChevronDownIcon, PlusIcon } from 'lucide-react'
 
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command";
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>;
-  label?: string;
-  placeholder?: string;
-  options?: { value: string | number; label: string }[];
-  isShowErrorMsg?: boolean;
-  modal?: boolean;
-  description?: string;
-  onAddNewItem?: () => void;
-};
+  name: FieldPath<TFieldValues>
+  label?: string
+  placeholder?: string
+  options?: { value: string | number; label: string }[]
+  isShowErrorMsg?: boolean
+  modal?: boolean
+  description?: string
+  onAddNewItem?: () => void
+}
 
 export const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({
   name,
-  label = "Combobox",
-  placeholder = "Chọn một mục",
+  label = 'Combobox',
+  placeholder = 'Chọn một mục',
   description,
   options,
   onAddNewItem,
@@ -60,50 +42,39 @@ export const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({
                     type="button"
                     variant="outline"
                     role="combobox"
+                    color="muted"
                     className={cn(
-                      "flex justify-between rounded-md px-3",
-                      "font-normal outline-offset-0",
-                      "focus-visible:outline-[3px]",
-                      "[&_div]:justify-between",
-                      "data-[state=open]:border-primary",
-                      "data-[state=open]:ring-ring",
-                      "data-[state=open]:ring-4",
-                      "focus:border-primary",
-                      "focus:ring-ring",
-                      "focus:ring-4",
+                      'flex justify-between rounded-md px-3',
+                      'outline-border-weak font-normal',
+                      '[&_div]:justify-between',
+                      'data-[state=open]:border-primary-strong',
+                      'data-[state=open]:outline-1',
+                      'data-[state=open]:outline-primary-strong',
+                      'data-[state=open]:ring-primary-weak',
+                      'data-[state=open]:ring-4',
+                      'focus:border-primary-strong',
+                      'focus:ring-4',
+                      'focus:ring-primary-weak',
+                      'focus:outline-1',
+                      'focus:outline-primary-strong',
                     )}
                   >
                     {field.value ? (
-                      <span className="flex min-w-0 items-center gap-2">
-                        {
-                          options?.find(({ value }) => value === field.value)
-                            ?.label
-                        }
-                      </span>
+                      <span className="flex min-w-0 items-center gap-2">{options?.find(({ value }) => value === field.value)?.label}</span>
                     ) : (
-                      <span className="text-muted-foreground">
-                        {placeholder}
-                      </span>
+                      <span className="text-text-positive-muted">{placeholder}</span>
                     )}
-                    <ChevronDownIcon
-                      size={16}
-                      className="text-muted-foreground/80 shrink-0"
-                      aria-hidden="true"
-                    />
+                    <ChevronDownIcon size={16} className="text-text-positive-weak shrink-0" aria-hidden="true" />
                   </Button>
                 </FormControl>
               </PopoverTrigger>
               <PopoverContent className="border-input w-full max-w-[var(--radix-popover-trigger-width)] p-0">
                 <Command>
-                  <CommandInput placeholder={placeholder ?? "Tìm kiếm"} />
+                  <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />
                   <CommandList>
                     <CommandGroup className="max-h-40 overflow-y-auto">
                       {options?.map(({ value, label }) => (
-                        <CommandItem
-                          key={value}
-                          value={label}
-                          onSelect={() => field.onChange(value)}
-                        >
+                        <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>
                           {label}
                         </CommandItem>
                       ))}
@@ -112,16 +83,8 @@ export const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({
                       <React.Fragment>
                         <CommandSeparator />
                         <CommandGroup>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            className="w-full justify-start font-normal"
-                          >
-                            <PlusIcon
-                              size={14}
-                              className="-ms-2 opacity-60"
-                              aria-hidden="true"
-                            />
+                          <Button type="button" variant="ghost" className="w-full justify-start font-normal">
+                            <PlusIcon size={14} className="-ms-2 opacity-60" aria-hidden="true" />
                             Thêm mới
                           </Button>
                         </CommandGroup>
@@ -134,8 +97,8 @@ export const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({
             </Popover>
             {!!description && <FormDescription>{description}</FormDescription>}
           </FormItem>
-        );
+        )
       }}
     />
-  );
-};
+  )
+}

package/packages/components/forms/date-field.tsx

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import type { FieldPath, FieldValues } from 'react-hook-form'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
@@ -35,10 +35,7 @@ export const DateField = <TFieldValues extends FieldValues = FieldValues>({
           <Popover modal>
             <PopoverTrigger asChild>
               <FormControl>
-                <Button
-                  variant="outline"
-                  className={cn('w-full pl-3 text-left font-normal', !field.value && 'text-muted-foreground')}
-                >
+                <Button variant="outline" className={cn('w-full pl-3 text-left font-normal', !field.value && 'text-muted-foreground')}>
                   {field.value ? format(field.value, 'PPP') : <span> {placeholder || 'Pick a date'}</span>}
                   <CalendarIcon className="ml-auto size-4 opacity-50" />
                 </Button>