@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/types/components/Navbar/Burger.d.ts

@@ -0,0 +1,69 @@
+import { HTMLAttributes } from "react";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+
+//#region src/components/Navbar/Burger.d.ts
+/**
+ * Props for the Burger menu component
+ */
+interface BurgerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Whether the burger menu is in active/open state */
+  isActive?: boolean;
+}
+/**
+ * Burger Menu Component
+ *
+ * An animated hamburger menu icon that transforms between closed and open states.
+ * Commonly used in mobile navigation to toggle menu visibility.
+ *
+ * Features:
+ * - Smooth CSS transitions between states (300ms duration)
+ * - Accessible with proper ARIA attributes
+ * - Screen reader support with descriptive labels
+ * - Role-based interaction (switch role for toggle behavior)
+ * - Responsive sizing (40px × 40px clickable area)
+ * - Classic three-line hamburger design
+ *
+ * Animation States:
+ * - Closed: Three horizontal parallel lines
+ * - Open: Top and bottom lines rotate to form an X, middle line fades out
+ *
+ * Accessibility Features:
+ * - `role="switch"` indicates toggle behavior
+ * - `aria-expanded` reflects current menu state
+ * - `aria-checked` provides current selection state
+ * - `aria-controls` links to controlled menu element
+ * - Dynamic `aria-label` describes current action
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const [isMenuOpen, setIsMenuOpen] = useState(false);
+ *
+ * <Burger
+ *   isActive={isMenuOpen}
+ *   onClick={() => setIsMenuOpen(!isMenuOpen)}
+ * />
+ * ```
+ *
+ * @example
+ * With custom styling:
+ * ```tsx
+ * <Burger
+ *   isActive={isMenuOpen}
+ *   onClick={toggleMenu}
+ *   className="lg:hidden"
+ *   style={{ zIndex: 1000 }}
+ * />
+ * ```
+ *
+ * @param props - Burger component props
+ * @returns Animated burger menu JSX element
+ */
+declare const Burger: ({
+  isActive,
+  className,
+  ...props
+}: BurgerProps) => react_jsx_runtime20.JSX.Element;
+//#endregion
+export { Burger };
+//# sourceMappingURL=Burger.d.ts.map

package/dist/types/components/Navbar/Burger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Burger.d.ts","names":[],"sources":["../../../../src/components/Navbar/Burger.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAA4C,UAMlC,WAAA,SAAoB,cAAe,CAAA,cAAf,CAAA,CAAA;EA8DjB;EAAU,QAAA,CAAA,EAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAV;;;;GAIV,gBAAW,mBAAA,CAAA,GAAA,CAAA"}

package/dist/types/components/Navbar/DesktopNavbar.d.ts

@@ -0,0 +1,99 @@
+import { TabSelectorItemProps } from "../TabSelector/TabSelector.js";
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+
+//#region src/components/Navbar/DesktopNavbar.d.ts
+
+/**
+ * Props for the DesktopNavbar component
+ * @template T - The tab props type extending TabProps
+ */
+type DesktopNavbarProps<T$1 extends TabSelectorItemProps> = {
+  /** Logo component or element displayed on the left side */
+  logo: ReactNode;
+  /** Array of navigation sections as tab elements */
+  sections: ReactElement<T$1>[];
+  /** Right-aligned items (e.g., user menu, search, settings) */
+  rightItems?: ReactNode;
+  /** Currently selected tab key for highlighting active state */
+  selectedChoice: T$1['key'];
+};
+/**
+ * Desktop Navigation Bar Component
+ *
+ * A horizontal navigation bar optimized for desktop and tablet viewports.
+ * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,
+ * and right-aligned utility items.
+ *
+ * Features:
+ * - Sticky positioning with z-index layering (z-50)
+ * - Semi-transparent backdrop with blur effect for modern glass-morphism design
+ * - Responsive spacing that adapts across screen sizes
+ * - Horizontal scrollable tabs for overflow content
+ * - Left-to-right layout: Logo → Navigation → Utility Items
+ * - Integrated with TabSelector for consistent tab behavior
+ *
+ * Layout Structure:
+ * ```
+ * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]
+ * ```
+ *
+ * Responsive Behavior:
+ * - Base: 2vw margin-left, 3-unit gap between tabs
+ * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs
+ * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs
+ * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens
+ *
+ * Styling Features:
+ * - Semi-transparent card background (`bg-card/80`)
+ * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)
+ * - Backdrop blur effect for content behind navbar
+ * - Horizontal overflow scrolling for tab content
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const navigationTabs = [
+ *   { key: 'home', label: 'Home', href: '/' },
+ *   { key: 'products', label: 'Products', href: '/products' },
+ *   { key: 'about', label: 'About', href: '/about' }
+ * ];
+ *
+ * <DesktopNavbar
+ *   logo={<CompanyLogo />}
+ *   sections={navigationTabs}
+ *   selectedChoice="home"
+ *   rightItems={<UserProfileMenu />}
+ * />
+ * ```
+ *
+ * @example
+ * With multiple right items:
+ * ```tsx
+ * <DesktopNavbar
+ *   logo={<Logo />}
+ *   sections={navSections}
+ *   selectedChoice={currentPage}
+ *   rightItems={
+ *     <>
+ *       <SearchButton />
+ *       <NotificationBell />
+ *       <UserMenu />
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @template T - Tab properties type extending TabProps for type safety
+ * @param props - DesktopNavbar component props
+ * @returns Horizontal desktop navigation JSX element
+ */
+declare const DesktopNavbar: <T extends TabSelectorItemProps>({
+  logo,
+  sections,
+  rightItems,
+  selectedChoice
+}: DesktopNavbarProps<T>) => react_jsx_runtime19.JSX.Element;
+//#endregion
+export { DesktopNavbar };
+//# sourceMappingURL=DesktopNavbar.d.ts.map

package/dist/types/components/Navbar/DesktopNavbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopNavbar.d.ts","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAOwB;KAMnB,kBAA6B,CAAA,YAAA,oBAAA,CAAA,GAAA;EAE1B;EAEiB,IAAA,EAFjB,SAEiB;EAAb;EAEG,QAAA,EAFH,YAEG,CAFU,GAEV,CAAA,EAAA;EAEG;EAAC,UAAA,CAAA,EAFJ,SAEI;EAyEN;EAA2B,cAAA,EAzEtB,GAyEsB,CAAA,KAAA,CAAA;CAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAjD,0BAA2B;;;;;GAKrC,mBAAmB,OAAE,mBAAA,CAAA,GAAA,CAAA"}

package/dist/types/components/Navbar/MobileNavbar.d.ts

@@ -0,0 +1,113 @@
+import { TabSelectorItemProps } from "../TabSelector/TabSelector.js";
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+
+//#region src/components/Navbar/MobileNavbar.d.ts
+
+/**
+ * Props for the MobileNavbar component
+ * @template T - The tab props type extending TabProps
+ */
+type MobileNavbarProps<T$1 extends TabSelectorItemProps> = {
+  /** Logo component or element displayed in the header */
+  logo: ReactNode;
+  /** Additional content displayed at the top of expanded mobile menu */
+  topChildren?: ReactNode;
+  /** Navigation sections displayed in the top area of expanded menu */
+  topSections?: ReactElement<T$1>[];
+  /** Additional content displayed at the bottom of expanded mobile menu */
+  bottomChildren?: ReactNode;
+  /** Navigation sections displayed in the bottom area of expanded menu */
+  bottomSections?: ReactElement<T$1>[];
+  /** Right-aligned items in the collapsed header (e.g., search, notifications) */
+  rightItems?: ReactNode;
+};
+/**
+ * Mobile Navigation Bar Component
+ *
+ * A sophisticated mobile-first navigation component with collapsible full-screen menu,
+ * scroll-aware behavior, and smooth animations. Optimized for touch interactions and
+ * mobile user experience patterns.
+ *
+ * Features:
+ * - Collapsible hamburger menu with full-screen overlay
+ * - Auto-hide on scroll down, show on scroll up for screen space optimization
+ * - Background scroll prevention when menu is open
+ * - Staggered animations for smooth menu item reveals
+ * - Flexible content areas (top/bottom children and sections)
+ * - Responsive layout with viewport-aware sizing
+ * - Backdrop blur effects for modern glass-morphism design
+ *
+ * Layout Structure:
+ * ```
+ * [Logo] ----------- [Right Items] [Burger]
+ *           (when expanded)
+ * ┌─────────────────────────────────────────┐
+ * │ [Top Children]                          │
+ * │ [Top Sections - Navigation Items]       │
+ * │ [Bottom Sections - Navigation Items]    │
+ * │ [Bottom Children]                       │
+ * └─────────────────────────────────────────┘
+ * ```
+ *
+ * Behavioral Features:
+ * - Sticky positioning with dynamic hide/show based on scroll direction
+ * - Background scroll locking when menu is expanded
+ * - Click outside to close expanded menu
+ * - Smooth height animations with MaxHeightSmoother
+ * - Intelligent burger button visibility (only shown if sections exist)
+ *
+ * Animation Details:
+ * - Menu items animate in with staggered timing (70ms delay between items)
+ * - Exit animations are reversed with 50ms stagger
+ * - Initial delay of 200ms before items start animating in
+ * - Full viewport height menu with dynamic height calculation
+ *
+ * @example
+ * Basic mobile navbar:
+ * ```tsx
+ * <MobileNavbar
+ *   logo={<MobileLogo />}
+ *   topSections={primaryNavItems}
+ *   rightItems={<SearchIcon />}
+ * />
+ * ```
+ *
+ * @example
+ * Full-featured mobile navbar:
+ * ```tsx
+ * <MobileNavbar
+ *   logo={<Logo />}
+ *   topChildren={<WelcomeMessage />}
+ *   topSections={mainNavItems}
+ *   bottomSections={utilityNavItems}
+ *   bottomChildren={<UserProfile />}
+ *   rightItems={
+ *     <>
+ *       <NotificationIcon />
+ *       <SearchIcon />
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * Accessibility Features:
+ * - Menu expanded state communicated via aria-expanded
+ * - Focus management and keyboard navigation support
+ * - Screen reader friendly with semantic nav structure
+ *
+ * @template T - Tab properties type extending TabProps for type safety
+ * @param props - MobileNavbar component props
+ * @returns Mobile navigation with collapsible full-screen menu
+ */
+declare const MobileNavbar: <T extends TabSelectorItemProps>({
+  logo,
+  topChildren,
+  topSections,
+  bottomChildren,
+  bottomSections,
+  rightItems
+}: MobileNavbarProps<T>) => react_jsx_runtime17.JSX.Element;
+//#endregion
+export { MobileNavbar };
+//# sourceMappingURL=MobileNavbar.d.ts.map

package/dist/types/components/Navbar/MobileNavbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNavbar.d.ts","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAO2D;KAOtD,iBAA4B,CAAA,YAAA,oBAAA,CAAA,GAAA;EAEzB;EAEQ,IAAA,EAFR,SAEQ;EAEa;EAAb,WAAA,CAAA,EAFA,SAEA;EAEG;EAEa,WAAA,CAAA,EAJhB,YAIgB,CAJH,GAIG,CAAA,EAAA;EAAb;EAEJ,cAAA,CAAA,EAJI,SAIJ;EAAS;EAqGX,cAAA,CAuFZ,EA9LkB,YA8LlB,CA9L+B,GA8L/B,CAAA,EAAA;EAvFsC;EAAsB,UAAA,CAAA,EArG9C,SAqG8C;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAhD,yBAA0B;;;;;;;GAOpC,kBAAkB,OAAE,mBAAA,CAAA,GAAA,CAAA"}

package/dist/types/components/Navbar/index.d.ts

@@ -0,0 +1,100 @@
+import { TabSelectorItemProps } from "../TabSelector/TabSelector.js";
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+
+//#region src/components/Navbar/index.d.ts
+
+/**
+ * Props for the responsive Navbar component
+ * @template T - The tab props type extending TabProps
+ */
+type NavbarProps<T$1 extends TabSelectorItemProps> = {
+  /** Logo component or element to display in navbar */
+  logo: ReactNode;
+  /** Currently selected tab key for active state management */
+  selectedChoice: T$1['key'];
+  /** Navigation sections displayed on desktop layout */
+  desktopSections?: ReactElement<T$1>[];
+  /** Additional content displayed at top of mobile navbar */
+  mobileTopChildren?: ReactNode;
+  /** Navigation sections displayed at top of mobile navbar */
+  mobileTopSections?: ReactElement<T$1>[];
+  /** Additional content displayed at bottom of mobile navbar */
+  mobileBottomChildren?: ReactNode;
+  /** Navigation sections displayed at bottom of mobile navbar */
+  mobileBottomSections?: ReactElement<T$1>[];
+  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */
+  rightItemsDesktop?: ReactNode;
+  /** Right-aligned items for mobile navbar */
+  rightItemsMobile?: ReactNode;
+};
+/**
+ * Responsive Navbar Component
+ *
+ * A highly adaptable navigation component that automatically switches between desktop and mobile
+ * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.
+ *
+ * Features:
+ * - Automatic responsive switching at 'lg' breakpoint (1024px)
+ * - Separate section configurations for desktop and mobile layouts
+ * - Support for logo placement and right-aligned utility items
+ * - Generic typing for tab properties and selected states
+ * - Mobile-specific top/bottom content areas for enhanced mobile UX
+ * - Hydration-safe rendering with useIsMounted hook
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const navSections = [
+ *   { key: 'home', label: 'Home', href: '/' },
+ *   { key: 'about', label: 'About', href: '/about' }
+ * ];
+ *
+ * <Navbar
+ *   logo={<Logo />}
+ *   selectedChoice="home"
+ *   desktopSections={navSections}
+ *   mobileTopSections={navSections}
+ *   rightItemsDesktop={<UserMenu />}
+ * />
+ * ```
+ *
+ * @example
+ * Advanced mobile configuration:
+ * ```tsx
+ * <Navbar
+ *   logo={<Logo />}
+ *   selectedChoice={activeTab}
+ *   desktopSections={mainNavItems}
+ *   mobileTopSections={primaryMobileNavItems}
+ *   mobileTopChildren={<SearchBar />}
+ *   mobileBottomSections={secondaryMobileNavItems}
+ *   mobileBottomChildren={<UserProfile />}
+ *   rightItemsDesktop={<DesktopActions />}
+ *   rightItemsMobile={<MobileActions />}
+ * />
+ * ```
+ *
+ * Responsive Behavior:
+ * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout
+ * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout
+ * - Automatic detection with no flash of unstyled content
+ *
+ * @template T - Tab properties type extending TabProps for type safety
+ * @param props - Navbar component props
+ * @returns Responsive navbar JSX element
+ */
+declare const Navbar: <T extends TabSelectorItemProps>({
+  logo,
+  mobileTopChildren,
+  desktopSections,
+  mobileTopSections,
+  mobileBottomChildren,
+  mobileBottomSections,
+  rightItemsDesktop,
+  rightItemsMobile,
+  selectedChoice
+}: NavbarProps<T>) => react_jsx_runtime18.JSX.Element;
+//#endregion
+export { Navbar };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAI2D;KAQtD,WAAsB,CAAA,YAAA,oBAAA,CAAA,GAAA;EAEnB;EAEU,IAAA,EAFV,SAEU;EAEe;EAAb,cAAA,EAFF,GAEE,CAAA,KAAA,CAAA;EAEE;EAEa,eAAA,CAAA,EAJf,YAIe,CAJF,GAIE,CAAA,EAAA;EAAb;EAEG,iBAAA,CAAA,EAJH,SAIG;EAEa;EAAb,iBAAA,CAAA,EAJH,YAIG,CAJU,GAIV,CAAA,EAAA;EAEH;EAED,oBAAA,CAAA,EANI,SAMJ;EAAS;EA2DjB,oBAiCZ,CAAA,EAhGwB,YAgGxB,CAhGqC,GAgGrC,CAAA,EAAA;EAjCgC;EAAsB,iBAAA,CAAA,EA7DjC,SA6DiC;EAAA;EAAA,gBAAA,CAAA,EA3DlC,SA2DkC;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA1C,mBAAoB;;;;;;;;;;GAU9B,YAAY,OAAE,mBAAA,CAAA,GAAA,CAAA"}

package/dist/types/components/Navbar/useNavigation.d.ts

@@ -0,0 +1,92 @@
+//#region src/components/Navbar/useNavigation.d.ts
+/**
+ * Navigation Actions Hook
+ *
+ * A comprehensive hook for managing navigation interactions and scroll-based section detection.
+ * Provides automatic active section detection based on scroll position and handles smooth
+ * scrolling navigation behaviors.
+ *
+ * Features:
+ * - Automatic active section detection based on scroll position
+ * - Smooth scrolling to sections within the same page
+ * - Logo click handling with home navigation
+ * - Section click handling with conditional scrolling vs navigation
+ * - Passive scroll event listeners for optimal performance
+ * - Viewport-aware active section calculation (using screen height / 4 offset)
+ *
+ * Active Section Detection:
+ * - Monitors all `<section>` elements on the page
+ * - Calculates which section is currently in the "active" zone
+ * - Active zone is defined as the top 25% of the viewport
+ * - Updates activeSection state as user scrolls
+ *
+ * Navigation Behaviors:
+ * - Logo click: Scrolls to top if on home page, navigates to home if on other pages
+ * - Section click: Smooth scrolls if on same page, executes callback if different page
+ * - All scrolling uses smooth behavior for better UX
+ *
+ * @example
+ * Basic usage in navigation component:
+ * ```tsx
+ * const { activeSection, onClickLogo, onClickSection } = useNavActions();
+ *
+ * // In navigation items
+ * const navItems = sections.map(section => (
+ *   <TabSelectorItem
+ *     key={section.id}
+ *     isActive={activeSection === section.id}
+ *     onClick={() => onClickSection(section.id, section.url, section.onClick)}
+ *   >
+ *     {section.label}
+ *   </TabSelectorItem>
+ * ));
+ *
+ * // In logo
+ * <Logo onClick={() => onClickLogo(navigate)} />
+ * ```
+ *
+ * @example
+ * Advanced usage with routing:
+ * ```tsx
+ * const { activeSection, onClickLogo, onClickSection } = useNavActions();
+ * const navigate = useNavigate();
+ *
+ * const handleLogoClick = () => {
+ *   onClickLogo((url) => {
+ *     navigate(url);
+ *     // Additional logic like analytics
+ *     trackEvent('logo_click');
+ *   });
+ * };
+ *
+ * const handleSectionClick = (sectionId: string) => {
+ *   onClickSection(
+ *     sectionId,
+ *     `/page#${sectionId}`,
+ *     () => {
+ *       navigate(`/page#${sectionId}`);
+ *       trackEvent('section_navigation', { sectionId });
+ *     }
+ *   );
+ * };
+ * ```
+ *
+ * Performance Considerations:
+ * - Uses passive scroll event listeners to prevent blocking
+ * - Automatically cleans up event listeners on unmount
+ * - Efficiently queries DOM elements using native selectors
+ * - Calculates section positions dynamically for accuracy
+ *
+ * @returns Object containing navigation state and action handlers
+ */
+declare const useNavActions: () => {
+  /** Currently active section ID, null if no section is active */
+  activeSection: string;
+  /** Handler for logo click interactions */
+  onClickLogo: (onClick: (url: string) => void) => void;
+  /** Handler for section navigation clicks */
+  onClickSection: (sectionId: string, url?: string, onClick?: () => void) => void;
+};
+//#endregion
+export { useNavActions };
+//# sourceMappingURL=useNavigation.d.ts.map

package/dist/types/components/Navbar/useNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigation.d.ts","names":[],"sources":["../../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":[],"mappings":";;AAgGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa"}

package/dist/types/components/Pagination/NumberItemsSelector.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+
+//#region src/components/Pagination/NumberItemsSelector.d.ts
+type NumberItemsSelectorProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  min?: number;
+  max?: number;
+};
+declare const NumberItemsSelector: FC<NumberItemsSelectorProps>;
+//#endregion
+export { NumberItemsSelector, NumberItemsSelectorProps };
+//# sourceMappingURL=NumberItemsSelector.d.ts.map

package/dist/types/components/Pagination/NumberItemsSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberItemsSelector.d.ts","names":[],"sources":["../../../../src/components/Pagination/NumberItemsSelector.tsx"],"sourcesContent":[],"mappings":";;;KAMY,wBAAA;;EAAA,aAAA,EAAA,CAAA,KAAA,EAAA,MAAwB,EAAA,GAAA,IAAA;EAOvB,GAAA,CAAA,EAAA,MAAA;;;cAAA,qBAAqB,GAAG"}

package/dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,33 @@
+import { FC, HTMLAttributes } from "react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/Pagination/Pagination.d.ts
+declare const paginationVariants: (props?: {
+  size?: "sm" | "md" | "lg";
+  color?: "text" | "primary" | "secondary" | "neutral" | "destructive";
+  variant?: "default" | "bordered" | "ghost";
+} & class_variance_authority_types0.ClassProp) => string;
+declare enum PaginationSize {
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+}
+declare enum PaginationVariant {
+  DEFAULT = "default",
+  BORDERED = "bordered",
+  GHOST = "ghost",
+}
+type PaginationProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof paginationVariants> & {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  showFirstLast?: boolean;
+  showPrevNext?: boolean;
+  maxVisiblePages?: number;
+  disabled?: boolean;
+};
+declare const Pagination: FC<PaginationProps>;
+//#endregion
+export { Pagination, PaginationProps, PaginationSize, PaginationVariant, paginationVariants };
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/types/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":[],"mappings":";;;;;cAQa,0BA6Ba;;;EA7Bb,OAAA,CAAA,EAAA,SAAA,GA2BZ,UAAA,GAAA,OAAA;AAED,CAAA,GAFC,+BAAA,CAAA,SAEyB,EAAA,GAAA,MAAA;AAMd,aANA,cAAA;EAYA,EAAA,GAAA,IAAA;EAAiC,EAAA,GAAA,IAAA;EAAf,EAAA,GAAA,IAAA;;AAC5B,aAPU,iBAAA;EAOE,OAAA,GAAA,SAAA;EAmED,QAAA,GAAA,UAoGZ;;;KAxKW,eAAA,GAAkB,eAAe,kBAC3C,oBAAoB;;;;;;;;;cAmET,YAAY,GAAG"}

package/dist/types/components/Pagination/ShowingResultsNumberItems.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+
+//#region src/components/Pagination/ShowingResultsNumberItems.d.ts
+type ShowingResultsNumberItemsProps = {
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+};
+declare const ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps>;
+//#endregion
+export { ShowingResultsNumberItems, ShowingResultsNumberItemsProps };
+//# sourceMappingURL=ShowingResultsNumberItems.d.ts.map

package/dist/types/components/Pagination/ShowingResultsNumberItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowingResultsNumberItems.d.ts","names":[],"sources":["../../../../src/components/Pagination/ShowingResultsNumberItems.tsx"],"sourcesContent":[],"mappings":";;;KAMY,8BAAA;;EAAA,QAAA,EAAA,MAAA;EAMC,UAAA,EAAA,MAAA;;cAAA,2BAA2B,GAAG"}

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+import { NumberItemsSelector, NumberItemsSelectorProps } from "./NumberItemsSelector.js";
+import { Pagination, PaginationProps, PaginationSize, PaginationVariant, paginationVariants } from "./Pagination.js";
+import { ShowingResultsNumberItems, ShowingResultsNumberItemsProps } from "./ShowingResultsNumberItems.js";
+export { NumberItemsSelector, NumberItemsSelectorProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, ShowingResultsNumberItems, ShowingResultsNumberItemsProps, paginationVariants };