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

package/dist/esm/components/Navbar/index.mjs

@@ -0,0 +1,87 @@
+'use client';
+
+
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useIsMounted } from "../../hooks/useIsMounted.mjs";
+import { DesktopNavbar } from "./DesktopNavbar.mjs";
+import { MobileNavbar } from "./MobileNavbar.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/Navbar/index.tsx
+/**
+* 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
+*/
+const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSections = [], mobileBottomChildren, mobileBottomSections = [], rightItemsDesktop, rightItemsMobile, selectedChoice }) => {
+	const { isMobile } = useDevice("lg");
+	if (!useIsMounted()) return /* @__PURE__ */ jsx(Fragment, {});
+	return isMobile ? /* @__PURE__ */ jsx(MobileNavbar, {
+		topChildren: mobileTopChildren,
+		topSections: mobileTopSections,
+		bottomChildren: mobileBottomChildren,
+		bottomSections: mobileBottomSections,
+		logo,
+		rightItems: rightItemsMobile
+	}) : /* @__PURE__ */ jsx(DesktopNavbar, {
+		sections: desktopSections,
+		rightItems: rightItemsDesktop,
+		logo,
+		selectedChoice
+	});
+};
+
+//#endregion
+export { Navbar };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Navbar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,EAAE,EACpB,oBAAoB,EAAE,EACtB,sBACA,uBAAuB,EAAE,EACzB,mBACA,kBACA,qBACoB;CACpB,MAAM,EAAE,aAAa,UAAU,KAAK;AAGpC,KAAI,CAFc,cAAc,CAEhB,QAAO,iCAAK;AAE5B,QAAO,WACL,oBAAC;EACC,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;GACZ,GAEF,oBAAC;EACC,UAAU;EACV,YAAY;EACN;EACU;GAChB"}

package/dist/esm/components/Navbar/useNavigation.mjs

@@ -0,0 +1,154 @@
+'use client';
+
+
+import { useEffect, useState } from "react";
+
+//#region src/components/Navbar/useNavigation.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
+*/
+const useNavActions = () => {
+	/** Currently active section ID based on scroll position */
+	const [activeSection, setActiveSection] = useState(null);
+	/**
+	* Detects which section is currently active based on scroll position
+	* Uses viewport-aware calculation to determine active section
+	*/
+	const detectActiveSection = () => {
+		const scrollY = window.scrollY;
+		const sections = document.querySelectorAll("section");
+		const sectionsData = [];
+		sections.forEach((section) => sectionsData.push({
+			id: section.id,
+			offsetTop: section.offsetTop,
+			offsetHeight: section.offsetHeight
+		}));
+		const currentSection = sectionsData.find((section) => section.offsetTop <= scrollY + window.screen.height / 4 && section.offsetTop + section.offsetHeight > scrollY + window.screen.height / 4);
+		if (currentSection) setActiveSection(currentSection.id);
+	};
+	useEffect(() => {
+		window.addEventListener("scroll", detectActiveSection, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", detectActiveSection);
+		};
+	}, []);
+	/**
+	* Handles logo click behavior
+	* Scrolls to top if on home page, navigates to home if on other pages
+	*
+	* @param onClick - Callback function to handle navigation (e.g., router.push)
+	*/
+	const onClickLogo = (onClick) => {
+		setActiveSection(null);
+		if (window.location.pathname === "/") window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+		else onClick("/");
+	};
+	/**
+	* Handles section navigation click behavior
+	* Smooth scrolls if on same page, executes callback if different page
+	*
+	* @param sectionId - ID of the target section element
+	* @param url - URL of the page containing the section (optional)
+	* @param onClick - Callback function to handle navigation (optional)
+	*/
+	const onClickSection = (sectionId, url, onClick) => {
+		setActiveSection(sectionId);
+		if (window.location.pathname === url) {
+			const sectionEl = document.getElementById(sectionId);
+			if (sectionEl) sectionEl.scrollIntoView({
+				behavior: "smooth",
+				block: "center",
+				inline: "nearest"
+			});
+		} else onClick?.();
+	};
+	return {
+		activeSection,
+		onClickLogo,
+		onClickSection
+	};
+};
+
+//#endregion
+export { useNavActions };
+//# sourceMappingURL=useNavigation.mjs.map

package/dist/esm/components/Navbar/useNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigation.mjs","names":["sectionsData: SectionData[]"],"sources":["../../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Interface describing section data used for scroll detection\n */\ninterface SectionData {\n  /** Unique identifier of the section element */\n  id: string;\n  /** Distance from top of document to section start */\n  offsetTop: number;\n  /** Height of the section element */\n  offsetHeight: number;\n}\n\n/**\n * Navigation Actions Hook\n *\n * A comprehensive hook for managing navigation interactions and scroll-based section detection.\n * Provides automatic active section detection based on scroll position and handles smooth\n * scrolling navigation behaviors.\n *\n * Features:\n * - Automatic active section detection based on scroll position\n * - Smooth scrolling to sections within the same page\n * - Logo click handling with home navigation\n * - Section click handling with conditional scrolling vs navigation\n * - Passive scroll event listeners for optimal performance\n * - Viewport-aware active section calculation (using screen height / 4 offset)\n *\n * Active Section Detection:\n * - Monitors all `<section>` elements on the page\n * - Calculates which section is currently in the \"active\" zone\n * - Active zone is defined as the top 25% of the viewport\n * - Updates activeSection state as user scrolls\n *\n * Navigation Behaviors:\n * - Logo click: Scrolls to top if on home page, navigates to home if on other pages\n * - Section click: Smooth scrolls if on same page, executes callback if different page\n * - All scrolling uses smooth behavior for better UX\n *\n * @example\n * Basic usage in navigation component:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n *\n * // In navigation items\n * const navItems = sections.map(section => (\n *   <TabSelectorItem\n *     key={section.id}\n *     isActive={activeSection === section.id}\n *     onClick={() => onClickSection(section.id, section.url, section.onClick)}\n *   >\n *     {section.label}\n *   </TabSelectorItem>\n * ));\n *\n * // In logo\n * <Logo onClick={() => onClickLogo(navigate)} />\n * ```\n *\n * @example\n * Advanced usage with routing:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n * const navigate = useNavigate();\n *\n * const handleLogoClick = () => {\n *   onClickLogo((url) => {\n *     navigate(url);\n *     // Additional logic like analytics\n *     trackEvent('logo_click');\n *   });\n * };\n *\n * const handleSectionClick = (sectionId: string) => {\n *   onClickSection(\n *     sectionId,\n *     `/page#${sectionId}`,\n *     () => {\n *       navigate(`/page#${sectionId}`);\n *       trackEvent('section_navigation', { sectionId });\n *     }\n *   );\n * };\n * ```\n *\n * Performance Considerations:\n * - Uses passive scroll event listeners to prevent blocking\n * - Automatically cleans up event listeners on unmount\n * - Efficiently queries DOM elements using native selectors\n * - Calculates section positions dynamically for accuracy\n *\n * @returns Object containing navigation state and action handlers\n */\nexport const useNavActions = () => {\n  /** Currently active section ID based on scroll position */\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  /**\n   * Detects which section is currently active based on scroll position\n   * Uses viewport-aware calculation to determine active section\n   */\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    // Collect position data for all sections\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    // Find section that intersects with the active zone (top 25% of viewport)\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  // Set up scroll listener for active section detection\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  /**\n   * Handles logo click behavior\n   * Scrolls to top if on home page, navigates to home if on other pages\n   *\n   * @param onClick - Callback function to handle navigation (e.g., router.push)\n   */\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  /**\n   * Handles section navigation click behavior\n   * Smooth scrolls if on same page, executes callback if different page\n   *\n   * @param sectionId - ID of the target section element\n   * @param url - URL of the page containing the section (optional)\n   * @param onClick - Callback function to handle navigation (optional)\n   */\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    // If on the same page, scroll to section\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      // If on different page, execute callback (typically navigation)\n      onClick?.();\n    }\n  };\n\n  return {\n    /** Currently active section ID, null if no section is active */\n    activeSection,\n    /** Handler for logo click interactions */\n    onClickLogo,\n    /** Handler for section navigation clicks */\n    onClickSection,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAa,sBAAsB;;CAEjC,MAAM,CAAC,eAAe,oBAAoB,SAAwB,KAAK;;;;;CAMvE,MAAM,4BAA4B;EAChC,MAAM,UAAU,OAAO;EACvB,MAAM,WAAW,SAAS,iBAAiB,UAAU;EACrD,MAAMA,eAA8B,EAAE;AAGtC,WAAS,SAAS,YAChB,aAAa,KAAK;GAChB,IAAI,QAAQ;GACZ,WAAW,QAAQ;GACnB,cAAc,QAAQ;GACvB,CAAC,CACH;EAGD,MAAM,iBAAiB,aAAa,MACjC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS,EACtC;AAED,MAAI,eACF,kBAAiB,eAAe,GAAG;;AAKvC,iBAAgB;AACd,SAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM,CAAC;AAEzE,eAAa;AACX,UAAO,oBAAoB,UAAU,oBAAoB;;IAE1D,EAAE,CAAC;;;;;;;CAQN,MAAM,eAAe,YAAmC;AACtD,mBAAiB,KAAK;AAEtB,MAAI,OAAO,SAAS,aAAa,IAC/B,QAAO,SAAS;GAAE,KAAK;GAAG,UAAU;GAAU,CAAC;MAE/C,SAAQ,IAAI;;;;;;;;;;CAYhB,MAAM,kBACJ,WACA,KACA,YACG;AACH,mBAAiB,UAAU;AAG3B,MAAI,OAAO,SAAS,aAAa,KAAK;GACpC,MAAM,YAAY,SAAS,eAAe,UAAU;AAEpD,OAAI,UACF,WAAU,eAAe;IACvB,UAAU;IACV,OAAO;IACP,QAAQ;IACT,CAAC;QAIJ,YAAW;;AAIf,QAAO;EAEL;EAEA;EAEA;EACD"}

package/dist/esm/components/Pagination/NumberItemsSelector.mjs

@@ -0,0 +1,48 @@
+'use client';
+
+
+import { Select } from "../Select/Select.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/Pagination/NumberItemsSelector.tsx
+const NumberItemsSelector = ({ value, onValueChange, min = 5, max = 500 }) => {
+	const { numberItemsSelector, selectPageSize } = useIntlayer("pagination");
+	const items = [
+		1,
+		2,
+		5,
+		10,
+		20,
+		50,
+		100,
+		200,
+		500,
+		1e3,
+		2e3,
+		5e3,
+		1e4,
+		1e5
+	].filter((item) => item >= min && item <= max);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-neutral-600 text-sm dark:text-neutral-400",
+			children: numberItemsSelector
+		}), /* @__PURE__ */ jsxs(Select, {
+			value,
+			onValueChange,
+			children: [/* @__PURE__ */ jsx(Select.Trigger, {
+				className: "w-20",
+				children: /* @__PURE__ */ jsx(Select.Value, { placeholder: selectPageSize })
+			}), /* @__PURE__ */ jsx(Select.Content, { children: items.map((item) => /* @__PURE__ */ jsx(Select.Item, {
+				value: item.toString(),
+				children: item
+			}, item)) })]
+		})]
+	});
+};
+
+//#endregion
+export { NumberItemsSelector };
+//# sourceMappingURL=NumberItemsSelector.mjs.map

package/dist/esm/components/Pagination/NumberItemsSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberItemsSelector.mjs","names":["NumberItemsSelector: FC<NumberItemsSelectorProps>"],"sources":["../../../../src/components/Pagination/NumberItemsSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\nexport type NumberItemsSelectorProps = {\n  value: string;\n  onValueChange: (value: string) => void;\n  min?: number;\n  max?: number;\n};\n\nexport const NumberItemsSelector: FC<NumberItemsSelectorProps> = ({\n  value,\n  onValueChange,\n  min = 5,\n  max = 500,\n}) => {\n  const { numberItemsSelector, selectPageSize } = useIntlayer('pagination');\n\n  const items = [\n    1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 100000,\n  ].filter((item) => item >= min && item <= max);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-neutral-600 text-sm dark:text-neutral-400\">\n        {numberItemsSelector}\n      </span>\n      <Select value={value} onValueChange={onValueChange}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder={selectPageSize} />\n        </Select.Trigger>\n        <Select.Content>\n          {items.map((item) => (\n            <Select.Item key={item} value={item.toString()}>\n              {item}\n            </Select.Item>\n          ))}\n        </Select.Content>\n      </Select>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAaA,uBAAqD,EAChE,OACA,eACA,MAAM,GACN,MAAM,UACF;CACJ,MAAM,EAAE,qBAAqB,mBAAmB,YAAY,aAAa;CAEzE,MAAM,QAAQ;EACZ;EAAG;EAAG;EAAG;EAAI;EAAI;EAAI;EAAK;EAAK;EAAK;EAAM;EAAM;EAAM;EAAO;EAC9D,CAAC,QAAQ,SAAS,QAAQ,OAAO,QAAQ,IAAI;AAE9C,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAK,WAAU;aACb;IACI,EACP,qBAAC;GAAc;GAAsB;cACnC,oBAAC,OAAO;IAAQ,WAAU;cACxB,oBAAC,OAAO,SAAM,aAAa,iBAAkB;KAC9B,EACjB,oBAAC,OAAO,qBACL,MAAM,KAAK,SACV,oBAAC,OAAO;IAAgB,OAAO,KAAK,UAAU;cAC3C;MADe,KAEJ,CACd,GACa;IACV;GACL"}

package/dist/esm/components/Pagination/Pagination.mjs

@@ -0,0 +1,135 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Pagination/Pagination.tsx
+const paginationVariants = cva("flex items-center justify-center gap-1", {
+	variants: {
+		size: {
+			sm: "gap-1",
+			md: "gap-2",
+			lg: "gap-3"
+		},
+		color: {
+			text: "background-text",
+			primary: "background-primary",
+			secondary: "background-secondary",
+			neutral: "background-neutral",
+			destructive: "background-destructive"
+		},
+		variant: {
+			default: "",
+			bordered: "rounded-lg border border-border p-2",
+			ghost: "bg-transparent"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+let PaginationSize = /* @__PURE__ */ function(PaginationSize$1) {
+	PaginationSize$1["SM"] = "sm";
+	PaginationSize$1["MD"] = "md";
+	PaginationSize$1["LG"] = "lg";
+	return PaginationSize$1;
+}({});
+let PaginationVariant = /* @__PURE__ */ function(PaginationVariant$1) {
+	PaginationVariant$1["DEFAULT"] = "default";
+	PaginationVariant$1["BORDERED"] = "bordered";
+	PaginationVariant$1["GHOST"] = "ghost";
+	return PaginationVariant$1;
+}({});
+const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
+	if (totalPages <= maxVisiblePages) return Array.from({ length: totalPages }, (_, i) => i + 1);
+	const pages = [];
+	const halfVisible = Math.floor(maxVisiblePages / 2);
+	pages.push(1);
+	if (currentPage <= halfVisible + 2) {
+		for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) pages.push(i);
+		if (totalPages > maxVisiblePages) pages.push("ellipsis");
+		if (totalPages > 1) pages.push(totalPages);
+	} else if (currentPage >= totalPages - halfVisible - 1) {
+		if (totalPages > maxVisiblePages) pages.push("ellipsis");
+		for (let i = Math.max(2, totalPages - maxVisiblePages + 2); i <= totalPages; i++) pages.push(i);
+	} else {
+		pages.push("ellipsis");
+		const start = currentPage - halfVisible;
+		const end = currentPage + halfVisible;
+		for (let i = start; i <= end; i++) pages.push(i);
+		pages.push("ellipsis");
+		pages.push(totalPages);
+	}
+	return pages;
+};
+const getButtonSize = (size) => {
+	return size === PaginationSize.SM ? ButtonSize.ICON_SM : size === PaginationSize.LG ? ButtonSize.ICON_LG : ButtonSize.ICON_MD;
+};
+const Pagination = ({ currentPage, totalPages, onPageChange, showFirstLast = false, showPrevNext = true, maxVisiblePages = 5, disabled = false, size = PaginationSize.MD, variant = PaginationVariant.DEFAULT, color = ButtonColor.TEXT, className,...props }) => {
+	const pageNumbers = generatePageNumbers(currentPage, totalPages, maxVisiblePages);
+	const buttonSize = getButtonSize(size);
+	const isFirstPage = currentPage === 1;
+	const isLastPage = currentPage === totalPages;
+	if (totalPages <= 1) return null;
+	const handlePageChange = (page) => {
+		if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) onPageChange(page);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(paginationVariants({
+			size,
+			variant
+		}), className),
+		...props,
+		children: [
+			showPrevNext && /* @__PURE__ */ jsx(Button, {
+				variant: ButtonVariant.OUTLINE,
+				size: buttonSize,
+				color: ButtonColor.TEXT,
+				onClick: () => handlePageChange(currentPage - 1),
+				disabled: disabled || isFirstPage,
+				label: "Go to previous page",
+				Icon: ChevronLeft,
+				className: "min-w-0 px-2"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1 max-md:gap-0.5",
+				children: pageNumbers.map((page) => {
+					if (page === "ellipsis") return /* @__PURE__ */ jsx("div", {
+						className: "flex h-8 min-w-8 items-center justify-center px-1",
+						children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4 text-muted-foreground" })
+					}, `ellipsis-${page}`);
+					const isActive = page === currentPage;
+					return /* @__PURE__ */ jsx(Button, {
+						variant: isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE,
+						size: buttonSize,
+						color: ButtonColor.TEXT,
+						onClick: () => handlePageChange(page),
+						disabled,
+						label: `Go to page ${page}`,
+						className: cn("flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0", size === "sm" && "h-6 w-6", size === "lg" && "h-10 w-10", isActive && "font-semibold"),
+						children: page
+					}, page);
+				})
+			}),
+			showPrevNext && /* @__PURE__ */ jsx(Button, {
+				variant: ButtonVariant.OUTLINE,
+				size: buttonSize,
+				color: ButtonColor.TEXT,
+				onClick: () => handlePageChange(currentPage + 1),
+				disabled: disabled || isLastPage,
+				label: "Go to next page",
+				Icon: ChevronRight,
+				className: "min-w-0 px-2"
+			})
+		]
+	});
+};
+
+//#endregion
+export { Pagination, PaginationSize, PaginationVariant, paginationVariants };
+//# sourceMappingURL=Pagination.mjs.map

package/dist/esm/components/Pagination/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.mjs","names":["pages: (number | 'ellipsis')[]","Pagination: FC<PaginationProps>"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n  'flex items-center justify-center gap-1',\n  {\n    variants: {\n      size: {\n        sm: 'gap-1',\n        md: 'gap-2',\n        lg: 'gap-3',\n      },\n      color: {\n        text: 'background-text',\n        primary: 'background-primary',\n        secondary: 'background-secondary',\n        neutral: 'background-neutral',\n        destructive: 'background-destructive',\n      },\n      variant: {\n        default: '',\n        bordered: 'rounded-lg border border-border p-2',\n        ghost: 'bg-transparent',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport enum PaginationSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum PaginationVariant {\n  DEFAULT = 'default',\n  BORDERED = 'bordered',\n  GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof paginationVariants> & {\n    currentPage: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    showFirstLast?: boolean;\n    showPrevNext?: boolean;\n    maxVisiblePages?: number;\n    disabled?: boolean;\n  };\n\nconst generatePageNumbers = (\n  currentPage: number,\n  totalPages: number,\n  maxVisiblePages: number\n): (number | 'ellipsis')[] => {\n  if (totalPages <= maxVisiblePages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [];\n  const halfVisible = Math.floor(maxVisiblePages / 2);\n\n  pages.push(1);\n\n  if (currentPage <= halfVisible + 2) {\n    for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n      pages.push(i);\n    }\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    if (totalPages > 1) {\n      pages.push(totalPages);\n    }\n  } else if (currentPage >= totalPages - halfVisible - 1) {\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    for (\n      let i = Math.max(2, totalPages - maxVisiblePages + 2);\n      i <= totalPages;\n      i++\n    ) {\n      pages.push(i);\n    }\n  } else {\n    pages.push('ellipsis');\n    const start = currentPage - halfVisible;\n    const end = currentPage + halfVisible;\n    for (let i = start; i <= end; i++) {\n      pages.push(i);\n    }\n    pages.push('ellipsis');\n    pages.push(totalPages);\n  }\n\n  return pages;\n};\n\nconst getButtonSize = (size?: PaginationSize | `${PaginationSize}` | null) => {\n  return size === PaginationSize.SM\n    ? ButtonSize.ICON_SM\n    : size === PaginationSize.LG\n      ? ButtonSize.ICON_LG\n      : ButtonSize.ICON_MD;\n};\n\nexport const Pagination: FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  showFirstLast = false,\n  showPrevNext = true,\n  maxVisiblePages = 5,\n  disabled = false,\n  size = PaginationSize.MD,\n  variant = PaginationVariant.DEFAULT,\n  color = ButtonColor.TEXT,\n  className,\n  ...props\n}) => {\n  const pageNumbers = generatePageNumbers(\n    currentPage,\n    totalPages,\n    maxVisiblePages\n  );\n\n  const buttonSize = getButtonSize(size);\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  if (totalPages <= 1) return null;\n\n  const handlePageChange = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onPageChange(page);\n    }\n  };\n\n  return (\n    <div\n      className={cn(paginationVariants({ size, variant }), className)}\n      {...props}\n    >\n      {showPrevNext && (\n        <Button\n          variant={ButtonVariant.OUTLINE}\n          size={buttonSize}\n          color={ButtonColor.TEXT}\n          onClick={() => handlePageChange(currentPage - 1)}\n          disabled={disabled || isFirstPage}\n          label=\"Go to previous page\"\n          Icon={ChevronLeft}\n          className=\"min-w-0 px-2\"\n        />\n      )}\n\n      <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n        {pageNumbers.map((page) => {\n          if (page === 'ellipsis') {\n            return (\n              <div\n                key={`ellipsis-${page}`}\n                className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n              >\n                <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n              </div>\n            );\n          }\n\n          const isActive = page === currentPage;\n          return (\n            <Button\n              key={page}\n              variant={isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE}\n              size={buttonSize}\n              color={ButtonColor.TEXT}\n              onClick={() => handlePageChange(page)}\n              disabled={disabled}\n              label={`Go to page ${page}`}\n              className={cn(\n                'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0',\n                size === 'sm' && 'h-6 w-6',\n                size === 'lg' && 'h-10 w-10',\n                isActive && 'font-semibold'\n              )}\n            >\n              {page}\n            </Button>\n          );\n        })}\n      </div>\n\n      {showPrevNext && (\n        <Button\n          variant={ButtonVariant.OUTLINE}\n          size={buttonSize}\n          color={ButtonColor.TEXT}\n          onClick={() => handlePageChange(currentPage + 1)}\n          disabled={disabled || isLastPage}\n          label=\"Go to next page\"\n          Icon={ChevronRight}\n          className=\"min-w-0 px-2\"\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Pagination/ShowingResultsNumberItems.mjs

@@ -0,0 +1,26 @@
+'use client';
+
+
+import { jsx } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+import { useNumber } from "react-intlayer/format";
+
+//#region src/components/Pagination/ShowingResultsNumberItems.tsx
+const ShowingResultsNumberItems = ({ currentPage, pageSize, totalItems }) => {
+	const { showingResults } = useIntlayer("pagination");
+	const number = useNumber();
+	const start = Math.max(totalItems, (currentPage - 1) * pageSize + 1);
+	const end = Math.min(currentPage * pageSize, totalItems);
+	return /* @__PURE__ */ jsx("div", {
+		className: "text-neutral-600 text-sm dark:text-neutral-400",
+		children: showingResults({
+			start: number(start),
+			end: number(end),
+			total: number(totalItems)
+		})
+	});
+};
+
+//#endregion
+export { ShowingResultsNumberItems };
+//# sourceMappingURL=ShowingResultsNumberItems.mjs.map

package/dist/esm/components/Pagination/ShowingResultsNumberItems.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowingResultsNumberItems.mjs","names":["ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps>","start: number","end: number"],"sources":["../../../../src/components/Pagination/ShowingResultsNumberItems.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useNumber } from 'react-intlayer/format';\n\nexport type ShowingResultsNumberItemsProps = {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n};\n\nexport const ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps> = ({\n  currentPage,\n  pageSize,\n  totalItems,\n}) => {\n  const { showingResults } = useIntlayer('pagination');\n  const number = useNumber();\n\n  const start: number = Math.max(totalItems, (currentPage - 1) * pageSize + 1);\n  const end: number = Math.min(currentPage * pageSize, totalItems);\n\n  return (\n    <div className=\"text-neutral-600 text-sm dark:text-neutral-400\">\n      {showingResults({\n        start: number(start),\n        end: number(end),\n        total: number(totalItems),\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAaA,6BAAiE,EAC5E,aACA,UACA,iBACI;CACJ,MAAM,EAAE,mBAAmB,YAAY,aAAa;CACpD,MAAM,SAAS,WAAW;CAE1B,MAAMC,QAAgB,KAAK,IAAI,aAAa,cAAc,KAAK,WAAW,EAAE;CAC5E,MAAMC,MAAc,KAAK,IAAI,cAAc,UAAU,WAAW;AAEhE,QACE,oBAAC;EAAI,WAAU;YACZ,eAAe;GACd,OAAO,OAAO,MAAM;GACpB,KAAK,OAAO,IAAI;GAChB,OAAO,OAAO,WAAW;GAC1B,CAAC;GACE"}

package/dist/esm/components/Pagination/index.mjs

@@ -0,0 +1,5 @@
+import { NumberItemsSelector } from "./NumberItemsSelector.mjs";
+import { Pagination, PaginationSize, PaginationVariant, paginationVariants } from "./Pagination.mjs";
+import { ShowingResultsNumberItems } from "./ShowingResultsNumberItems.mjs";
+
+export { NumberItemsSelector, Pagination, PaginationSize, PaginationVariant, ShowingResultsNumberItems, paginationVariants };

package/dist/esm/components/Pagination/pagination.content.mjs

@@ -0,0 +1,111 @@
+import { insert, t } from "intlayer";
+
+//#region src/components/Pagination/pagination.content.ts
+const paginationContent = {
+	key: "pagination",
+	content: {
+		numberItemsSelector: t({
+			en: "Items per page",
+			fr: "Eléments par page",
+			es: "Items por página",
+			"en-GB": "Items per page",
+			de: "Items pro Seite",
+			ja: "ページあたりのアイテム数",
+			ko: "페이지당 아이템 수",
+			zh: "每页项目数",
+			it: "Elementi per pagina",
+			pt: "Itens por página",
+			hi: "पृष्ठ पर आइटम्स",
+			ar: "عدد العناصر لكل صفحة",
+			ru: "Элементов на странице",
+			tr: "Sayfa başına öğe",
+			pl: "Elementów na stronę",
+			id: "Item per halaman",
+			vi: "Số mục trên mỗi trang"
+		}),
+		showingResults: insert(t({
+			ar: "عرض {{start}} إلى {{end}} من {{total}} نتائج",
+			de: "Zeigt {{start}} bis {{end}} von {{total}} Ergebnissen",
+			en: "Showing {{start}} to {{end}} of {{total}} results",
+			"en-GB": "Showing {{start}} to {{end}} of {{total}} results",
+			es: "Mostrando {{start}} a {{end}} de {{total}} resultados",
+			fr: "Afficher {{start}} à {{end}} de {{total}} résultats",
+			hi: "{{start}} से {{end}} तक के {{total}} परिणाम दिखा रहे हैं",
+			id: "Menampilkan {{start}} hingga {{end}} dari {{total}} hasil",
+			it: "Mostrando {{start}} a {{end}} di {{total}} risultati",
+			ja: "{{start}} から {{end}} までの {{total}} 件の結果を表示",
+			ko: "{{start}} 에서 {{end}} 까지의 {{total}} 개 결과 표시",
+			pl: "Wyświetlane {{start}} do {{end}} z {{total}} wyników",
+			pt: "Mostrando {{start}} a {{end}} de {{total}} resultados",
+			ru: "Показано {{start}}-{{end}} из {{total}} результатов",
+			tr: "{{start}} から {{end}} までの {{total}} 件の結果を表示",
+			vi: "Hiển thị {{start}} đến {{end}} trong tổng số {{total}} kết quả",
+			zh: "显示第 {{start}} 到 {{end}} 项，共 {{total}} 个结果"
+		})),
+		selectPageSize: t({
+			en: "Select page size",
+			fr: "Sélectionner la taille de la page",
+			es: "Seleccionar tamaño de página",
+			"en-GB": "Select page size",
+			de: "Seitegröße auswählen",
+			ja: "ページサイズを選択",
+			ko: "페이지 크기 선택",
+			zh: "选择页面大小",
+			it: "Seleziona una dimensione di pagina",
+			pt: "Selecionar um tamanho de página",
+			hi: "पृष्ठ आकार चुनें",
+			ar: "اختر حجم الصفحة",
+			ru: "Выберите размер страницы",
+			tr: "Sayfa boyutunu seç",
+			pl: "Wybierz liczbę elementów na stronę",
+			id: "Pilih jumlah item per halaman",
+			vi: "Chọn số mục trên mỗi trang"
+		}),
+		goToNextPage: t({
+			en: "Go to next page",
+			fr: "Aller à la page suivante",
+			es: "Ir a la página siguiente",
+			"en-GB": "Go to next page",
+			de: "Zur nächsten Seite",
+			ja: "次のページに移動",
+			ko: "다음 페이지로 이동",
+			zh: "转到下一页",
+			it: "Vai alla pagina successiva",
+			pt: "Ir para a página seguinte",
+			hi: "अगली पृष्ठ पर जाएं",
+			ar: "اذهب إلى الصفحة التالية",
+			ru: "Перейти к следующей странице",
+			tr: "Sonraki sayfaya git",
+			pl: "Przejdź do następnej strony",
+			id: "Pergi ke halaman berikutnya",
+			vi: "Chuyển sang trang tiếp theo"
+		}),
+		goToPreviousPage: t({
+			en: "Go to previous page",
+			fr: "Aller à la page précédente",
+			es: "Ir a la página anterior",
+			"en-GB": "Go to previous page",
+			de: "Zur vorherigen Seite",
+			ja: "前のページに移動",
+			ko: "이전 페이지로 이동",
+			zh: "转到上一页",
+			it: "Vai alla pagina precedente",
+			pt: "Ir para a página anterior",
+			hi: "पिछली पृष्ठ पर जाएं",
+			ar: "اذهب إلى الصفحة السابقة",
+			ru: "Перейти к предыдущей странице",
+			tr: "Önceki sayfaya git",
+			pl: "Przejdź do poprzedniej strony",
+			id: "Pergi ke halaman sebelumnya",
+			vi: "Chuyển sang trang trước"
+		})
+	},
+	title: "Pagination",
+	description: "Content strings used for the pagination component, including labels for navigating pages and selecting items per page.",
+	tags: ["pagination", "component"]
+};
+var pagination_content_default = paginationContent;
+
+//#endregion
+export { pagination_content_default as default };
+//# sourceMappingURL=pagination.content.mjs.map

package/dist/esm/components/Pagination/pagination.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.content.mjs","names":[],"sources":["../../../../src/components/Pagination/pagination.content.ts"],"sourcesContent":["import { type Dictionary, insert, t } from 'intlayer';\n\nconst paginationContent = {\n  key: 'pagination',\n  content: {\n    numberItemsSelector: t({\n      en: 'Items per page',\n      fr: 'Eléments par page',\n      es: 'Items por página',\n      'en-GB': 'Items per page',\n      de: 'Items pro Seite',\n      ja: 'ページあたりのアイテム数',\n      ko: '페이지당 아이템 수',\n      zh: '每页项目数',\n      it: 'Elementi per pagina',\n      pt: 'Itens por página',\n      hi: 'पृष्ठ पर आइटम्स',\n      ar: 'عدد العناصر لكل صفحة',\n      ru: 'Элементов на странице',\n      tr: 'Sayfa başına öğe',\n      pl: 'Elementów na stronę',\n      id: 'Item per halaman',\n      vi: 'Số mục trên mỗi trang',\n    }),\n    showingResults: insert(\n      t({\n        ar: 'عرض {{start}} إلى {{end}} من {{total}} نتائج',\n        de: 'Zeigt {{start}} bis {{end}} von {{total}} Ergebnissen',\n        en: 'Showing {{start}} to {{end}} of {{total}} results',\n        'en-GB': 'Showing {{start}} to {{end}} of {{total}} results',\n        es: 'Mostrando {{start}} a {{end}} de {{total}} resultados',\n        fr: 'Afficher {{start}} à {{end}} de {{total}} résultats',\n        hi: '{{start}} से {{end}} तक के {{total}} परिणाम दिखा रहे हैं',\n        id: 'Menampilkan {{start}} hingga {{end}} dari {{total}} hasil',\n        it: 'Mostrando {{start}} a {{end}} di {{total}} risultati',\n        ja: '{{start}} から {{end}} までの {{total}} 件の結果を表示',\n        ko: '{{start}} 에서 {{end}} 까지의 {{total}} 개 결과 표시',\n        pl: 'Wyświetlane {{start}} do {{end}} z {{total}} wyników',\n        pt: 'Mostrando {{start}} a {{end}} de {{total}} resultados',\n        ru: 'Показано {{start}}-{{end}} из {{total}} результатов',\n        tr: '{{start}} から {{end}} までの {{total}} 件の結果を表示',\n        vi: 'Hiển thị {{start}} đến {{end}} trong tổng số {{total}} kết quả',\n        zh: '显示第 {{start}} 到 {{end}} 项，共 {{total}} 个结果',\n      })\n    ),\n    selectPageSize: t({\n      en: 'Select page size',\n      fr: 'Sélectionner la taille de la page',\n      es: 'Seleccionar tamaño de página',\n      'en-GB': 'Select page size',\n      de: 'Seitegröße auswählen',\n      ja: 'ページサイズを選択',\n      ko: '페이지 크기 선택',\n      zh: '选择页面大小',\n      it: 'Seleziona una dimensione di pagina',\n      pt: 'Selecionar um tamanho de página',\n      hi: 'पृष्ठ आकार चुनें',\n      ar: 'اختر حجم الصفحة',\n      ru: 'Выберите размер страницы',\n      tr: 'Sayfa boyutunu seç',\n      pl: 'Wybierz liczbę elementów na stronę',\n      id: 'Pilih jumlah item per halaman',\n      vi: 'Chọn số mục trên mỗi trang',\n    }),\n    goToNextPage: t({\n      en: 'Go to next page',\n      fr: 'Aller à la page suivante',\n      es: 'Ir a la página siguiente',\n      'en-GB': 'Go to next page',\n      de: 'Zur nächsten Seite',\n      ja: '次のページに移動',\n      ko: '다음 페이지로 이동',\n      zh: '转到下一页',\n      it: 'Vai alla pagina successiva',\n      pt: 'Ir para a página seguinte',\n      hi: 'अगली पृष्ठ पर जाएं',\n      ar: 'اذهب إلى الصفحة التالية',\n      ru: 'Перейти к следующей странице',\n      tr: 'Sonraki sayfaya git',\n      pl: 'Przejdź do następnej strony',\n      id: 'Pergi ke halaman berikutnya',\n      vi: 'Chuyển sang trang tiếp theo',\n    }),\n    goToPreviousPage: t({\n      en: 'Go to previous page',\n      fr: 'Aller à la page précédente',\n      es: 'Ir a la página anterior',\n      'en-GB': 'Go to previous page',\n      de: 'Zur vorherigen Seite',\n      ja: '前のページに移動',\n      ko: '이전 페이지로 이동',\n      zh: '转到上一页',\n      it: 'Vai alla pagina precedente',\n      pt: 'Ir para a página anterior',\n      hi: 'पिछली पृष्ठ पर जाएं',\n      ar: 'اذهب إلى الصفحة السابقة',\n      ru: 'Перейти к предыдущей странице',\n      tr: 'Önceki sayfaya git',\n      pl: 'Przejdź do poprzedniej strony',\n      id: 'Pergi ke halaman sebelumnya',\n      vi: 'Chuyển sang trang trước',\n    }),\n  },\n  title: 'Pagination',\n  description:\n    'Content strings used for the pagination component, including labels for navigating pages and selecting items per page.',\n  tags: ['pagination', 'component'],\n} satisfies Dictionary;\n\nexport default paginationContent;\n"],"mappings":";;;AAEA,MAAM,oBAAoB;CACxB,KAAK;CACL,SAAS;EACP,qBAAqB,EAAE;GACrB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,gBAAgB,OACd,EAAE;GACA,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,CACH;EACD,gBAAgB,EAAE;GAChB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,cAAc,EAAE;GACd,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,kBAAkB,EAAE;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,YAAY;CAClC;AAED,iCAAe"}