lecom-ui 5.4.31 → 5.4.33

package/README.md

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

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -18,11 +18,13 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
   onDragEnd,
   isDragging,
   onMouseDown,
-  isAllSelected = false
+  isAllSelected = false,
+  defaultColor
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editValue, setEditValue] = React.useState(item.label);
   const inputRef = React.useRef(null);
+  const tagColor = item.color || defaultColor;
   React.useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
@@ -80,7 +82,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     [index, onDragOver]
   );
   if (isEditing) {
-    return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "px-2 py-0 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: tagColor, className: "px-2 py-0 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement(
       "input",
       {
         ref: inputRef,
@@ -89,7 +91,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
         onChange: (e) => setEditValue(e.target.value),
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
-        className: "bg-transparent border-none outline-none text-blue-700 body-small-400 min-w-[60px] w-full",
+        className: "bg-transparent border-none outline-none [color:inherit] body-small-400 min-w-[60px] w-full",
         onClick: (e) => e.stopPropagation(),
         style: { width: `${Math.min(Math.max(editValue.length * 8, 60), 250)}px` }
       }
@@ -99,7 +101,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     Tag,
     {
       "data-tag": "true",
-      color: "blue",
+      color: tagColor,
       className: cn(
         "cursor-pointer group max-w-[15.625rem]",
         isDragging && "opacity-30 scale-95 transition-all",
@@ -117,7 +119,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       GripVertical,
       {
         className: cn(
-          "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-blue-600 fill-none hover:stroke-blue-800 hover:scale-110",
+          "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-current fill-none hover:opacity-80 hover:scale-110",
           isAllSelected && "!stroke-grey-400"
         ),
         onMouseDown: (e) => e.stopPropagation(),
@@ -128,8 +130,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       Typography,
       {
         variant: "body-small-400",
-        className: "truncate flex-1 min-w-0",
-        textColor: "text-blue-700",
+        className: "truncate flex-1 min-w-0 [color:inherit]",
         onClick: handleClick
       },
       item.label
@@ -138,7 +139,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       X,
       {
         className: cn(
-          "w-4 h-4 cursor-pointer flex-shrink-0 stroke-blue-600 stroke-2 outline-none hover:stroke-blue-800 hover:scale-110 transition-all",
+          "w-4 h-4 cursor-pointer flex-shrink-0 stroke-current stroke-2 outline-none hover:opacity-80 hover:scale-110 transition-all",
           isAllSelected && "!stroke-grey-400"
         ),
         onClick: handleRemove,
@@ -167,7 +168,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
   onInlineCancel,
   onSpacerClick,
   onMouseDown,
-  isAllSelected = false
+  isAllSelected = false,
+  defaultColor
 }) {
   const showInlineInput = insertAtIndex === index;
   const showDragIndicator = dragOverIndex === index && draggedIndex !== null && draggedIndex !== index;
@@ -177,7 +179,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
     {
       onAdd: onInlineAdd,
       onCancel: onInlineCancel,
-      placeholder: inlinePlaceholder
+      placeholder: inlinePlaceholder,
+      color: defaultColor
     }
   ), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-0.5 relative" }, /* @__PURE__ */ React.createElement(
     CustomTagItemComponent,
@@ -194,7 +197,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
       onDragEnd,
       isDragging: draggedIndex === index,
       onMouseDown,
-      isAllSelected
+      isAllSelected,
+      defaultColor
     }
   ), showDragIndicator && /* @__PURE__ */ React.createElement("div", { className: "w-1 h-6 bg-blue-500 rounded-full animate-pulse self-center" }), showSpacer && /* @__PURE__ */ React.createElement(
     "div",
@@ -208,7 +212,7 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
     }
   )));
 });
-const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder }) {
+const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder, color }) {
   const [value, setValue] = React.useState("");
   const inputRef = React.useRef(null);
   React.useEffect(() => {
@@ -237,7 +241,7 @@ const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placehol
       onCancel();
     }
   }, [value, onAdd, onCancel]);
-  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "px-2 py-0 max-w-[15.625rem]", "data-inline-input": "true" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color, className: "px-2 py-0 max-w-[15.625rem]", "data-inline-input": "true" }, /* @__PURE__ */ React.createElement(
     "input",
     {
       ref: inputRef,
@@ -247,7 +251,7 @@ const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placehol
       onKeyDown: handleKeyDown,
       onBlur: handleBlur,
       placeholder,
-      className: "bg-transparent border-none outline-none text-blue-700 body-small-400 min-w-[3.75rem] w-full px-1",
+      className: "bg-transparent border-none outline-none [color:inherit] body-small-400 min-w-[3.75rem] w-full px-1",
       onClick: (e) => e.stopPropagation(),
       style: { width: `${Math.min(Math.max(value.length * 8, 60), 250)}px` }
     }
@@ -680,7 +684,8 @@ function CustomTagInputRenderer({
   setInputValue,
   handleMouseDown,
   isAllSelected,
-  setIsAllSelected
+  setIsAllSelected,
+  defaultColor
 }) {
   const showFinalInlineInput = insertAtIndex === value.length;
   const inputPlaceholder = value.length === 0 ? placeholder : "";
@@ -706,14 +711,16 @@ function CustomTagInputRenderer({
       onInlineCancel: handleInlineCancel,
       onSpacerClick: handleSpacerClick,
       onMouseDown: handleMouseDown,
-      isAllSelected
+      isAllSelected,
+      defaultColor
     }
   )), showFinalInlineInput && /* @__PURE__ */ React.createElement(
     InlineInput,
     {
       onAdd: handleInlineAdd,
       onCancel: handleInlineCancel,
-      placeholder: inlinePlaceholder
+      placeholder: inlinePlaceholder,
+      color: defaultColor
     }
   ), !readOnly && /* @__PURE__ */ React.createElement(
     "span",
@@ -749,6 +756,7 @@ function CustomTagInput(props) {
     allowDuplicates = false,
     enableReorder = true,
     onTagEdit,
+    color = "blue",
     ...restProps
   } = props;
   const [inputValue, setInputValue] = React.useState("");
@@ -849,7 +857,8 @@ function CustomTagInput(props) {
           setInputValue,
           handleMouseDown,
           isAllSelected,
-          setIsAllSelected
+          setIsAllSelected,
+          defaultColor: color
         }
       )
     )

package/dist/components/TagInput/TagInput.js

@@ -5,7 +5,7 @@ import { Tag } from '../Tag/Tag.js';
 import { textareaVariants } from '../Textarea/Textarea.js';
 import { Typography } from '../Typography/Typography.js';
 
-function TagItem({ item, onRemove, readOnly }) {
+function TagItem({ item, onRemove, readOnly, defaultColor }) {
   const handleRemove = React.useCallback(
     (e) => {
       e.stopPropagation();
@@ -13,18 +13,19 @@ function TagItem({ item, onRemove, readOnly }) {
     },
     [item.value, onRemove]
   );
+  const tagColor = item.color || defaultColor;
   return /* @__PURE__ */ React.createElement(
     Tag,
     {
       "data-tag": "true",
-      color: "blue",
+      color: tagColor,
       className: "max-w-[15.625rem] h-6 !px-2 !py-0.5"
     },
     /* @__PURE__ */ React.createElement(
       Typography,
       {
         variant: "body-small-400",
-        className: "text-blue-600 truncate p-0"
+        className: "truncate p-0 [color:inherit]"
       },
       item.label
     ),
@@ -39,8 +40,8 @@ function TagItem({ item, onRemove, readOnly }) {
     )
   );
 }
-function HiddenCountTag({ count }) {
-  return /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", count));
+function HiddenCountTag({ count, color }) {
+  return /* @__PURE__ */ React.createElement(Tag, { color, "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "[color:inherit]" }, "+", count));
 }
 function calculateEstimatedWidths(value) {
   const AVG_CHAR_WIDTH = 8;
@@ -180,6 +181,7 @@ function TagInput(props) {
     className = "",
     variant = "default",
     radius = "default",
+    color = "blue",
     ...restProps
   } = props;
   const ref = React.useRef(null);
@@ -223,10 +225,11 @@ function TagInput(props) {
         key: item.value,
         item,
         onRemove: handleRemove,
-        readOnly
+        readOnly,
+        defaultColor: color
       }
     )),
-    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(HiddenCountTag, { count: actualHiddenCount })
+    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(HiddenCountTag, { count: actualHiddenCount, color })
   );
 }
 

package/dist/index.d.ts

@@ -786,9 +786,9 @@ 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;
+    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;
@@ -994,7 +994,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 | 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<HTMLButtonElement | HTMLElement | HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLUListElement | 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 | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1089,7 +1089,7 @@ declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive
 declare const TooltipArrow: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React$1.RefAttributes<SVGSVGElement>>;
 declare const TooltipPortal: React$1.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const tooltipContentVariants: (props?: ({
-    color?: "white" | "black" | null | undefined;
+    color?: "black" | "white" | null | undefined;
     arrow?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TooltipContentProps extends React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
@@ -1160,9 +1160,9 @@ 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?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | "full" | null | undefined;
+    variant?: "filled" | "default" | "borderless" | null | undefined;
+    size?: "small" | "large" | "default" | null | undefined;
+    radius?: "small" | "large" | "default" | "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> {
@@ -1240,8 +1240,9 @@ declare function Combobox({ options, value, onChange, placeholder, disabled, not
 interface TagItem {
     label: string;
     value: string;
+    color?: TagProps['color'];
 }
-interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface TagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'color'> {
     value: TagItem[];
     onRemove: (value: string) => void;
     placeholder?: string;
@@ -1251,6 +1252,7 @@ interface TagInputProps extends React$1.HTMLAttributes<HTMLDivElement> {
     variant?: 'default' | 'filled' | 'borderless';
     radius?: 'default' | 'full';
     maxDisplayCount?: number;
+    color?: TagProps['color'];
 }
 declare function TagInput(props: TagInputProps): React$1.JSX.Element;
 
@@ -1304,7 +1306,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" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1323,8 +1325,9 @@ declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPri
 interface CustomTagItem {
     id: string;
     label: string;
+    color?: TagProps['color'];
 }
-interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
     value: CustomTagItem[];
     onChange: (items: CustomTagItem[]) => void;
     placeholder?: string;
@@ -1338,6 +1341,7 @@ interface CustomTagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement
     onTagEdit?: (item: CustomTagItem) => void;
     allowDuplicates?: boolean;
     enableReorder?: boolean;
+    color?: TagProps['color'];
 }
 declare function CustomTagInput(props: CustomTagInputProps): React$1.JSX.Element;
 
@@ -1348,7 +1352,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 };