lecom-ui 5.4.36 → 5.4.38

package/README.md

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

package/dist/components/Collapse/Collapse.js

@@ -2,127 +2,93 @@ 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, ChevronDown } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 
-const collapseVariants = cva(
-  "flex flex-1 items-center gap-4 transition-all text-left outline-none w-full",
+const collapseTriggerVariants = cva(
+  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
   {
     variants: {
-      variant: {
-        default: "border-t border-grey-400 text-grey-950 hover:bg-grey-200 hover:rounded-lg hover:border-t-transparent hover:ring-0 focus:hover:ring-0 active:bg-grey-400 active:border-transparent active:ring-0 disabled:text-grey-300 disabled:bg-transparent disabled:cursor-not-allowed disabled:hover:bg-none disabled:hover:rounded-none disabled:hover:border-grey-400 disabled:focus:ring-0 disabled:active:bg-transparent",
-        collapse: "bg-transparent border-none data-[state=open]:font-semibold hover:bg-transparent"
-      },
       size: {
-        small: "heading-xxsmall-600 py-1.5 px-4 min-h-8",
-        medium: "heading-xsmall-600 py-2.5 px-4 min-h-10",
-        large: "heading-small-600 py-3 px-4 min-h-12",
-        "collapse-small": "text-sm py-1.5 px-4 min-h-8",
-        "collapse-medium": "text-base py-2.5 px-4 min-h-10",
-        "collapse-large": "text-lg py-3 px-4 min-h-12"
+        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"
       },
-      iconPosition: {
-        start: "justify-start",
-        end: "justify-between"
+      ghost: {
+        true: "bg-transparent border-none",
+        false: "border-t-none border-grey-400"
       }
     },
     defaultVariants: {
-      variant: "default",
       size: "large",
-      iconPosition: "end"
+      ghost: false
     }
   }
 );
-const Collapse = AccordionPrimitive.Root;
-const CollapseItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
-CollapseItem.displayName = "CollapseItem";
-const CollapseTrigger = React.forwardRef(
+const CollapseRoot = AccordionPrimitive.Root;
+const CollapseItem = AccordionPrimitive.Item;
+const CollapsePanel = React.forwardRef(
   ({
-    className,
-    children,
-    variant = "default",
-    size,
-    disabled,
-    asChild,
-    iconPosition = "end",
-    ghost = false,
-    mode,
     header,
+    children,
     extra,
+    expandIconPosition = "start",
+    size = "large",
+    ghost = false,
+    disabled = false,
+    className,
     ...props
-  }, ref) => {
-    const isCollapseMode = mode === "collapse";
-    const finalVariant = isCollapseMode || ghost ? "collapse" : variant;
-    const finalIconPosition = isCollapseMode ? "start" : iconPosition;
-    const allowedSizes = ["small", "medium", "large"];
-    let finalSize = size;
-    if ((isCollapseMode || ghost) && size && allowedSizes.includes(size) && typeof size === "string") {
-      if (size === "collapse-small" || size === "collapse-medium" || size === "collapse-large") {
-        finalSize = size;
-      } else {
-        finalSize = `collapse-${size}`;
-      }
-    }
-    const content = isCollapseMode ? header : children;
-    const renderTriggerContent = () => {
-      if (asChild) {
-        return content;
-      }
-      if (isCollapseMode || ghost && finalIconPosition === "start") {
-        return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center justify-between gap-4 w-full" }, /* @__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" }, content)), extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra));
-      }
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, finalIconPosition === "start" && /* @__PURE__ */ React.createElement(
-        ChevronDown,
-        {
-          className: cn(
-            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-90",
-            disabled && "text-grey-300"
-          )
-        }
-      ), /* @__PURE__ */ React.createElement("span", { className: "flex-1" }, content), finalIconPosition === "end" && /* @__PURE__ */ React.createElement(
-        ChevronDown,
+  }, 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(
-            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
-            disabled && "text-grey-300"
+            "flex flex-1 items-center justify-between gap-4 w-full",
+            expandIconPosition === "end" ? "flex-row-reverse" : ""
           )
-        }
-      ));
-    };
-    return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
-      AccordionPrimitive.Trigger,
+        },
+        /* @__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,
       {
-        ref,
         className: cn(
-          collapseVariants({
-            variant: finalVariant,
-            size: finalSize,
-            iconPosition: finalIconPosition,
-            className
-          }),
-          (isCollapseMode || ghost) && "group"
-        ),
-        ...props,
-        disabled,
-        asChild
+          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+        )
       },
-      renderTriggerContent()
-    ));
-  }
+      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
+    )
+  )
 );
-const CollapseContent = React.forwardRef(({ className, children, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  AccordionPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
-      className
-    ),
-    "aria-disabled": disabled,
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("div", { className: "pt-2 pb-4 px-4" }, children)
-));
-CollapseTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-CollapseContent.displayName = AccordionPrimitive.Content.displayName;
+CollapsePanel.displayName = "CollapsePanel";
+const Collapse = Object.assign(CollapseRoot, {
+  Panel: CollapsePanel
+});
 
-export { Collapse, CollapseContent, CollapseItem, CollapseTrigger, collapseVariants };
+export { Collapse, collapseTriggerVariants };

package/dist/components/Header/SearchInput.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
 import { Input } from '../Input/Input.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 import { useIsMobile } from '../../hooks/useIsMobile.js';
 import opacity from 'hex-color-opacity';
 import { Search, SlidersHorizontal } from 'lucide-react';
@@ -13,6 +15,7 @@ const SearchInput = ({
   onChangeValue,
   onClickButton
 }) => {
+  const { t } = useTranslation();
   const isMobile = useIsMobile();
   const { normal, hover, focus } = customStyles;
   const [backgroundColor, setBackgroundColor] = React.useState(
@@ -40,7 +43,7 @@ const SearchInput = ({
     color: isActive ? focus.textColor : color,
     boxShadow: shadowSmTailwind
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1 max-w-[630px]" }, !isMobile && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-1 max-w-[630px]" }, !isMobile && /* @__PURE__ */ React.createElement(
     Input,
     {
       id: "header-search-input-lecom-ui",
@@ -58,7 +61,7 @@ const SearchInput = ({
       style: mappedCustomStyles,
       onChange: (e) => onChangeValue?.(e.target.value)
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       size: "small",
@@ -69,11 +72,11 @@ const SearchInput = ({
       className: "shrink-0"
     },
     /* @__PURE__ */ React.createElement(SlidersHorizontal, null)
-  ), /* @__PURE__ */ React.createElement("style", null, `
+  )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("header.filters"))), /* @__PURE__ */ React.createElement("style", null, `
           #header-search-input-lecom-ui::placeholder {
             color: ${mappedCustomStyles.color};
           }
-        `));
+        `)));
 };
 SearchInput.displayName = "SearchInput";
 

package/dist/components/IconHandler/IconHandler.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { ReactSVG } from 'react-svg';
+import { cn } from '../../lib/utils.js';
+
+const isUrl = (str) => {
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+};
+const isImage = (str) => {
+  return /\.(svg|png|jpg|jpeg|gif|webp)$/i.test(str);
+};
+const IconHandler = React.forwardRef(
+  ({
+    icon,
+    colorType = "color",
+    variantsColors,
+    className,
+    setAttribute,
+    style = {},
+    ...props
+  }, ref) => {
+    if (typeof icon === "string") {
+      if (isUrl(icon)) {
+        return /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: icon,
+            alt: "\xCDcone",
+            className: cn("w-[24px] h-[24px]", className),
+            style: {
+              ...style,
+              ...variantsColors && {
+                color: variantsColors
+              }
+            }
+          }
+        );
+      } else if (isImage(icon)) {
+        return /* @__PURE__ */ React.createElement(
+          ReactSVG,
+          {
+            src: icon,
+            className: cn("w-[24px] h-[24px]", className),
+            beforeInjection: (svg) => {
+              if (variantsColors && setAttribute) {
+                svg.setAttribute(
+                  "style",
+                  `fill: ${variantsColors}${setAttribute ? `; ${setAttribute}` : ""}`
+                );
+              } else if (setAttribute) {
+                svg.setAttribute("style", `${setAttribute}`);
+              } else if (variantsColors) {
+                svg.setAttribute("style", `fill: ${variantsColors}`);
+              }
+            },
+            style
+          }
+        );
+      } else {
+        return /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: cn("flex items-center w-auto h-[24px]", className),
+            style: {
+              ...style,
+              ...variantsColors && {
+                color: variantsColors
+              }
+            }
+          },
+          icon
+        );
+      }
+    } else {
+      const IconComponent = icon;
+      const setColor = colorType === "color" ? { color: variantsColors } : {};
+      return /* @__PURE__ */ React.createElement(
+        IconComponent,
+        {
+          ref,
+          fill: colorType === "fill" ? variantsColors : "none",
+          className: cn("hover:bg-transparent", className),
+          style: {
+            ...style,
+            ...variantsColors && setColor
+          },
+          ...props
+        }
+      );
+    }
+  }
+);
+IconHandler.displayName = "IconHandler";
+
+export { IconHandler };

package/dist/i18n/locales/en_us.js

@@ -5,7 +5,8 @@ const language = {
       collapseMenu: "Collapse menu",
       settings: "Settings",
       help: "Help",
-      modules: "Modules"
+      modules: "Modules",
+      filters: "Filters"
     },
     pagination: {
       show: "Show:",

package/dist/i18n/locales/es_es.js

@@ -5,7 +5,8 @@ const language = {
       collapseMenu: "Contraer men\xFA",
       settings: "Configuraciones",
       help: "Ayuda",
-      modules: "M\xF3dulos"
+      modules: "M\xF3dulos",
+      filters: "Filtros"
     },
     pagination: {
       show: "Mostrar:",
@@ -18,7 +19,7 @@ const language = {
       download: "Descargar archivo"
     },
     multiSelect: {
-      search: "Tipo a buscar",
+      search: "Escriba para buscar",
       empty: "No se han encontrado resultados",
       selectAll: "Seleccionar todo",
       placeholder: "Seleccionar",

package/dist/i18n/locales/pt_br.js

@@ -5,7 +5,8 @@ const language = {
       collapseMenu: "Recolher menu",
       settings: "Configura\xE7\xF5es",
       help: "Ajuda",
-      modules: "M\xF3dulos"
+      modules: "M\xF3dulos",
+      filters: "Filtros"
     },
     pagination: {
       show: "Mostrar:",

package/dist/index.d.ts

@@ -788,8 +788,8 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+    radius?: "small" | "default" | "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;
@@ -995,7 +995,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<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"> & {
+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"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1162,9 +1162,9 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 declare const textareaVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | null | undefined;
-    resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+    radius?: "small" | "default" | "large" | "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> {
 }
@@ -1307,7 +1307,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> {
 }

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