@rehagro/ui 1.0.16 → 1.0.17

package/dist/index.d.mts

@@ -656,6 +656,24 @@ declare const Typography: React__default.ForwardRefExoticComponent<React__defaul
     as?: keyof JSX.IntrinsicElements;
 } & React__default.RefAttributes<HTMLElement>>;
 
+type PaginationProps = {
+    /** Current active page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Maximum number of page buttons to show (default: 5) */
+    maxVisible?: number;
+    /** Show prev/next arrows (default: true) */
+    showArrows?: boolean;
+    /** Custom class for the container */
+    className?: string;
+    /** Disable pagination */
+    disabled?: boolean;
+};
+declare const Pagination: React__default.ForwardRefExoticComponent<PaginationProps & React__default.RefAttributes<HTMLDivElement>>;
+
 type ContainerProps = React__default.HTMLAttributes<HTMLDivElement> & {
     /**
      * Remove o padding horizontal lateral.
@@ -757,4 +775,8 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
 declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };
+declare function CaretLeftIcon({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+declare function CaretRightIcon({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, CaretLeftIcon, CaretRightIcon, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };

package/dist/index.d.ts

@@ -656,6 +656,24 @@ declare const Typography: React__default.ForwardRefExoticComponent<React__defaul
     as?: keyof JSX.IntrinsicElements;
 } & React__default.RefAttributes<HTMLElement>>;
 
+type PaginationProps = {
+    /** Current active page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Maximum number of page buttons to show (default: 5) */
+    maxVisible?: number;
+    /** Show prev/next arrows (default: true) */
+    showArrows?: boolean;
+    /** Custom class for the container */
+    className?: string;
+    /** Disable pagination */
+    disabled?: boolean;
+};
+declare const Pagination: React__default.ForwardRefExoticComponent<PaginationProps & React__default.RefAttributes<HTMLDivElement>>;
+
 type ContainerProps = React__default.HTMLAttributes<HTMLDivElement> & {
     /**
      * Remove o padding horizontal lateral.
@@ -757,4 +775,8 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
 declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };
+declare function CaretLeftIcon({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+declare function CaretRightIcon({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, CaretLeftIcon, CaretRightIcon, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, Pagination, type PaginationProps, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, Typography, type TypographyColor, type TypographyProps, type TypographyVariant, WarningIcon, useToast };

package/dist/index.js

@@ -239,6 +239,54 @@ var CloseIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
   }
 );
+function CaretLeftIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M10 12L6 8L10 4",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function CaretRightIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6 4L10 8L6 12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 var variantIconMap = {
   info: InfoIcon,
   warning: WarningIcon,
@@ -2726,6 +2774,159 @@ var Typography = React8.forwardRef(function Typography2({ variant = "body", colo
     children
   );
 });
+function getVisiblePages(currentPage, totalPages, maxVisible) {
+  if (totalPages <= maxVisible) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const half = Math.floor(maxVisible / 2);
+  let start = currentPage - half;
+  let end = currentPage + half;
+  if (start < 1) {
+    start = 1;
+    end = maxVisible;
+  }
+  if (end > totalPages) {
+    end = totalPages;
+    start = totalPages - maxVisible + 1;
+  }
+  const pages = [];
+  if (start > 1) {
+    pages.push(1);
+    if (start > 2) {
+      pages.push("ellipsis-start");
+    }
+  }
+  for (let i = start; i <= end; i++) {
+    if (i >= 1 && i <= totalPages && !pages.includes(i)) {
+      pages.push(i);
+    }
+  }
+  if (end < totalPages) {
+    if (end < totalPages - 1) {
+      pages.push("ellipsis-end");
+    }
+    if (!pages.includes(totalPages)) {
+      pages.push(totalPages);
+    }
+  }
+  return pages;
+}
+var Pagination = React8.forwardRef(function Pagination2({
+  currentPage,
+  totalPages,
+  onPageChange,
+  maxVisible = 5,
+  showArrows = true,
+  className = "",
+  disabled = false
+}, ref) {
+  const visiblePages = React8.useMemo(
+    () => getVisiblePages(currentPage, totalPages, maxVisible),
+    [currentPage, totalPages, maxVisible]
+  );
+  const canGoPrev = currentPage > 1;
+  const canGoNext = currentPage < totalPages;
+  const handlePageClick = (page) => {
+    if (!disabled && page !== currentPage && page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+  const handlePrev = () => {
+    if (!disabled && canGoPrev) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (!disabled && canGoNext) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  if (totalPages <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ref,
+      role: "navigation",
+      "aria-label": "Pagina\xE7\xE3o",
+      className: [
+        "rh-flex rh-flex-row rh-items-center rh-justify-end rh-gap-1",
+        disabled ? "rh-opacity-50 rh-pointer-events-none" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        showArrows && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handlePrev,
+            disabled: !canGoPrev || disabled,
+            "aria-label": "P\xE1gina anterior",
+            className: [
+              "rh-w-8 rh-h-8 rh-rounded-full rh-flex rh-items-center rh-justify-center",
+              "rh-bg-transparent",
+              "rh-transition-colors rh-duration-150",
+              "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
+              canGoPrev && !disabled ? "rh-text-gray-700 hover:rh-bg-gray-100 rh-cursor-pointer" : "rh-text-gray-300 rh-cursor-not-allowed"
+            ].filter(Boolean).join(" "),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CaretLeftIcon, { className: "rh-w-4 rh-h-4" })
+          }
+        ),
+        visiblePages.map((page, index) => {
+          if (page === "ellipsis-start" || page === "ellipsis-end") {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "rh-w-8 rh-h-8 rh-flex rh-items-center rh-justify-center rh-text-gray-500 rh-font-display rh-text-xs rh-font-bold",
+                "aria-hidden": "true",
+                children: "..."
+              },
+              page
+            );
+          }
+          const isActive = page === currentPage;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handlePageClick(page),
+              disabled,
+              "aria-label": `P\xE1gina ${page}`,
+              "aria-current": isActive ? "page" : void 0,
+              className: [
+                "rh-w-8 rh-h-8 rh-rounded-full rh-flex rh-items-center rh-justify-center",
+                "rh-font-display rh-text-xs rh-font-bold rh-leading-5",
+                "rh-transition-colors rh-duration-150",
+                "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-1",
+                isActive ? "rh-bg-primary rh-text-white" : "rh-bg-transparent rh-text-gray-700 hover:rh-bg-gray-100 rh-cursor-pointer"
+              ].filter(Boolean).join(" "),
+              children: page
+            },
+            page
+          );
+        }),
+        showArrows && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleNext,
+            disabled: !canGoNext || disabled,
+            "aria-label": "Pr\xF3xima p\xE1gina",
+            className: [
+              "rh-w-8 rh-h-8 rh-rounded-full rh-flex rh-items-center rh-justify-center",
+              "rh-bg-transparent",
+              "rh-transition-colors rh-duration-150",
+              "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
+              canGoNext && !disabled ? "rh-text-gray-700 hover:rh-bg-gray-100 rh-cursor-pointer" : "rh-text-gray-300 rh-cursor-not-allowed"
+            ].filter(Boolean).join(" "),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CaretRightIcon, { className: "rh-w-4 rh-h-4" })
+          }
+        )
+      ]
+    }
+  );
+});
 var Container = React8.forwardRef(
   function Container2({ fluid = false, className = "", children, ...rest }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2901,6 +3102,8 @@ exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
+exports.CaretLeftIcon = CaretLeftIcon;
+exports.CaretRightIcon = CaretRightIcon;
 exports.Checkbox = Checkbox;
 exports.CloseIcon = CloseIcon;
 exports.Container = Container;
@@ -2912,6 +3115,7 @@ exports.GridItem = GridItem;
 exports.IconButton = IconButton;
 exports.InfoIcon = InfoIcon;
 exports.NeutralIcon = NeutralIcon;
+exports.Pagination = Pagination;
 exports.PlusIcon = PlusIcon;
 exports.ProgressBar = ProgressBar;
 exports.RehagroProvider = RehagroProvider;