lecom-ui 5.3.20 → 5.3.22

package/README.md

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

package/dist/components/Accordion/Accordion.js

@@ -2,24 +2,33 @@ 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 { ChevronDown } from 'lucide-react';
+import { ChevronRight, ChevronDown } from 'lucide-react';
 
 const accordionVariants = cva(
-  "flex flex-1 items-start justify-between gap-4 transition-all text-left [&[data-state=open]>svg]:rotate-180 w-full text-center outline-none",
+  "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"
+        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"
+        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"
+      },
+      iconPosition: {
+        start: "justify-start",
+        end: "justify-between"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "large"
+      size: "large",
+      iconPosition: "end"
     }
   }
 );
@@ -27,47 +36,93 @@ const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = React.forwardRef(
-  ({ className, children, variant, size, disabled, asChild, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { className: "" }, /* @__PURE__ */ React.createElement(
-    AccordionPrimitive.Trigger,
-    {
-      ref,
-      className: cn(accordionVariants({ variant, size, className })),
-      ...props,
-      disabled,
-      asChild
-    },
-    asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(
-      ChevronDown,
+  ({
+    className,
+    children,
+    variant = "default",
+    size,
+    disabled,
+    asChild,
+    iconPosition = "end",
+    ghost = false,
+    mode,
+    header,
+    extra,
+    ...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,
+        {
+          className: cn(
+            "size-5 shrink-0 text-grey-800 transition-transform duration-200 [&[data-state=open]]:rotate-180",
+            disabled && "text-grey-300"
+          )
+        }
+      ));
+    };
+    return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
       {
+        ref,
         className: cn(
-          "size-5 shrink-0 text-grey-800 transition-transform duration-200",
-          disabled && "text-grey-300"
-        )
-      }
-    ))
-  ))
+          accordionVariants({
+            variant: finalVariant,
+            size: finalSize,
+            iconPosition: finalIconPosition,
+            className
+          }),
+          (isCollapseMode || ghost) && "group"
+        ),
+        ...props,
+        disabled,
+        asChild
+      },
+      renderTriggerContent()
+    ));
+  }
 );
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React.forwardRef(({ className, children, disabled = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const AccordionContent = 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,
-    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...props
   },
-  /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cn(
-        "body-medium-400 text-grey-800 pt-2 pb-4 px-4",
-        disabled && "text-grey-300",
-        className
-      )
-    },
-    children
-  )
+  /* @__PURE__ */ React.createElement("div", { className: "pt-2 pb-4 px-4" }, children)
 ));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionVariants };

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/DataTable/DataTable.utils.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { ArrowUpDown } from 'lucide-react';
+import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Typography } from '../Typography/Typography.js';
 
@@ -31,36 +31,47 @@ function buildCellSelect({
     }
   );
 }
-function buildColumns({
-  columns,
-  size = "middle"
+function renderSortArrow({
+  column,
+  externalColumn,
+  table
 }) {
-  function renderSortArrow({
-    hasSort,
-    column,
-    externalColumn,
-    table
-  }) {
-    if (!hasSort) {
-      return null;
+  const sorted = column.getIsSorted();
+  const handleClick = (event) => {
+    event.stopPropagation();
+    const sortingHandler = column.getToggleSortingHandler?.();
+    if (externalColumn.onSort) {
+      externalColumn.onSort({ table, column });
+    } else if (sortingHandler) {
+      sortingHandler(event);
     }
+  };
+  if (sorted === "asc") {
+    return /* @__PURE__ */ React.createElement(ArrowUp, { size: 16, className: "ml-1 text-grey-950", onClick: handleClick });
+  }
+  if (sorted === "desc") {
     return /* @__PURE__ */ React.createElement(
-      ArrowUpDown,
+      ArrowDown,
       {
         size: 16,
-        className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
-        onClick: (event) => {
-          event.stopPropagation();
-          const sortingHandler = column.getToggleSortingHandler?.();
-          if (externalColumn.onSort) {
-            externalColumn.onSort({ table, column });
-          } else if (sortingHandler) {
-            sortingHandler(event);
-          }
-        }
+        className: "ml-1 text-grey-950",
+        onClick: handleClick
       }
     );
   }
+  return /* @__PURE__ */ React.createElement(
+    ArrowUpDown,
+    {
+      size: 16,
+      className: "ml-1 text-grey-400 group-hover:text-grey-950",
+      onClick: handleClick
+    }
+  );
+}
+function buildColumns({
+  columns,
+  size = "middle"
+}) {
   const mappedColumns = columns.map((externalColumn) => ({
     accessorKey: externalColumn.key,
     header: ({ table, column }) => {
@@ -98,12 +109,7 @@ function buildColumns({
           },
           externalColumn.title
         ) : title,
-        renderSortArrow({
-          hasSort,
-          column,
-          externalColumn,
-          table
-        })
+        hasSort && renderSortArrow({ column, externalColumn, table })
       );
     },
     cell: ({ row }) => {

package/dist/components/DataTable/Table.js

@@ -49,6 +49,7 @@ function Table({
       className: cn(
         "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
         size === "small" && "h-10",
+        header.column.getIsSorted() && "bg-grey-50 font-medium",
         header.column.columnDef.meta?.headerClassName
       ),
       "data-header": header.id,

package/dist/components/Textarea/Textarea.js

@@ -3,11 +3,7 @@ import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 
 const textareaVariants = cva(
-  `flex h-20 w-full rounded-[4px] border border-grey-400 bg-background px-3 py-2
-  placeholder:text-muted-foreground 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:opacity-50
-  transition-all duration-300`,
+  `flex h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground outline-none focus-visible:outline-none focus-visible:border-blue-600 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:bg-background focus-visible:ring-opacity-20 hover:border-blue-600 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-all duration-75`,
   {
     variants: {
       variant: {
@@ -15,43 +11,46 @@ const textareaVariants = cva(
         filled: "bg-grey-100 border-grey-100 hover:border-grey-200 hover:bg-grey-200 disabled:bg-grey-200 disabled:border-grey-200",
         borderless: "border-none bg-transparent focus:bg-transparent focus:ring-0"
       },
-      size: {
-        small: "h-8 body-medium-400",
-        default: "h-20 body-large-400",
-        large: "h-28 body-large-400"
-      },
       radius: {
+        default: "rounded-md",
         small: "rounded-sm",
-        default: "rounded-[4px]",
-        large: "rounded-3xl",
-        full: "rounded-full"
-      },
-      resize: {
-        default: "resize-none",
-        both: "resize",
-        horizontal: "resize-x",
-        vertical: "resize-y"
+        large: "rounded-3xl"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
-      radius: "default",
-      resize: "default"
+      radius: "default"
     }
   }
 );
 const Textarea = React.forwardRef(
-  ({ className, variant, size, radius, resize, ...props }, ref) => /* @__PURE__ */ React.createElement(
-    "textarea",
-    {
-      className: cn(
-        textareaVariants({ variant, size, radius, resize, className })
-      ),
-      ref,
-      ...props
-    }
-  )
+  ({ className, variant, radius, resize = "none", ...props }, ref) => {
+    const getResizeClass = (resize2) => {
+      switch (resize2) {
+        case "none":
+          return "resize-none";
+        case "both":
+          return "resize";
+        case "horizontal":
+          return "resize-x";
+        case "vertical":
+          return "resize-y";
+        default:
+          return "resize-none";
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        className: cn(
+          textareaVariants({ variant, radius, className }),
+          getResizeClass(resize)
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
 );
 Textarea.displayName = "Textarea";