lecom-ui 5.0.11 → 5.0.13

package/dist/pagination.js

@@ -0,0 +1,474 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
+import { cn } from './lib/utils.js';
+import { buttonVariants } from './button.js';
+import { Input } from './input.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select.js';
+
+const PaginationSection = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+PaginationSection.displayName = "PaginationSection";
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    className: cn("flex flex-row items-center gap-1", className),
+    ...props
+  }
+));
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+PaginationItem.displayName = "PaginationItem";
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size
+      }),
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+const PaginationPrevious = ({
+  hiddenText = false,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    size: "default",
+    className: cn(!hiddenText && "gap-1 pl-2.5", className),
+    ...props,
+    children: [
+      children,
+      !children && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" }),
+        !hiddenText && /* @__PURE__ */ jsx("span", { children: "Previous" })
+      ] })
+    ]
+  }
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationNext = ({
+  className,
+  hiddenText = false,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    size: "default",
+    className: cn(!hiddenText && "gap-1 pl-2.5", className),
+    ...props,
+    children: [
+      children,
+      !children && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" }),
+        !hiddenText && /* @__PURE__ */ jsx("span", { children: "Previous" })
+      ] })
+    ]
+  }
+);
+PaginationNext.displayName = "PaginationNext";
+const PaginationEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(DotsHorizontalIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+    ]
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+const Pagination = ({
+  align,
+  current,
+  defaultCurrent = 1,
+  defaultPageSize = 10,
+  disabled = false,
+  hideOnSinglePage = false,
+  itemRender,
+  pageSize,
+  pageSizeOptions = [5, 10, 20, 50, 100],
+  responsive,
+  showLessItems = false,
+  showQuickJumper = false,
+  showSizeChanger = false,
+  showTotal,
+  simple = false,
+  size = "default",
+  total,
+  onChange,
+  onShowSizeChange,
+  textGoToPage = ""
+}) => {
+  const [internalCurrent, setInternalCurrent] = React.useState(
+    current || defaultCurrent
+  );
+  const [internalPageSize, setInternalPageSize] = React.useState(
+    pageSize || defaultPageSize
+  );
+  const [hoveredEllipsis, setHoveredEllipsis] = React.useState(null);
+  const totalPages = Math.ceil(total / internalPageSize);
+  React.useEffect(() => {
+    if (current !== void 0) {
+      setInternalCurrent(current);
+    }
+  }, [current]);
+  React.useEffect(() => {
+    if (pageSize !== void 0) {
+      setInternalPageSize(pageSize);
+    }
+  }, [pageSize]);
+  const handlePageChange = (page, disabled2 = false) => {
+    if (!disabled2) {
+      if (!current) {
+        setInternalCurrent(page);
+      }
+      if (onChange) {
+        onChange(page, internalPageSize);
+      }
+    }
+  };
+  const handleSizeChange = (value) => {
+    const newSize = parseInt(value, 10);
+    setInternalPageSize(newSize);
+    if (onShowSizeChange) {
+      onShowSizeChange(internalCurrent, newSize);
+    }
+    if (onChange) {
+      onChange(internalCurrent, newSize);
+    }
+  };
+  const handleQuickJump = (event) => {
+    if (event.key === "Enter") {
+      const page = Math.min(Math.max(1, internalCurrent), totalPages);
+      handlePageChange(page);
+    }
+  };
+  if (hideOnSinglePage && totalPages <= 1) {
+    return null;
+  }
+  const renderItem = (page, type) => {
+    const originalElement = /* @__PURE__ */ jsx("span", { children: page });
+    return itemRender ? itemRender(page, type, originalElement) : originalElement;
+  };
+  const renderPages = () => {
+    if (simple) {
+      const isReadOnly = typeof simple === "object" && simple.readOnly;
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center", children: isReadOnly ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-center w-10 h-6",
+              size === "small" && "text-xs",
+              disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79"
+            ),
+            children: internalCurrent
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              disabled && "cursor-not-allowed text-gray-scale96"
+            ),
+            children: "/"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-center w-10 h-6",
+              size === "small" && "text-xs",
+              disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79"
+            ),
+            children: totalPages
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            className: cn(
+              "text-center border rounded px-2 py-1 w-14 h-6 border-gray-scale79",
+              size === "small" && "text-xs",
+              disabled && "cursor-not-allowed text-gray-scale79 bg-gray-scale96 border-gray-scale79 hover:text-gray-scale79 hover:bg-gray-scale96"
+            ),
+            value: internalCurrent,
+            onChange: (e) => {
+              const value = e.target.value.replace(/[^0-9]/g, "");
+              setInternalCurrent(value ? Number(value) : 0);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                handleQuickJump(e);
+              }
+            },
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              disabled && "cursor-not-allowed text-gray-scale96"
+            ),
+            children: "/"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "px-2 py-1",
+              size === "small" && "px-1 h-[26px] text-xs",
+              disabled && "cursor-not-allowed text-gray-scale79"
+            ),
+            children: totalPages
+          }
+        )
+      ] }) });
+    }
+    const renderPageItem = (page) => /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationLink,
+      {
+        className: cn(
+          "w-8 h-8 bg-white text-black font-normal cursor-pointer",
+          page === internalCurrent && "border border-blue-dark text-blue-dark hover:text-blue-dark hover:bg-white font-bold",
+          disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79 hover:bg-white",
+          page === internalCurrent && disabled && "cursor-not-allowed text-gray-scale79 bg-gray-scale96 border-gray-scale96 hover:text-gray-scale79 hover:bg-gray-scale96",
+          size === "small" && "w-6 h-[26px] text-xs"
+        ),
+        onClick: () => typeof page === "number" && handlePageChange(page, disabled),
+        children: typeof page === "number" ? renderItem(page, "page") : "..."
+      }
+    ) }, page);
+    const renderEllipsis = (key, direction) => /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationLink,
+      {
+        className: cn(
+          "w-8 h-8 cursor-pointer bg-white hover:bg-white",
+          size === "small" && "px-1 h-[26px] text-xs",
+          disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79 hover:bg-white"
+        ),
+        onMouseEnter: () => setHoveredEllipsis(key),
+        onMouseLeave: () => setHoveredEllipsis(null),
+        onClick: () => {
+          if (!disabled) {
+            const quantityPages = showLessItems ? 3 : 5;
+            if (direction === "left") {
+              handlePageChange(
+                Math.max(1, internalCurrent - quantityPages),
+                disabled
+              );
+            } else {
+              handlePageChange(
+                Math.min(totalPages, internalCurrent + quantityPages),
+                disabled
+              );
+            }
+          }
+        },
+        children: hoveredEllipsis === key && !disabled ? direction === "left" ? /* @__PURE__ */ jsx(ChevronsLeftIcon, { className: "w-4 h-4 text-blue-dark" }) : /* @__PURE__ */ jsx(ChevronsRightIcon, { className: "w-4 h-4 text-blue-dark" }) : /* @__PURE__ */ jsx(PaginationEllipsis, {})
+      }
+    ) }, key);
+    const pages = [];
+    const pagesArray = Array.from(
+      { length: totalPages },
+      (_, index) => index + 1
+    );
+    if (showLessItems && totalPages > 5) {
+      const startPages = [2].filter((page) => page <= totalPages);
+      const endPages = [totalPages - 1].filter(
+        (page) => page > 3 && page <= totalPages
+      );
+      const middlePage = internalCurrent;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderPageItem(1),
+        internalCurrent <= 3 && startPages.map((page) => renderPageItem(page)),
+        internalCurrent > 3 && renderEllipsis("start-ellipsis", "left"),
+        internalCurrent > 2 && internalCurrent < totalPages - 1 && renderPageItem(middlePage),
+        internalCurrent < totalPages - 2 && renderEllipsis("end-ellipsis", "right"),
+        internalCurrent >= totalPages - 2 && endPages.map((page) => renderPageItem(page)),
+        renderPageItem(totalPages)
+      ] });
+    }
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      const lastFourPages = pagesArray.slice(-4);
+      const arrayEndPages = internalCurrent === lastFourPages[0] ? [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1] : [totalPages - 3, totalPages - 2, totalPages - 1];
+      const endPages = arrayEndPages;
+      const firstFourPages = pagesArray.slice(0, 4);
+      const arrayStartPages = internalCurrent === firstFourPages[firstFourPages.length - 1] ? [2, 3, 4, 5] : [2, 3, 4];
+      const startPages = arrayStartPages.filter((page) => page <= totalPages);
+      const middlePage = [];
+      if (internalCurrent > totalPages - 4) {
+        middlePage.push(1);
+        middlePage.push("...");
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          middlePage.push(i);
+        }
+      } else {
+        middlePage.push(internalCurrent - 1);
+        middlePage.push(internalCurrent);
+        middlePage.push(internalCurrent + 1);
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderPageItem(1),
+        internalCurrent <= 4 && startPages.map((page) => renderPageItem(page)),
+        internalCurrent > 4 && renderEllipsis("start-ellipsis", "left"),
+        internalCurrent > 4 && internalCurrent < totalPages - 3 && middlePage.map(
+          (page) => typeof page === "number" && renderPageItem(page)
+        ),
+        internalCurrent < totalPages - 3 && renderEllipsis("end-ellipsis", "right"),
+        internalCurrent >= totalPages - 3 && endPages.map((page) => renderPageItem(page)),
+        renderPageItem(totalPages)
+      ] });
+    }
+    return pages.filter((page) => typeof page === "number").map((page) => renderPageItem(page));
+  };
+  return /* @__PURE__ */ jsxs(
+    PaginationSection,
+    {
+      className: cn(
+        "flex items-center gap-2",
+        align && `justify-${align}`,
+        size === "small" && "text-sm",
+        responsive && "w-full"
+      ),
+      children: [
+        showTotal && /* @__PURE__ */ jsx("div", { className: cn("mr-2", size === "small" && "text-xs"), children: showTotal(total, [
+          (internalCurrent - 1) * internalPageSize + 1,
+          Math.min(internalCurrent * internalPageSize, total)
+        ]) }),
+        /* @__PURE__ */ jsxs(PaginationContent, { className: "flex justify-center items-center", children: [
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationPrevious,
+            {
+              className: cn(
+                "px-2 h-8 bg-white text-black cursor-pointer",
+                internalCurrent === 1 && "cursor-not-allowed opacity-50 hover:bg-transparent",
+                disabled && "cursor-not-allowed text-gray-scale79 border-gray-scale96 hover:text-gray-scale79 hover:bg-white",
+                size === "small" && "px-1 h-[26px] text-xs"
+              ),
+              onClick: () => handlePageChange(
+                Math.max(1, internalCurrent - 1),
+                disabled || internalCurrent === 1
+              ),
+              children: itemRender ? renderItem(internalCurrent - 1, "prev") : /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
+            }
+          ) }),
+          renderPages(),
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationNext,
+            {
+              className: cn(
+                "px-2 h-8 bg-white text-black cursor-pointer",
+                internalCurrent === totalPages && "cursor-not-allowed opacity-50 hover:bg-white",
+                disabled && "cursor-not-allowed text-gray-scale79 border-gray-scale96 hover:text-gray-scale79 hover:bg-white",
+                size === "small" && "px-1 h-[26px] text-xs"
+              ),
+              onClick: () => handlePageChange(
+                Math.min(totalPages, internalCurrent + 1),
+                internalCurrent === totalPages || disabled
+              ),
+              children: itemRender ? renderItem(internalCurrent + 1, "next") : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
+            }
+          ) })
+        ] }),
+        showSizeChanger && totalPages >= 7 && /* @__PURE__ */ jsxs(
+          Select,
+          {
+            onValueChange: handleSizeChange,
+            value: internalPageSize.toString(),
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  className: cn(
+                    "flex gap-2 ml-2 border rounded w-fit h-8",
+                    size === "small" && "px-2 h-[26px] text-xs",
+                    disabled && "cursor-not-allowed text-gray-scale60 bg-gray-scale96 border-gray-scale79 hover:text-gray-scale60 hover:bg-gray-scale96"
+                  ),
+                  children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Selecione..." })
+                }
+              ),
+              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsx(SelectItem, { value: size2.toString(), children: `${size2.toString()} / page` }, size2)) })
+            ]
+          }
+        ),
+        showQuickJumper && /* @__PURE__ */ jsxs(Fragment, { children: [
+          textGoToPage && /* @__PURE__ */ jsx("div", { className: cn("mx-2", size === "small" && "text-xs"), children: textGoToPage }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              className: cn(
+                "h-8 w-12 ml-2 border rounded px-2",
+                size === "small" && "px-2 h-[26px] text-xs",
+                disabled && "cursor-not-allowed text-gray-scale60 bg-gray-scale96 border-gray-scale79 hover:text-gray-scale60 hover:bg-gray-scale96",
+                textGoToPage && "ml-0"
+              ),
+              value: disabled ? "" : internalCurrent,
+              onChange: (e) => {
+                const value = e.target.value.replace(/[^0-9]/g, "");
+                setInternalCurrent(value ? Number(value) : 0);
+              },
+              onBlur: (e) => {
+                const value = e.target.value.replace(/[^0-9]/g, "");
+                if (Number(value) === 0) {
+                  setInternalCurrent(1);
+                }
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleQuickJump(e);
+                }
+              },
+              disabled
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+Pagination.displayName = "Pagination";
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationSection };

package/dist/plugin/extend.ts

@@ -1,78 +1,78 @@
-const extend = {
-  colors: {
-    background: 'hsl(var(--background))',
-    foreground: 'hsl(var(--foreground))',
-    card: {
-      DEFAULT: 'hsl(var(--card))',
-      foreground: 'hsl(var(--card-foreground))',
-    },
-    popover: {
-      DEFAULT: 'hsl(var(--popover))',
-      foreground: 'hsl(var(--popover-foreground))',
-    },
-    primary: {
-      DEFAULT: 'hsl(var(--primary))',
-      foreground: 'hsl(var(--primary-foreground))',
-    },
-    secondary: {
-      DEFAULT: 'hsl(var(--secondary))',
-      foreground: 'hsl(var(--secondary-foreground))',
-    },
-    muted: {
-      DEFAULT: 'hsl(var(--muted))',
-      foreground: 'hsl(var(--muted-foreground))',
-    },
-    accent: {
-      DEFAULT: 'hsl(var(--accent))',
-      foreground: 'hsl(var(--accent-foreground))',
-    },
-    destructive: {
-      DEFAULT: 'hsl(var(--destructive))',
-      foreground: 'hsl(var(--destructive-foreground))',
-    },
-    border: 'hsl(var(--border))',
-    input: 'hsl(var(--input))',
-    ring: 'hsl(var(--ring))',
-    chart: {
-      1: 'hsl(var(--chart-1))',
-      2: 'hsl(var(--chart-2))',
-      3: 'hsl(var(--chart-3))',
-      4: 'hsl(var(--chart-4))',
-      5: 'hsl(var(--chart-5))',
-      6: 'hsl(var(--chart-6))',
-      7: 'hsl(var(--chart-7))',
-      8: 'hsl(var(--chart-8))',
-    },
-    sidebar: {
-      DEFAULT: 'hsl(var(--sidebar-background))',
-      foreground: 'hsl(var(--sidebar-foreground))',
-      primary: 'hsl(var(--sidebar-primary))',
-      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-      accent: 'hsl(var(--sidebar-accent))',
-      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-      border: 'hsl(var(--sidebar-border))',
-      ring: 'hsl(var(--sidebar-ring))',
-    },
-  },
-  borderRadius: {
-    lg: 'var(--radius)',
-    md: 'calc(var(--radius) - 2px)',
-    sm: 'calc(var(--radius) - 4px)',
-  },
-  keyframes: {
-    'accordion-down': {
-      from: { height: '0' },
-      to: { height: 'var(--radix-accordion-content-height)' },
-    },
-    'accordion-up': {
-      from: { height: 'var(--radix-accordion-content-height)' },
-      to: { height: '0' },
-    },
-  },
-  animation: {
-    'accordion-down': 'accordion-down 0.2s ease-out',
-    'accordion-up': 'accordion-up 0.2s ease-out',
-  },
-};
-
-export { extend };
+const extend = {
+  colors: {
+    background: 'hsl(var(--background))',
+    foreground: 'hsl(var(--foreground))',
+    card: {
+      DEFAULT: 'hsl(var(--card))',
+      foreground: 'hsl(var(--card-foreground))',
+    },
+    popover: {
+      DEFAULT: 'hsl(var(--popover))',
+      foreground: 'hsl(var(--popover-foreground))',
+    },
+    primary: {
+      DEFAULT: 'hsl(var(--primary))',
+      foreground: 'hsl(var(--primary-foreground))',
+    },
+    secondary: {
+      DEFAULT: 'hsl(var(--secondary))',
+      foreground: 'hsl(var(--secondary-foreground))',
+    },
+    muted: {
+      DEFAULT: 'hsl(var(--muted))',
+      foreground: 'hsl(var(--muted-foreground))',
+    },
+    accent: {
+      DEFAULT: 'hsl(var(--accent))',
+      foreground: 'hsl(var(--accent-foreground))',
+    },
+    destructive: {
+      DEFAULT: 'hsl(var(--destructive))',
+      foreground: 'hsl(var(--destructive-foreground))',
+    },
+    border: 'hsl(var(--border))',
+    input: 'hsl(var(--input))',
+    ring: 'hsl(var(--ring))',
+    chart: {
+      1: 'hsl(var(--chart-1))',
+      2: 'hsl(var(--chart-2))',
+      3: 'hsl(var(--chart-3))',
+      4: 'hsl(var(--chart-4))',
+      5: 'hsl(var(--chart-5))',
+      6: 'hsl(var(--chart-6))',
+      7: 'hsl(var(--chart-7))',
+      8: 'hsl(var(--chart-8))',
+    },
+    sidebar: {
+      DEFAULT: 'hsl(var(--sidebar-background))',
+      foreground: 'hsl(var(--sidebar-foreground))',
+      primary: 'hsl(var(--sidebar-primary))',
+      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+      accent: 'hsl(var(--sidebar-accent))',
+      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+      border: 'hsl(var(--sidebar-border))',
+      ring: 'hsl(var(--sidebar-ring))',
+    },
+  },
+  borderRadius: {
+    lg: 'var(--radius)',
+    md: 'calc(var(--radius) - 2px)',
+    sm: 'calc(var(--radius) - 4px)',
+  },
+  keyframes: {
+    'accordion-down': {
+      from: { height: '0' },
+      to: { height: 'var(--radix-accordion-content-height)' },
+    },
+    'accordion-up': {
+      from: { height: 'var(--radix-accordion-content-height)' },
+      to: { height: '0' },
+    },
+  },
+  animation: {
+    'accordion-down': 'accordion-down 0.2s ease-out',
+    'accordion-up': 'accordion-up 0.2s ease-out',
+  },
+};
+
+export { extend };