lecom-ui 5.2.87 → 5.2.89

package/dist/components/CustomDivider/CustomDivider.js

@@ -0,0 +1,234 @@
+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 getDividerContent({
+  name,
+  children,
+  control,
+  optionLabels,
+  ButtonComponent,
+  buttonSize,
+  buttonClassName,
+  isActive,
+  plain
+}) {
+  if (children) {
+    return /* @__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 n\xE3o houver children."
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field: { value, onChange } }) => /* @__PURE__ */ React.createElement(
+        OptionButtons,
+        {
+          value,
+          onChange,
+          isActive,
+          plain,
+          optionLabels,
+          ButtonComponent,
+          buttonSize,
+          buttonClassName
+        }
+      )
+    }
+  );
+}
+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 getJustifyClass(orientation) {
+  const map = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  };
+  return map[orientation];
+}
+function DividerWrapper({
+  isGroupDivider,
+  isActive,
+  orientation = "center",
+  dashed,
+  plain,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "relative w-full flex items-center",
+        isGroupDivider ? "my-4" : "my-2",
+        isActive ? "opacity-100" : "opacity-50",
+        getJustifyClass(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"
+        )
+      }
+    ),
+    children
+  );
+}
+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;
+  if (lineOnly && !children) {
+    return /* @__PURE__ */ React.createElement(
+      DividerLine,
+      {
+        dashed,
+        plain,
+        isGroupDivider,
+        isActive,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    DividerWrapper,
+    {
+      isGroupDivider,
+      isActive,
+      orientation,
+      dashed,
+      plain,
+      className,
+      style
+    },
+    getDividerContent({
+      name,
+      children,
+      control: controlToUse,
+      optionLabels,
+      ButtonComponent,
+      buttonSize,
+      buttonClassName,
+      isActive,
+      plain
+    })
+  );
+}
+CustomDivider.displayName = "CustomDivider";
+
+export { CustomDivider };

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

@@ -60,7 +60,8 @@ function buildColumns({
           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,
@@ -76,15 +77,7 @@ function buildColumns({
           ArrowUpDown,
           {
             size: 16,
-            className: "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 });
-              }
-            }
+            className: "text-grey-400 group-hover:text-grey-950"
           }
         )
       );

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,55 @@
+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,
+  placeholder = "Pick a date",
+  value,
+  onChange,
+  format: format$1 = "PPP",
+  status
+}) {
+  const [internalDate, setInternalDate] = React.useState();
+  const isControlled = value !== void 0 && onChange !== void 0;
+  const date = isControlled ? value : internalDate;
+  const handleSelect = (selected) => {
+    if (isControlled && onChange) {
+      onChange(selected);
+    } else {
+      setInternalDate(selected);
+    }
+  };
+  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,
+        status
+      )
+    },
+    /* @__PURE__ */ React.createElement(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+    date ? format(date, format$1, { locale }) : /* @__PURE__ */ React.createElement("span", null, placeholder)
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-auto p-0", align: "start" }, /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      mode: "single",
+      selected: date,
+      onSelect: handleSelect,
+      autoFocus: true,
+      locale
+    }
+  )));
+}
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/dist/components/Pagination/Pagination.js

@@ -184,7 +184,8 @@ const Pagination = ({
   totalRowsSelected = 0,
   onChangePerPage,
   className,
-  activeColor
+  activeColor,
+  showPerPageSelector = true
 }) => {
   const mapPaginationItem = (item) => {
     const componentProps = {
@@ -218,7 +219,7 @@ const Pagination = ({
     {
       className: cn("flex items-center justify-between mt-6 gap-4", className)
     },
-    /* @__PURE__ */ React.createElement(
+    showPerPageSelector && /* @__PURE__ */ React.createElement(
       PaginationPerPage,
       {
         onChangePerPage,

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";

package/dist/components/TagInput/TagInput.js

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Tag } from '../Tag/Tag.js';
+import { textareaVariants } from '../Textarea/Textarea.js';
+import { Typography } from '../Typography/Typography.js';
+
+function TagInput({
+  value,
+  onRemove,
+  placeholder = "Nenhum item selecionado",
+  disabled = false,
+  readOnly = false,
+  className = "",
+  variant = "default",
+  radius = "default",
+  ...props
+}) {
+  const ref = React.useRef(null);
+  const [maxVisibleCount, setMaxVisibleCount] = React.useState(
+    null
+  );
+  const [hiddenCount, setHiddenCount] = React.useState(0);
+  const calculateMaxVisible = React.useCallback(() => {
+    const container = ref.current;
+    if (!container) return;
+    const children = Array.from(container.children).filter(
+      (el) => el.dataset.tag === "true"
+    );
+    const lines = [];
+    children.forEach((c) => {
+      const t = c.offsetTop;
+      if (!lines.includes(t)) lines.push(t);
+    });
+    if (lines.length <= 2) {
+      setMaxVisibleCount(children.length);
+      setHiddenCount(0);
+      return;
+    }
+    const second = lines[1];
+    let count = 0;
+    for (const c of children) {
+      if (c.offsetTop > second) break;
+      count++;
+    }
+    setMaxVisibleCount(count);
+    setHiddenCount(children.length - count);
+  }, []);
+  React.useLayoutEffect(() => {
+    if (maxVisibleCount === null) {
+      const id = window.requestAnimationFrame(calculateMaxVisible);
+      return () => window.cancelAnimationFrame(id);
+    }
+  }, [maxVisibleCount, calculateMaxVisible]);
+  const visibleCount = maxVisibleCount === null ? value.length : maxVisibleCount;
+  const displayTags = value.slice(0, visibleCount);
+  const currentHiddenCount = Math.max(value.length - visibleCount, 0);
+  React.useEffect(() => {
+    setHiddenCount(currentHiddenCount);
+  }, [currentHiddenCount]);
+  const textareaRadius = radius === "full" ? "large" : radius;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        textareaVariants({ variant, radius: textareaRadius }),
+        "flex flex-wrap items-start min-h-10 gap-1 py-2 px-3",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      tabIndex: 0,
+      "aria-disabled": disabled,
+      style: { resize: "none", cursor: disabled ? "not-allowed" : "text" },
+      ...props
+    },
+    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
+    displayTags.map((item) => /* @__PURE__ */ React.createElement(Tag, { key: item.value, "data-tag": "true", color: "blue" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
+      X,
+      {
+        className: "w-4 h-4 cursor-pointer",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove(item.value);
+        },
+        "aria-label": `Remover ${item.label}`,
+        tabIndex: 0
+      }
+    ))),
+    hiddenCount > 0 && /* @__PURE__ */ React.createElement(Tag, { color: "grey", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-600" }, "+", hiddenCount), !readOnly && /* @__PURE__ */ React.createElement(
+      X,
+      {
+        className: "w-4 h-4 cursor-pointer text-grey-500 hover:text-grey-700",
+        onClick: (e) => {
+          e.stopPropagation();
+          const next = value[visibleCount]?.value;
+          if (next) onRemove(next);
+        },
+        "aria-label": "Remover pr\xF3xima tag oculta",
+        tabIndex: 0
+      }
+    ))
+  );
+}
+
+export { TagInput };