lecom-ui 5.4.23 → 5.4.24

package/README.md

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

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,5 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };

package/dist/_virtual/index.js

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requireLib } from '../node_modules/hex-color-opacity/lib/index.js';
+
+var libExports = requireLib();
+var opacity = /*@__PURE__*/getDefaultExportFromCjs(libExports);
+
+export { opacity as default };

package/dist/components/Collapse/Collapse.js

@@ -2,93 +2,127 @@ 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 } from 'lucide-react';
+import { ChevronRight, ChevronDown } from 'lucide-react';
 
-const collapseTriggerVariants = cva(
-  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
+const collapseVariants = cva(
+  "flex flex-1 items-center gap-4 transition-all text-left outline-none w-full",
   {
     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: "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"
+        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"
       },
-      ghost: {
-        true: "bg-transparent border-none",
-        false: "border-t-none border-grey-400"
+      iconPosition: {
+        start: "justify-start",
+        end: "justify-between"
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "large",
-      ghost: false
+      iconPosition: "end"
     }
   }
 );
-const CollapseRoot = AccordionPrimitive.Root;
-const CollapseItem = AccordionPrimitive.Item;
-const CollapsePanel = React.forwardRef(
+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(
   ({
-    header,
+    className,
     children,
-    extra,
-    expandIconPosition = "start",
-    size = "large",
+    variant = "default",
+    size,
+    disabled,
+    asChild,
+    iconPosition = "end",
     ghost = false,
-    disabled = false,
-    className,
+    mode,
+    header,
+    extra,
     ...props
-  }, 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",
+  }, 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,
         {
           className: cn(
-            "flex flex-1 items-center justify-between gap-4 w-full",
-            expandIconPosition === "end" ? "flex-row-reverse" : ""
+            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
+            disabled && "text-grey-300"
           )
-        },
-        /* @__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,
+        }
+      ));
+    };
+    return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
       {
+        ref,
         className: cn(
-          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
-        )
+          collapseVariants({
+            variant: finalVariant,
+            size: finalSize,
+            iconPosition: finalIconPosition,
+            className
+          }),
+          (isCollapseMode || ghost) && "group"
+        ),
+        ...props,
+        disabled,
+        asChild
       },
-      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
-    )
-  )
+      renderTriggerContent()
+    ));
+  }
 );
-CollapsePanel.displayName = "CollapsePanel";
-const Collapse = Object.assign(CollapseRoot, {
-  Panel: CollapsePanel
-});
+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;
 
-export { Collapse, collapseTriggerVariants };
+export { Collapse, CollapseContent, CollapseItem, CollapseTrigger, collapseVariants };

package/dist/components/Combobox/Combobox.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { cva } from 'class-variance-authority';
-import { ChevronUpIcon, ChevronDownIcon, Check } from 'lucide-react';
+import { ChevronUpIcon, ChevronDownIcon, Check, Plus } from 'lucide-react';
 import { initializeI18n } from '../../i18n/index.js';
 import { cn } from '../../lib/utils.js';
 import { Button } from '../Button/Button.js';
@@ -139,7 +139,7 @@ const ComboboxItemContent = ({
         variant: fontVariant,
         className: cn(
           textColor,
-          "whitespace-normal flex items-center justify-center"
+          "whitespace-normal flex items-center justify-center shrink-0"
         )
       },
       option.label
@@ -147,6 +147,39 @@ const ComboboxItemContent = ({
   );
 };
 ComboboxItemContent.displayName = "ComboboxItemContent";
+const CreateOption = ({
+  searchTerm,
+  onCreateOption,
+  onClose,
+  size = "medium"
+}) => {
+  const fontVariant = getFontVariant(size);
+  const checkIconSize = CHECK_ICON_SIZES[size];
+  const handleCreate = () => {
+    onClose();
+    requestAnimationFrame(() => onCreateOption(searchTerm));
+  };
+  return /* @__PURE__ */ React.createElement(
+    CommandItem,
+    {
+      onSelect: handleCreate,
+      className: cn(
+        comboboxItemVariants({ size }),
+        "text-primary-600 hover:bg-primary-50"
+      )
+    },
+    /* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center shrink-0" }, /* @__PURE__ */ React.createElement(
+      Plus,
+      {
+        className: "text-primary-600",
+        size: checkIconSize,
+        strokeWidth: 2
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Typography, { variant: fontVariant, className: "text-primary-600" }, "Criar ", '"', searchTerm, '"')
+  );
+};
+CreateOption.displayName = "CreateOption";
 const ComboboxOptionsList = React.memo(
   ({ items, value, onChange, onClose, itemsClassName, size }) => /* @__PURE__ */ React.createElement(React.Fragment, null, items.map(
     (item, idx) => isComboboxGroup(item) ? /* @__PURE__ */ React.createElement(
@@ -183,6 +216,83 @@ const ComboboxOptionsList = React.memo(
   ))
 );
 ComboboxOptionsList.displayName = "ComboboxOptionsList";
+const useComboboxScrollToSelected = (open, value, commandListRef) => {
+  React.useEffect(() => {
+    if (!open) return;
+    if (!value) return;
+    requestAnimationFrame(() => {
+      const el = commandListRef.current?.querySelector(
+        `[data-combobox-value="${value}"]`
+      );
+      if (el) {
+        el.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }, [open, value, commandListRef]);
+};
+const useComboboxState = (options, renderOptions, value, search, allowCreate, onCreateOption, placeholder, t) => {
+  const filteredOptions = React.useMemo(
+    () => !search ? renderOptions : filterComboboxOptions(renderOptions, search),
+    [renderOptions, search]
+  );
+  const selectedOption = React.useMemo(
+    () => getSelectedOption(options, value),
+    [options, value]
+  );
+  const showCreateOption = allowCreate && onCreateOption && search.trim() !== "";
+  const selectedLabel = selectedOption?.label || placeholder || t("multiSelect.placeholder");
+  const selectedPrefix = selectedOption?.prefix;
+  return {
+    filteredOptions,
+    selectedOption,
+    showCreateOption,
+    selectedLabel,
+    selectedPrefix
+  };
+};
+const ComboboxContent = ({
+  showCreateOption,
+  search,
+  onCreateOption,
+  onClose,
+  size,
+  notFoundContent,
+  filteredOptions,
+  value,
+  onChange,
+  itemsClassName
+}) => {
+  const { t } = useTranslation();
+  const hasResults = filteredOptions.length > 0;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !hasResults && /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent || t("multiSelect.empty")), /* @__PURE__ */ React.createElement(
+    ComboboxOptionsList,
+    {
+      items: filteredOptions,
+      value,
+      onChange,
+      onClose,
+      itemsClassName,
+      size
+    }
+  ), showCreateOption && onCreateOption && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "sticky bottom-0 bg-white pt-1",
+        hasResults && "border-t border-grey-200"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      CreateOption,
+      {
+        searchTerm: search,
+        onCreateOption,
+        onClose,
+        size
+      }
+    )
+  ));
+};
 const comboboxTriggerVariants = cva(
   "w-full px-4 text-left shadow-sm flex items-center justify-between transition",
   {
@@ -296,43 +406,42 @@ function Combobox({
   itemsClassName,
   rounded = "default",
   showSearch = true,
-  size = "medium"
+  size = "medium",
+  allowCreate = false,
+  onCreateOption
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const commandListRef = React.useRef(null);
-  const filteredOptions = React.useMemo(
-    () => !search ? options : filterComboboxOptions(options, search),
-    [options, search]
-  );
-  const selectedOption = React.useMemo(
-    () => getSelectedOption(options, value),
-    [options, value]
+  const lastOpenOptionsRef = React.useRef(options);
+  React.useEffect(() => {
+    if (open) {
+      lastOpenOptionsRef.current = options;
+    }
+  }, [open, options]);
+  const renderOptions = open ? options : lastOpenOptionsRef.current;
+  const { filteredOptions, showCreateOption, selectedLabel, selectedPrefix } = useComboboxState(
+    options,
+    renderOptions,
+    value,
+    search,
+    allowCreate,
+    onCreateOption,
+    placeholder,
+    t
   );
-  const selectedLabel = selectedOption?.label || placeholder || t("multiSelect.placeholder");
-  const selectedPrefix = selectedOption?.prefix;
   const handleClose = React.useCallback(() => {
     setOpen(false);
   }, []);
-  React.useEffect(() => {
-    if (!open) return;
-    if (!value) return;
-    requestAnimationFrame(() => {
-      const el = commandListRef.current?.querySelector(
-        `[data-combobox-value="${value}"]`
-      );
-      if (el) {
-        el.scrollIntoView({ block: "nearest" });
-      }
-    });
-  }, [open, value]);
-  React.useEffect(() => {
-    if (!open) {
+  const handleOpenChange = React.useCallback((nextOpen) => {
+    setOpen(nextOpen);
+    if (nextOpen) {
       setSearch("");
     }
-  }, [open]);
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+  }, []);
+  useComboboxScrollToSelected(open, value, commandListRef);
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     ComboboxTriggerButton,
     {
       open,
@@ -376,15 +485,19 @@ function Combobox({
           contentClassName
         )
       },
-      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent || t("multiSelect.empty")), /* @__PURE__ */ React.createElement(
-        ComboboxOptionsList,
+      /* @__PURE__ */ React.createElement(CommandList, { className: "overflow-visible" }, /* @__PURE__ */ React.createElement(
+        ComboboxContent,
         {
-          items: filteredOptions,
+          showCreateOption,
+          search,
+          onCreateOption,
+          onClose: handleClose,
+          size,
+          notFoundContent,
+          filteredOptions,
           value,
           onChange,
-          onClose: handleClose,
-          itemsClassName,
-          size
+          itemsClassName
         }
       ))
     ))

package/dist/components/DataTable/DataTable.js

@@ -107,7 +107,7 @@ function DataTable({
         });
       });
     }
-  }, [isLoading, sorting]);
+  }, [isLoading]);
   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: "vertical" }))
+    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
   ), 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.showHeaderTooltip ? externalColumn.title : void 0
+          title: externalColumn.title
         },
         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,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/components/Table/Table.js

@@ -0,0 +1,80 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+
+const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };