lecom-ui 5.4.42 → 5.4.44

package/README.md

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

package/dist/components/DataTable/DataTable.utils.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
 import { Checkbox } from '../Checkbox/Checkbox.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 import { Typography } from '../Typography/Typography.js';
 
 function buildHeaderSelect({
@@ -35,7 +37,9 @@ function renderSortArrow({
   externalColumn,
   table
 }) {
+  const { t } = useTranslation();
   const sorted = column.getIsSorted();
+  const sortType = externalColumn.sortType || "numeric";
   const handleClick = (event) => {
     event.stopPropagation();
     const sortingHandler = column.getToggleSortingHandler?.();
@@ -57,34 +61,43 @@ function renderSortArrow({
       sortingHandler(event);
     }
   };
+  const getTooltipText = () => {
+    if (sorted === "asc") {
+      return sortType === "numeric" ? t("dataTable.sortDescendingNumeric") : t("dataTable.sortDescendingText");
+    }
+    if (sorted === "desc") {
+      return t("dataTable.sortDefault");
+    }
+    return sortType === "numeric" ? t("dataTable.sortAscendingNumeric") : t("dataTable.sortAscendingText");
+  };
   if (sorted === "asc") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
       ArrowUp,
       {
         size: 16,
         className: "ml-1 text-grey-950 hover:cursor-pointer",
         onClick: handleClick
       }
-    );
+    )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
   }
   if (sorted === "desc") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
       ArrowDown,
       {
         size: 16,
         className: "ml-1 text-grey-950 hover:cursor-pointer",
         onClick: handleClick
       }
-    );
+    )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     ArrowUpDown,
     {
       size: 16,
       className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
       onClick: handleClick
     }
-  );
+  )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, getTooltipText())));
 }
 function createExpandToggle(row) {
   return {

package/dist/components/MultiSelect/MultiSelect.js

@@ -93,13 +93,14 @@ const MultiSelect = React.forwardRef(
           setTimeout(() => calculateMaxCount(), 10);
           return;
         }
-        const CONTROLS_WIDTH = 60;
-        const COUNTER_TAG_WIDTH = 50;
-        const TAG_GAP = 4;
-        const CONTAINER_PADDING = 8;
-        const AVG_CHAR_WIDTH = 10;
-        const TAG_PADDING = 16;
-        const availableWidth = buttonWidth - CONTAINER_PADDING * 2 - CONTROLS_WIDTH;
+        const CONTAINER_PADDING = 16;
+        const TAG_GAP = 2;
+        const COUNTER_TAG_WIDTH = 60;
+        const ICONS_WIDTH = 50;
+        const AVG_CHAR_WIDTH = 7;
+        const MAX_TAG_WIDTH = 250;
+        const TAG_BASE_WIDTH = 24;
+        const availableWidth = buttonWidth - CONTAINER_PADDING - ICONS_WIDTH;
         if (availableWidth <= 0) {
           setDynamicMaxCount(1);
           return;
@@ -116,28 +117,33 @@ const MultiSelect = React.forwardRef(
         };
         const estimatedWidths = [];
         for (let i = 0; i < selectedValues.length; i++) {
-          const label = getTreeLabel(selectedValues[i]) || options.find((o) => o.value === selectedValues[i])?.label || selectedValues[i];
+          const option = options.find((option2) => option2.value === selectedValues[i]);
+          const label = getTreeLabel(selectedValues[i]) || option?.label || selectedValues[i];
+          const prefixWidth = option?.prefix ? 24 : 0;
+          const textWidth = label.length * AVG_CHAR_WIDTH;
+          const closeButtonWidth = 16;
           const estimatedWidth = Math.min(
-            label.length * AVG_CHAR_WIDTH + TAG_PADDING,
-            250
+            TAG_BASE_WIDTH + textWidth + prefixWidth + closeButtonWidth,
+            MAX_TAG_WIDTH
           );
           estimatedWidths.push(estimatedWidth);
         }
-        let totalWidth = 0;
+        let totalWidthWithoutCounter = 0;
         for (let i = 0; i < estimatedWidths.length; i++) {
-          totalWidth += estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
+          totalWidthWithoutCounter += estimatedWidths[i];
+          if (i > 0) totalWidthWithoutCounter += TAG_GAP;
         }
-        if (totalWidth <= availableWidth) {
+        if (totalWidthWithoutCounter <= availableWidth) {
           setDynamicMaxCount(selectedValues.length);
           return;
         }
-        const availableWithCounter = availableWidth - COUNTER_TAG_WIDTH - TAG_GAP;
+        const availableForTagsWithCounter = availableWidth - COUNTER_TAG_WIDTH - TAG_GAP;
         let count = 0;
-        totalWidth = 0;
+        let accumulatedWidth = 0;
         for (let i = 0; i < estimatedWidths.length; i++) {
-          const tagWidth = estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
-          if (totalWidth + tagWidth <= availableWithCounter) {
-            totalWidth += tagWidth;
+          const nextTagWidth = estimatedWidths[i] + (i > 0 ? TAG_GAP : 0);
+          if (accumulatedWidth + nextTagWidth <= availableForTagsWithCounter) {
+            accumulatedWidth += nextTagWidth;
             count++;
           } else {
             break;

package/dist/components/Pagination/Pagination.js

@@ -5,6 +5,7 @@ import { cn } from '../../lib/utils.js';
 import { ChevronDown, MoreHorizontal, ChevronLast, ChevronRight, ChevronLeft, ChevronFirst } from 'lucide-react';
 import { initializeI18n } from '../../i18n/index.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 import { Typography } from '../Typography/Typography.js';
 
 initializeI18n();
@@ -24,76 +25,88 @@ const PaginationFirst = ({
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
-);
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      disabled,
+      iconButton: true,
+      variant: "ghost",
+      color: "grey",
+      size: "small",
+      onClick,
+      className: cn(isActive && "bg-white", className)
+    },
+    /* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.firstPage"))));
+};
 PaginationFirst.displayName = "PaginationFirst";
 const PaginationLast = ({
   className,
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
-);
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      disabled,
+      iconButton: true,
+      variant: "ghost",
+      color: "grey",
+      size: "small",
+      onClick,
+      className: cn(isActive && "bg-white", className)
+    },
+    /* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.lastPage"))));
+};
 PaginationLast.displayName = "PaginationLast";
 const PaginationPrevious = ({
   className,
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
-);
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      disabled,
+      iconButton: true,
+      variant: "ghost",
+      color: "grey",
+      size: "small",
+      onClick,
+      className: cn(isActive && "bg-white", className)
+    },
+    /* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.previousPage"))));
+};
 PaginationPrevious.displayName = "PaginationPrevious";
 const PaginationNext = ({
   className,
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    disabled,
-    iconButton: true,
-    variant: "ghost",
-    color: "grey",
-    size: "small",
-    onClick,
-    className: cn(isActive && "bg-white", className)
-  },
-  /* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
-);
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      disabled,
+      iconButton: true,
+      variant: "ghost",
+      color: "grey",
+      size: "small",
+      onClick,
+      className: cn(isActive && "bg-white", className)
+    },
+    /* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("pagination.nextPage"))));
+};
 PaginationNext.displayName = "PaginationNext";
 const PaginationEllipsis = ({
   className,

package/dist/i18n/locales/en_us.js

@@ -11,10 +11,14 @@ const language = {
     pagination: {
       show: "Show:",
       selectedProcess: "Item(s) selected",
-      selectedItemSingular: "item selected"
+      selectedItemSingular: "item selected",
+      firstPage: "First page",
+      lastPage: "Last page",
+      previousPage: "Back",
+      nextPage: "Forward"
     },
     upload: {
-      label: "Drag and drop the file here or click to select it.",
+      label: "Drag and drop the file here or click to select it",
       download: "Download file",
       remove: "Remove file"
     },
@@ -24,6 +28,13 @@ const language = {
       selectAll: "Select all",
       placeholder: "Select",
       create: "Create"
+    },
+    dataTable: {
+      sortAscendingNumeric: "Sort ascending",
+      sortDescendingNumeric: "Sort descending",
+      sortAscendingText: "Sort A-Z",
+      sortDescendingText: "Sort Z-A",
+      sortDefault: "Restore default"
     }
   }
 };

package/dist/i18n/locales/es_es.js

@@ -11,10 +11,14 @@ const language = {
     pagination: {
       show: "Mostrar:",
       selectedProcess: "Item(s) seleccionado(s)",
-      selectedItemSingular: "item seleccionado"
+      selectedItemSingular: "item seleccionado",
+      firstPage: "Primera p\xE1gina",
+      lastPage: "\xDAltima p\xE1gina",
+      previousPage: "Volver",
+      nextPage: "Avanzar"
     },
     upload: {
-      label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo.",
+      label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo",
       remove: "Eliminar archivo",
       download: "Descargar archivo"
     },
@@ -24,6 +28,13 @@ const language = {
       selectAll: "Seleccionar todo",
       placeholder: "Seleccionar",
       create: "Crear"
+    },
+    dataTable: {
+      sortAscendingNumeric: "Ordenar ascendente",
+      sortDescendingNumeric: "Ordenar descendente",
+      sortAscendingText: "Ordenar A-Z",
+      sortDescendingText: "Ordenar Z-A",
+      sortDefault: "Restaurar predeterminado"
     }
   }
 };

package/dist/i18n/locales/pt_br.js

@@ -11,10 +11,14 @@ const language = {
     pagination: {
       show: "Mostrar:",
       selectedProcess: "Item(s) selecionado(s)",
-      selectedItemSingular: "item selecionado"
+      selectedItemSingular: "item selecionado",
+      firstPage: "Primeira p\xE1gina",
+      lastPage: "\xDAltima p\xE1gina",
+      previousPage: "Voltar",
+      nextPage: "Avan\xE7ar"
     },
     upload: {
-      label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo.",
+      label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo",
       remove: "Remover arquivo",
       download: "Baixar arquivo"
     },
@@ -24,6 +28,13 @@ const language = {
       selectAll: "Selecionar tudo",
       placeholder: "Selecione",
       create: "Criar"
+    },
+    dataTable: {
+      sortAscendingNumeric: "Ordenar crescente",
+      sortDescendingNumeric: "Ordenar decrescente",
+      sortAscendingText: "Ordenar A-Z",
+      sortDescendingText: "Ordenar Z-A",
+      sortDefault: "Restaurar padr\xE3o"
     }
   }
 };

package/dist/index.d.ts

@@ -387,6 +387,7 @@ interface Column<TData, TValue> {
     headerStyle?: React.CSSProperties;
     cellClassName?: string;
     showHeaderTooltip?: boolean;
+    sortType?: 'numeric' | 'text';
     customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
@@ -790,9 +791,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    radius?: "small" | "default" | "large" | "full" | null | undefined;
+    variant?: "filled" | "default" | "borderless" | null | undefined;
+    size?: "small" | "large" | "default" | null | undefined;
+    radius?: "small" | "large" | "default" | "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;
@@ -998,7 +999,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 | 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<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLUListElement | HTMLLabelElement | 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;
@@ -1164,10 +1165,10 @@ 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?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    radius?: "small" | "default" | "large" | "full" | null | undefined;
-    resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
+    variant?: "filled" | "default" | "borderless" | null | undefined;
+    size?: "small" | "large" | "default" | null | undefined;
+    radius?: "small" | "large" | "default" | "full" | null | undefined;
+    resize?: "both" | "horizontal" | "vertical" | "default" | "vertical-limited" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
 }
@@ -1310,7 +1311,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1356,7 +1357,7 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "destructive" | "default" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/plugin/extend.js

@@ -1,79 +1,79 @@
-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',
-    'spin-slow': 'spin 2s linear infinite',
-  },
-};
-
-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',
+    'spin-slow': 'spin 2s linear infinite',
+  },
+};
+
+export { extend };