lecom-ui 5.2.12 → 5.2.13

package/dist/range-picker.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { parse, isValid, format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { Calendar } from 'lucide-react';
+import { cn } from './lib/utils.js';
+import { Calendar as Calendar$1 } from './calendar.js';
+import { Input } from './input.js';
+import { Popover, PopoverTrigger, PopoverContent } from './popover.js';
+
+function RangePicker({
+  selected,
+  onSelect,
+  format: format$1 = "dd/MM/yyyy",
+  placeholder = "",
+  className = "",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (e) => {
+    setInputValue(e.currentTarget.value);
+    const range = (e.currentTarget.value || "").split(" - ");
+    const from = range[0];
+    const to = range[1];
+    const date = {
+      from: parse(from, format$1, /* @__PURE__ */ new Date()),
+      to: parse(to, format$1, /* @__PURE__ */ new Date())
+    };
+    if (isValid(date.from) && isValid(date.to) && typeof onSelect === "function") ;
+  };
+  const handleSelect = (range) => {
+    if (range?.from && range.to) {
+      setInputValue(
+        `${format(range.from, format$1)} - ${format(range.to, format$1)}`
+      );
+      setIsOpen(false);
+    } else {
+      setInputValue("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            onClick: (e) => {
+              if (isOpen) {
+                e.preventDefault();
+              }
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 absolute right-[10px] top-[10px]" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder,
+                  value: inputValue,
+                  onChange: handleInputChange,
+                  className: cn("pr-8", className)
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx(
+              Calendar$1,
+              {
+                mode: "range",
+                locale: ptBR,
+                selected,
+                onSelect: handleSelect,
+                numberOfMonths: 2,
+                ...props
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+RangePicker.displayName = "RangePicker";
+
+export { RangePicker };

package/dist/scroll-area.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from './lib/utils.js';
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/dist/search-bar.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { X, Loader, Search } from 'lucide-react';
+import { useDebounce } from './hook/useDebounce.js';
+import { cn } from './lib/utils.js';
+import { Input } from './input.js';
+
+const variantButtonClasses = {
+  "rounded-right": "border-r rounded-l",
+  "rounded-left": "border-l rounded-r"
+};
+const SearchBar = forwardRef((props, ref) => {
+  const {
+    onKeyPressSearch,
+    onChangeSearch,
+    className,
+    variant = "default",
+    size = "default",
+    pressButton = false,
+    disabled = false,
+    side = "right",
+    placeholder,
+    classNameIcon,
+    iconFill = "#7A7A7A",
+    defaultValue = "",
+    allowClear = false,
+    loading = false,
+    addonAfter,
+    addonBefore,
+    ...restProps
+  } = props;
+  const [query, setQuery] = useState(defaultValue);
+  const debouncedValue = useDebounce(query, query.length > 0 ? 600 : 0);
+  useEffect(() => {
+    setQuery(defaultValue);
+  }, [defaultValue]);
+  useEffect(() => {
+    if (onChangeSearch && (debouncedValue.length >= 3 || debouncedValue.length === 0)) {
+      const event = {
+        target: { value: debouncedValue }
+      };
+      onChangeSearch(event);
+    }
+  }, [debouncedValue, onChangeSearch]);
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setQuery(value);
+    if (onKeyPressSearch) {
+      onKeyPressSearch(value.trim().toLowerCase());
+    }
+  };
+  const handleKeyPress = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (onKeyPressSearch) {
+        onKeyPressSearch(query.trim().toLowerCase());
+      }
+    }
+  };
+  const handleSearch = () => {
+    if (onKeyPressSearch) {
+      onKeyPressSearch(query.trim().toLowerCase());
+    }
+  };
+  const clearSearch = () => {
+    setQuery("");
+    if (onChangeSearch) {
+      const event = { target: { value: "" } };
+      onChangeSearch(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center w-full border border-gray-300 rounded-lg`,
+      children: [
+        addonBefore && /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 ", children: addonBefore }),
+        /* @__PURE__ */ jsxs("div", { className: `relative flex-grow`, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...restProps,
+              ref,
+              type: "text",
+              placeholder,
+              value: query,
+              onChange: handleSearchChange,
+              onKeyDown: handleKeyPress,
+              variant,
+              size,
+              disabled: disabled || loading,
+              className: cn(
+                `text-[#262626] placeholder:text-[#C5C0BF] focus:border-transparent focus:shadow-brand-blue`,
+                {
+                  "pl-14 pr-10": side === "left" && pressButton,
+                  "pl-12 pr-10": side === "left" && !pressButton,
+                  "pr-16": side === "right" && !pressButton,
+                  "pr-20": side === "right" && pressButton
+                },
+                className
+              )
+            }
+          ),
+          allowClear && query.length > 0 && !loading && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute flex items-center justify-center top-1/2 transform -translate-y-1/2 h-full",
+                {
+                  "right-10": side === "right" && !pressButton,
+                  "right-14": side === "right" && pressButton,
+                  "right-4": side === "left"
+                }
+              ),
+              onClick: clearSearch,
+              style: { zIndex: 2 },
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                `absolute flex items-center justify-center top-1/2 transform -translate-y-1/2 h-full px-3 ${pressButton && `${side === "left" ? variantButtonClasses["rounded-right"] : variantButtonClasses["rounded-left"]}`}`,
+                {
+                  "left-0": side === "left",
+                  "right-0": side === "right" && !loading,
+                  "cursor-pointer": pressButton,
+                  "cursor-default": !pressButton
+                },
+                pressButton && classNameIcon
+              ),
+              children: loading ? /* @__PURE__ */ jsx(Loader, { className: "animate-spin h-5 w-5" }) : typeof pressButton !== "boolean" ? /* @__PURE__ */ jsx("span", { className: "truncate", style: { maxWidth: "15ch" }, children: pressButton }) : /* @__PURE__ */ jsx(
+                Search,
+                {
+                  onClick: handleSearch,
+                  style: { color: pressButton && iconFill ? iconFill : void 0 },
+                  className: "h-5 w-5 text-gray-scale48"
+                }
+              )
+            }
+          )
+        ] }),
+        addonAfter && /* @__PURE__ */ jsx("div", { className: "flex items-center px-2", children: addonAfter })
+      ]
+    }
+  );
+});
+SearchBar.displayName = "SearchBar";
+
+export { SearchBar };

package/dist/select.js

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { CaretSortIcon, ChevronUpIcon, ChevronDownIcon, CheckIcon } from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Database } from 'lucide-react';
+import { cn } from './lib/utils.js';
+import { Input } from './input.js';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(
+  ({ className, children, position = "popper", isSearch = false, ...props }, ref) => {
+    const [search, setSearch] = React.useState("");
+    const [filteredChildren, setFilteredChildren] = React.useState([children]);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+      const filtered = React.Children.toArray(children).filter((child) => {
+        if (React.isValidElement(child) && child.props.children) {
+          return child.props.children.toLowerCase().includes(search.toLowerCase());
+        }
+        return false;
+      });
+      setFilteredChildren(filtered);
+    }, [search, children]);
+    React.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [search, filteredChildren]);
+    return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      SelectPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "relative z-50 max-h-96 min-w-[8rem] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        ),
+        position,
+        ...props,
+        children: [
+          isSearch && /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              ref: inputRef,
+              placeholder: "Search...",
+              className: "w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+          filteredChildren.length > 0 ? /* @__PURE__ */ jsx(
+            SelectPrimitive.Viewport,
+            {
+              className: cn(
+                "p-1",
+                position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              ),
+              children: React.Children.toArray(
+                filteredChildren
+              )
+            }
+          ) : /* @__PURE__ */ jsxs(SelectPrimitive.Viewport, { className: "flex flex-col items-center gap-2 p-3 text-gray-400", children: [
+            /* @__PURE__ */ jsx(Database, { className: "w-5 h-5" }),
+            "No Data"
+          ] }),
+          /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/separator.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from './lib/utils.js';
+
+const Separator = React.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/dist/sheet.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+const SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };