lecom-ui 5.2.88 → 5.2.89

package/dist/index.d.ts

@@ -19,7 +19,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, Control } from 'react-hook-form';
 export { useForm } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { CustomStyles as CustomStyles$2 } from '@/components/Button';
@@ -36,6 +36,10 @@ export { TFunction, default as i18n } from 'i18next';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as vaul from 'vaul';
 import { Drawer as Drawer$1 } from 'vaul';
+import { Locale } from 'date-fns';
+export { ptBR } from 'date-fns/locale/pt-BR';
+export { enUS } from 'date-fns/locale/en-US';
+export { es } from 'date-fns/locale/es';
 export { z as zod } from 'zod';
 export { zodResolver } from '@hookform/resolvers/zod';
 export { Translation, useTranslation } from 'react-i18next';
@@ -399,6 +403,7 @@ interface PaginationProps {
     onChangePerPage?: (currentPerPage: number) => void;
     className?: string;
     activeColor?: BgColor$1;
+    showPerPageSelector?: boolean;
 }
 declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
 declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
@@ -427,7 +432,7 @@ declare const PaginationIndex: {
     displayName: string;
 };
 declare const Pagination: {
-    ({ currentPage, itemsPage, perPage, totalRowsSelected, onChangePerPage, className, activeColor, }: PaginationProps): React$1.JSX.Element;
+    ({ currentPage, itemsPage, perPage, totalRowsSelected, onChangePerPage, className, activeColor, showPerPageSelector, }: PaginationProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -714,9 +719,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    size?: "small" | "large" | "default" | null | undefined;
-    radius?: "small" | "large" | "default" | "full" | null | undefined;
+    variant?: "default" | "filled" | "borderless" | null | undefined;
+    size?: "default" | "small" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
     sufix?: React$1.ReactNode;
@@ -875,7 +880,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -932,7 +937,11 @@ interface SpinProps extends React$1.SVGAttributes<SVGSVGElement> {
 }
 declare const Spin: React$1.ForwardRefExoticComponent<SpinProps & React$1.RefAttributes<SVGSVGElement>>;
 
-declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    loading?: boolean;
+    className?: string;
+}
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const tagVariants: (props?: ({
     color?: "blue" | "grey" | "purple" | "yellow" | "red" | "orange" | "green" | "pink" | "turquoise" | null | undefined;
@@ -1026,8 +1035,8 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    radius?: "small" | "large" | "default" | null | undefined;
+    variant?: "default" | "filled" | "borderless" | null | undefined;
+    radius?: "default" | "small" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
     resize?: 'none' | 'both' | 'horizontal' | 'vertical';
@@ -1054,5 +1063,115 @@ declare const DrawerFooter: {
 declare const DrawerTitle: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof Drawer$1.Title> & React$1.RefAttributes<React$1.ElementRef<typeof Drawer$1.Title>>>;
 declare const DrawerDescription: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof Drawer$1.Description> & React$1.RefAttributes<React$1.ElementRef<typeof Drawer$1.Description>>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
-export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, CustomStyles$1 as CustomStyles, DataTableProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TableProps, TagProps, TextColor, TextareaProps, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
+type TimelineStepItem = {
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    status?: 'completed' | 'current' | 'pending' | 'error';
+};
+interface StepsProps {
+    items: TimelineStepItem[];
+    current?: number;
+    className?: string;
+    dotSize?: 'small' | 'medium' | 'large';
+    color?: string;
+}
+declare const Steps: React$1.FC<StepsProps>;
+
+interface ComboboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface ComboboxGroup {
+    label: string;
+    options: ComboboxOption[];
+}
+type ComboboxProps = {
+    options: (ComboboxOption | ComboboxGroup)[];
+    value: string | null;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    notFoundContent?: React$1.ReactNode;
+    status?: 'default' | 'error';
+    searchTerm?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+};
+declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, }: ComboboxProps): React$1.JSX.Element;
+
+interface TagValue {
+    label: string;
+    value: string;
+}
+interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    value: TagValue[];
+    onRemove: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    variant?: 'default' | 'filled' | 'borderless';
+    radius?: 'default' | 'full';
+}
+declare function TagInput({ value, onRemove, placeholder, disabled, readOnly, className, variant, radius, ...props }: TagInputProps): React$1.JSX.Element;
+
+interface CustomDividerProps {
+    name?: string;
+    control?: Control<any>;
+    isActive?: boolean;
+    isGroupDivider?: boolean;
+    orientation?: 'left' | 'center' | 'right';
+    dashed?: boolean;
+    plain?: boolean;
+    lineOnly?: boolean;
+    optionLabels?: [string, string];
+    ButtonComponent?: typeof Button;
+    buttonSize?: 'small' | 'medium' | 'large' | 'extraLarge' | null | undefined;
+    buttonClassName?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    children?: React$1.ReactNode;
+}
+declare function CustomDivider({ name, control, isActive, isGroupDivider, orientation, dashed, plain, lineOnly, optionLabels, ButtonComponent, buttonSize, buttonClassName, className, style, children, }: CustomDividerProps): React$1.JSX.Element;
+declare namespace CustomDivider {
+    var displayName: string;
+}
+
+type ExpandIconPosition = 'start' | 'end';
+declare const collapseTriggerVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    ghost?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CollapsePanelProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    header: React$1.ReactNode;
+    children: React$1.ReactNode;
+    extra?: React$1.ReactNode;
+    expandIcon?: React$1.ReactNode;
+    expandIconPosition?: ExpandIconPosition;
+    size?: 'small' | 'medium' | 'large';
+    ghost?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Collapse: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>> & {
+    Panel: React$1.ForwardRefExoticComponent<CollapsePanelProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+interface DatePickerProps {
+    className?: string;
+    variant?: 'outlined' | 'filled' | 'ghost' | null;
+    locale?: Locale;
+    placeholder?: string;
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    format?: string;
+    status?: string;
+}
+declare function DatePicker({ className, variant, locale, placeholder, value, onChange, format, status, }: DatePickerProps): React$1.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapse, Combobox, CustomDivider, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Steps, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, collapseTriggerVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
+export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxGroup, ComboboxOption, ComboboxProps, CustomStyles$1 as CustomStyles, DataTableProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, ExpandIconPosition, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagProps, TagValue, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

package/dist/index.js

@@ -43,6 +43,15 @@ export { fonts } from './tokens/fonts.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/Tabs/Tabs.js';
 export { Textarea, textareaVariants } from './components/Textarea/Textarea.js';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './components/Drawer/Drawer.js';
+export { Steps } from './components/Steps/Steps.js';
+export { Combobox } from './components/Combobox/Combobox.js';
+export { TagInput } from './components/TagInput/TagInput.js';
+export { CustomDivider } from './components/CustomDivider/CustomDivider.js';
+export { Collapse, collapseTriggerVariants } from './components/Collapse/Collapse.js';
+export { DatePicker } from './components/DatePicker/DatePicker.js';
+export { ptBR } from 'date-fns/locale/pt-BR';
+export { enUS } from 'date-fns/locale/en-US';
+export { es } from 'date-fns/locale/es';
 export { Bar, BarChart, CartesianGrid, Label, LabelList, XAxis, YAxis } from 'recharts';
 export { z as zod } from 'zod';
 export { zodResolver } from '@hookform/resolvers/zod';

package/dist/plugin/extend.js

@@ -1,78 +1,78 @@
-const extend = {
-  colors: {
-    background: 'hsl(var(--background))',
-    foreground: 'hsl(var(--foreground))',
-    card: {
-      DEFAULT: 'hsl(var(--card))',
-      foreground: 'hsl(var(--card-foreground))',
-    },
-    popover: {
-      DEFAULT: 'hsl(var(--popover))',
-      foreground: 'hsl(var(--popover-foreground))',
-    },
-    primary: {
-      DEFAULT: 'hsl(var(--primary))',
-      foreground: 'hsl(var(--primary-foreground))',
-    },
-    secondary: {
-      DEFAULT: 'hsl(var(--secondary))',
-      foreground: 'hsl(var(--secondary-foreground))',
-    },
-    muted: {
-      DEFAULT: 'hsl(var(--muted))',
-      foreground: 'hsl(var(--muted-foreground))',
-    },
-    accent: {
-      DEFAULT: 'hsl(var(--accent))',
-      foreground: 'hsl(var(--accent-foreground))',
-    },
-    destructive: {
-      DEFAULT: 'hsl(var(--destructive))',
-      foreground: 'hsl(var(--destructive-foreground))',
-    },
-    border: 'hsl(var(--border))',
-    input: 'hsl(var(--input))',
-    ring: 'hsl(var(--ring))',
-    chart: {
-      1: 'hsl(var(--chart-1))',
-      2: 'hsl(var(--chart-2))',
-      3: 'hsl(var(--chart-3))',
-      4: 'hsl(var(--chart-4))',
-      5: 'hsl(var(--chart-5))',
-      6: 'hsl(var(--chart-6))',
-      7: 'hsl(var(--chart-7))',
-      8: 'hsl(var(--chart-8))',
-    },
-    sidebar: {
-      DEFAULT: 'hsl(var(--sidebar-background))',
-      foreground: 'hsl(var(--sidebar-foreground))',
-      primary: 'hsl(var(--sidebar-primary))',
-      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-      accent: 'hsl(var(--sidebar-accent))',
-      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-      border: 'hsl(var(--sidebar-border))',
-      ring: 'hsl(var(--sidebar-ring))',
-    },
-  },
-  borderRadius: {
-    lg: 'var(--radius)',
-    md: 'calc(var(--radius) - 2px)',
-    sm: 'calc(var(--radius) - 4px)',
-  },
-  keyframes: {
-    'accordion-down': {
-      from: { height: '0' },
-      to: { height: 'var(--radix-accordion-content-height)' },
-    },
-    'accordion-up': {
-      from: { height: 'var(--radix-accordion-content-height)' },
-      to: { height: '0' },
-    },
-  },
-  animation: {
-    'accordion-down': 'accordion-down 0.2s ease-out',
-    'accordion-up': 'accordion-up 0.2s ease-out',
-  },
-};
-
-export { extend };
+const extend = {
+  colors: {
+    background: 'hsl(var(--background))',
+    foreground: 'hsl(var(--foreground))',
+    card: {
+      DEFAULT: 'hsl(var(--card))',
+      foreground: 'hsl(var(--card-foreground))',
+    },
+    popover: {
+      DEFAULT: 'hsl(var(--popover))',
+      foreground: 'hsl(var(--popover-foreground))',
+    },
+    primary: {
+      DEFAULT: 'hsl(var(--primary))',
+      foreground: 'hsl(var(--primary-foreground))',
+    },
+    secondary: {
+      DEFAULT: 'hsl(var(--secondary))',
+      foreground: 'hsl(var(--secondary-foreground))',
+    },
+    muted: {
+      DEFAULT: 'hsl(var(--muted))',
+      foreground: 'hsl(var(--muted-foreground))',
+    },
+    accent: {
+      DEFAULT: 'hsl(var(--accent))',
+      foreground: 'hsl(var(--accent-foreground))',
+    },
+    destructive: {
+      DEFAULT: 'hsl(var(--destructive))',
+      foreground: 'hsl(var(--destructive-foreground))',
+    },
+    border: 'hsl(var(--border))',
+    input: 'hsl(var(--input))',
+    ring: 'hsl(var(--ring))',
+    chart: {
+      1: 'hsl(var(--chart-1))',
+      2: 'hsl(var(--chart-2))',
+      3: 'hsl(var(--chart-3))',
+      4: 'hsl(var(--chart-4))',
+      5: 'hsl(var(--chart-5))',
+      6: 'hsl(var(--chart-6))',
+      7: 'hsl(var(--chart-7))',
+      8: 'hsl(var(--chart-8))',
+    },
+    sidebar: {
+      DEFAULT: 'hsl(var(--sidebar-background))',
+      foreground: 'hsl(var(--sidebar-foreground))',
+      primary: 'hsl(var(--sidebar-primary))',
+      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+      accent: 'hsl(var(--sidebar-accent))',
+      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+      border: 'hsl(var(--sidebar-border))',
+      ring: 'hsl(var(--sidebar-ring))',
+    },
+  },
+  borderRadius: {
+    lg: 'var(--radius)',
+    md: 'calc(var(--radius) - 2px)',
+    sm: 'calc(var(--radius) - 4px)',
+  },
+  keyframes: {
+    'accordion-down': {
+      from: { height: '0' },
+      to: { height: 'var(--radix-accordion-content-height)' },
+    },
+    'accordion-up': {
+      from: { height: 'var(--radix-accordion-content-height)' },
+      to: { height: '0' },
+    },
+  },
+  animation: {
+    'accordion-down': 'accordion-down 0.2s ease-out',
+    'accordion-up': 'accordion-up 0.2s ease-out',
+  },
+};
+
+export { extend };