lecom-ui 5.2.82 → 5.2.83

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/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/index.d.ts

@@ -36,6 +36,7 @@ export { TFunction, default as i18n } from 'i18next';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as vaul from 'vaul';
 import { Drawer as Drawer$1 } from 'vaul';
+import { Locale } from 'date-fns';
 export { ptBR } from 'date-fns/locale/pt-BR';
 export { enUS } from 'date-fns/locale/en-US';
 export { es } from 'date-fns/locale/es';
@@ -1154,5 +1155,15 @@ declare const Collapse: React$1.ForwardRefExoticComponent<(AccordionPrimitive.Ac
     Panel: React$1.ForwardRefExoticComponent<CollapsePanelProps & React$1.RefAttributes<HTMLDivElement>>;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapse, Combobox, CustomDivider, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Steps, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, collapseTriggerVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
+interface DatePickerProps {
+    className?: string;
+    variant?: 'outlined' | 'filled' | 'ghost' | null;
+    locale?: Locale;
+}
+declare function DatePicker({ className, variant, locale, }: DatePickerProps): React$1.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapse, Combobox, CustomDivider, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Spin, Steps, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, collapseTriggerVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
 export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxGroup, ComboboxOption, ComboboxProps, CustomStyles$1 as CustomStyles, DataTableProps, DialogContentProps, ErrorEmptyDisplayProps, ExpandIconPosition, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagProps, TagValue, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

package/dist/index.js

@@ -48,12 +48,7 @@ export { Combobox } from './components/Combobox/Combobox.js';
 export { TagInput } from './components/TagInput/TagInput.js';
 export { CustomDivider } from './components/CustomDivider/CustomDivider.js';
 export { Collapse, collapseTriggerVariants } from './components/Collapse/Collapse.js';
-import 'react';
-import 'react-day-picker';
-import 'clsx';
-import 'tailwind-merge';
-import 'date-fns';
-import 'lucide-react';
+export { DatePicker } from './components/DatePicker/DatePicker.js';
 export { ptBR } from 'date-fns/locale/pt-BR';
 export { enUS } from 'date-fns/locale/en-US';
 export { es } from 'date-fns/locale/es';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.2.82",
+  "version": "5.2.83",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",
@@ -125,4 +125,4 @@
     "react-is": "^19.0.0-rc-69d4b800-20241021"
   },
   "packageManager": "yarn@4.1.0+sha512.5b7bc055cad63273dda27df1570a5d2eb4a9f03b35b394d3d55393c2a5560a17f5cef30944b11d6a48bcbcfc1c3a26d618aae77044774c529ba36cb771ad5b0f"
-}
+}