lecom-ui 5.3.93 → 5.3.94

package/README.md

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

package/dist/components/Combobox/Combobox.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { cva } from 'class-variance-authority';
 import { ChevronUpIcon, ChevronDownIcon, Check } from 'lucide-react';
+import { initializeI18n } from '../../i18n/index.js';
 import { cn } from '../../lib/utils.js';
 import { Button } from '../Button/Button.js';
 import { CommandGroup, CommandItem, Command, CommandInput, CommandList, CommandEmpty } from '../Command/Command.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { Typography } from '../Typography/Typography.js';
 
-const DEFAULT_PLACEHOLDER = "Selecione...";
-const DEFAULT_NOT_FOUND_CONTENT = "Nenhuma op\xE7\xE3o encontrada.";
-const DEFAULT_SEARCH_TERM = "Pesquisar...";
+initializeI18n();
 const ICON_SIZE = 20;
 const CHECK_ICON_SIZES = {
   small: 12,
@@ -181,7 +181,7 @@ const comboboxTriggerVariants = cva(
         large: "h-12"
       },
       rounded: {
-        default: "rounded-md",
+        default: "rounded-sm",
         full: "rounded-full"
       },
       status: {
@@ -264,11 +264,11 @@ function Combobox({
   options,
   value,
   onChange,
-  placeholder = DEFAULT_PLACEHOLDER,
+  placeholder,
   disabled = false,
-  notFoundContent = DEFAULT_NOT_FOUND_CONTENT,
+  notFoundContent,
   status = "default",
-  searchTerm = DEFAULT_SEARCH_TERM,
+  searchTerm,
   triggerClassName,
   contentClassName,
   itemsClassName,
@@ -276,6 +276,7 @@ function Combobox({
   showSearch = true,
   size = "medium"
 }) {
+  const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const commandListRef = React.useRef(null);
@@ -287,7 +288,7 @@ function Combobox({
     () => getSelectedOption(options, value),
     [options, value]
   );
-  const selectedLabel = selectedOption?.label || placeholder;
+  const selectedLabel = selectedOption?.label || placeholder || t("multiSelect.placeholder");
   const selectedPrefix = selectedOption?.prefix;
   const handleClose = React.useCallback(() => {
     setOpen(false);
@@ -334,7 +335,7 @@ function Combobox({
     /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: SEARCH_INPUT_CLASSES[size] }, showSearch && /* @__PURE__ */ React.createElement(
       CommandInput,
       {
-        placeholder: searchTerm,
+        placeholder: searchTerm || t("multiSelect.search"),
         value: search,
         onValueChange: setSearch
       }
@@ -353,7 +354,7 @@ function Combobox({
           contentClassName
         )
       },
-      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent || t("multiSelect.empty")), /* @__PURE__ */ React.createElement(
         ComboboxOptionsList,
         {
           items: filteredOptions,

package/dist/components/DatePicker/DatePicker.js

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { Button } from '../Button/Button.js';
-import { Input } from '../Input/Input.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { cn } from '../../lib/utils.js';
-import { format, parse } from 'date-fns';
+import { format } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
 import { Calendar } from '../Calendar/Calendar.js';
 
 function DatePicker({
   className,
   locale,
-  placeholder,
+  placeholder = "Pick a date",
   value,
   onChange,
   variant = "outlined",
@@ -20,123 +19,19 @@ function DatePicker({
   calendarVariant,
   calendarColor,
   format: format$1 = "PPP",
-  status,
-  closeOnSelect = true,
-  allowManualInput = false
+  status
 }) {
   const [internalDate, setInternalDate] = React.useState();
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-  const isControlled = onChange !== void 0;
+  const isControlled = value !== void 0 && onChange !== void 0;
   const date = isControlled ? value : internalDate;
-  React.useEffect(() => {
-    if (date) {
-      setInputValue(format(date, "dd/MM/yyyy", { locale }));
-    } else {
-      setInputValue("");
-    }
-  }, [date, locale]);
   const handleSelect = (selected) => {
     if (isControlled && onChange) {
       onChange(selected);
     } else {
       setInternalDate(selected);
     }
-    if (closeOnSelect && selected) {
-      setIsOpen(false);
-    }
-  };
-  const applyDateMask = (value2) => {
-    const numbers = value2.replace(/\D/g, "");
-    if (numbers.length <= 2) {
-      return numbers;
-    } else if (numbers.length <= 4) {
-      return `${numbers.slice(0, 2)}/${numbers.slice(2)}`;
-    } else {
-      return `${numbers.slice(0, 2)}/${numbers.slice(2, 4)}/${numbers.slice(
-        4,
-        8
-      )}`;
-    }
-  };
-  const handleInputChange = (e) => {
-    const rawValue = e.target.value;
-    const maskedValue = applyDateMask(rawValue);
-    setInputValue(maskedValue);
-    if (maskedValue.length === 10) {
-      try {
-        const parsedDate = parse(maskedValue, "dd/MM/yyyy", /* @__PURE__ */ new Date(), {
-          locale
-        });
-        if (!isNaN(parsedDate.getTime())) {
-          if (isControlled && onChange) {
-            onChange(parsedDate);
-          } else {
-            setInternalDate(parsedDate);
-          }
-        }
-      } catch {
-      }
-    }
-  };
-  const handleInputBlur = () => {
-    if (date) {
-      setInputValue(format(date, "dd/MM/yyyy", { locale }));
-    } else {
-      setInputValue("");
-    }
   };
-  const resolvedCalendarVariant = calendarVariant === "datepicker" ? variant : calendarVariant ?? variant;
-  if (allowManualInput) {
-    const inputVariant = variant === "outlined" ? "default" : variant === "filled" ? "filled" : "default";
-    return /* @__PURE__ */ React.createElement(Popover, { open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          borderRadius: 4,
-          borderColor: "bg-grey-500",
-          borderWidth: 1
-        },
-        className: "relative w-auto"
-      },
-      /* @__PURE__ */ React.createElement(
-        Input,
-        {
-          value: inputValue,
-          onChange: handleInputChange,
-          onBlur: handleInputBlur,
-          onFocus: () => setIsOpen(false),
-          placeholder,
-          variant: inputVariant,
-          className: cn(
-            "w-auto pl-10 border-none focus:border-none focus:ring-0",
-            status === "error" && "border-red-600 focus:border-red-600 focus:ring-red-600",
-            className
-          )
-        }
-      ),
-      /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          className: "absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 flex items-center justify-center hover:bg-grey-100 rounded transition-colors z-10"
-        },
-        /* @__PURE__ */ React.createElement(CalendarIcon, { className: "h-4 w-4 text-grey-600" })
-      ))
-    ), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-auto p-0", align: "start" }, /* @__PURE__ */ React.createElement(
-      Calendar,
-      {
-        mode: "single",
-        selected: date,
-        onSelect: handleSelect,
-        autoFocus: true,
-        locale,
-        variant: resolvedCalendarVariant,
-        color: calendarColor ?? color ?? void 0
-      }
-    )));
-  }
-  return /* @__PURE__ */ React.createElement(Popover, { open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Popover, null, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: buttonVariant || variant,
@@ -158,7 +53,7 @@ function DatePicker({
       onSelect: handleSelect,
       autoFocus: true,
       locale,
-      variant: resolvedCalendarVariant,
+      variant: calendarVariant || variant,
       color: calendarColor ?? color ?? void 0
     }
   )));

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
+import { Command, CommandInput, CommandList, CommandGroup, CommandEmpty, CommandItem } from '../Command/Command.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { Separator } from '../Separator/Separator.js';
 import { Tag } from '../Tag/Tag.js';
@@ -561,7 +561,7 @@ const MultiSelect = React.forwardRef(
             value: query,
             onValueChange: (v) => setQuery(v)
           }
-        ), /* @__PURE__ */ React.createElement(CommandList, null, (!filteredOptions || filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(CommandEmpty, { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")), /* @__PURE__ */ React.createElement(CommandGroup, null, !query && /* @__PURE__ */ React.createElement(
+        ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(CommandEmpty, { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")), !query && effectiveOptions.length > 0 && /* @__PURE__ */ React.createElement(
           CommandItem,
           {
             key: "all",
@@ -691,7 +691,7 @@ const MultiSelect = React.forwardRef(
               SEARCH_INPUT_HEIGHT_CLASSES[size]
             )
           }
-        ))), /* @__PURE__ */ React.createElement("div", { className: "px-2 pb-1 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400" }, !treeQuery && /* @__PURE__ */ React.createElement(
+        ))), /* @__PURE__ */ React.createElement("div", { className: "px-2 pb-1 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400" }, !treeQuery && treeOptions && treeOptions.length > 0 && /* @__PURE__ */ React.createElement(
           "div",
           {
             className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
@@ -725,7 +725,7 @@ const MultiSelect = React.forwardRef(
             },
             selectAllLabel ?? t("multiSelect.selectAll")
           )
-        ), treeOptions && renderTree(displayedTree)))
+        ), !treeOptions || treeOptions.length === 0 || treeQuery && displayedTree.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")) : renderTree(displayedTree)))
       )
     );
   }

package/dist/i18n/locales/en_us.js

@@ -19,7 +19,8 @@ const language = {
     multiSelect: {
       search: "Type to search",
       empty: "No results found",
-      selectAll: "Select all"
+      selectAll: "Select all",
+      placeholder: "Select"
     }
   }
 };

package/dist/i18n/locales/es_es.js

@@ -19,7 +19,8 @@ const language = {
     multiSelect: {
       search: "Tipo a buscar",
       empty: "No se han encontrado resultados",
-      selectAll: "Seleccionar todo"
+      selectAll: "Seleccionar todo",
+      placeholder: "Seleccionar"
     }
   }
 };

package/dist/i18n/locales/pt_br.js

@@ -19,7 +19,8 @@ const language = {
     multiSelect: {
       search: "Digite para pesquisar",
       empty: "Nenhum resultado encontrado",
-      selectAll: "Selecionar tudo"
+      selectAll: "Selecionar tudo",
+      placeholder: "Selecione"
     }
   }
 };

package/dist/index.d.ts

@@ -757,8 +757,8 @@ 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;
+    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;
@@ -962,7 +962,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 | 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 | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLSpanElement | HTMLLabelElement | HTMLParagraphElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLHeadingElement | HTMLUListElement | HTMLInputElement | 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;
@@ -1129,8 +1129,8 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 declare const textareaVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    radius?: "small" | "default" | "large" | "full" | null | undefined;
+    size?: "default" | "small" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | "full" | null | undefined;
     resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
@@ -1256,10 +1256,8 @@ interface DatePickerProps {
     onChange?: (date: Date | undefined) => void;
     format?: string;
     status?: string;
-    closeOnSelect?: boolean;
-    allowManualInput?: boolean;
 }
-declare function DatePicker({ className, locale, placeholder, value, onChange, variant, color, buttonVariant, buttonColor, calendarVariant, calendarColor, format, status, closeOnSelect, allowManualInput, }: DatePickerProps): React$1.JSX.Element;
+declare function DatePicker({ className, locale, placeholder, value, onChange, variant, color, buttonVariant, buttonColor, calendarVariant, calendarColor, format, status, }: DatePickerProps): React$1.JSX.Element;
 declare namespace DatePicker {
     var displayName: string;
 }

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