lecom-ui 5.3.27 → 5.3.29

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cva } from 'class-variance-authority';
+import { ChevronRight } from 'lucide-react';
+
+const collapseTriggerVariants = cva(
+  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
+  {
+    variants: {
+      size: {
+        small: "text-sm py-1.5 px-4 min-h-8",
+        medium: "text-base py-2.5 px-4 min-h-10",
+        large: "text-lg py-3 px-4 min-h-12"
+      },
+      ghost: {
+        true: "bg-transparent border-none",
+        false: "border-t-none border-grey-400"
+      }
+    },
+    defaultVariants: {
+      size: "large",
+      ghost: false
+    }
+  }
+);
+const CollapseRoot = AccordionPrimitive.Root;
+const CollapseItem = AccordionPrimitive.Item;
+const CollapsePanel = React.forwardRef(
+  ({
+    header,
+    children,
+    extra,
+    expandIconPosition = "start",
+    size = "large",
+    ghost = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ React.createElement(
+    CollapseItem,
+    {
+      ref,
+      ...props,
+      className: cn(
+        "group w-full",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )
+    },
+    /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { asChild: true }, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
+      {
+        disabled,
+        className: cn(
+          collapseTriggerVariants({ size, ghost }),
+          "flex gap-2 items-center text-left font-normal"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "flex flex-1 items-center justify-between gap-4 w-full",
+            expandIconPosition === "end" ? "flex-row-reverse" : ""
+          )
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal"
+          },
+          /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
+        ), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, header)),
+        extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra)
+      )
+    )),
+    /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Content,
+      {
+        className: cn(
+          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
+    )
+  )
+);
+CollapsePanel.displayName = "CollapsePanel";
+const Collapse = Object.assign(CollapseRoot, {
+  Panel: CollapsePanel
+});
+
+export { Collapse, collapseTriggerVariants };

package/dist/components/DataTable/Table.js

@@ -17,9 +17,9 @@ function Table({
     if (elem === "td" && meta.truncate) {
       return {
         width: meta.width,
+        maxWidth: meta.maxWidth ?? "0",
+        minWidth: meta.minWidth ?? "0",
         overflow: "hidden",
-        maxWidth: meta.maxWidth || "0",
-        minWidth: meta.minWidth || "0",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         textAlign: meta.align || "left"
@@ -27,6 +27,8 @@ function Table({
     }
     return {
       width: meta.width,
+      maxWidth: meta.maxWidth ?? "0",
+      minWidth: meta.minWidth ?? "0",
       textAlign: meta.align || "left"
     };
   }, []);

package/dist/components/Input/Input.js

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 
 const inputVariants = cva(
   `flex h-8 w-full rounded-[4px] border border-grey-400 bg-background px-3 py-2
-  placeholder:text-muted-foreground outline-none
+  placeholder:text-muted-foreground outline-none placeholder:body-medium-400
   hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
   disabled:cursor-not-allowed disabled:opacity-50
   transition-all duration-300`,

package/dist/components/MultiSelect/MultiSelect.js

@@ -17,13 +17,37 @@ const MultiSelect = React.forwardRef(
     placeholder = "Select options",
     maxCount = 3,
     modalPopover = false,
-    className
+    className,
+    treeOptions,
+    treeSelectionStrategy = "leaf",
+    defaultExpandAll = false,
+    matchTriggerWidth = true
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [expandedNodes, setExpandedNodes] = React.useState(
+      () => new Set(
+        defaultExpandAll ? function collectAll(ids, opts) {
+          if (!opts) return ids;
+          for (const o of opts) {
+            if (o.children?.length) {
+              ids.push(o.value);
+              collectAll(ids, o.children);
+            }
+          }
+          return ids;
+        }([], treeOptions) : []
+      )
+    );
     React.useEffect(() => {
-      setSelectedValues(value);
+      const shallowEqual = (a, b) => {
+        if (a === b) return true;
+        if (a.length !== b.length) return false;
+        for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+        return true;
+      };
+      setSelectedValues((prev) => shallowEqual(prev, value) ? prev : value);
     }, [value]);
     const handleInputKeyDown = (event) => {
       if (event.key === "Enter") {
@@ -53,14 +77,134 @@ const MultiSelect = React.forwardRef(
       onValueChange(newSelectedValues);
     };
     const toggleAll = () => {
-      if (selectedValues.length === options.length) {
-        handleClear();
+      if (treeOptions && treeOptions.length) {
+        const gather = (acc, nodes) => {
+          for (const n of nodes) {
+            const isLeaf = !n.children || n.children.length === 0;
+            if (isLeaf || treeSelectionStrategy === "all") acc.push(n.value);
+            if (n.children) gather(acc, n.children);
+          }
+          return acc;
+        };
+        const all = gather([], treeOptions);
+        if (selectedValues.length === all.length) {
+          handleClear();
+        } else {
+          setSelectedValues(all);
+          onValueChange(all);
+        }
       } else {
-        const allValues = options.map((option) => option.value);
-        setSelectedValues(allValues);
-        onValueChange(allValues);
+        if (selectedValues.length === options.length) {
+          handleClear();
+        } else {
+          const allValues = options.map((option) => option.value);
+          setSelectedValues(allValues);
+          onValueChange(allValues);
+        }
       }
     };
+    const isTree = !!(treeOptions && treeOptions.length);
+    const isExpanded = React.useCallback(
+      (id) => expandedNodes.has(id),
+      [expandedNodes]
+    );
+    const toggleExpandNode = (id) => {
+      setExpandedNodes((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    };
+    const collectAllValues = (node) => {
+      const self = treeSelectionStrategy === "all" ? [node.value] : [];
+      if (!node.children || node.children.length === 0) {
+        return treeSelectionStrategy === "all" ? [node.value] : [node.value];
+      }
+      return [
+        ...self,
+        ...node.children.flatMap((c) => collectAllValues(c))
+      ];
+    };
+    const isNodeFullySelected = (node) => {
+      const values = collectAllValues(node);
+      return values.every((v) => selectedValues.includes(v));
+    };
+    const isNodePartiallySelected = (node) => {
+      const values = collectAllValues(node);
+      const some = values.some((v) => selectedValues.includes(v));
+      const all = values.every((v) => selectedValues.includes(v));
+      return some && !all;
+    };
+    const toggleTreeNode = (node) => {
+      const nodeValues = collectAllValues(node);
+      const allSelected = nodeValues.every((v) => selectedValues.includes(v));
+      let next;
+      if (allSelected) {
+        next = selectedValues.filter((v) => !nodeValues.includes(v));
+      } else {
+        next = Array.from(/* @__PURE__ */ new Set([...selectedValues, ...nodeValues]));
+      }
+      setSelectedValues(next);
+      onValueChange(next);
+    };
+    const renderTree = (nodes, depth = 0) => {
+      return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, nodes.map((n) => {
+        const hasChildren = !!(n.children && n.children.length);
+        const expanded = hasChildren && isExpanded(n.value);
+        const fully = isNodeFullySelected(n);
+        const partial = !fully && isNodePartiallySelected(n);
+        const isSelectedLeaf = !hasChildren && selectedValues.includes(n.value);
+        return /* @__PURE__ */ React.createElement("div", { key: n.value, className: "select-none" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100",
+              (fully || isSelectedLeaf) && "bg-blue-50"
+            ),
+            style: { paddingLeft: depth * 12 + 8 },
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleTreeNode(n);
+            }
+          },
+          hasChildren && /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "h-4 w-4 flex items-center justify-center",
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleExpandNode(n.value);
+              },
+              "aria-label": expanded ? "Collapse" : "Expand"
+            },
+            /* @__PURE__ */ React.createElement(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 transition-transform",
+                  expanded ? "rotate-0" : "-rotate-90"
+                )
+              }
+            )
+          ),
+          !hasChildren && /* @__PURE__ */ React.createElement("span", { className: "w-4" }),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: cn(
+                "flex h-4 w-4 items-center justify-center rounded-sm border-2",
+                fully ? "bg-blue-600 border-blue-600 text-primary-foreground" : "border-grey-400"
+              )
+            },
+            fully && /* @__PURE__ */ React.createElement(Check, { className: "h-3 w-3" }),
+            partial && !fully && /* @__PURE__ */ React.createElement(Minus, { className: "h-3 w-3 text-blue-600" })
+          ),
+          /* @__PURE__ */ React.createElement("span", { className: "text-sm flex-1 truncate" }, n.label)
+        ), hasChildren && expanded && /* @__PURE__ */ React.createElement("div", null, renderTree(n.children, depth + 1)));
+      }));
+    };
     return /* @__PURE__ */ React.createElement(
       Popover,
       {
@@ -123,11 +267,14 @@ const MultiSelect = React.forwardRef(
       /* @__PURE__ */ React.createElement(
         PopoverContent,
         {
-          className: "w-auto p-0",
+          className: cn(
+            "p-0 max-h-80 overflow-auto",
+            matchTriggerWidth && "w-[var(--radix-popover-trigger-width)]"
+          ),
           align: "start",
           onEscapeKeyDown: () => setIsPopoverOpen(false)
         },
-        /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
+        !isTree && /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
           CommandInput,
           {
             placeholder: t("multiSelect.search"),
@@ -172,7 +319,34 @@ const MultiSelect = React.forwardRef(
             ),
             /* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, option.label)
           );
-        }))))
+        })))),
+        isTree && /* @__PURE__ */ React.createElement("div", { className: "p-2 min-w-[260px]" }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "flex items-center gap-2 px-2 py-1 mb-1 cursor-pointer rounded-sm hover:bg-grey-100",
+            onClick: toggleAll
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: cn(
+                "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400",
+                selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+              )
+            },
+            treeOptions && selectedValues.length === function countAll(nodes) {
+              if (!nodes) return 0;
+              let acc = 0;
+              for (const n of nodes) {
+                const hasChildren = !!(n.children && n.children.length);
+                if (!hasChildren) acc += 1;
+                else acc += treeSelectionStrategy === "all" ? 1 + countAll(n.children) : countAll(n.children);
+              }
+              return acc;
+            }(treeOptions) ? /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ React.createElement(Minus, { className: "h-4 w-4" })
+          ),
+          /* @__PURE__ */ React.createElement("span", { className: "text-grey-800 text-sm" }, t("multiSelect.selectAll"))
+        ), treeOptions && renderTree(treeOptions))
       )
     );
   }

package/dist/index.d.ts

@@ -797,6 +797,15 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
     modalPopover?: boolean;
     asChild?: boolean;
     className?: string;
+    matchTriggerWidth?: boolean;
+    treeOptions?: MultiSelectTreeOption[];
+    treeSelectionStrategy?: 'leaf' | 'all';
+    defaultExpandAll?: boolean;
+}
+interface MultiSelectTreeOption {
+    label: string;
+    value: string;
+    children?: MultiSelectTreeOption[];
 }
 declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -903,7 +912,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 | HTMLDivElement | HTMLButtonElement | HTMLLabelElement | HTMLParagraphElement | HTMLHeadingElement | 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 | HTMLInputElement | 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<HTMLButtonElement | HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLLabelElement | 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;
@@ -1213,4 +1222,4 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 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, Combobox, CustomDivider, MemoizedDataTable as DataTable, DateInput, 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, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, 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, 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, DateInputProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagItem, TagProps, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
+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, DateInputProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, MultiSelectTreeOption, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagItem, TagProps, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

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 };