lecom-ui 5.2.81 → 5.2.83

package/README.md

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

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,380 @@
+import * as React from 'react';
+import { DayPicker, useDayPicker, labelPrevious, labelNext } from 'react-day-picker';
+import { buttonVariants, Button } from '../Button/Button.js';
+import { cn } from '../../lib/utils.js';
+import { differenceInCalendarDays } from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+function Calendar({
+  className,
+  showOutsideDays = true,
+  showYearSwitcher = true,
+  yearRange = 12,
+  numberOfMonths,
+  components,
+  ...props
+}) {
+  const [navView, setNavView] = React.useState("days");
+  const [displayYears, setDisplayYears] = React.useState(
+    React.useMemo(() => {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      return {
+        from: currentYear - Math.floor(yearRange / 2 - 1),
+        to: currentYear + Math.ceil(yearRange / 2)
+      };
+    }, [yearRange])
+  );
+  const { onNextClick, onPrevClick, startMonth, endMonth } = props;
+  const columnsDisplayed = navView === "years" ? 1 : numberOfMonths;
+  const _monthsClassName = cn("relative flex", props.monthsClassName);
+  const _monthCaptionClassName = cn(
+    "relative mx-10 flex h-7 items-center justify-center",
+    props.monthCaptionClassName
+  );
+  const _weekdaysClassName = cn("flex flex-row", props.weekdaysClassName);
+  const _weekdayClassName = cn(
+    "w-8 text-sm font-normal text-muted-foreground",
+    props.weekdayClassName
+  );
+  const _monthClassName = cn("w-full", props.monthClassName);
+  const _captionClassName = cn(
+    "relative flex items-center justify-center pt-1",
+    props.captionClassName
+  );
+  const _captionLabelClassName = cn(
+    "truncate text-sm font-medium",
+    props.captionLabelClassName
+  );
+  const buttonNavClassName = buttonVariants({
+    variant: "outlined",
+    className: "absolute h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+  });
+  const _buttonNextClassName = cn(
+    buttonNavClassName,
+    "right-0",
+    props.buttonNextClassName
+  );
+  const _buttonPreviousClassName = cn(
+    buttonNavClassName,
+    "left-0",
+    props.buttonPreviousClassName
+  );
+  const _navClassName = cn("flex items-start", props.navClassName);
+  const _monthGridClassName = cn("mx-auto mt-4", props.monthGridClassName);
+  const _weekClassName = cn("mt-2 flex w-max items-start", props.weekClassName);
+  const _dayClassName = cn(
+    "flex size-8 flex-1 items-center justify-center p-0 text-sm",
+    props.dayClassName
+  );
+  const _dayButtonClassName = cn(
+    buttonVariants({ variant: "ghost" }),
+    "size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100",
+    props.dayButtonClassName
+  );
+  const buttonRangeClassName = "bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground";
+  const _rangeStartClassName = cn(
+    buttonRangeClassName,
+    "day-range-start rounded-s-md",
+    props.rangeStartClassName
+  );
+  const _rangeEndClassName = cn(
+    buttonRangeClassName,
+    "day-range-end rounded-e-md",
+    props.rangeEndClassName
+  );
+  const _rangeMiddleClassName = cn(
+    "bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground",
+    props.rangeMiddleClassName
+  );
+  const _selectedClassName = cn(
+    "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
+    props.selectedClassName
+  );
+  const _todayClassName = cn(
+    "[&>button]:bg-accent [&>button]:text-accent-foreground",
+    props.todayClassName
+  );
+  const _outsideClassName = cn(
+    "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    props.outsideClassName
+  );
+  const _disabledClassName = cn(
+    "text-muted-foreground opacity-50",
+    props.disabledClassName
+  );
+  const _hiddenClassName = cn("invisible flex-1", props.hiddenClassName);
+  return /* @__PURE__ */ React.createElement(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      style: {
+        width: 248.8 * (columnsDisplayed ?? 1) + "px"
+      },
+      classNames: {
+        months: _monthsClassName,
+        month_caption: _monthCaptionClassName,
+        weekdays: _weekdaysClassName,
+        weekday: _weekdayClassName,
+        month: _monthClassName,
+        caption: _captionClassName,
+        caption_label: _captionLabelClassName,
+        button_next: _buttonNextClassName,
+        button_previous: _buttonPreviousClassName,
+        nav: _navClassName,
+        month_grid: _monthGridClassName,
+        week: _weekClassName,
+        day: _dayClassName,
+        day_button: _dayButtonClassName,
+        range_start: _rangeStartClassName,
+        range_middle: _rangeMiddleClassName,
+        range_end: _rangeEndClassName,
+        selected: _selectedClassName,
+        today: _todayClassName,
+        outside: _outsideClassName,
+        disabled: _disabledClassName,
+        hidden: _hiddenClassName
+      },
+      components: {
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          return /* @__PURE__ */ React.createElement(Icon, { className: "h-4 w-4" });
+        },
+        Nav: ({ className: className2 }) => /* @__PURE__ */ React.createElement(
+          Nav,
+          {
+            className: className2,
+            displayYears,
+            navView,
+            setDisplayYears,
+            startMonth,
+            endMonth,
+            onPrevClick,
+            onNextClick
+          }
+        ),
+        CaptionLabel: (props2) => /* @__PURE__ */ React.createElement(
+          CaptionLabel,
+          {
+            showYearSwitcher,
+            navView,
+            setNavView,
+            displayYears,
+            ...props2
+          }
+        ),
+        MonthGrid: ({ className: className2, children, ...props2 }) => /* @__PURE__ */ React.createElement(
+          MonthGrid,
+          {
+            className: className2,
+            displayYears,
+            startMonth,
+            endMonth,
+            navView,
+            setNavView,
+            ...props2
+          },
+          children
+        ),
+        ...components
+      },
+      numberOfMonths: columnsDisplayed,
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+function Nav({
+  className,
+  navView,
+  startMonth,
+  endMonth,
+  displayYears,
+  setDisplayYears,
+  onPrevClick,
+  onNextClick
+}) {
+  const { nextMonth, previousMonth, goToMonth } = useDayPicker();
+  const isPreviousDisabled = (() => {
+    if (navView === "years") {
+      return startMonth && differenceInCalendarDays(
+        new Date(displayYears.from - 1, 0, 1),
+        startMonth
+      ) < 0 || endMonth && differenceInCalendarDays(
+        new Date(displayYears.from - 1, 0, 1),
+        endMonth
+      ) > 0;
+    }
+    return !previousMonth;
+  })();
+  const isNextDisabled = (() => {
+    if (navView === "years") {
+      return startMonth && differenceInCalendarDays(
+        new Date(displayYears.to + 1, 0, 1),
+        startMonth
+      ) < 0 || endMonth && differenceInCalendarDays(
+        new Date(displayYears.to + 1, 0, 1),
+        endMonth
+      ) > 0;
+    }
+    return !nextMonth;
+  })();
+  const handlePreviousClick = React.useCallback(() => {
+    if (!previousMonth) return;
+    if (navView === "years") {
+      setDisplayYears((prev) => ({
+        from: prev.from - (prev.to - prev.from + 1),
+        to: prev.to - (prev.to - prev.from + 1)
+      }));
+      onPrevClick?.(
+        new Date(
+          displayYears.from - (displayYears.to - displayYears.from),
+          0,
+          1
+        )
+      );
+      return;
+    }
+    goToMonth(previousMonth);
+    onPrevClick?.(previousMonth);
+  }, [previousMonth, goToMonth]);
+  const handleNextClick = React.useCallback(() => {
+    if (!nextMonth) return;
+    if (navView === "years") {
+      setDisplayYears((prev) => ({
+        from: prev.from + (prev.to - prev.from + 1),
+        to: prev.to + (prev.to - prev.from + 1)
+      }));
+      onNextClick?.(
+        new Date(
+          displayYears.from + (displayYears.to - displayYears.from),
+          0,
+          1
+        )
+      );
+      return;
+    }
+    goToMonth(nextMonth);
+    onNextClick?.(nextMonth);
+  }, [goToMonth, nextMonth]);
+  return /* @__PURE__ */ React.createElement("nav", { className: cn("flex items-center", className) }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "outlined",
+      className: "absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+      type: "button",
+      tabIndex: isPreviousDisabled ? void 0 : -1,
+      disabled: isPreviousDisabled,
+      "aria-label": navView === "years" ? `Go to the previous ${displayYears.to - displayYears.from + 1} years` : labelPrevious(previousMonth),
+      onClick: handlePreviousClick
+    },
+    /* @__PURE__ */ React.createElement(ChevronLeft, { className: "h-4 w-4" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "outlined",
+      className: "absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+      type: "button",
+      tabIndex: isNextDisabled ? void 0 : -1,
+      disabled: isNextDisabled,
+      "aria-label": navView === "years" ? `Go to the next ${displayYears.to - displayYears.from + 1} years` : labelNext(nextMonth),
+      onClick: handleNextClick
+    },
+    /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-4 w-4" })
+  ));
+}
+function CaptionLabel({
+  children,
+  showYearSwitcher,
+  navView,
+  setNavView,
+  displayYears,
+  ...props
+}) {
+  if (!showYearSwitcher) return /* @__PURE__ */ React.createElement("span", { ...props }, children);
+  return /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: "h-7 w-full truncate text-sm font-medium",
+      variant: "ghost",
+      size: "small",
+      onClick: () => setNavView((prev) => prev === "days" ? "years" : "days")
+    },
+    navView === "days" ? children : displayYears.from + " - " + displayYears.to
+  );
+}
+function MonthGrid({
+  className,
+  children,
+  displayYears,
+  startMonth,
+  endMonth,
+  navView,
+  setNavView,
+  ...props
+}) {
+  if (navView === "years") {
+    return /* @__PURE__ */ React.createElement(
+      YearGrid,
+      {
+        displayYears,
+        startMonth,
+        endMonth,
+        setNavView,
+        navView,
+        className,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement("table", { className, ...props }, children);
+}
+function YearGrid({
+  className,
+  displayYears,
+  startMonth,
+  endMonth,
+  setNavView,
+  navView,
+  ...props
+}) {
+  const { goToMonth, selected } = useDayPicker();
+  return /* @__PURE__ */ React.createElement("div", { className: cn("grid grid-cols-4 gap-y-2", className), ...props }, Array.from(
+    { length: displayYears.to - displayYears.from + 1 },
+    (_, i) => {
+      const isBefore = differenceInCalendarDays(
+        new Date(displayYears.from + i, 11, 31),
+        startMonth
+      ) < 0;
+      const isAfter = differenceInCalendarDays(
+        new Date(displayYears.from + i, 0, 0),
+        endMonth
+      ) > 0;
+      const isDisabled = isBefore || isAfter;
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          key: i,
+          className: cn(
+            "h-7 w-full text-sm font-normal text-foreground",
+            displayYears.from + i === (/* @__PURE__ */ new Date()).getFullYear() && "bg-accent font-medium text-accent-foreground"
+          ),
+          variant: "ghost",
+          onClick: () => {
+            setNavView("days");
+            goToMonth(
+              new Date(
+                displayYears.from + i,
+                selected?.getMonth() ?? 0
+              )
+            );
+          },
+          disabled: navView === "years" ? isDisabled : void 0
+        },
+        displayYears.from + i
+      );
+    }
+  ));
+}
+
+export { Calendar };

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,94 @@
+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';
+
+const collapseTriggerVariants = cva(
+  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
+  {
+    variants: {
+      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"
+      },
+      ghost: {
+        true: "bg-transparent border-none",
+        false: "border-t-none border-grey-400"
+      }
+    },
+    defaultVariants: {
+      size: "large",
+      ghost: false
+    }
+  }
+);
+const CollapseRoot = AccordionPrimitive.Root;
+const CollapseItem = AccordionPrimitive.Item;
+const CollapsePanel = React.forwardRef(
+  ({
+    header,
+    children,
+    extra,
+    expandIconPosition = "start",
+    size = "large",
+    ghost = false,
+    disabled = false,
+    className,
+    ...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",
+        {
+          className: cn(
+            "flex flex-1 items-center justify-between gap-4 w-full",
+            expandIconPosition === "end" ? "flex-row-reverse" : ""
+          )
+        },
+        /* @__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,
+      {
+        className: cn(
+          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
+    )
+  )
+);
+CollapsePanel.displayName = "CollapsePanel";
+const Collapse = Object.assign(CollapseRoot, {
+  Panel: CollapsePanel
+});
+
+export { Collapse, collapseTriggerVariants };

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../Button/Button.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
+import { Typography } from '../Typography/Typography.js';
+
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecione...",
+  disabled = false,
+  notFoundContent = "Nenhuma op\xE7\xE3o encontrada.",
+  status = "default",
+  searchTerm = "Pesquisar...",
+  triggerClassName,
+  contentClassName
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const filterOptions = React.useCallback(
+    (opts) => {
+      const searchLower = search.toLowerCase();
+      return opts.map((item) => {
+        if ("options" in item) {
+          const filtered = item.options.filter(
+            (opt) => opt.label.toLowerCase().includes(searchLower) || opt.value.toLowerCase().includes(searchLower)
+          );
+          if (!filtered.length) return null;
+          return { ...item, options: filtered };
+        }
+        return item.label.toLowerCase().includes(searchLower) || item.value.toLowerCase().includes(searchLower) ? item : null;
+      }).filter(Boolean);
+    },
+    [search]
+  );
+  const filteredOptions = React.useMemo(
+    () => !search ? options : filterOptions(options),
+    [options, search, filterOptions]
+  );
+  const selectedLabel = options.flatMap((opt) => "options" in opt ? opt.options : [opt]).find((opt) => opt.value === value)?.label || placeholder;
+  React.useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true, className: cn(contentClassName) }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      role: "combobox",
+      "aria-expanded": open,
+      className: cn(
+        triggerClassName,
+        "w-full h-10 bg-white rounded-md px-3 text-left shadow-sm flex items-center justify-between transition",
+        status === "error" ? "border border-red-500 hover:ring-1 hover:ring-red-500 focus:ring-1 focus:ring-red-500" : "border border-gray-300 hover:ring-1 hover:ring-blue-600 focus:ring-1 focus:ring-blue-600",
+        !value && "text-gray-400",
+        disabled && "opacity-50 pointer-events-none",
+        "hover:bg-white focus:!bg-white active:!bg-white"
+      ),
+      disabled
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: cn(
+          value ? "text-black" : "text-gray-400",
+          "font-normal truncate max-w-[calc(100%-2.5rem)]"
+        )
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "body-medium-400" }, selectedLabel)
+    ),
+    open ? /* @__PURE__ */ React.createElement(
+      ChevronUpIcon,
+      {
+        className: "ml-2 h-4 w-4 shrink-0 text-gray-400",
+        color: "black"
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      ChevronDownIcon,
+      {
+        className: "ml-2 h-4 w-4 shrink-0 text-gray-400",
+        color: "black"
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0" }, /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
+    CommandInput,
+    {
+      placeholder: searchTerm,
+      value: search,
+      onValueChange: setSearch
+    }
+  ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent), filteredOptions.map(
+    (item, idx) => "options" in item ? /* @__PURE__ */ React.createElement(CommandGroup, { key: `${item.label}-${idx}`, heading: item.label }, item.options.map((opt) => /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: opt.value,
+        onSelect: () => {
+          if (opt.disabled) return;
+          onChange(opt.value === value ? null : opt.value);
+          setOpen(false);
+        },
+        className: cn(
+          opt.value === value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
+          opt.disabled && "opacity-50 pointer-events-none"
+        )
+      },
+      opt.label
+    ))) : /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: item.value,
+        onSelect: () => {
+          if (item.disabled) return;
+          onChange(item.value === value ? null : item.value);
+          setOpen(false);
+        },
+        className: cn(
+          item.value === value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
+          item.disabled && "opacity-50 pointer-events-none"
+        )
+      },
+      item.label
+    )
+  )))));
+}
+
+export { Combobox };