lecom-ui 5.4.25 → 5.4.27

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/Combobox/Combobox.js

@@ -139,7 +139,7 @@ const ComboboxItemContent = ({
         variant: fontVariant,
         className: cn(
           textColor,
-          "whitespace-normal flex items-center justify-center shrink-0"
+          "whitespace-normal flex items-center justify-center"
         )
       },
       option.label

package/dist/components/DataTable/DataTable.js

@@ -107,7 +107,7 @@ function DataTable({
         });
       });
     }
-  }, [isLoading]);
+  }, [isLoading, sorting]);
   const throttle = React.useCallback(
     (func, delay) => {
       let timeoutId = null;
@@ -194,7 +194,7 @@ function DataTable({
         style: { maxHeight: styleDataTableContainer.height }
       },
       renderTable()
-    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
+    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "vertical" }))
   ), hasPagination());
 }
 const MemoizedDataTable = React.memo(DataTable);

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

@@ -122,7 +122,7 @@ function buildColumns({
           variant: size === "small" ? "body-medium-500" : "body-large-500",
           textColor: "text-grey-950",
           className: "whitespace-normal break-words max-sm:truncate",
-          title: externalColumn.title
+          title: externalColumn.showHeaderTooltip ? externalColumn.title : void 0
         },
         externalColumn.title
       ) : title, hasSort && renderSortArrow({ column, externalColumn, table }));

package/dist/components/DataTable/Table.js

@@ -71,7 +71,7 @@ function Table({
     "tr",
     {
       "data-state": onIsSelected?.(row) ? "selected" : "",
-      className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
+      className: "[&_td]:hover:!bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
     },
     row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
       "td",

package/dist/components/Header/SearchInput.js

@@ -9,6 +9,7 @@ const SearchInput = ({
   customStyles,
   placeholder,
   isActiveButton,
+  value,
   onChangeValue,
   onClickButton
 }) => {
@@ -44,9 +45,11 @@ 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",
+      className: "body-small-400 border-none h-8",
       containerClassName: "grow",
       onMouseOver: handleOver,
       onMouseOut: handleOut,

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/components/Input/Input.js

@@ -3,7 +3,7 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const inputVariants = cva(
-  `flex h-8 w-full rounded-sm border border-grey-400 bg-background px-3 py-2
+  `flex 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-3 py-0 placeholder:body-small-400",
+        small: "h-8 body-small-400 px-4 py-1 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/Layout/Layout.js

@@ -15,6 +15,9 @@ import { Typography } from '../Typography/Typography.js';
 
 initializeI18n();
 const Layout = ({ children, header, sideBar }) => {
+  if (!sideBar) {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-screen" }, /* @__PURE__ */ React.createElement(Header, { ...header }), /* @__PURE__ */ React.createElement("main", { className: "grow w-full" }, children));
+  }
   const { items, info, collapsible = "icon" } = sideBar;
   const sidebarState = getCookie("sidebar:state") === "true";
   return /* @__PURE__ */ React.createElement(SidebarProvider, { className: "flex-col", defaultOpen: sidebarState }, /* @__PURE__ */ React.createElement(Header, { ...header }), /* @__PURE__ */ React.createElement("div", { className: "flex grow" }, /* @__PURE__ */ React.createElement(Sidebar, { collapsible, variant: "sidebar" }, /* @__PURE__ */ React.createElement(SidebarContent, null, /* @__PURE__ */ React.createElement(SidebarGroup, null, /* @__PURE__ */ React.createElement(SidebarGroupContent, null, /* @__PURE__ */ React.createElement(SidebarMenu, null, items.map((item) => /* @__PURE__ */ React.createElement(SidebarMenuItem, { key: item.title }, /* @__PURE__ */ React.createElement(

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,7 +56,8 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium"
+    size = "medium",
+    disabled = false
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -514,9 +515,11 @@ 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
+          "aria-expanded": isPopoverOpen,
+          disabled
         },
         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);
@@ -537,7 +540,7 @@ const MultiSelect = React.forwardRef(
               className: "truncate"
             },
             label
-          )), /* @__PURE__ */ React.createElement(
+          )), !disabled && /* @__PURE__ */ React.createElement(
             X,
             {
               className: "h-4 w-4 cursor-pointer flex-shrink-0",
@@ -547,7 +550,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" }, /* @__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" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -562,7 +565,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/components/ScrollArea/ScrollArea.js

@@ -27,7 +27,7 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border bg-grey-400 hover:bg-gray-500" })
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 

package/dist/i18n/locales/en_us.js

@@ -9,7 +9,7 @@ const language = {
     },
     pagination: {
       show: "Show:",
-      selectedProcess: "selected process"
+      selectedProcess: "Item(s) selected"
     },
     upload: {
       label: "Drag and drop the file here or click to select it.",

package/dist/index.d.ts

@@ -384,6 +384,7 @@ interface Column<TData, TValue> {
     headerClassName?: string;
     headerStyle?: React.CSSProperties;
     cellClassName?: string;
+    showHeaderTooltip?: boolean;
     customHeaderRender?: ({ table, column, }: ColumnSort<TData, TValue>) => React.ReactNode;
     render?: (({ value, row }: ColumnRender<TData, TValue>) => React.ReactNode) | React.ReactNode;
     onSort?: ({ table, column }: ColumnSort<TData, TValue>) => 'asc' | 'desc' | null | void;
@@ -726,6 +727,7 @@ interface SearchInputProps {
     customStyles: CustomStyles$2;
     placeholder?: string;
     isActiveButton?: boolean;
+    value?: string;
     onChangeValue?: (value: string) => void;
     onClickButton?: () => void;
 }
@@ -783,9 +785,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 }
 
 declare const inputVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    size?: "small" | "large" | "default" | null | undefined;
-    radius?: "small" | "large" | "default" | "full" | null | undefined;
+    variant?: "default" | "filled" | "borderless" | 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;
@@ -819,7 +821,7 @@ interface SideBarProps {
 }
 interface LayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
     header: HeaderProps;
-    sideBar: SideBarProps;
+    sideBar?: SideBarProps;
 }
 declare const Layout: {
     ({ children, header, sideBar }: LayoutProps): React$1.JSX.Element;
@@ -990,7 +992,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 | HTMLButtonElement | HTMLDivElement | 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<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"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1156,10 +1158,10 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    variant?: "filled" | "default" | "borderless" | null | undefined;
-    size?: "small" | "large" | "default" | null | undefined;
-    radius?: "small" | "large" | "default" | "full" | null | undefined;
-    resize?: "both" | "horizontal" | "vertical" | "default" | "vertical-limited" | null | undefined;
+    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;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
 }
@@ -1300,7 +1302,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?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "left" | "right" | "top" | "bottom" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1344,7 +1346,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?: "destructive" | "default" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }