lecom-ui 5.2.81 → 5.2.83

package/dist/components/CustomDivider/CustomDivider.js

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../Button/Button.js';
+
+function DividerLine({
+  dashed,
+  plain,
+  isGroupDivider,
+  isActive,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        isGroupDivider ? "my-4" : "my-2",
+        isActive ? "opacity-100" : "opacity-50",
+        className
+      ),
+      style
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "w-full border-t",
+          dashed ? "border-dashed" : "border-solid",
+          plain ? "border-gray-200" : "border-gray-300"
+        )
+      }
+    )
+  );
+}
+function OptionButtons({
+  value,
+  onChange,
+  isActive,
+  plain,
+  optionLabels,
+  ButtonComponent,
+  buttonSize,
+  buttonClassName
+}) {
+  const [labelAnd, labelOr] = optionLabels;
+  const Btn = ButtonComponent;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "relative z-10 inline-flex overflow-hidden",
+        plain ? "bg-white" : "rounded-md border border-gray-300 bg-white shadow-sm"
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      Btn,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "grey",
+        size: buttonSize,
+        onClick: () => onChange("AND"),
+        disabled: !isActive,
+        className: cn(
+          "px-4 py-1 text-sm transition !rounded-none",
+          value === "AND" ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-white text-gray-700 hover:bg-blue-50",
+          buttonClassName
+        )
+      },
+      labelAnd
+    ),
+    /* @__PURE__ */ React.createElement(
+      Btn,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "grey",
+        size: buttonSize,
+        onClick: () => onChange("OR"),
+        disabled: !isActive,
+        className: cn(
+          "px-4 py-1 text-sm transition !rounded-none",
+          value === "OR" ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-white text-gray-700 hover:bg-blue-50",
+          buttonClassName
+        )
+      },
+      labelOr
+    )
+  );
+}
+function CustomDivider({
+  name,
+  control,
+  isActive = true,
+  isGroupDivider = false,
+  orientation = "center",
+  dashed = false,
+  plain = false,
+  lineOnly = false,
+  optionLabels = ["E", "OU"],
+  ButtonComponent = Button,
+  buttonSize = "medium",
+  buttonClassName,
+  className,
+  style,
+  children
+}) {
+  const formContext = useFormContext();
+  const controlToUse = control ?? formContext?.control;
+  const justifyMap = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  };
+  if (lineOnly && !children) {
+    return /* @__PURE__ */ React.createElement(
+      DividerLine,
+      {
+        dashed,
+        plain,
+        isGroupDivider,
+        isActive,
+        className,
+        style
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "relative w-full flex items-center",
+          isGroupDivider ? "my-4" : "my-2",
+          isActive ? "opacity-100" : "opacity-50",
+          justifyMap[orientation],
+          className
+        ),
+        style
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "absolute inset-x-0 border-t",
+            dashed ? "border-dashed" : "border-solid",
+            plain ? "border-gray-200" : "border-gray-300"
+          )
+        }
+      ),
+      /* @__PURE__ */ React.createElement("span", { className: "relative z-10 px-2 bg-white" }, children)
+    );
+  }
+  if (!name) {
+    throw new Error(
+      "CustomDivider: prop `name` \xE9 obrigat\xF3ria se `lineOnly` for false."
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "relative w-full flex items-center",
+        isGroupDivider ? "my-4" : "my-2",
+        isActive ? "opacity-100" : "opacity-50",
+        justifyMap[orientation],
+        className
+      ),
+      style
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "absolute inset-x-0 border-t",
+          dashed ? "border-dashed" : "border-solid",
+          plain ? "border-gray-200" : "border-gray-300"
+        )
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Controller,
+      {
+        name,
+        control: controlToUse,
+        render: ({ field: { value, onChange } }) => /* @__PURE__ */ React.createElement(
+          OptionButtons,
+          {
+            value,
+            onChange,
+            isActive,
+            plain,
+            optionLabels,
+            ButtonComponent,
+            buttonSize,
+            buttonClassName
+          }
+        )
+      }
+    )
+  );
+}
+CustomDivider.displayName = "CustomDivider";
+
+export { CustomDivider };

package/dist/components/DataTable/DataTable.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import { Pagination } from '../Pagination/Pagination.js';
 import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
 import { buildColumns } from './DataTable.utils.js';
@@ -21,39 +21,16 @@ function DataTable({
   onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
-  const [columnFilters, setColumnFilters] = React.useState(
-    []
-  );
-  const memoizedColumns = React.useMemo(
-    () => buildColumns({ columns, size }),
-    [columns, size]
-  );
   const table = useReactTable({
     data,
-    columns: memoizedColumns,
-    onColumnFiltersChange: setColumnFilters,
+    columns: buildColumns({ columns, size }),
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
     state: {
-      sorting,
-      columnFilters
+      sorting
     }
   });
-  React.useEffect(() => {
-    if (!table) return;
-    columns.forEach((column) => {
-      const value = column.filterProps?.value;
-      const columnKey = column.key;
-      if (value !== void 0) {
-        const column2 = table.getColumn(columnKey);
-        if (column2) {
-          column2.setFilterValue(value);
-        }
-      }
-    });
-  }, [columns, table]);
   const styleDataTableContainer = () => ({
     width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
     height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils.js';
+import { clsx } from 'clsx';
 import { ArrowUpDown } from 'lucide-react';
 import { Checkbox } from '../Checkbox/Checkbox.js';
-import { Input } from '../Input/Input.js';
 import { Typography } from '../Typography/Typography.js';
 
 function buildHeaderSelect({
@@ -54,80 +53,33 @@ function buildColumns({
         return null;
       }
       const hasSort = !!externalColumn.onSort || !!externalColumn.onSortClient;
-      const isFilterable = !!externalColumn.filterable;
-      const filterInputValue = column.getFilterValue() ?? "";
-      const handleFilterInputChange = (event) => {
-        const updatedValue = event.target.value;
-        column.setFilterValue(updatedValue);
-        if (externalColumn?.filterProps?.setFilterValue) {
-          externalColumn.filterProps.setFilterValue(updatedValue);
-        }
-      };
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
-      function renderFilterInput() {
-        if (isFilterable && column.getCanFilter()) {
-          return /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: cn(
-                "ml-2 w-full flex items-center justify-start",
-                externalColumn.filterProps?.className
-              )
-            },
-            /* @__PURE__ */ React.createElement(
-              Input,
-              {
-                ...externalColumn.filterProps?.inputProps,
-                type: "text",
-                value: filterInputValue,
-                onChange: handleFilterInputChange,
-                placeholder: externalColumn.filterProps?.placeholder
-              }
-            )
-          );
-        }
-        return null;
-      }
-      function renderSortArrow() {
-        if (hasSort) {
-          return /* @__PURE__ */ React.createElement(
-            ArrowUpDown,
-            {
-              size: 16,
-              className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
-              onClick: (e) => {
-                e.stopPropagation();
-                const handler = column.getToggleSortingHandler?.();
-                if (handler) handler(e);
-                else if (externalColumn.onSort) {
-                  externalColumn.onSort({ table, column });
-                }
-              }
-            }
-          );
-        }
-        return null;
-      }
       return /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: cn(
+          className: clsx(
             "group flex items-center gap-1",
             hasSort && "hover:cursor-pointer"
-          )
+          ),
+          onClick: () => externalColumn.onSort?.({ table, column })
         },
         typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: size === "small" ? "body-medium-500" : "body-large-500",
             textColor: "text-grey-950",
-            className: "whitespace-normal break-words max-sm:truncate",
+            className: "truncate",
             title: externalColumn.title
           },
           externalColumn.title
         ) : title,
-        renderSortArrow(),
-        renderFilterInput()
+        hasSort && /* @__PURE__ */ React.createElement(
+          ArrowUpDown,
+          {
+            size: 16,
+            className: "text-grey-400 group-hover:text-grey-950"
+          }
+        )
       );
     },
     cell: ({ row }) => {
@@ -157,11 +109,6 @@ function buildColumns({
         row.getValue(externalColumn.key)
       );
     },
-    filterFn: externalColumn.filterable ? (row, columnId, filterValue) => {
-      const rawValue = row.getValue(columnId);
-      const value = typeof rawValue === "string" ? rawValue : String(rawValue ?? "");
-      return value.toLowerCase().includes(String(filterValue).toLowerCase());
-    } : void 0,
     meta: {
       width: externalColumn.width,
       fixed: externalColumn.fixed,

package/dist/components/DataTable/Table.js

@@ -54,7 +54,8 @@ function Table({
       style: styleColumn(
         header.column.columnDef.meta,
         "th"
-      )
+      ),
+      onClick: header.column.getToggleSortingHandler()
     },
     header.isPlaceholder ? null : flexRender(
       header.column.columnDef.header,

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Button } from '../Button/Button.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
+import { cn } from '../../lib/utils.js';
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+
+function DatePicker({
+  className,
+  variant = "outlined",
+  locale
+}) {
+  const [date, setDate] = React.useState();
+  return /* @__PURE__ */ React.createElement(Popover, null, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant,
+      className: cn(
+        "w-[240px] justify-start text-left font-normal",
+        !date && "text-muted-foreground",
+        className
+      )
+    },
+    /* @__PURE__ */ React.createElement(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+    date ? format(date, "PPP", { locale }) : /* @__PURE__ */ React.createElement("span", null, "Pick a date")
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-auto p-0", align: "start" }, /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      mode: "single",
+      selected: date,
+      onSelect: setDate,
+      autoFocus: true,
+      locale
+    }
+  )));
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/dist/components/Steps/Steps.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+
+const Steps = ({
+  items,
+  current = 0,
+  className,
+  dotSize = "medium",
+  color = "blue"
+}) => {
+  const getStepStatus = (index, item) => {
+    if (item.status) return item.status;
+    if (index < current) return "completed";
+    if (index === current) return "current";
+    return "pending";
+  };
+  const getDotSizeClasses = () => {
+    const outerDotSizeClasses = {
+      small: "w-[10px] h-[10px]",
+      medium: "w-6 h-6",
+      large: "w-8 h-8"
+    };
+    const innerDotSizeClasses = {
+      small: "",
+      medium: "w-2 h-2",
+      large: "w-3 h-3"
+    };
+    return {
+      outer: outerDotSizeClasses[dotSize],
+      inner: innerDotSizeClasses[dotSize]
+    };
+  };
+  const getStepIcon = () => dotSize !== "small" ? /* @__PURE__ */ React.createElement("div", { className: cn("rounded-full", getDotSizeClasses().inner) }) : null;
+  const getStepColors = () => {
+    const colorOptions = {
+      blue: "bg-blue-600 border-blue-600",
+      red: "bg-red-600 border-red-600",
+      green: "bg-green-600 border-green-600",
+      purple: "bg-purple-600 border-purple-600",
+      orange: "bg-orange-500 border-orange-500"
+    };
+    return colorOptions[color] || colorOptions.blue;
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("relative", className) }, items.map((item, index) => {
+    const status = getStepStatus(index, item);
+    const isCurrent = index === current;
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ React.createElement("div", { key: index, className: "relative flex items-baseline" }, !isLast && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn("absolute border-l border-dashed -z-10", {
+          "left-[4.5px]": dotSize === "small",
+          "left-3": dotSize === "medium",
+          "left-4": dotSize === "large",
+          "border-blue-300": color === "blue",
+          "border-red-300": color === "red",
+          "border-green-300": color === "green",
+          "border-purple-300": color === "purple",
+          "border-orange-300": color === "orange"
+        }),
+        style: {
+          top: dotSize === "small" ? "10px" : dotSize === "medium" ? "16px" : "24px",
+          height: dotSize === "small" ? "calc(100% - 10px)" : dotSize === "medium" ? "calc(100% - 24px)" : "calc(100% - 32px)"
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "relative z-10 flex items-center justify-center rounded-full",
+          getDotSizeClasses().outer,
+          getStepColors(),
+          dotSize === "small" ? "" : "border"
+        )
+      },
+      getStepIcon()
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn("pb-6 flex-1 mt-0", {
+          "ml-[14px]": dotSize === "small",
+          "ml-4": dotSize === "medium",
+          "ml-5": dotSize === "large"
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "text-sm font-medium",
+            status === "completed" || isCurrent ? "text-gray-900" : "text-gray-500"
+          )
+        },
+        item.title
+      ),
+      item.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1" }, typeof item.description === "string" ? /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-600" }, item.description) : item.description)
+    ));
+  }));
+};
+Steps.displayName = "Steps";
+
+export { Steps };

package/dist/components/Switch/Switch.js

@@ -1,24 +1,60 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils.js';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '../../lib/utils.js';
 
-const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const Spinner = () => /* @__PURE__ */ React.createElement("svg", { className: "animate-spin h-4 w-4 text-blue-600", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement(
+  "circle",
+  {
+    className: "opacity-25",
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4",
+    fill: "none"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    className: "opacity-75",
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+  }
+));
+const Switch = React.forwardRef(({ className, loading = false, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SwitchPrimitives.Root,
   {
+    ref,
+    disabled: disabled || loading,
     className: cn(
-      "peer flex items-center shrink-0 h-6 w-12 p-[2px] group rounded-full cursor-pointer bg-transparent focus:outline-none transition-colors data-[state=unchecked]:border-2 data-[state=unchecked]:border-grey-400 data-[state=unchecked]:hover:border-grey-500 data-[state=unchecked]:active:border-grey-700 data-[state=unchecked]:disabled:border-grey-300 data-[state=checked]:bg-blue-600 data-[state=checked]:hover:bg-blue-700 data-[state=checked]:active:bg-blue-800 data-[state=checked]:disabled:bg-blue-200 disabled:cursor-not-allowed",
+      "peer flex items-center shrink-0 h-6 w-12 p-[2px] group rounded-full cursor-pointer bg-transparent focus:outline-none transition-colors",
+      "data-[state=unchecked]:border-2 data-[state=unchecked]:border-grey-400",
+      "data-[state=unchecked]:hover:border-grey-500 data-[state=unchecked]:active:border-grey-700",
+      "data-[state=unchecked]:disabled:border-grey-300",
+      "data-[state=checked]:bg-blue-600 data-[state=checked]:hover:bg-blue-700",
+      "data-[state=checked]:active:bg-blue-800 data-[state=checked]:disabled:bg-blue-200",
+      "disabled:cursor-not-allowed",
       className
     ),
-    ref,
     ...props
   },
   /* @__PURE__ */ React.createElement(
     SwitchPrimitives.Thumb,
     {
       className: cn(
-        "pointer-events-none rounded-full shadow-sm transition-all h-4 w-4 data-[state=unchecked]:bg-grey-400 data-[state=unchecked]:translate-x-1 group-hover:data-[state=unchecked]:bg-grey-500 group-focus:ring-8 group-focus:ring-blue-200 group-focus:ring-opacity-50 group-active:group-enabled:h-5 group-active:group-enabled:w-5 group-active:data-[state=unchecked]:bg-grey-700 group-active:group-enabled:data-[state=unchecked]:translate-x-[-2px] group-disabled:data-[state=unchecked]:bg-grey-300 group-disabled:data-[state=unchecked]:bg-opacity-65 data-[state=checked]:bg-white data-[state=checked]:translate-x-6"
+        "pointer-events-none rounded-full shadow-sm transition-all h-4 w-4",
+        "data-[state=unchecked]:bg-grey-400 data-[state=unchecked]:translate-x-1",
+        "group-hover:data-[state=unchecked]:bg-grey-500",
+        "group-focus:ring-8 group-focus:ring-blue-200 group-focus:ring-opacity-50",
+        "group-active:group-enabled:h-5 group-active:group-enabled:w-5",
+        "group-active:data-[state=unchecked]:bg-grey-700",
+        "group-active:group-enabled:data-[state=unchecked]:translate-x-[-2px]",
+        "group-disabled:data-[state=unchecked]:bg-grey-300 group-disabled:data-[state=unchecked]:bg-opacity-65",
+        "data-[state=checked]:bg-white data-[state=checked]:translate-x-6",
+        "flex items-center justify-center"
       )
-    }
+    },
+    loading && /* @__PURE__ */ React.createElement(Spinner, null)
   )
 ));
 Switch.displayName = "Switch";