lecom-ui 5.4.8 → 5.4.10

package/README.md

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

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -17,7 +17,8 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
   onDrag,
   onDragEnd,
   isDragging,
-  onMouseDown
+  onMouseDown,
+  isAllSelected = false
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editValue, setEditValue] = React.useState(item.label);
@@ -102,7 +103,8 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
       className: cn(
         "cursor-pointer group max-w-[15.625rem]",
         isDragging && "opacity-30 scale-95 transition-all",
-        enableReorder && "cursor-grab active:cursor-grabbing"
+        enableReorder && "cursor-grab active:cursor-grabbing",
+        isAllSelected && "!bg-grey-100 [&>*]:!text-grey-400"
       ),
       draggable: enableReorder && !readOnly,
       onDragStart: handleDragStart,
@@ -114,7 +116,10 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     enableReorder && !readOnly && /* @__PURE__ */ React.createElement(
       GripVertical,
       {
-        className: "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",
+        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",
+          isAllSelected && "!stroke-grey-400"
+        ),
         onMouseDown: (e) => e.stopPropagation(),
         strokeWidth: 2
       }
@@ -132,7 +137,10 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
     !readOnly && /* @__PURE__ */ React.createElement(
       X,
       {
-        className: "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",
+        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",
+          isAllSelected && "!stroke-grey-400"
+        ),
         onClick: handleRemove,
         "aria-label": `Remover ${item.label}`,
         tabIndex: 0
@@ -158,7 +166,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
   onInlineAdd,
   onInlineCancel,
   onSpacerClick,
-  onMouseDown
+  onMouseDown,
+  isAllSelected = false
 }) {
   const showInlineInput = insertAtIndex === index;
   const showDragIndicator = dragOverIndex === index && draggedIndex !== null && draggedIndex !== index;
@@ -184,7 +193,8 @@ const TagItemWrapper = React.memo(function TagItemWrapper2({
       onDrag,
       onDragEnd,
       isDragging: draggedIndex === index,
-      onMouseDown
+      onMouseDown,
+      isAllSelected
     }
   ), showDragIndicator && /* @__PURE__ */ React.createElement("div", { className: "w-1 h-6 bg-blue-500 rounded-full animate-pulse self-center" }), showSpacer && /* @__PURE__ */ React.createElement(
     "div",
@@ -441,26 +451,92 @@ function useInlineInputHandlers(insertAtIndex, setInsertAtIndex, handleAddTag, r
   );
   return { handleInlineAdd, handleInlineCancel, handleSpacerClick };
 }
-function useInputHandlers(inputValue, setInputValue, value, onChange, handleAddTag, handleAddMultipleTags, inputRef) {
+const selectAllContent = (containerRef, inputRef) => {
+  if (!containerRef.current || !inputRef.current) return;
+  inputRef.current.focus();
+  const range = document.createRange();
+  const selection = window.getSelection();
+  range.selectNodeContents(containerRef.current);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  if (inputRef.current.textContent) {
+    const inputRange = document.createRange();
+    inputRange.selectNodeContents(inputRef.current);
+    selection?.extend(inputRange.endContainer, inputRange.endOffset);
+  }
+};
+const clearAllTags = (onChange, setInputValue, setIsAllSelected, inputRef) => {
+  setIsAllSelected(false);
+  onChange([]);
+  if (inputRef.current) {
+    inputRef.current.textContent = "";
+  }
+  setInputValue("");
+  setTimeout(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, 0);
+};
+function useInputHandlers(inputValue, setInputValue, value, onChange, handleAddTag, handleAddMultipleTags, inputRef, containerRef, setIsAllSelected, isAllSelected) {
+  const handleSelectAll = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsAllSelected(true);
+    selectAllContent(containerRef, inputRef);
+  }, [containerRef, inputRef, setIsAllSelected]);
+  const handleSubmit = React.useCallback((e) => {
+    e.preventDefault();
+    const currentValue = e.target.textContent || "";
+    if (currentValue.trim()) {
+      handleAddTag(currentValue.trim());
+      if (inputRef.current) {
+        inputRef.current.textContent = "";
+      }
+      setInputValue("");
+    }
+  }, [handleAddTag, inputRef, setInputValue]);
+  const handleDelete = React.useCallback((e) => {
+    if (isAllSelected) {
+      e.preventDefault();
+      clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+      return;
+    }
+    const selection = window.getSelection();
+    const hasSelection = selection && selection.toString().length > 0;
+    if (hasSelection && containerRef.current) {
+      const selectedText = selection.toString();
+      const hasTagsInSelection = value.some((item) => selectedText.includes(item.label));
+      if (hasTagsInSelection) {
+        e.preventDefault();
+        clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+        return;
+      }
+    }
+    if (e.key === "Backspace" && !inputValue && value.length > 0 && !hasSelection) {
+      e.preventDefault();
+      onChange(value.slice(0, -1));
+    }
+  }, [isAllSelected, onChange, setInputValue, setIsAllSelected, inputRef, containerRef, value, inputValue]);
   const handleKeyDown = React.useCallback(
     (e) => {
       const isSubmitKey = e.key === "Enter" || e.key === ";";
-      const isDeleteKey = e.key === "Backspace";
+      const isDeleteKey = e.key === "Backspace" || e.key === "Delete";
+      const isSelectAll = (e.ctrlKey || e.metaKey) && (e.key === "a" || e.key === "A");
+      if (isSelectAll) {
+        handleSelectAll(e);
+        return;
+      }
       if (isSubmitKey) {
-        e.preventDefault();
-        const currentValue = e.target.textContent || "";
-        if (currentValue.trim()) {
-          handleAddTag(currentValue.trim());
-          if (inputRef.current) {
-            inputRef.current.textContent = "";
-          }
-          setInputValue("");
-        }
-      } else if (isDeleteKey && !inputValue && value.length > 0) {
-        onChange(value.slice(0, -1));
+        handleSubmit(e);
+      } else if (isDeleteKey) {
+        handleDelete(e);
+      }
+      if (!isSelectAll && isAllSelected) {
+        setIsAllSelected(false);
       }
     },
-    [inputValue, value, onChange, handleAddTag, setInputValue, inputRef]
+    [handleSelectAll, handleSubmit, handleDelete, isAllSelected, setIsAllSelected]
   );
   const handlePaste = React.useCallback(
     (e) => {
@@ -503,7 +579,7 @@ function useTagEditHandler(value, onChange, onTagEdit) {
   );
   return { handleEdit };
 }
-function useContainerClickHandler(disabled, inputRef) {
+function useContainerClickHandler(disabled, inputRef, setIsAllSelected) {
   const handleContainerClick = React.useCallback(
     (e) => {
       const target = e.target;
@@ -511,12 +587,58 @@ function useContainerClickHandler(disabled, inputRef) {
       const isClickOnInlineInput = target.closest('[data-inline-input="true"]');
       if (isClickOnTag || isClickOnInlineInput) return;
       if (disabled || !inputRef.current) return;
+      setIsAllSelected(false);
       inputRef.current.focus();
     },
-    [disabled, inputRef]
+    [disabled, inputRef, setIsAllSelected]
   );
   return { handleContainerClick };
 }
+function useContainerKeyHandler(containerRef, value, onChange, inputRef, setInputValue, outerContainerRef, setIsAllSelected, isAllSelected) {
+  const handleContainerSelectAll = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsAllSelected(true);
+    selectAllContent(containerRef, inputRef);
+  }, [containerRef, inputRef, setIsAllSelected]);
+  const handleContainerDelete = React.useCallback((e) => {
+    if (isAllSelected) {
+      e.preventDefault();
+      e.stopPropagation();
+      clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+      return;
+    }
+    const selection = window.getSelection();
+    const hasSelection = selection && selection.toString().length > 0;
+    if (hasSelection && containerRef.current) {
+      const selectedText = selection.toString();
+      const hasTagsInSelection = value.some((item) => selectedText.includes(item.label));
+      if (hasTagsInSelection) {
+        e.preventDefault();
+        e.stopPropagation();
+        clearAllTags(onChange, setInputValue, setIsAllSelected, inputRef);
+      }
+    }
+  }, [isAllSelected, onChange, setInputValue, setIsAllSelected, inputRef, containerRef, value]);
+  const handleContainerKeyDown = React.useCallback(
+    (e) => {
+      const isSelectAll = (e.ctrlKey || e.metaKey) && (e.key === "a" || e.key === "A");
+      const isDeleteKey = e.key === "Backspace" || e.key === "Delete";
+      if (isSelectAll) {
+        handleContainerSelectAll(e);
+        return;
+      }
+      if (isDeleteKey) {
+        handleContainerDelete(e);
+      }
+      if (!isSelectAll && isAllSelected) {
+        setIsAllSelected(false);
+      }
+    },
+    [handleContainerSelectAll, handleContainerDelete, isAllSelected, setIsAllSelected]
+  );
+  return { handleContainerKeyDown };
+}
 function useContainerStyles(variant, radius, disabled, className, maxHeight) {
   const textareaRadius = radius === "full" ? "large" : radius;
   const containerClassNames = cn(
@@ -556,7 +678,9 @@ function CustomTagInputRenderer({
   handleKeyDown,
   handlePaste,
   setInputValue,
-  handleMouseDown
+  handleMouseDown,
+  isAllSelected,
+  setIsAllSelected
 }) {
   const showFinalInlineInput = insertAtIndex === value.length;
   const inputPlaceholder = value.length === 0 ? placeholder : "";
@@ -581,7 +705,8 @@ function CustomTagInputRenderer({
       onInlineAdd: handleInlineAdd,
       onInlineCancel: handleInlineCancel,
       onSpacerClick: handleSpacerClick,
-      onMouseDown: handleMouseDown
+      onMouseDown: handleMouseDown,
+      isAllSelected
     }
   )), showFinalInlineInput && /* @__PURE__ */ React.createElement(
     InlineInput,
@@ -602,6 +727,7 @@ function CustomTagInputRenderer({
       },
       onKeyDown: handleKeyDown,
       onPaste: handlePaste,
+      onFocus: () => setIsAllSelected(false),
       "data-placeholder": inputPlaceholder,
       className: "bg-transparent border-none outline-none body-small-400 text-grey-800 min-h-[1.5rem] empty:before:content-[attr(data-placeholder)] empty:before:text-grey-400 leading-6",
       style: { flex: "1 1 auto", minWidth: "3.75rem", wordBreak: "break-word" }
@@ -627,8 +753,10 @@ function CustomTagInput(props) {
   } = props;
   const [inputValue, setInputValue] = React.useState("");
   const [insertAtIndex, setInsertAtIndex] = React.useState(null);
+  const [isAllSelected, setIsAllSelected] = React.useState(false);
   const inputRef = React.useRef(null);
   const containerRef = React.useRef(null);
+  const outerContainerRef = React.useRef(null);
   const { handleAddTag, handleAddMultipleTags, handleRemove } = useTagManagement(
     value,
     onChange,
@@ -642,10 +770,23 @@ function CustomTagInput(props) {
     onChange,
     handleAddTag,
     handleAddMultipleTags,
-    inputRef
+    inputRef,
+    containerRef,
+    setIsAllSelected,
+    isAllSelected
   );
   const { handleEdit } = useTagEditHandler(value, onChange, onTagEdit);
-  const { handleContainerClick } = useContainerClickHandler(disabled, inputRef);
+  const { handleContainerClick } = useContainerClickHandler(disabled, inputRef, setIsAllSelected);
+  const { handleContainerKeyDown } = useContainerKeyHandler(
+    containerRef,
+    value,
+    onChange,
+    inputRef,
+    setInputValue,
+    outerContainerRef,
+    setIsAllSelected,
+    isAllSelected
+  );
   const { handleInlineAdd, handleInlineCancel, handleSpacerClick } = useInlineInputHandlers(
     insertAtIndex,
     setInsertAtIndex,
@@ -663,12 +804,14 @@ function CustomTagInput(props) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: outerContainerRef,
       className: containerClassNames,
       tabIndex: 0,
       role: "textbox",
       "aria-multiline": "true",
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
+      onKeyDown: handleContainerKeyDown,
       ...restProps
     },
     /* @__PURE__ */ React.createElement(
@@ -704,7 +847,9 @@ function CustomTagInput(props) {
           handleKeyDown,
           handlePaste,
           setInputValue,
-          handleMouseDown
+          handleMouseDown,
+          isAllSelected,
+          setIsAllSelected
         }
       )
     )

package/dist/components/DataTable/DataTable.js

@@ -101,15 +101,13 @@ function DataTable({
           currentElem.style.position = "sticky";
           currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
           currentElem.style.boxShadow = boxShadow;
-          currentElem.style.backgroundColor = currentElemIsTh ? "#f9fafb" : "#ffffff";
-          currentElem.style.zIndex = "1";
           if (lastColumnFixed) {
             currentElem.setAttribute("data-separator-fixed", "true");
           }
         });
       });
     }
-  }, [isLoading, sorting]);
+  }, [isLoading]);
   const throttle = React.useCallback(
     (func, delay) => {
       let timeoutId = null;

package/dist/components/Header/SearchInput.js

@@ -9,7 +9,6 @@ const SearchInput = ({
   customStyles,
   placeholder,
   isActiveButton,
-  value,
   onChangeValue,
   onClickButton
 }) => {
@@ -45,11 +44,9 @@ const SearchInput = ({
     {
       id: "header-search-input-lecom-ui",
       placeholder,
-      size: "small",
       radius: "full",
-      value,
       prefixInset: /* @__PURE__ */ React.createElement(Search, { size: 20, color: mappedCustomStyles.color }),
-      className: "body-small-400 border-none h-8",
+      className: "body-small-400 border-none",
       containerClassName: "grow",
       onMouseOver: handleOver,
       onMouseOut: handleOut,

package/dist/components/Input/Input.js

@@ -3,7 +3,7 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const inputVariants = cva(
-  `flex w-full rounded-sm border border-grey-400 bg-background px-3 py-2
+  `flex h-8 w-full rounded-sm border border-grey-400 bg-background px-3 py-2
   placeholder:text-grey-500 outline-none
   hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
   disabled:cursor-not-allowed disabled:bg-grey-100 disabled:border-grey-400
@@ -16,7 +16,7 @@ const inputVariants = cva(
         borderless: "border-none bg-transparent focus:bg-transparent focus:ring-0"
       },
       size: {
-        small: "h-8 body-small-400 px-4 py-1 placeholder:body-small-400",
+        small: "h-8 body-small-400 px-3 py-0 placeholder:body-small-400",
         default: "h-10 body-medium-400 px-3 py-2 placeholder:body-medium-400",
         large: "h-12  body-large-400 px-3 py-2 placeholder:body-large-400"
       },

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,8 +56,7 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium",
-    disabled = false
+    size = "medium"
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -515,11 +514,9 @@ const MultiSelect = React.forwardRef(
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
-            disabled && "opacity-50 cursor-not-allowed pointer-events-none",
             className
           ),
-          "aria-expanded": isPopoverOpen,
-          disabled
+          "aria-expanded": isPopoverOpen
         },
         selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, selectedValues.slice(0, dynamicMaxCount).map((value2) => {
           const selectedOption = options.find((option) => option.value === value2);
@@ -540,7 +537,7 @@ const MultiSelect = React.forwardRef(
               className: "truncate"
             },
             label
-          )), !disabled && /* @__PURE__ */ React.createElement(
+          )), /* @__PURE__ */ React.createElement(
             X,
             {
               className: "h-4 w-4 cursor-pointer flex-shrink-0",
@@ -550,7 +547,7 @@ const MultiSelect = React.forwardRef(
               }
             }
           ));
-        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -565,7 +562,7 @@ const MultiSelect = React.forwardRef(
             orientation: "vertical",
             className: "flex min-h-4 mx-1 h-full"
           }
-        )), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: getFontVariant(size),

package/dist/index.d.ts

@@ -726,7 +726,6 @@ interface SearchInputProps {
     customStyles: CustomStyles$2;
     placeholder?: string;
     isActiveButton?: boolean;
-    value?: string;
     onChangeValue?: (value: string) => void;
     onClickButton?: () => void;
 }
@@ -784,9 +783,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;
@@ -991,7 +990,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 | HTMLInputElement | HTMLLabelElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+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;
@@ -1157,9 +1156,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> {
@@ -1299,7 +1298,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> {
 }
@@ -1343,7 +1342,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 };