npm - @intlayer/design-system - Versions diffs - 8.9.6 → 8.9.8 - Mend

@intlayer/design-system 8.9.6 → 8.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (749) hide show

package/dist/esm/components/Navbar/DesktopNavbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport {\n TabSelector,\n TabSelectorColor,\n type TabSelectorItemProps,\n} from '../TabSelector';\n\n/*\n Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n /\ntype DesktopNavbarProps<T extends TabSelectorItemProps> = {\n /* Logo component or element displayed on the left side /\n logo: ReactNode;\n /* Array of navigation sections as tab elements /\n sections: ReactElement<T>[];\n /* Right-aligned items (e.g., user menu, search, settings) /\n rightItems?: ReactNode;\n /* Currently selected tab key for highlighting active state /\n selectedChoice: T['key'];\n};\n\n/\n Desktop Navigation Bar Component\n \n A horizontal navigation bar optimized for desktop and tablet viewports.\n * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,\n * and right-aligned utility items.\n \n Features:\n * - Sticky positioning with z-index layering (z-50)\n * - Semi-transparent backdrop with blur effect for modern glass-morphism design\n * - Responsive spacing that adapts across screen sizes\n * - Horizontal scrollable tabs for overflow content\n * - Left-to-right layout: Logo → Navigation → Utility Items\n * - Integrated with TabSelector for consistent tab behavior\n \n Layout Structure:\n * ```\n * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]\n * ```\n \n Responsive Behavior:\n * - Base: 2vw margin-left, 3-unit gap between tabs\n * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs\n * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs\n * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens\n \n Styling Features:\n * - Semi-transparent card background (`bg-card/80`)\n * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)\n * - Backdrop blur effect for content behind navbar\n * - Horizontal overflow scrolling for tab content\n \n @example\n * Basic usage:\n * ```tsx\n * const navigationTabs = [\n * { key: 'home', label: 'Home', href: '/' },\n * { key: 'products', label: 'Products', href: '/products' },\n * { key: 'about', label: 'About', href: '/about' }\n * ];\n \n <DesktopNavbar\n * logo={<CompanyLogo />}\n * sections={navigationTabs}\n * selectedChoice=\"home\"\n * rightItems={<UserProfileMenu />}\n * />\n * ```\n \n @example\n * With multiple right items:\n * ```tsx\n * <DesktopNavbar\n * logo={<Logo />}\n * sections={navSections}\n * selectedChoice={currentPage}\n * rightItems={\n * <>\n * <SearchButton />\n * <NotificationBell />\n * <UserMenu />\n * </>\n * }\n * />\n * ```\n \n @template T - Tab properties type extending TabProps for type safety\n * @param props - DesktopNavbar component props\n * @returns Horizontal desktop navigation JSX element\n */\nexport const DesktopNavbar = <T extends TabSelectorItemProps>({\n logo,\n sections,\n rightItems,\n selectedChoice,\n}: DesktopNavbarProps<T>) => (\n <nav className=\"sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {logo}\n\n <TabSelector\n selectedChoice={selectedChoice}\n className=\"ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n tabs={sections}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n\n <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n {rightItems}\n </div>\n </nav>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf;EACG;EAED,oBAAC,aAAD;GACkB;GAChB,WAAU;GACV,MAAM;GACN;GACA;~~GACA~~;~~EAEF~~,oBAAC,OAAD;GAAK,WAAU;aACZ;~~GACG~~;~~EACF~~"}
1	+ {"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport {\n TabSelector,\n TabSelectorColor,\n type TabSelectorItemProps,\n} from '../TabSelector';\n\n/*\n Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n /\ntype DesktopNavbarProps<T extends TabSelectorItemProps> = {\n /* Logo component or element displayed on the left side /\n logo: ReactNode;\n /* Array of navigation sections as tab elements /\n sections: ReactElement<T>[];\n /* Right-aligned items (e.g., user menu, search, settings) /\n rightItems?: ReactNode;\n /* Currently selected tab key for highlighting active state /\n selectedChoice: T['key'];\n};\n\n/\n Desktop Navigation Bar Component\n \n A horizontal navigation bar optimized for desktop and tablet viewports.\n * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,\n * and right-aligned utility items.\n \n Features:\n * - Sticky positioning with z-index layering (z-50)\n * - Semi-transparent backdrop with blur effect for modern glass-morphism design\n * - Responsive spacing that adapts across screen sizes\n * - Horizontal scrollable tabs for overflow content\n * - Left-to-right layout: Logo → Navigation → Utility Items\n * - Integrated with TabSelector for consistent tab behavior\n \n Layout Structure:\n * ```\n * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]\n * ```\n \n Responsive Behavior:\n * - Base: 2vw margin-left, 3-unit gap between tabs\n * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs\n * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs\n * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens\n \n Styling Features:\n * - Semi-transparent card background (`bg-card/80`)\n * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)\n * - Backdrop blur effect for content behind navbar\n * - Horizontal overflow scrolling for tab content\n \n @example\n * Basic usage:\n * ```tsx\n * const navigationTabs = [\n * { key: 'home', label: 'Home', href: '/' },\n * { key: 'products', label: 'Products', href: '/products' },\n * { key: 'about', label: 'About', href: '/about' }\n * ];\n \n <DesktopNavbar\n * logo={<CompanyLogo />}\n * sections={navigationTabs}\n * selectedChoice=\"home\"\n * rightItems={<UserProfileMenu />}\n * />\n * ```\n \n @example\n * With multiple right items:\n * ```tsx\n * <DesktopNavbar\n * logo={<Logo />}\n * sections={navSections}\n * selectedChoice={currentPage}\n * rightItems={\n * <>\n * <SearchButton />\n * <NotificationBell />\n * <UserMenu />\n * </>\n * }\n * />\n * ```\n \n @template T - Tab properties type extending TabProps for type safety\n * @param props - DesktopNavbar component props\n * @returns Horizontal desktop navigation JSX element\n */\nexport const DesktopNavbar = <T extends TabSelectorItemProps>({\n logo,\n sections,\n rightItems,\n selectedChoice,\n}: DesktopNavbarProps<T>) => (\n <nav className=\"sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {logo}\n\n <TabSelector\n selectedChoice={selectedChoice}\n className=\"ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n tabs={sections}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n\n <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n {rightItems}\n </div>\n </nav>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf;EACG;EAED,oBAAC,aAAD;GACkB;GAChB,WAAU;GACV,MAAM;GACN;GACA;EACD;EAED,oBAAC,OAAD;GAAK,WAAU;aACZ;EACE;CACF"}

package/dist/esm/components/Navbar/MobileNavbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/*\n Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n /\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n /* Logo component or element displayed in the header /\n logo: ReactNode;\n /* Additional content displayed at the top of expanded mobile menu /\n topChildren?: ReactNode;\n /* Navigation sections displayed in the top area of expanded menu /\n topSections?: ReactElement<T>[];\n /* Additional content displayed at the bottom of expanded mobile menu /\n bottomChildren?: ReactNode;\n /* Navigation sections displayed in the bottom area of expanded menu /\n bottomSections?: ReactElement<T>[];\n /* Right-aligned items in the collapsed header (e.g., search, notifications) /\n rightItems?: ReactNode;\n /* Whether the navbar should be rollable (default: true) /\n rollable?: boolean;\n};\n\n/\n Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n /\nconst navVariants: Variants = {\n open: {\n transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n },\n closed: {\n transition: { staggerChildren: 0.05, staggerDirection: -1 },\n },\n};\n\n/\n Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n /\nconst bgStyle =\n 'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/\n Mobile Navigation Bar Component\n \n A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n \n Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n \n Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n * (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children] │\n * │ [Top Sections - Navigation Items] │\n * │ [Bottom Sections - Navigation Items] │\n * │ [Bottom Children] │\n * └─────────────────────────────────────────┘\n * ```\n \n Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n \n Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n \n @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n * logo={<MobileLogo />}\n * topSections={primaryNavItems}\n * rightItems={<SearchIcon />}\n * />\n * ```\n \n @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n * logo={<Logo />}\n * topChildren={<WelcomeMessage />}\n * topSections={mainNavItems}\n * bottomSections={utilityNavItems}\n * bottomChildren={<UserProfile />}\n * rightItems={\n * <>\n * <NotificationIcon />\n * <SearchIcon />\n * </>\n * }\n * />\n * ```\n \n Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n \n @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n logo,\n topChildren,\n topSections = [],\n bottomChildren,\n bottomSections = [],\n rightItems,\n rollable = true,\n}: MobileNavbarProps<T>) => {\n const [isHidden, setIsHidden] = useState<boolean>(false);\n const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n const navRef = useRef<HTMLDivElement>(null);\n\n useScrollBlockage({\n disableScroll: rollable,\n key: 'mobile_nav',\n });\n\n useScrollDetection({\n onScrollUp: () => setIsHidden(false),\n onScrollDown: () => setIsHidden(true),\n isEnabled: !isUnrolled && rollable,\n });\n\n const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n return (\n <nav\n className={cn(\n bgStyle,\n 'sticky top-0 z-50 flex w-screen flex-col transition',\n isHidden ? '-translate-y-full' : 'translate-y-0'\n )}\n id=\"mobile-menu\"\n >\n <div\n className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n ref={navRef}\n >\n {logo}\n\n <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n <div className=\"flex w-full items-center justify-end gap-1\">\n {rightItems}\n </div>\n\n {isBurgerShowed && (\n <Burger\n isActive={isUnrolled}\n onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n />\n )}\n </div>\n </div>\n\n <div\n className={cn(\n bgStyle,\n 'absolute bottom-0 left-0 w-full translate-y-full'\n )}\n >\n <MaxHeightSmoother isHidden={!isUnrolled}>\n <m.div\n className=\"flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide\"\n onClick={() => setIsUnrolled(false)}\n animate={isUnrolled ? 'open' : 'closed'}\n variants={navVariants}\n style={{\n height: `calc(100vh - ${backDivHeight}px)`,\n }}\n >\n {topChildren}\n <div className=\"flex h-full flex-col justify-center\">\n {topSections}\n {bottomSections}\n </div>\n\n <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n {bottomChildren}\n </div>\n </m.div>\n </MaxHeightSmoother>\n </div>\n </nav>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;~~EAAK~~,EAC1D;~~CACD~~,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;~~EAAI~~,EAC5D;~~CACF~~;;;;;~~AAMD~~,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,~~EAAE~~,~~EAChB~~,gBACA,iBAAiB,~~EAAE~~,~~EACnB~~,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,~~MAAM~~;~~CACxD~~,MAAM,CAAC,YAAY,iBAAiB,SAAkB,~~MAAM~~;~~CAE5D~~,MAAM,SAAS,OAAuB,~~KAAK~~;~~CAE3C~~,kBAAkB;EAChB,eAAe;EACf,KAAK;~~EACN~~,CAAC;~~CAEF~~,mBAAmB;EACjB,kBAAkB,YAAY,~~MAAM~~;~~EACpC~~,oBAAoB,YAAY,~~KAAK~~;~~EACrC~~,WAAW,CAAC,cAAc;~~EAC3B~~,CAAC;~~CAEF~~,MAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;CAExE,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,~~gBAClC~~;~~EACD~~,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;~~KACG~~,~~GAEL~~,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,~~WAAW~~;~~KACzD~~,EAEA;~~MACF~~;~~MAEN~~,oBAAC,OAAD;GACE,WAAW,GACT,SACA,~~mDACD~~;~~aAED~~,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,~~MAAM~~;~~KACnC~~,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,~~MACvC~~;~~eAPH~~;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,~~eACG~~;;~~MAEN~~,oBAAC,OAAD;OAAK,WAAU;iBACZ;~~OACG~~;~~MACA~~;;~~IACU~~;~~GAChB~~,EACF"}
1	+ {"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/*\n Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n /\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n /* Logo component or element displayed in the header /\n logo: ReactNode;\n /* Additional content displayed at the top of expanded mobile menu /\n topChildren?: ReactNode;\n /* Navigation sections displayed in the top area of expanded menu /\n topSections?: ReactElement<T>[];\n /* Additional content displayed at the bottom of expanded mobile menu /\n bottomChildren?: ReactNode;\n /* Navigation sections displayed in the bottom area of expanded menu /\n bottomSections?: ReactElement<T>[];\n /* Right-aligned items in the collapsed header (e.g., search, notifications) /\n rightItems?: ReactNode;\n /* Whether the navbar should be rollable (default: true) /\n rollable?: boolean;\n};\n\n/\n Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n /\nconst navVariants: Variants = {\n open: {\n transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n },\n closed: {\n transition: { staggerChildren: 0.05, staggerDirection: -1 },\n },\n};\n\n/\n Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n /\nconst bgStyle =\n 'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/\n Mobile Navigation Bar Component\n \n A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n \n Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n \n Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n * (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children] │\n * │ [Top Sections - Navigation Items] │\n * │ [Bottom Sections - Navigation Items] │\n * │ [Bottom Children] │\n * └─────────────────────────────────────────┘\n * ```\n \n Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n \n Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n \n @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n * logo={<MobileLogo />}\n * topSections={primaryNavItems}\n * rightItems={<SearchIcon />}\n * />\n * ```\n \n @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n * logo={<Logo />}\n * topChildren={<WelcomeMessage />}\n * topSections={mainNavItems}\n * bottomSections={utilityNavItems}\n * bottomChildren={<UserProfile />}\n * rightItems={\n * <>\n * <NotificationIcon />\n * <SearchIcon />\n * </>\n * }\n * />\n * ```\n \n Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n \n @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n logo,\n topChildren,\n topSections = [],\n bottomChildren,\n bottomSections = [],\n rightItems,\n rollable = true,\n}: MobileNavbarProps<T>) => {\n const [isHidden, setIsHidden] = useState<boolean>(false);\n const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n const navRef = useRef<HTMLDivElement>(null);\n\n useScrollBlockage({\n disableScroll: rollable,\n key: 'mobile_nav',\n });\n\n useScrollDetection({\n onScrollUp: () => setIsHidden(false),\n onScrollDown: () => setIsHidden(true),\n isEnabled: !isUnrolled && rollable,\n });\n\n const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n return (\n <nav\n className={cn(\n bgStyle,\n 'sticky top-0 z-50 flex w-screen flex-col transition',\n isHidden ? '-translate-y-full' : 'translate-y-0'\n )}\n id=\"mobile-menu\"\n >\n <div\n className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n ref={navRef}\n >\n {logo}\n\n <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n <div className=\"flex w-full items-center justify-end gap-1\">\n {rightItems}\n </div>\n\n {isBurgerShowed && (\n <Burger\n isActive={isUnrolled}\n onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n />\n )}\n </div>\n </div>\n\n <div\n className={cn(\n bgStyle,\n 'absolute bottom-0 left-0 w-full translate-y-full'\n )}\n >\n <MaxHeightSmoother isHidden={!isUnrolled}>\n <m.div\n className=\"flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide\"\n onClick={() => setIsUnrolled(false)}\n animate={isUnrolled ? 'open' : 'closed'}\n variants={navVariants}\n style={{\n height: `calc(100vh - ${backDivHeight}px)`,\n }}\n >\n {topChildren}\n <div className=\"flex h-full flex-col justify-center\">\n {topSections}\n {bottomSections}\n </div>\n\n <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n {bottomChildren}\n </div>\n </m.div>\n </MaxHeightSmoother>\n </div>\n </nav>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;CAAI,EAC1D;CACA,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;CAAG,EAC5D;AACF;;;;;AAMA,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,CAAC,GACf,gBACA,iBAAiB,CAAC,GAClB,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,KAAK;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,KAAK;CAE3D,MAAM,SAAS,OAAuB,IAAI;CAE1C,kBAAkB;EAChB,eAAe;EACf,KAAK;CACP,CAAC;CAED,mBAAmB;EACjB,kBAAkB,YAAY,KAAK;EACnC,oBAAoB,YAAY,IAAI;EACpC,WAAW,CAAC,cAAc;CAC5B,CAAC;CAED,MAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;CAExE,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,eACnC;EACA,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,IAEJ,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,UAAU;IACzD,EAEA;KACF;MAEL,oBAAC,OAAD;GACE,WAAW,GACT,SACA,kDACF;aAEA,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,KAAK;KAClC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,KACxC;eAPF;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,cACE;;MAEL,oBAAC,OAAD;OAAK,WAAU;iBACZ;MACE;KACA;;GACU;EAChB,EACF;;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\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 /* Whether the mobile navbar should be rollable (default: true) /\n mobileRollable?: boolean;\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 { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\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 mobileRollable = true,\n}: NavbarProps<T>) => {\n const { isMobile } = useDevice('lg');\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 rollable={mobileRollable}\n />\n ) : (\n <DesktopNavbar\n sections={desktopSections}\n rightItems={rightItemsDesktop}\n logo={logo}\n selectedChoice={selectedChoice}\n />\n );\n};\n"],"mappings":";;;;;;;;;AA+FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,~~EAAE~~,~~EACpB~~,oBAAoB,~~EAAE~~,~~EACtB~~,sBACA,uBAAuB,~~EAAE~~,~~EACzB~~,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,~~KAAK~~;~~CAEpC~~,OAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;~~EACV~~,~~IAEF~~,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;~~EAChB~~"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\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 /* Whether the mobile navbar should be rollable (default: true) /\n mobileRollable?: boolean;\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 { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\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 mobileRollable = true,\n}: NavbarProps<T>) => {\n const { isMobile } = useDevice('lg');\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 rollable={mobileRollable}\n />\n ) : (\n <DesktopNavbar\n sections={desktopSections}\n rightItems={rightItemsDesktop}\n logo={logo}\n selectedChoice={selectedChoice}\n />\n );\n};\n"],"mappings":";;;;;;;;;AA+FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,CAAC,GACnB,oBAAoB,CAAC,GACrB,sBACA,uBAAuB,CAAC,GACxB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,IAAI;CAEnC,OAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;CACX,KAED,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;CACjB;AAEL"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useNavigation.mjs","names":[],"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~~,MAAM,eAA8B,~~EAAE~~;~~EAGtC~~,SAAS,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~~;~~EAED~~,IAAI,gBACF,iBAAiB,eAAe,~~GAAG;;CAKvC~~,gBAAgB;EACd,OAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,~~MAAM~~,CAAC;~~EAEzE~~,aAAa;GACX,OAAO,oBAAoB,UAAU,~~oBAAoB;;IAE1D~~,~~EAAE~~,CAAC;;;;;;;~~CAQN~~,MAAM,eAAe,YAAmC;EACtD,iBAAiB,~~KAAK~~;~~EAEtB~~,IAAI,OAAO,SAAS,aAAa,KAC/B,OAAO,SAAS;GAAE,KAAK;GAAG,UAAU;~~GAAU~~,CAAC;~~OAE/C~~,QAAQ,~~IAAI;;;;;;;;;;CAYhB~~,MAAM,kBACJ,WACA,KACA,YACG;EACH,iBAAiB,~~UAAU~~;~~EAG3B~~,IAAI,OAAO,SAAS,aAAa,KAAK;GACpC,MAAM,YAAY,SAAS,eAAe,~~UAAU~~;~~GAEpD~~,IAAI,WACF,UAAU,eAAe;IACvB,UAAU;IACV,OAAO;IACP,QAAQ;~~IACT~~,CAAC;~~SAIJ~~,~~WAAW;;CAIf~~,OAAO;;EAEL;;EAEA;;EAEA;~~EACD~~"}
1	+ {"version":3,"file":"useNavigation.mjs","names":[],"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,IAAI;;;;;CAMtE,MAAM,4BAA4B;EAChC,MAAM,UAAU,OAAO;EACvB,MAAM,WAAW,SAAS,iBAAiB,SAAS;EACpD,MAAM,eAA8B,CAAC;EAGrC,SAAS,SAAS,YAChB,aAAa,KAAK;GAChB,IAAI,QAAQ;GACZ,WAAW,QAAQ;GACnB,cAAc,QAAQ;EACxB,CAAC,CACH;EAGA,MAAM,iBAAiB,aAAa,MACjC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS,CACvC;EAEA,IAAI,gBACF,iBAAiB,eAAe,EAAE;CAEtC;CAGA,gBAAgB;EACd,OAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,KAAK,CAAC;EAExE,aAAa;GACX,OAAO,oBAAoB,UAAU,mBAAmB;EAC1D;CACF,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAAe,YAAmC;EACtD,iBAAiB,IAAI;EAErB,IAAI,OAAO,SAAS,aAAa,KAC/B,OAAO,SAAS;GAAE,KAAK;GAAG,UAAU;EAAS,CAAC;OAE9C,QAAQ,GAAG;CAEf;;;;;;;;;CAUA,MAAM,kBACJ,WACA,KACA,YACG;EACH,iBAAiB,SAAS;EAG1B,IAAI,OAAO,SAAS,aAAa,KAAK;GACpC,MAAM,YAAY,SAAS,eAAe,SAAS;GAEnD,IAAI,WACF,UAAU,eAAe;IACvB,UAAU;IACV,OAAO;IACP,QAAQ;GACV,CAAC;EAEL,OAEE,UAAU;CAEd;CAEA,OAAO;;EAEL;;EAEA;;EAEA;CACF;AACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberItemsSelector.mjs","names":[],"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 \| number;\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 text-sm\">{numberItemsSelector}</span>\n <Select value={value.toString()} 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,MAAa,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~~;~~CAE9C~~,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAAM,WAAU;aAAwB;~~GAA2B~~,~~GACnE~~,qBAAC,QAAD;GAAQ,OAAO,MAAM,~~UAAU~~;~~GAAiB~~;aAAhD,CACE,oBAAC,OAAO,SAAR;IAAgB,WAAU;cACxB,oBAAC,OAAO,OAAR,EAAc,aAAa,~~gBAAkB~~;~~IAC9B~~,~~GACjB~~,oBAAC,OAAO,SAAR,YACG,MAAM,KAAK,SACV,oBAAC,OAAO,MAAR;IAAwB,OAAO,KAAK,~~UAAU~~;~~cAC3C~~;~~IACW~~,~~EAFI~~,~~KAEJ~~,CACd,EACa,EACV;~~KACL~~"}
1	+ {"version":3,"file":"NumberItemsSelector.mjs","names":[],"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 \| number;\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 text-sm\">{numberItemsSelector}</span>\n <Select value={value.toString()} 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,MAAa,uBAAqD,EAChE,OACA,eACA,MAAM,GACN,MAAM,UACF;CACJ,MAAM,EAAE,qBAAqB,mBAAmB,YAAY,YAAY;CAExE,MAAM,QAAQ;EACZ;EAAG;EAAG;EAAG;EAAI;EAAI;EAAI;EAAK;EAAK;EAAK;EAAM;EAAM;EAAM;EAAO;CAC/D,EAAE,QAAQ,SAAS,QAAQ,OAAO,QAAQ,GAAG;CAE7C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAAM,WAAU;aAAwB;EAA0B,IAClE,qBAAC,QAAD;GAAQ,OAAO,MAAM,SAAS;GAAkB;aAAhD,CACE,oBAAC,OAAO,SAAR;IAAgB,WAAU;cACxB,oBAAC,OAAO,OAAR,EAAc,aAAa,eAAiB;GAC9B,IAChB,oBAAC,OAAO,SAAR,YACG,MAAM,KAAK,SACV,oBAAC,OAAO,MAAR;IAAwB,OAAO,KAAK,SAAS;cAC1C;GACU,GAFK,IAEL,CACd,EACa,EACV;IACL;;AAET"}

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

@@ -130,10 +130,13 @@ const Pagination = ({ currentPage, totalPages, onPageChange, showFirstLast = fal
 				/* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-1 max-md:gap-0.5",
 					children: pageNumbers.map((page, index) => {
-						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}-${index}`);
+						if (page === "ellipsis") {
+							const ellipsisKey = index === pageNumbers.indexOf("ellipsis") ? "ellipsis-start" : "ellipsis-end";
+							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" })
+							}, ellipsisKey);
+						}
 						const isActive = page === currentPage;
 						const refIndex = (showPrevNext ? 1 : 0) + pageNumbers.slice(0, index).filter((p) => p !== "ellipsis").length;
 						return /* @__PURE__ */ jsx(Button, {
@@ -147,7 +150,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, showFirstLast = fal
 							ref: (el) => {
 								if (el) optionsRefs.current[refIndex] = el;
 							},
-							className: cn("flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm", size === "sm" && "h-6 w-6 text-xs", size === "lg" && "h-10 w-10 text-base", isActive && "font-semibold"),
+							className: cn("flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm", size === "sm" && "h-6 w-6 text-xs", size === "lg" && "size-10 text-base", isActive && "font-semibold"),
 							children: page
 						}, page);
 					})

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.mjs","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport {\n type ComponentProps,\n type FC,\n type HTMLAttributes,\n useEffect,\n useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\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 selector = (option: HTMLElement) =>\n option?.getAttribute('aria-current') === 'true';\n\nconst getButtonSize = (size?: PaginationSize \| `${PaginationSize}` \| null) => {\n if (size === PaginationSize.SM) {\n return ButtonSize.ICON_SM;\n } else if (size === PaginationSize.LG) {\n return ButtonSize.ICON_LG;\n } else {\n return ButtonSize.ICON_MD;\n }\n};\n\nconst InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n <div\n className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n {...props}\n />\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 { goToNextPage, goToPreviousPage } = useIntlayer('pagination');\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 const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n const timer = setTimeout(() => {\n calculatePosition();\n }, 300);\n\n return () => clearTimeout(timer);\n }, [currentPage, calculatePosition]);\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 <div className=\"relative flex items-center gap-1\">\n {choiceIndicatorPosition && (\n <InputIndicator style={choiceIndicatorPosition} ref={indicatorRef} />\n )}\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={goToPreviousPage.value}\n Icon={ChevronLeft}\n ref={(el) => {\n if (el) optionsRefs.current[0] = el;\n }}\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, index) => {\n if (page === 'ellipsis') {\n return (\n <div\n key={`ellipsis-${page}-${index}`}\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 // Calculate ref index: offset by 1 if showPrevNext, then count only non-ellipsis items\n const refIndex =\n (showPrevNext ? 1 : 0) +\n pageNumbers.slice(0, index).filter((p) => p !== 'ellipsis')\n .length;\n\n return (\n <Button\n key={page}\n variant={\n isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE\n }\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(page)}\n disabled={disabled}\n label={`Go to page ${page}`}\n aria-current={isActive ? 'true' : 'false'}\n ref={(el) => {\n if (el) optionsRefs.current[refIndex] = el;\n }}\n className={cn(\n 'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n size === 'sm' && 'h-6 w-6 text-xs',\n size === 'lg' && 'h-10 w-10 text-base',\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={goToNextPage.value}\n Icon={ChevronRight}\n ref={(el) => {\n const lastRefIndex =\n (showPrevNext ? 1 : 0) +\n pageNumbers.filter((p) => p !== 'ellipsis').length;\n if (el) optionsRefs.current[lastRefIndex] = el;\n }}\n className=\"min-w-0 px-2\"\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,qBAAqB,IAChC,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;GACd;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CACF;AAED,IAAY,iBAAL;CACL;CACA;CACA;;KACD;AAED,IAAY,oBAAL;CACL;CACA;CACA;;KACD;AAaD,MAAM,uBACJ,aACA,YACA,oBAC4B;CAC5B,IAAI,cAAc,iBAChB,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,GAAG,GAAG,MAAM,IAAI,EAAE;CAG5D,MAAM,QAAiC,EAAE;CACzC,MAAM,cAAc,KAAK,MAAM,kBAAkB,EAAE;CAEnD,MAAM,KAAK,EAAE;CAEb,IAAI,eAAe,cAAc,GAAG;EAClC,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,kBAAkB,GAAG,aAAa,EAAE,EAAE,KAClE,MAAM,KAAK,EAAE;EAEf,IAAI,aAAa,iBACf,MAAM,KAAK,WAAW;EAExB,IAAI,aAAa,GACf,MAAM,KAAK,WAAW;QAEnB,IAAI,eAAe,aAAa,cAAc,GAAG;EACtD,IAAI,aAAa,iBACf,MAAM,KAAK,WAAW;EAExB,KACE,IAAI,IAAI,KAAK,IAAI,GAAG,aAAa,kBAAkB,EAAE,EACrD,KAAK,YACL,KAEA,MAAM,KAAK,EAAE;QAEV;EACL,MAAM,KAAK,WAAW;EACtB,MAAM,QAAQ,cAAc;EAC5B,MAAM,MAAM,cAAc;EAC1B,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,KAC5B,MAAM,KAAK,EAAE;EAEf,MAAM,KAAK,WAAW;EACtB,MAAM,KAAK,WAAW;;CAGxB,OAAO;;AAGT,MAAM,YAAY,WAChB,QAAQ,aAAa,eAAe,KAAK;AAE3C,MAAM,iBAAiB,SAAuD;CAC5E,IAAI,eACF;MACK,IAAI,eACT;MAEA;;AAIJ,MAAM,kBAA6C,UACjD,oBAAC,OAAD;CACE,WAAU;CACV,GAAI;CACJ;AAGJ,MAAa,cAAmC,EAC9C,aACA,YACA,cACA,gBAAgB,OAChB,eAAe,MACf,kBAAkB,GAClB,WAAW,OACX,aACA,qBACA,gBACA,WACA,GAAG,YACC;CACJ,MAAM,EAAE,cAAc,qBAAqB,YAAY,aAAa;CAEpE,MAAM,cAAc,oBAClB,aACA,YACA,gBACD;CAED,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;CAED,gBAAgB;EACd,MAAM,QAAQ,iBAAiB;GAC7B,mBAAmB;KAClB,IAAI;EAEP,aAAa,aAAa,MAAM;IAC/B,CAAC,aAAa,kBAAkB,CAAC;CAEpC,IAAI,cAAc,GAAG,OAAO;CAE5B,MAAM,oBAAoB,SAAiB;EACzC,IAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,aAC3D,aAAa,KAAK;;CAItB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,mBAAmB;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;EAC/D,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,2BACC,oBAAC,gBAAD;KAAgB,OAAO;KAAyB,KAAK;KAAgB;IAGtE,gBACC,oBAAC,QAAD;KACE;KACA,MAAM;KACN;KACA,eAAe,iBAAiB,cAAc,EAAE;KAChD,UAAU,YAAY;KACtB,OAAO,iBAAiB;KACxB,MAAM;KACN,MAAM,OAAO;MACX,IAAI,IAAI,YAAY,QAAQ,KAAK;;KAEnC,WAAU;KACV;IAGJ,oBAAC,OAAD;KAAK,WAAU;eACZ,YAAY,KAAK,MAAM,UAAU;MAChC,IAAI,SAAS,YACX,OACE,oBAAC,OAAD;OAEE,WAAU;iBAEV,oBAAC,gBAAD,EAAgB,WAAU,iCAAkC;OACxD,EAJC,YAAY,KAAK,GAAG,QAIrB;MAIV,MAAM,WAAW,SAAS;MAE1B,MAAM,YACH,eAAe,IAAI,KACpB,YAAY,MAAM,GAAG,MAAM,CAAC,QAAQ,MAAM,MAAM,WAAW,CACxD;MAEL,OACE,oBAAC,QAAD;OAEE,SACE;OAEF,MAAM;OACN;OACA,eAAe,iBAAiB,KAAK;OAC3B;OACV,OAAO,cAAc;OACrB,gBAAc,WAAW,SAAS;OAClC,MAAM,OAAO;QACX,IAAI,IAAI,YAAY,QAAQ,YAAY;;OAE1C,WAAW,GACT,8EACA,SAAS,QAAQ,mBACjB,SAAS,QAAQ,uBACjB,YAAY,gBACb;iBAEA;OACM,EArBF,KAqBE;OAEX;KACE;IAEL,gBACC,oBAAC,QAAD;KACE;KACA,MAAM;KACN;KACA,eAAe,iBAAiB,cAAc,EAAE;KAChD,UAAU,YAAY;KACtB,OAAO,aAAa;KACpB,MAAM;KACN,MAAM,OAAO;MACX,MAAM,gBACH,eAAe,IAAI,KACpB,YAAY,QAAQ,MAAM,MAAM,WAAW,CAAC;MAC9C,IAAI,IAAI,YAAY,QAAQ,gBAAgB;;KAE9C,WAAU;KACV;IAEA;;EACF"}
1	+ {"version":3,"file":"Pagination.mjs","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport {\n type ComponentProps,\n type FC,\n type HTMLAttributes,\n useEffect,\n useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\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 selector = (option: HTMLElement) =>\n option?.getAttribute('aria-current') === 'true';\n\nconst getButtonSize = (size?: PaginationSize \| `${PaginationSize}` \| null) => {\n if (size === PaginationSize.SM) {\n return ButtonSize.ICON_SM;\n } else if (size === PaginationSize.LG) {\n return ButtonSize.ICON_LG;\n } else {\n return ButtonSize.ICON_MD;\n }\n};\n\nconst InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n <div\n className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n {...props}\n />\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 { goToNextPage, goToPreviousPage } = useIntlayer('pagination');\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 const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n const timer = setTimeout(() => {\n calculatePosition();\n }, 300);\n\n return () => clearTimeout(timer);\n }, [currentPage, calculatePosition]);\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 <div className=\"relative flex items-center gap-1\">\n {choiceIndicatorPosition && (\n <InputIndicator style={choiceIndicatorPosition} ref={indicatorRef} />\n )}\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={goToPreviousPage.value}\n Icon={ChevronLeft}\n ref={(el) => {\n if (el) optionsRefs.current[0] = el;\n }}\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, index) => {\n if (page === 'ellipsis') {\n const isFirstEllipsis = index === pageNumbers.indexOf('ellipsis');\n const ellipsisKey = isFirstEllipsis\n ? 'ellipsis-start'\n : 'ellipsis-end';\n return (\n <div\n key={ellipsisKey}\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 // Calculate ref index: offset by 1 if showPrevNext, then count only non-ellipsis items\n const refIndex =\n (showPrevNext ? 1 : 0) +\n pageNumbers.slice(0, index).filter((p) => p !== 'ellipsis')\n .length;\n\n return (\n <Button\n key={page}\n variant={\n isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE\n }\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(page)}\n disabled={disabled}\n label={`Go to page ${page}`}\n aria-current={isActive ? 'true' : 'false'}\n ref={(el) => {\n if (el) optionsRefs.current[refIndex] = el;\n }}\n className={cn(\n 'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n size === 'sm' && 'h-6 w-6 text-xs',\n size === 'lg' && 'size-10 text-base',\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={goToNextPage.value}\n Icon={ChevronRight}\n ref={(el) => {\n const lastRefIndex =\n (showPrevNext ? 1 : 0) +\n pageNumbers.filter((p) => p !== 'ellipsis').length;\n if (el) optionsRefs.current[lastRefIndex] = el;\n }}\n className=\"min-w-0 px-2\"\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,qBAAqB,IAChC,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;EACf;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CACF;AAEA,IAAY,iBAAL;CACL;CACA;CACA;;AACF;AAEA,IAAY,oBAAL;CACL;CACA;CACA;;AACF;AAaA,MAAM,uBACJ,aACA,YACA,oBAC4B;CAC5B,IAAI,cAAc,iBAChB,OAAO,MAAM,KAAK,EAAE,QAAQ,WAAW,IAAI,GAAG,MAAM,IAAI,CAAC;CAG3D,MAAM,QAAiC,CAAC;CACxC,MAAM,cAAc,KAAK,MAAM,kBAAkB,CAAC;CAElD,MAAM,KAAK,CAAC;CAEZ,IAAI,eAAe,cAAc,GAAG;EAClC,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,kBAAkB,GAAG,aAAa,CAAC,GAAG,KAClE,MAAM,KAAK,CAAC;EAEd,IAAI,aAAa,iBACf,MAAM,KAAK,UAAU;EAEvB,IAAI,aAAa,GACf,MAAM,KAAK,UAAU;CAEzB,OAAO,IAAI,eAAe,aAAa,cAAc,GAAG;EACtD,IAAI,aAAa,iBACf,MAAM,KAAK,UAAU;EAEvB,KACE,IAAI,IAAI,KAAK,IAAI,GAAG,aAAa,kBAAkB,CAAC,GACpD,KAAK,YACL,KAEA,MAAM,KAAK,CAAC;CAEhB,OAAO;EACL,MAAM,KAAK,UAAU;EACrB,MAAM,QAAQ,cAAc;EAC5B,MAAM,MAAM,cAAc;EAC1B,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,KAC5B,MAAM,KAAK,CAAC;EAEd,MAAM,KAAK,UAAU;EACrB,MAAM,KAAK,UAAU;CACvB;CAEA,OAAO;AACT;AAEA,MAAM,YAAY,WAChB,QAAQ,aAAa,cAAc,MAAM;AAE3C,MAAM,iBAAiB,SAAuD;CAC5E,IAAI,eACF;MACK,IAAI,eACT;MAEA;AAEJ;AAEA,MAAM,kBAA6C,UACjD,oBAAC,OAAD;CACE,WAAU;CACV,GAAI;AACL;AAGH,MAAa,cAAmC,EAC9C,aACA,YACA,cACA,gBAAgB,OAChB,eAAe,MACf,kBAAkB,GAClB,WAAW,OACX,aACA,qBACA,gBACA,WACA,GAAG,YACC;CACJ,MAAM,EAAE,cAAc,qBAAqB,YAAY,YAAY;CAEnE,MAAM,cAAc,oBAClB,aACA,YACA,eACF;CAEA,MAAM,aAAa,cAAc,IAAI;CACrC,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,OAAsB,CAAC,CAAC;CAC5C,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;CACf,CACF;CAEA,gBAAgB;EACd,MAAM,QAAQ,iBAAiB;GAC7B,kBAAkB;EACpB,GAAG,GAAG;EAEN,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,aAAa,iBAAiB,CAAC;CAEnC,IAAI,cAAc,GAAG,OAAO;CAE5B,MAAM,oBAAoB,SAAiB;EACzC,IAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,aAC3D,aAAa,IAAI;CAErB;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,mBAAmB;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC9D,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,2BACC,oBAAC,gBAAD;KAAgB,OAAO;KAAyB,KAAK;IAAe;IAGrE,gBACC,oBAAC,QAAD;KACE;KACA,MAAM;KACN;KACA,eAAe,iBAAiB,cAAc,CAAC;KAC/C,UAAU,YAAY;KACtB,OAAO,iBAAiB;KACxB,MAAM;KACN,MAAM,OAAO;MACX,IAAI,IAAI,YAAY,QAAQ,KAAK;KACnC;KACA,WAAU;IACX;IAGH,oBAAC,OAAD;KAAK,WAAU;eACZ,YAAY,KAAK,MAAM,UAAU;MAChC,IAAI,SAAS,YAAY;OAEvB,MAAM,cADkB,UAAU,YAAY,QAAQ,UAAU,IAE5D,mBACA;OACJ,OACE,oBAAC,OAAD;QAEE,WAAU;kBAEV,oBAAC,gBAAD,EAAgB,WAAU,gCAAiC;OACxD,GAJE,WAIF;MAET;MAEA,MAAM,WAAW,SAAS;MAE1B,MAAM,YACH,eAAe,IAAI,KACpB,YAAY,MAAM,GAAG,KAAK,EAAE,QAAQ,MAAM,MAAM,UAAU,EACvD;MAEL,OACE,oBAAC,QAAD;OAEE,SACE;OAEF,MAAM;OACN;OACA,eAAe,iBAAiB,IAAI;OAC1B;OACV,OAAO,cAAc;OACrB,gBAAc,WAAW,SAAS;OAClC,MAAM,OAAO;QACX,IAAI,IAAI,YAAY,QAAQ,YAAY;OAC1C;OACA,WAAW,GACT,8EACA,SAAS,QAAQ,mBACjB,SAAS,QAAQ,qBACjB,YAAY,eACd;iBAEC;MACK,GArBD,IAqBC;KAEZ,CAAC;IACE;IAEJ,gBACC,oBAAC,QAAD;KACE;KACA,MAAM;KACN;KACA,eAAe,iBAAiB,cAAc,CAAC;KAC/C,UAAU,YAAY;KACtB,OAAO,aAAa;KACpB,MAAM;KACN,MAAM,OAAO;MACX,MAAM,gBACH,eAAe,IAAI,KACpB,YAAY,QAAQ,MAAM,MAAM,UAAU,EAAE;MAC9C,IAAI,IAAI,YAAY,QAAQ,gBAAgB;KAC9C;KACA,WAAU;IACX;GAEA;;CACF;AAET"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ShowingResultsNumberItems.mjs","names":[],"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 // Guard against weird inputs\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const page = Math.min(Math.max(1, currentPage), totalPages);\n\n const start =\n totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);\n const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);\n\n return (\n <div className=\"text-neutral text-sm\">\n {showingResults({\n start: number(start),\n end: number(end),\n total: number(totalItems),\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;;AAYA,MAAa,6BAAiE,EAC5E,aACA,UACA,iBACI;CACJ,MAAM,EAAE,mBAAmB,YAAY,~~aAAa~~;~~CACpD~~,MAAM,SAAS,~~WAAW~~;~~CAG1B~~,MAAM,eAAe,KAAK,IAAI,GAAG,~~SAAS~~;~~CAC1C~~,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,~~aAAa~~,CAAC;~~CACpE~~,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,~~YAAY~~,~~EAAE~~,~~WAAW~~;~~CAE3D~~,MAAM,QACJ,eAAe,IAAI,IAAI,KAAK,KAAK,OAAO,KAAK,eAAe,GAAG,~~WAAW~~;~~CAC5E~~,MAAM,MAAM,eAAe,IAAI,IAAI,KAAK,IAAI,OAAO,cAAc,~~WAAW~~;~~CAE5E~~,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,eAAe;GACd,OAAO,OAAO,~~MAAM~~;~~GACpB~~,KAAK,OAAO,~~IAAI~~;~~GAChB~~,OAAO,OAAO,~~WAAW~~;~~GAC1B~~,CAAC;~~EACE~~"}
1	+ {"version":3,"file":"ShowingResultsNumberItems.mjs","names":[],"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 // Guard against weird inputs\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const page = Math.min(Math.max(1, currentPage), totalPages);\n\n const start =\n totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);\n const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);\n\n return (\n <div className=\"text-neutral text-sm\">\n {showingResults({\n start: number(start),\n end: number(end),\n total: number(totalItems),\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;;AAYA,MAAa,6BAAiE,EAC5E,aACA,UACA,iBACI;CACJ,MAAM,EAAE,mBAAmB,YAAY,YAAY;CACnD,MAAM,SAAS,UAAU;CAGzB,MAAM,eAAe,KAAK,IAAI,GAAG,QAAQ;CACzC,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,YAAY,CAAC;CACnE,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,WAAW,GAAG,UAAU;CAE1D,MAAM,QACJ,eAAe,IAAI,IAAI,KAAK,KAAK,OAAO,KAAK,eAAe,GAAG,UAAU;CAC3E,MAAM,MAAM,eAAe,IAAI,IAAI,KAAK,IAAI,OAAO,cAAc,UAAU;CAE3E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,eAAe;GACd,OAAO,OAAO,KAAK;GACnB,KAAK,OAAO,GAAG;GACf,OAAO,OAAO,UAAU;EAC1B,CAAC;CACE;AAET"}

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

	@@ -1 +1 @@
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 uk: 'Записів на сторінку',\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 uk: 'Показано від {{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 uk: 'Оберіть кількість елементів на сторінку',\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 uk: 'Перейти на наступну сторінку',\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 uk: 'Перейти на попередню сторінку',\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;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;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;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;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;GACJ,IAAI;~~GACL~~,CAAC;~~EACH~~;~~CACD~~,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,~~YAAY~~;~~CAClC~~"}
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 uk: 'Записів на сторінку',\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 uk: 'Показано від {{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 uk: 'Оберіть кількість елементів на сторінку',\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 uk: 'Перейти на наступну сторінку',\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 uk: 'Перейти на попередню сторінку',\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;GACJ,IAAI;EACN,CAAC;EACD,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;GACJ,IAAI;EACN,CAAC,CACH;EACA,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;GACJ,IAAI;EACN,CAAC;EACD,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;GACJ,IAAI;EACN,CAAC;EACD,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;GACJ,IAAI;EACN,CAAC;CACH;CACA,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,WAAW;AAClC"}

package/dist/esm/components/Pattern/DotPattern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype DotPatternProps = {\n /* Width of the pattern tile in pixels /\n width?: number;\n /* Height of the pattern tile in pixels /\n height?: number;\n /* Horizontal offset of the pattern /\n x?: number;\n /* Vertical offset of the pattern /\n y?: number;\n /* X coordinate of the dot center within the pattern tile /\n cx?: number;\n /* Y coordinate of the dot center within the pattern tile /\n cy?: number;\n /* Radius of each dot in the pattern /\n cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Dot Pattern Component\n \n A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n \n Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n \n Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n \n Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n \n @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n * <DotPattern />\n * <div className=\"relative z-10\">\n * <h1>Content over dot pattern</h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n * width={24}\n * height={24}\n * cr={1.5}\n * className=\"fill-primary/20\"\n * />\n * ```\n \n @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n * x={8}\n * y={8}\n * cx={2}\n * cy={2}\n * className=\"fill-accent/25\"\n * />\n * ```\n \n @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n * width={32}\n * height={32}\n * cr={2}\n * cx={16}\n * cy={16}\n * className=\"fill-neutral/10\"\n * />\n * ```\n \n Styling Notes:\n * - Use `fill-` classes to customize dot color and opacity\n - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n \n Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n \n @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n width = 16,\n height = 16,\n x = 0,\n y = 0,\n cx = 1,\n cy = 1,\n cr = 1,\n className,\n ...props\n}) => (\n <svg\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 h-full w-full fill-neutral/30',\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id=\"pattern-circle\"\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n patternContentUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <circle cx={cx} cy={cy} r={cr} />\n </pattern>\n </defs>\n <rect\n width=\"100%\"\n height=\"100%\"\n strokeWidth={0}\n fill={`url(#pattern-circle)`}\n />\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,sEACA,~~UACD~~;~~CACD~~,GAAI;WANN,CAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;EACE,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC,UAAD;GAAY;GAAQ;GAAI,GAAG;~~GAAM~~;~~EACzB~~,GACL,~~GACP~~,oBAAC,QAAD;EACE,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAM;~~EACN~~,EACE"}
1	+ {"version":3,"file":"DotPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype DotPatternProps = {\n /* Width of the pattern tile in pixels /\n width?: number;\n /* Height of the pattern tile in pixels /\n height?: number;\n /* Horizontal offset of the pattern /\n x?: number;\n /* Vertical offset of the pattern /\n y?: number;\n /* X coordinate of the dot center within the pattern tile /\n cx?: number;\n /* Y coordinate of the dot center within the pattern tile /\n cy?: number;\n /* Radius of each dot in the pattern /\n cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Dot Pattern Component\n \n A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n \n Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n \n Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n \n Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n \n @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n * <DotPattern />\n * <div className=\"relative z-10\">\n * <h1>Content over dot pattern</h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n * width={24}\n * height={24}\n * cr={1.5}\n * className=\"fill-primary/20\"\n * />\n * ```\n \n @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n * x={8}\n * y={8}\n * cx={2}\n * cy={2}\n * className=\"fill-accent/25\"\n * />\n * ```\n \n @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n * width={32}\n * height={32}\n * cr={2}\n * cx={16}\n * cy={16}\n * className=\"fill-neutral/10\"\n * />\n * ```\n \n Styling Notes:\n * - Use `fill-` classes to customize dot color and opacity\n - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n \n Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n \n @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n width = 16,\n height = 16,\n x = 0,\n y = 0,\n cx = 1,\n cy = 1,\n cr = 1,\n className,\n ...props\n}) => (\n <svg\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 h-full w-full fill-neutral/30',\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id=\"pattern-circle\"\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n patternContentUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <circle cx={cx} cy={cy} r={cr} />\n </pattern>\n </defs>\n <rect\n width=\"100%\"\n height=\"100%\"\n strokeWidth={0}\n fill={`url(#pattern-circle)`}\n />\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,sEACA,SACF;CACA,GAAI;WANN,CAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;EACE,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC,UAAD;GAAY;GAAQ;GAAI,GAAG;EAAK;CACzB,GACL,IACN,oBAAC,QAAD;EACE,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAM;CACP,EACE"}

package/dist/esm/components/Pattern/GridPattern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the GridPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype GridPatternProps = {\n /* Width of each grid cell in pixels /\n width?: number;\n /* Height of each grid cell in pixels /\n height?: number;\n /* Horizontal offset of the pattern /\n x?: number;\n /* Vertical offset of the pattern /\n y?: number;\n /* Array of grid coordinates to highlight as filled squares /\n squares?: [x: number, y: number][];\n /* Dash pattern for grid lines (0 = solid, positive = dashed) /\n strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Unique identifier for the grid pattern definition\n * Static to ensure consistent referencing across instances\n /\nconst id = 'grid-pattern';\n\n/\n Grid Pattern Component\n \n A versatile SVG component that generates a repeating grid pattern background with\n * optional highlighted squares. Ideal for technical layouts, dashboards, design mockups,\n * and any interface requiring structured visual organization.\n \n Features:\n * - Scalable vector-based grid that renders crisp at any zoom level\n * - Customizable cell dimensions and spacing\n * - Optional square highlighting for emphasis or data visualization\n * - Configurable stroke patterns (solid or dashed lines)\n * - Theme-aware styling with automatic dark mode support\n * - Accessibility-friendly with screen reader exclusion\n * - Performance optimized with pointer events disabled\n * - Full container coverage with responsive sizing\n \n Technical Architecture:\n * - Uses SVG `<pattern>` for memory-efficient repetition\n * - Grid lines drawn with path elements for precision\n * - Highlighted squares rendered as separate rect elements\n * - Pattern coordinates use userSpaceOnUse for consistency\n * - Static pattern ID prevents conflicts between instances\n \n Visual Design:\n * - Default: 40x40px grid cells with subtle neutral strokes\n * - Light mode: 10% fill opacity, 15% stroke opacity\n * - Dark mode: Enhanced 30% stroke opacity for visibility\n * - Slight offset (-1px) for optimal line rendering\n * - Optional dashed lines for more subtle appearance\n \n Highlighted Squares:\n * - Defined by coordinate arrays [x, y] where x,y are grid positions\n * - Automatically sized to fit within grid cells (width-1, height-1)\n * - Positioned with 1px offset for visual separation from grid lines\n * - Inherit theme-based fill colors for consistency\n \n @example\n * Basic grid background:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n * <GridPattern />\n * <div className=\"relative z-10\">\n * <h1>Content over grid</h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom grid size with dashed lines:\n * ```tsx\n * <GridPattern\n * width={60}\n * height={60}\n * strokeDasharray={2}\n * className=\"stroke-primary/20\"\n * />\n * ```\n \n @example\n * Data visualization with highlighted squares:\n * ```tsx\n * <GridPattern\n * width={30}\n * height={30}\n * squares={[\n * [0, 1], [1, 1], [2, 1],\n * [1, 2], [3, 0], [4, 2]\n * ]}\n * className=\"fill-accent/20 stroke-accent/30\"\n * />\n * ```\n \n @example\n * Fine grid for technical layouts:\n * ```tsx\n * <GridPattern\n * width={20}\n * height={20}\n * strokeDasharray={1}\n * className=\"stroke-neutral/8 fill-neutral/5\"\n * />\n * ```\n \n Styling Guidelines:\n * - Use low opacity values (5-30%) for background subtlety\n * - Consider theme contrast when customizing colors\n * - Dashed patterns work well for secondary grids\n * - Match grid colors with overall design system\n \n Performance Notes:\n * - Pattern definition reused efficiently across large areas\n * - Highlighted squares rendered individually for flexibility\n * - Pointer events disabled to prevent interaction blocking\n * - SVG optimized for browser rendering performance\n \n Accessibility:\n * - Hidden from screen readers with aria-hidden=\"true\"\n * - Purely decorative - doesn't convey essential information\n * - Maintains sufficient contrast with overlaid content\n \n @param props - GridPattern component props\n * @returns SVG element with repeating grid pattern and optional highlights\n /\nexport const GridPattern: FC<GridPatternProps> = ({\n width = 40,\n height = 40,\n x = -1,\n y = -1,\n strokeDasharray = 0,\n squares,\n className,\n ...props\n}) => (\n <svg\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30',\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id={id}\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <path\n d={`M.5 ${height}V.5H${width}`}\n fill=\"none\"\n strokeDasharray={strokeDasharray}\n />\n </pattern>\n </defs>\n <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n {squares && (\n <svg\n x={x}\n y={y}\n className=\"overflow-visible\"\n role=\"img\"\n aria-label=\"Grid pattern\"\n >\n {squares.map(([x, y]) => (\n <rect\n strokeWidth=\"0\"\n key={`${x}-${y}`}\n width={width - 1}\n height={height - 1}\n x={x width + 1}\n y={y * height + 1}\n />\n ))}\n </svg>\n )}\n </svg>\n);\n"],"mappings":";;;;;;;;AA0BA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GX,MAAa,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,0HACA,~~UACD~~;~~CACD~~,GAAI;WANN;EAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;GACM;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC,QAAD;IACE,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;~~IACjB~~;~~GACM~~,GACL;~~EACP~~,oBAAC,QAAD;GAAM,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;~~GAAM~~;~~EACvE~~,WACC,oBAAC,OAAD;GACK;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAAC,GAAG,OAChB,oBAAC,QAAD;IACE,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAG,IAAI,QAAQ;IACf,GAAG,IAAI,SAAS;~~IAChB~~,~~EALK~~,GAAG,EAAE,GAAG,~~IAKb~~,CACF;~~GACE~~;~~EAEJ~~"}
1	+ {"version":3,"file":"GridPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the GridPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype GridPatternProps = {\n /* Width of each grid cell in pixels /\n width?: number;\n /* Height of each grid cell in pixels /\n height?: number;\n /* Horizontal offset of the pattern /\n x?: number;\n /* Vertical offset of the pattern /\n y?: number;\n /* Array of grid coordinates to highlight as filled squares /\n squares?: [x: number, y: number][];\n /* Dash pattern for grid lines (0 = solid, positive = dashed) /\n strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Unique identifier for the grid pattern definition\n * Static to ensure consistent referencing across instances\n /\nconst id = 'grid-pattern';\n\n/\n Grid Pattern Component\n \n A versatile SVG component that generates a repeating grid pattern background with\n * optional highlighted squares. Ideal for technical layouts, dashboards, design mockups,\n * and any interface requiring structured visual organization.\n \n Features:\n * - Scalable vector-based grid that renders crisp at any zoom level\n * - Customizable cell dimensions and spacing\n * - Optional square highlighting for emphasis or data visualization\n * - Configurable stroke patterns (solid or dashed lines)\n * - Theme-aware styling with automatic dark mode support\n * - Accessibility-friendly with screen reader exclusion\n * - Performance optimized with pointer events disabled\n * - Full container coverage with responsive sizing\n \n Technical Architecture:\n * - Uses SVG `<pattern>` for memory-efficient repetition\n * - Grid lines drawn with path elements for precision\n * - Highlighted squares rendered as separate rect elements\n * - Pattern coordinates use userSpaceOnUse for consistency\n * - Static pattern ID prevents conflicts between instances\n \n Visual Design:\n * - Default: 40x40px grid cells with subtle neutral strokes\n * - Light mode: 10% fill opacity, 15% stroke opacity\n * - Dark mode: Enhanced 30% stroke opacity for visibility\n * - Slight offset (-1px) for optimal line rendering\n * - Optional dashed lines for more subtle appearance\n \n Highlighted Squares:\n * - Defined by coordinate arrays [x, y] where x,y are grid positions\n * - Automatically sized to fit within grid cells (width-1, height-1)\n * - Positioned with 1px offset for visual separation from grid lines\n * - Inherit theme-based fill colors for consistency\n \n @example\n * Basic grid background:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n * <GridPattern />\n * <div className=\"relative z-10\">\n * <h1>Content over grid</h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom grid size with dashed lines:\n * ```tsx\n * <GridPattern\n * width={60}\n * height={60}\n * strokeDasharray={2}\n * className=\"stroke-primary/20\"\n * />\n * ```\n \n @example\n * Data visualization with highlighted squares:\n * ```tsx\n * <GridPattern\n * width={30}\n * height={30}\n * squares={[\n * [0, 1], [1, 1], [2, 1],\n * [1, 2], [3, 0], [4, 2]\n * ]}\n * className=\"fill-accent/20 stroke-accent/30\"\n * />\n * ```\n \n @example\n * Fine grid for technical layouts:\n * ```tsx\n * <GridPattern\n * width={20}\n * height={20}\n * strokeDasharray={1}\n * className=\"stroke-neutral/8 fill-neutral/5\"\n * />\n * ```\n \n Styling Guidelines:\n * - Use low opacity values (5-30%) for background subtlety\n * - Consider theme contrast when customizing colors\n * - Dashed patterns work well for secondary grids\n * - Match grid colors with overall design system\n \n Performance Notes:\n * - Pattern definition reused efficiently across large areas\n * - Highlighted squares rendered individually for flexibility\n * - Pointer events disabled to prevent interaction blocking\n * - SVG optimized for browser rendering performance\n \n Accessibility:\n * - Hidden from screen readers with aria-hidden=\"true\"\n * - Purely decorative - doesn't convey essential information\n * - Maintains sufficient contrast with overlaid content\n \n @param props - GridPattern component props\n * @returns SVG element with repeating grid pattern and optional highlights\n /\nexport const GridPattern: FC<GridPatternProps> = ({\n width = 40,\n height = 40,\n x = -1,\n y = -1,\n strokeDasharray = 0,\n squares,\n className,\n ...props\n}) => (\n <svg\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30',\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id={id}\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <path\n d={`M.5 ${height}V.5H${width}`}\n fill=\"none\"\n strokeDasharray={strokeDasharray}\n />\n </pattern>\n </defs>\n <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n {squares && (\n <svg\n x={x}\n y={y}\n className=\"overflow-visible\"\n role=\"img\"\n aria-label=\"Grid pattern\"\n >\n {squares.map(([x, y]) => (\n <rect\n strokeWidth=\"0\"\n key={`${x}-${y}`}\n width={width - 1}\n height={height - 1}\n x={x width + 1}\n y={y * height + 1}\n />\n ))}\n </svg>\n )}\n </svg>\n);\n"],"mappings":";;;;;;;;AA0BA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GX,MAAa,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,0HACA,SACF;CACA,GAAI;WANN;EAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;GACM;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC,QAAD;IACE,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;GAClB;EACM,GACL;EACN,oBAAC,QAAD;GAAM,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;EAAK;EACtE,WACC,oBAAC,OAAD;GACK;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAAC,GAAG,OAChB,oBAAC,QAAD;IACE,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAG,IAAI,QAAQ;IACf,GAAG,IAAI,SAAS;GACjB,GALM,GAAG,EAAE,GAAG,GAKd,CACF;EACE;CAEJ"}

package/dist/esm/components/Pattern/SpotLight.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpotLight.mjs","names":[],"sources":["../../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the Spotlight component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype SpotlightProps = {\n /* Fill color for the spotlight effect (supports CSS color values) /\n fill?: string;\n /* X coordinate of the ellipse center /\n cx?: number;\n /* Y coordinate of the ellipse center /\n cy?: number;\n /* Horizontal radius of the ellipse /\n rx?: number;\n /* Vertical radius of the ellipse /\n ry?: number;\n /* Opacity of the spotlight effect (0-1) /\n opacity?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Spotlight Component\n \n A dramatic animated SVG spotlight effect that creates a soft, glowing light beam\n * perfect for hero sections, landing pages, and attention-grabbing areas. Features\n * a sophisticated blur filter and smooth animation entrance.\n \n Features:\n * - Animated entrance with opacity fade-in effect\n * - Gaussian blur filter for realistic light diffusion\n * - Customizable positioning, size, and color\n * - Full-screen coverage with responsive scaling\n * - Performance optimized with CSS animations\n * - Pointer events disabled to preserve interactivity\n * - Theme-aware with currentColor support\n \n Technical Implementation:\n * - Uses SVG ellipse with advanced filter effects\n * - Gaussian blur with 151px standard deviation for soft edges\n * - Matrix transformation for realistic light angle (-0.822377, -0.568943)\n * - ViewBox coordinates optimized for screen coverage (3787x2842)\n * - Animation class `animate-spotlight` handles entrance effect\n * - Filter definition with unique ID prevents conflicts\n \n Visual Characteristics:\n * - Default: Large elliptical light beam (1924.71px radius)\n * - Positioned at (1924.71, 273.501) with soft vertical spread\n * - 21% opacity for subtle but noticeable effect\n * - Rotated and scaled for natural spotlight angle\n * - Soft gaussian blur creates realistic light falloff\n \n Animation Behavior:\n * - Starts with opacity: 0 (invisible)\n * - Animates to full visibility with smooth transition\n * - Animation timing and easing handled by CSS class\n * - Can be triggered on scroll or interaction events\n \n @example\n * Basic hero section spotlight:\n * ```tsx\n * <div className=\"relative min-h-screen bg-dark\">\n * <Spotlight className=\"top-0 left-0\" />\n * <div className=\"relative z-10 flex items-center justify-center h-screen\">\n * <h1 className=\"text-6xl font-bold text-white\">\n * Welcome to the Future\n * </h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom colored spotlight:\n * ```tsx\n * <Spotlight\n * fill=\"#3b82f6\"\n * opacity={0.3}\n * className=\"top-10 -left-20\"\n * />\n * ```\n \n @example\n * Multiple spotlights for complex lighting:\n * ```tsx\n * <div className=\"relative\">\n * <Spotlight\n * cx={1000}\n * cy={300}\n * fill=\"rgb(59, 130, 246)\"\n * opacity={0.15}\n * />\n * <Spotlight\n * cx={2500}\n * cy={800}\n * fill=\"rgb(236, 72, 153)\"\n * opacity={0.15}\n * className=\"scale-75\"\n * />\n * </div>\n * ```\n \n @example\n * Responsive positioning:\n * ```tsx\n * <Spotlight\n * className=\"top-0 left-1/2 transform -translate-x-1/2 lg:left-0 lg:transform-none\"\n * opacity={0.25}\n * />\n * ```\n \n Styling Guidelines:\n * - Use low opacity (0.1-0.3) for subtle background effects\n * - Higher opacity (0.3-0.5) for dramatic focal points\n * - Consider theme colors when using custom fill values\n * - Position absolute with z-index management for layering\n \n Performance Considerations:\n * - SVG filter effects are GPU accelerated when possible\n * - Animation handled by CSS transforms for optimal performance\n * - Large viewBox size cached by browser for efficiency\n * - Pointer events disabled prevents layout recalculation\n \n Accessibility:\n * - Purely decorative - doesn't interfere with screen readers\n * - High contrast maintained with overlaid content\n * - Animation respects user's reduced motion preferences\n * - No semantic meaning - safe to hide from assistive tech\n \n CSS Requirements:\n * - Requires `animate-spotlight` animation class in Tailwind config\n * - Should define entrance animation timing and easing\n * - Consider defining custom animations for different effects\n \n @param props - Spotlight component props\n * @returns Animated SVG spotlight effect with blur filters\n */\nexport const Spotlight: FC<SpotlightProps> = ({\n fill = 'currentColor',\n cy = 273.501,\n rx = 1924.71,\n ry = 273.501,\n cx = 1924.71,\n opacity = 0.21,\n className,\n ...props\n}) => (\n <svg\n className={cn(\n 'pointer-events-none absolute size-screen animate-spotlight opacity-0',\n className\n )}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 3787 2842\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Spotlight\"\n {...props}\n >\n <g filter=\"url(#filter)\" transform=\"scale (-1, 1)\">\n <ellipse\n cx={cx}\n cy={cy}\n rx={rx}\n ry={ry}\n fill={fill}\n fillOpacity={opacity}\n transform=\"matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)\"\n ></ellipse>\n </g>\n <defs>\n <filter\n id=\"filter\"\n x=\"0.860352\"\n y=\"0.838989\"\n width=\"3785.16\"\n height=\"2840.26\"\n filterUnits=\"userSpaceOnUse\"\n colorInterpolationFilters=\"sRGB\"\n >\n <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n ></feBlend>\n <feGaussianBlur\n stdDeviation=\"151\"\n result=\"effect1_foregroundBlur_1065_8\"\n ></feGaussianBlur>\n </filter>\n </defs>\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyIA,MAAa,aAAiC,EAC5C,OAAO,gBACP,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,UAAU,KACV,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,WAAW,GACT,wEACA,~~UACD~~;~~CACD~~,OAAM;CACN,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAVN,CAYE,oBAAC,KAAD;EAAG,QAAO;EAAe,WAAU;YACjC,oBAAC,WAAD;GACM;GACA;GACA;GACA;GACE;GACN,aAAa;GACb,WAAU;~~GACD~~;~~EACT~~,~~GACJ~~,oBAAC,QAAD,YACE,qBAAC,UAAD;EACE,IAAG;EACH,GAAE;EACF,GAAE;EACF,OAAM;EACN,QAAO;EACP,aAAY;EACZ,2BAA0B;YAP5B;GASE,oBAAC,WAAD;IAAS,cAAa;IAAI,QAAO;~~IAA+B~~;~~GAChE~~,oBAAC,WAAD;IACE,MAAK;IACL,IAAG;IACH,KAAI;IACJ,QAAO;~~IACE~~;~~GACX~~,oBAAC,kBAAD;IACE,cAAa;IACb,QAAO;~~IACS~~;~~GACX~~;~~KACJ~~,EACH"}
1	+ {"version":3,"file":"SpotLight.mjs","names":[],"sources":["../../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the Spotlight component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype SpotlightProps = {\n /* Fill color for the spotlight effect (supports CSS color values) /\n fill?: string;\n /* X coordinate of the ellipse center /\n cx?: number;\n /* Y coordinate of the ellipse center /\n cy?: number;\n /* Horizontal radius of the ellipse /\n rx?: number;\n /* Vertical radius of the ellipse /\n ry?: number;\n /* Opacity of the spotlight effect (0-1) /\n opacity?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Spotlight Component\n \n A dramatic animated SVG spotlight effect that creates a soft, glowing light beam\n * perfect for hero sections, landing pages, and attention-grabbing areas. Features\n * a sophisticated blur filter and smooth animation entrance.\n \n Features:\n * - Animated entrance with opacity fade-in effect\n * - Gaussian blur filter for realistic light diffusion\n * - Customizable positioning, size, and color\n * - Full-screen coverage with responsive scaling\n * - Performance optimized with CSS animations\n * - Pointer events disabled to preserve interactivity\n * - Theme-aware with currentColor support\n \n Technical Implementation:\n * - Uses SVG ellipse with advanced filter effects\n * - Gaussian blur with 151px standard deviation for soft edges\n * - Matrix transformation for realistic light angle (-0.822377, -0.568943)\n * - ViewBox coordinates optimized for screen coverage (3787x2842)\n * - Animation class `animate-spotlight` handles entrance effect\n * - Filter definition with unique ID prevents conflicts\n \n Visual Characteristics:\n * - Default: Large elliptical light beam (1924.71px radius)\n * - Positioned at (1924.71, 273.501) with soft vertical spread\n * - 21% opacity for subtle but noticeable effect\n * - Rotated and scaled for natural spotlight angle\n * - Soft gaussian blur creates realistic light falloff\n \n Animation Behavior:\n * - Starts with opacity: 0 (invisible)\n * - Animates to full visibility with smooth transition\n * - Animation timing and easing handled by CSS class\n * - Can be triggered on scroll or interaction events\n \n @example\n * Basic hero section spotlight:\n * ```tsx\n * <div className=\"relative min-h-screen bg-dark\">\n * <Spotlight className=\"top-0 left-0\" />\n * <div className=\"relative z-10 flex items-center justify-center h-screen\">\n * <h1 className=\"text-6xl font-bold text-white\">\n * Welcome to the Future\n * </h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom colored spotlight:\n * ```tsx\n * <Spotlight\n * fill=\"#3b82f6\"\n * opacity={0.3}\n * className=\"top-10 -left-20\"\n * />\n * ```\n \n @example\n * Multiple spotlights for complex lighting:\n * ```tsx\n * <div className=\"relative\">\n * <Spotlight\n * cx={1000}\n * cy={300}\n * fill=\"rgb(59, 130, 246)\"\n * opacity={0.15}\n * />\n * <Spotlight\n * cx={2500}\n * cy={800}\n * fill=\"rgb(236, 72, 153)\"\n * opacity={0.15}\n * className=\"scale-75\"\n * />\n * </div>\n * ```\n \n @example\n * Responsive positioning:\n * ```tsx\n * <Spotlight\n * className=\"top-0 left-1/2 transform -translate-x-1/2 lg:left-0 lg:transform-none\"\n * opacity={0.25}\n * />\n * ```\n \n Styling Guidelines:\n * - Use low opacity (0.1-0.3) for subtle background effects\n * - Higher opacity (0.3-0.5) for dramatic focal points\n * - Consider theme colors when using custom fill values\n * - Position absolute with z-index management for layering\n \n Performance Considerations:\n * - SVG filter effects are GPU accelerated when possible\n * - Animation handled by CSS transforms for optimal performance\n * - Large viewBox size cached by browser for efficiency\n * - Pointer events disabled prevents layout recalculation\n \n Accessibility:\n * - Purely decorative - doesn't interfere with screen readers\n * - High contrast maintained with overlaid content\n * - Animation respects user's reduced motion preferences\n * - No semantic meaning - safe to hide from assistive tech\n \n CSS Requirements:\n * - Requires `animate-spotlight` animation class in Tailwind config\n * - Should define entrance animation timing and easing\n * - Consider defining custom animations for different effects\n \n @param props - Spotlight component props\n * @returns Animated SVG spotlight effect with blur filters\n */\nexport const Spotlight: FC<SpotlightProps> = ({\n fill = 'currentColor',\n cy = 273.501,\n rx = 1924.71,\n ry = 273.501,\n cx = 1924.71,\n opacity = 0.21,\n className,\n ...props\n}) => (\n <svg\n className={cn(\n 'pointer-events-none absolute size-screen animate-spotlight opacity-0',\n className\n )}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 3787 2842\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Spotlight\"\n {...props}\n >\n <g filter=\"url(#filter)\" transform=\"scale (-1, 1)\">\n <ellipse\n cx={cx}\n cy={cy}\n rx={rx}\n ry={ry}\n fill={fill}\n fillOpacity={opacity}\n transform=\"matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)\"\n ></ellipse>\n </g>\n <defs>\n <filter\n id=\"filter\"\n x=\"0.860352\"\n y=\"0.838989\"\n width=\"3785.16\"\n height=\"2840.26\"\n filterUnits=\"userSpaceOnUse\"\n colorInterpolationFilters=\"sRGB\"\n >\n <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\"></feFlood>\n <feBlend\n mode=\"normal\"\n in=\"SourceGraphic\"\n in2=\"BackgroundImageFix\"\n result=\"shape\"\n ></feBlend>\n <feGaussianBlur\n stdDeviation=\"151\"\n result=\"effect1_foregroundBlur_1065_8\"\n ></feGaussianBlur>\n </filter>\n </defs>\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyIA,MAAa,aAAiC,EAC5C,OAAO,gBACP,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,UAAU,KACV,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,WAAW,GACT,wEACA,SACF;CACA,OAAM;CACN,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAVN,CAYE,oBAAC,KAAD;EAAG,QAAO;EAAe,WAAU;YACjC,oBAAC,WAAD;GACM;GACA;GACA;GACA;GACE;GACN,aAAa;GACb,WAAU;EACF;CACT,IACH,oBAAC,QAAD,YACE,qBAAC,UAAD;EACE,IAAG;EACH,GAAE;EACF,GAAE;EACF,OAAM;EACN,QAAO;EACP,aAAY;EACZ,2BAA0B;YAP5B;GASE,oBAAC,WAAD;IAAS,cAAa;IAAI,QAAO;GAA8B;GAC/D,oBAAC,WAAD;IACE,MAAK;IACL,IAAG;IACH,KAAI;IACJ,QAAO;GACC;GACV,oBAAC,kBAAD;IACE,cAAa;IACb,QAAO;GACQ;EACX;IACJ,EACH"}

package/dist/esm/components/Popover/dynamic.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n PopoverXAlign,\n PopoverYAlign,\n Detail as StaticDetail,\n} from './static';\n\n/*\n Popover Component (Client-side)\n \n Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/\n Popover Detail Component (Client-side)\n \n Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n \n Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number \| undefined>(undefined);\n\n useEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = PopoverYAlign.ABOVE;\n }\n } else if (\n yAlign === PopoverYAlign.ABOVE &&\n spaceAbove < popoverRect.height\n ) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = PopoverYAlign.BELOW;\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = PopoverXAlign.END;\n }\n } else if (\n xAlign === PopoverXAlign.END &&\n spaceLeft < popoverRect.width\n ) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = PopoverXAlign.START;\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [props.identifier, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAsC,UAAU;CACpD,OAAO,oBAAC,eAAD,EAAe,GAAI,~~OAAS;;;;;;;;;;;;;;;;;;AAmBrC~~,MAAM,UAA2B,EAC/B,kBACA,mBACA,GAAG,YACC;CACJ,MAAM,aAAa,OAAuB,~~KAAK~~;~~CAC/C~~,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,~~OAAO~~;~~CAC5D~~,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,~~OAAO~~;~~CAC5D~~,MAAM,CAAC,UAAU,eAAe,SAA6B,~~OAAU~~;~~CAEvE~~,gBAAgB;EACd,MAAM,uBAAuB;GAC3B,IAAI,CAAC,WAAW,SAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,~~aAClC~~;~~GAED~~,IAAI,CAAC,gBAAgB;GAErB,MAAM,cAAc,eAAe,~~uBAAuB~~;~~GAC1D~~,MAAM,gBAAgB,OAAO;GAC7B,MAAM,iBAAiB,OAAO;GAC9B,MAAM,MAAM;GACZ,MAAM,UAAU;GAGhB,MAAM,mBAAmB,gBAAgB,YAAY,OAAO;GAC5D,MAAM,oBAAoB,YAAY,QAAQ;GAK9C,YAFyB,KAAK,IAAI,kBAAkB,~~kBAExB~~,CAAC;~~GAG7B~~,MAAM,eAAe,eAAe,UAAU,SAAS,~~YAAY~~;~~GACnE~~,IAAI,cAAc;IAChB,eAAe,MAAM,aAAa;IAClC,eAAe,UAAU,OAAO,~~YAAY;;GAI9C~~,4BAA4B;IAC1B,MAAM,cAAc,eAAe,~~uBAAuB~~;~~IAG1D~~,IAAI,cAAc;KAChB,eAAe,MAAM,aAAa;KAClC,eAAe,UAAU,IAAI,~~YAAY;;IAI3C~~,IAAI,YAAY;IAChB,MAAM,aAAa,iBAAiB,YAAY,SAAS;IACzD,MAAM,aAAa,YAAY,MAAM;IAErC,IAAI,uBAAkC,aAAa,YAAY,QAE7D;SAAI,cAAc,YAAY,QAC5B;~~WAEG~~,IACL,sBACA,aAAa,YAAY,QAGzB;SAAI,cAAc,YAAY,QAC5B~~;;IAKJ~~,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;IAEtC,IAAI,sBAAkC,aAAa,YAAY,OAE7D;SAAI,aAAa,YAAY,OAC3B;~~WAEG~~,IACL,oBACA,YAAY,YAAY,OAGxB;SAAI,cAAc,YAAY,OAC5B~~;;IAIJ~~,kBAAkB,~~UAAU~~;~~IAC5B~~,kBAAkB,~~UAAU~~;~~KAC5B;;EAIJ~~,MAAM,YAAY,WAAW,gBAAgB,~~EAAE~~;~~EAG/C~~,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,~~aAClC~~;~~EAED~~,IAAI,gBAAgB;GAClB,eAAe,iBAAiB,cAAc,~~eAAe~~;~~GAC7D~~,eAAe,iBAAiB,WAAW,~~eAAe;;EAI5D~~,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,~~gBAAgB~~;~~IAChB~~;~~EAEF~~,IAAI,WAAW,SACb,eAAe,QAAQ,WAAW,~~QAAQ~~;~~EAG5C~~,OAAO,iBAAiB,UAAU,~~eAAe~~;~~EACjD~~,OAAO,iBAAiB,UAAU,gBAAgB,~~KAAK~~;~~EAEvD~~,aAAa;GACX,aAAa,~~UAAU~~;~~GACvB~~,IAAI,gBAAgB;IAClB,eAAe,oBAAoB,cAAc,~~eAAe~~;~~IAChE~~,eAAe,oBAAoB,WAAW,~~eAAe;;GAE/D~~,eAAe,~~YAAY~~;~~GAC3B~~,OAAO,oBAAoB,UAAU,~~eAAe~~;~~GACpD~~,OAAO,oBAAoB,UAAU,gBAAgB,~~KAAK;;IAE3D~~;EAAC,MAAM;EAAY;EAAQ;~~EAAO~~,CAAC;~~CAGtC~~,OACE,oBAACA,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;~~GACxC~~;~~EACD;;AAKN~~,MAAa,UAAuB;AAEpC,QAAQ,SAAS"}
1	+ {"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n PopoverXAlign,\n PopoverYAlign,\n Detail as StaticDetail,\n} from './static';\n\n/*\n Popover Component (Client-side)\n \n Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/\n Popover Detail Component (Client-side)\n \n Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n \n Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number \| undefined>(undefined);\n\n useEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = PopoverYAlign.ABOVE;\n }\n } else if (\n yAlign === PopoverYAlign.ABOVE &&\n spaceAbove < popoverRect.height\n ) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = PopoverYAlign.BELOW;\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = PopoverXAlign.END;\n }\n } else if (\n xAlign === PopoverXAlign.END &&\n spaceLeft < popoverRect.width\n ) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = PopoverXAlign.START;\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [props.identifier, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAsC,UAAU;CACpD,OAAO,oBAAC,eAAD,EAAe,GAAI,MAAQ;AACpC;;;;;;;;;;;;;;;;;AAkBA,MAAM,UAA2B,EAC/B,kBACA,mBACA,GAAG,YACC;CACJ,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,UAAU,eAAe,SAA6B,MAAS;CAEtE,gBAAgB;EACd,MAAM,uBAAuB;GAC3B,IAAI,CAAC,WAAW,SAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,YACnC;GAEA,IAAI,CAAC,gBAAgB;GAErB,MAAM,cAAc,eAAe,sBAAsB;GACzD,MAAM,gBAAgB,OAAO;GAC7B,MAAM,iBAAiB,OAAO;GAC9B,MAAM,MAAM;GACZ,MAAM,UAAU;GAGhB,MAAM,mBAAmB,gBAAgB,YAAY,OAAO;GAC5D,MAAM,oBAAoB,YAAY,QAAQ;GAK9C,YAFyB,KAAK,IAAI,kBAAkB,iBAEzB,CAAC;GAG5B,MAAM,eAAe,eAAe,UAAU,SAAS,WAAW;GAClE,IAAI,cAAc;IAChB,eAAe,MAAM,aAAa;IAClC,eAAe,UAAU,OAAO,WAAW;GAC7C;GAGA,4BAA4B;IAC1B,MAAM,cAAc,eAAe,sBAAsB;IAGzD,IAAI,cAAc;KAChB,eAAe,MAAM,aAAa;KAClC,eAAe,UAAU,IAAI,WAAW;IAC1C;IAGA,IAAI,YAAY;IAChB,MAAM,aAAa,iBAAiB,YAAY,SAAS;IACzD,MAAM,aAAa,YAAY,MAAM;IAErC,IAAI,uBAAkC,aAAa,YAAY,QAE7D;SAAI,cAAc,YAAY,QAC5B;IACF,OACK,IACL,sBACA,aAAa,YAAY,QAGzB;SAAI,cAAc,YAAY,QAC5B;IACF;IAIF,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;IAEtC,IAAI,sBAAkC,aAAa,YAAY,OAE7D;SAAI,aAAa,YAAY,OAC3B;IACF,OACK,IACL,oBACA,YAAY,YAAY,OAGxB;SAAI,cAAc,YAAY,OAC5B;IACF;IAGF,kBAAkB,SAAS;IAC3B,kBAAkB,SAAS;GAC7B,CAAC;EACH;EAGA,MAAM,YAAY,WAAW,gBAAgB,CAAC;EAG9C,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,YACnC;EAEA,IAAI,gBAAgB;GAClB,eAAe,iBAAiB,cAAc,cAAc;GAC5D,eAAe,iBAAiB,WAAW,cAAc;EAC3D;EAGA,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,eAAe;EACjB,CAAC;EAED,IAAI,WAAW,SACb,eAAe,QAAQ,WAAW,OAAO;EAG3C,OAAO,iBAAiB,UAAU,cAAc;EAChD,OAAO,iBAAiB,UAAU,gBAAgB,IAAI;EAEtD,aAAa;GACX,aAAa,SAAS;GACtB,IAAI,gBAAgB;IAClB,eAAe,oBAAoB,cAAc,cAAc;IAC/D,eAAe,oBAAoB,WAAW,cAAc;GAC9D;GACA,eAAe,WAAW;GAC1B,OAAO,oBAAoB,UAAU,cAAc;GACnD,OAAO,oBAAoB,UAAU,gBAAgB,IAAI;EAC3D;CACF,GAAG;EAAC,MAAM;EAAY;EAAQ;CAAM,CAAC;CAGrC,OACE,oBAACA,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;EACzC;CACD;AAEL;AAGA,MAAa,UAAuB;AAEpC,QAAQ,SAAS"}

package/dist/esm/components/Popover/static.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/*\n Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n /\nexport type PopoverProps = DetailedHTMLProps<\n HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n> & {\n /* Unique identifier linking the trigger to its popover content for accessibility /\n identifier: string;\n};\n\n/\n Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n /\nexport type PopoverType = FC<PopoverProps> & {\n Detail: FC<DetailProps>;\n};\n\n/\n Horizontal alignment options for popover positioning\n /\nexport enum PopoverXAlign {\n /* Align popover to start (left) of trigger /\n START = 'start',\n /* Align popover to center of trigger /\n CENTER = 'center',\n /* Align popover to end (right) of trigger /\n END = 'end',\n}\n\n/\n Vertical alignment options for popover positioning\n /\nexport enum PopoverYAlign {\n /* Position popover below the trigger /\n BELOW = 'bellow',\n /* Position popover above the trigger /\n ABOVE = 'above',\n}\n\n/\n Popover Component\n \n A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n \n Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n \n Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n \n @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n * <button>Need Help?</button>\n \n <Popover.Detail identifier=\"help-tooltip\">\n * <div>This is helpful information!</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n * <input placeholder=\"Focus me\" />\n \n <Popover.Detail\n * identifier=\"focus-menu\"\n * isFocusable\n * isOverable={false}\n * >\n * <div>Focus-only menu content</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n * <span>Hover me</span>\n \n <Popover.Detail\n * identifier=\"positioned\"\n * xAlign={PopoverXAlign.END}\n * yAlign={PopoverYAlign.ABOVE}\n * displayArrow={false}\n * >\n * <div>Above and right-aligned</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n \n Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nexport const PopoverStatic: PopoverType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/popover relative flex cursor-pointer`, className)}\n id={`unrollable-panel-button-${identifier}`}\n aria-haspopup\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n /\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n /* Whether the popover responds to focus events on the trigger /\n isFocusable?: boolean;\n /* Controls visibility state - undefined allows automatic hover/focus control /\n isHidden?: boolean;\n /* Whether the popover responds to hover events on the trigger /\n isOverable?: boolean;\n /* Unique identifier matching the trigger's identifier for accessibility /\n identifier: string;\n /* Horizontal positioning relative to trigger /\n xAlign?: PopoverXAlign \| `${PopoverXAlign}`;\n /* Vertical positioning relative to trigger /\n yAlign?: PopoverYAlign \| `${PopoverYAlign}`;\n /* Whether to display the directional arrow indicator /\n displayArrow?: boolean;\n};\n\n/\n Popover Detail Component\n \n The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n \n Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n \n Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n \n Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n \n Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n \n @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n * <div className=\"p-4\">\n * <h3>Popover Title</h3>\n * <p>Detailed information with multiple paragraphs.</p>\n * <button>Action Button</button>\n * </div>\n * </Popover.Detail>\n * ```\n \n @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n /\nconst Detail: FC<DetailProps> = ({\n children,\n isHidden = undefined,\n isOverable = true,\n isFocusable = false,\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n identifier,\n className,\n displayArrow = true,\n ...props\n}) => (\n <Container\n transparency=\"xs\"\n role=\"group\"\n aria-hidden={isHidden}\n aria-labelledby={`unrollable-panel-button-${identifier}`}\n id={`unrollable-panel-${identifier}`}\n className={cn(\n 'absolute z-60 min-w-full rounded-md ring-1 ring-neutral',\n\n / Positioning /\n xAlign === 'start' && 'left-0',\n xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n xAlign === 'end' && 'right-0',\n yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n / Arrow indicator /\n displayArrow &&\n 'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n / Horizontal positioning /\n displayArrow && xAlign === 'start' && 'before:left-2',\n displayArrow &&\n xAlign === 'center' &&\n 'before:left-1/2 before:-translate-x-1/2',\n displayArrow && xAlign === 'end' && 'before:right-2',\n\n / Arrow pointing up (when popover is below trigger) /\n displayArrow &&\n yAlign === 'bellow' &&\n 'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n / Arrow pointing down (when popover is above trigger) /\n displayArrow &&\n yAlign === 'above' &&\n 'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n / Visibility management */\n 'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n isOverable &&\n `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,\n isFocusable &&\n `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,\n className\n )}\n {...props}\n >\n {children}\n </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;AA2BA,IAAY,gBAAL;;CAEL;;CAEA;;CAEA;;KACD;;;;AAKD,IAAY,gBAAL;;CAEL;;CAEA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFD,MAAa,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,8CAA8C,UAAU;CACtE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFR,MAAM,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,kBACA,mBACA,YACA,WACA,eAAe,MACf,GAAG,YAEH,oBAAC,WAAD;CACE,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,2DAGA,WAAW,WAAW,UACtB,WAAW,YAAY,6BACvB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,YACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,UACD;CACD,GAAI;CAEH;CACS;AAGd,cAAc,SAAS"}
1	+ {"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type {\n ComponentProps,\n DetailedHTMLProps,\n FC,\n HTMLAttributes,\n} from 'react';\nimport { Container } from '../Container';\n\n/*\n Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n /\nexport type PopoverProps = DetailedHTMLProps<\n HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n> & {\n /* Unique identifier linking the trigger to its popover content for accessibility /\n identifier: string;\n};\n\n/\n Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n /\nexport type PopoverType = FC<PopoverProps> & {\n Detail: FC<DetailProps>;\n};\n\n/\n Horizontal alignment options for popover positioning\n /\nexport enum PopoverXAlign {\n /* Align popover to start (left) of trigger /\n START = 'start',\n /* Align popover to center of trigger /\n CENTER = 'center',\n /* Align popover to end (right) of trigger /\n END = 'end',\n}\n\n/\n Vertical alignment options for popover positioning\n /\nexport enum PopoverYAlign {\n /* Position popover below the trigger /\n BELOW = 'bellow',\n /* Position popover above the trigger /\n ABOVE = 'above',\n}\n\n/\n Popover Component\n \n A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n \n Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n \n Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n \n @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n * <button>Need Help?</button>\n \n <Popover.Detail identifier=\"help-tooltip\">\n * <div>This is helpful information!</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n * <input placeholder=\"Focus me\" />\n \n <Popover.Detail\n * identifier=\"focus-menu\"\n * isFocusable\n * isOverable={false}\n * >\n * <div>Focus-only menu content</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n * <span>Hover me</span>\n \n <Popover.Detail\n * identifier=\"positioned\"\n * xAlign={PopoverXAlign.END}\n * yAlign={PopoverYAlign.ABOVE}\n * displayArrow={false}\n * >\n * <div>Above and right-aligned</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n \n Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nexport const PopoverStatic: PopoverType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/popover relative flex cursor-pointer`, className)}\n id={`unrollable-panel-button-${identifier}`}\n aria-haspopup\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n /\nexport type DetailProps = ComponentProps<typeof Container> & {\n /* Whether the popover responds to focus events on the trigger /\n isFocusable?: boolean;\n /* Controls visibility state - undefined allows automatic hover/focus control /\n isHidden?: boolean;\n /* Whether the popover responds to hover events on the trigger /\n isOverable?: boolean;\n /* Unique identifier matching the trigger's identifier for accessibility /\n identifier: string;\n /* Horizontal positioning relative to trigger /\n xAlign?: PopoverXAlign \| `${PopoverXAlign}`;\n /* Vertical positioning relative to trigger /\n yAlign?: PopoverYAlign \| `${PopoverYAlign}`;\n /* Whether to display the directional arrow indicator /\n displayArrow?: boolean;\n};\n\n/\n Popover Detail Component\n \n The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n \n Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n \n Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n \n Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n \n Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n \n @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n * <div className=\"p-4\">\n * <h3>Popover Title</h3>\n * <p>Detailed information with multiple paragraphs.</p>\n * <button>Action Button</button>\n * </div>\n * </Popover.Detail>\n * ```\n \n @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n /\nconst Detail: FC<DetailProps> = ({\n children,\n isHidden = undefined,\n isOverable = true,\n isFocusable = false,\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n identifier,\n className,\n displayArrow = true,\n ...props\n}) => (\n <Container\n transparency=\"xs\"\n role=\"group\"\n aria-hidden={isHidden}\n aria-labelledby={`unrollable-panel-button-${identifier}`}\n id={`unrollable-panel-${identifier}`}\n className={cn(\n 'absolute z-60 min-w-full rounded-md ring-1 ring-neutral',\n\n / Positioning /\n xAlign === 'start' && 'left-0',\n xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n xAlign === 'end' && 'right-0',\n yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n / Arrow indicator /\n displayArrow &&\n 'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n / Horizontal positioning /\n displayArrow && xAlign === 'start' && 'before:left-2',\n displayArrow &&\n xAlign === 'center' &&\n 'before:left-1/2 before:-translate-x-1/2',\n displayArrow && xAlign === 'end' && 'before:right-2',\n\n / Arrow pointing up (when popover is below trigger) /\n displayArrow &&\n yAlign === 'bellow' &&\n 'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n / Arrow pointing down (when popover is above trigger) /\n displayArrow &&\n yAlign === 'above' &&\n 'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n / Visibility management */\n 'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n isOverable &&\n `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,\n isFocusable &&\n `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,\n className\n )}\n {...props}\n >\n {children}\n </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;AAgCA,IAAY,gBAAL;;CAEL;;CAEA;;CAEA;;AACF;;;;AAKA,IAAY,gBAAL;;CAEL;;CAEA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,MAAa,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,8CAA8C,SAAS;CACrE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;AACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFP,MAAM,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,kBACA,mBACA,YACA,WACA,eAAe,MACf,GAAG,YAEH,oBAAC,WAAD;CACE,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,2DAGA,WAAW,WAAW,UACtB,WAAW,YAAY,6BACvB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,YACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,SACF;CACA,GAAI;CAEH;AACQ;AAGb,cAAc,SAAS"}

package/dist/esm/components/PressableSpan/PressableSpan.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PressableSpan.mjs","names":[],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type MouseEventHandler,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\n/*\n Props for the PressableSpan component\n /\ntype PressableSpanProps = {\n /\n Callback function triggered when a long press is detected\n * @example\n * ```tsx\n * <PressableSpan onPress={() => console.log('Long pressed!')}>\n * Press and hold me\n * </PressableSpan>\n * ```\n /\n onPress: () => void;\n\n /\n Optional callback function triggered when clicking outside the component while it's in selecting state\n * @example\n * ```tsx\n * <PressableSpan\n * onPress={() => setIsEditing(true)}\n * onClickOutside={() => setIsEditing(false)}\n * >\n * Click outside to deselect\n * </PressableSpan>\n * ```\n /\n onClickOutside?: () => void;\n\n /\n Duration in milliseconds for long press detection\n * @default 400\n * @example\n * ```tsx\n * <PressableSpan pressDuration={800} onPress={() => {}}>\n * Longer press required\n * </PressableSpan>\n * ```\n /\n pressDuration?: number;\n\n /\n External control for the selecting state\n * @example\n * ```tsx\n * <PressableSpan isSelecting={isEditing} onPress={() => {}}>\n * Externally controlled\n * </PressableSpan>\n * ```\n /\n isSelecting?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/\n PressableSpan - An interactive span element that responds to long press gestures\n \n A versatile component that detects long press interactions and provides visual feedback.\n * Commonly used for text editing interfaces, selection systems, and interactive content\n * that requires differentiation between quick clicks and intentional long presses.\n \n ## Key Features\n * - Long Press Detection: Configurable press duration for different interaction patterns\n * - Visual Feedback: Smooth outline transitions to indicate interactive and selected states\n * - Click Outside Detection: Automatically deselects when clicking outside the component\n * - Touch Support: Works seamlessly on both desktop and mobile devices\n * - Accessible: Keyboard navigation support and proper ARIA attributes\n \n ## Use Cases\n * - Text editing interfaces where long press activates edit mode\n * - Content selection systems with visual feedback\n * - Interactive cards or elements that need press-and-hold activation\n * - Mobile-friendly interfaces requiring long press gestures\n \n ## Accessibility\n * - Uses semantic `role=\"button\"` for proper screen reader announcement\n * - Keyboard navigable with `tabIndex={0}`\n * - Focus management with proper blur handling\n * - Visual outline indicators for focus and selection states\n \n @example\n * Basic usage with long press detection:\n * ```tsx\n * <PressableSpan onPress={() => setIsEditing(true)}>\n * Press and hold to edit this text\n * </PressableSpan>\n * ```\n \n @example\n * With custom press duration and click outside handling:\n * ```tsx\n * <PressableSpan\n * pressDuration={600}\n * onPress={() => setIsEditing(true)}\n * onClickOutside={() => setIsEditing(false)}\n * isSelecting={isEditing}\n * >\n * Custom behavior configuration\n * </PressableSpan>\n * ```\n \n @example\n * In a content editing context:\n * ```tsx\n * <PressableSpan\n * onPress={() => startEditingContent(contentId)}\n * onClickOutside={() => saveAndExitEditing()}\n * className=\"prose-text\"\n * >\n * {editableContent}\n * </PressableSpan>\n * ```\n /\n\nexport const PressableSpan: FC<PressableSpanProps> = ({\n children,\n onPress: onSelect,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const elementRef = useRef<HTMLSpanElement>(null);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onSelect();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (\n elementRef.current &&\n !elementRef.current.contains(event.target as Node)\n ) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n /\n Handle keyboard interactions\n * - Enter/Space: Trigger long press action immediately\n * - Escape: Cancel selection/editing state\n */\n const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n handleOnLongPress();\n break;\n case 'Escape':\n e.preventDefault();\n setIsSelectingState(false);\n onUnselect?.();\n break;\n default:\n break;\n }\n };\n\n const isCurrentlySelecting = isSelectingProp ?? isSelectingState;\n\n return (\n <span\n className={cn(\n 'inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200',\n isCurrentlySelecting ? 'outline-inherit' : 'hover:outline-inherit'\n )}\n role=\"button\"\n tabIndex={0}\n aria-pressed={isCurrentlySelecting ? 'true' : 'false'}\n aria-label={`${isCurrentlySelecting ? 'Selected' : 'Selectable'} content`}\n onKeyDown={handleKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n ref={elementRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"mappings":";;;;;;;AAaA,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHtC,MAAa,iBAAyC,EACpD,UACA,SAAS,UACT,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,iBACb,GAAG,YACC;CACJ,MAAM,aAAa,OAAwB,~~KAAK~~;~~CAChD~~,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,~~gBAAgB~~;~~CACzE~~,MAAM,gBAAgB,OAA6C,~~KAAK~~;~~CAExE~~,MAAM,0BAA0B;EAC9B,oBAAoB,~~KAAK~~;~~EACzB~~,~~UAAU;;CAGZ~~,MAAM,wBAAwB;EAC5B,cAAc,UAAU,iBAAiB;GACvC,~~mBAAmB~~;~~KAClB~~,~~cAAc;;CAGnB~~,MAAM,wBAAwB;EAC5B,IAAI,cAAc,SAAS;GACzB,aAAa,cAAc,~~QAAQ~~;~~GACnC~~,cAAc,UAAU~~;;;CAI5B~~,MAAM,wBAAwB;EAC5B,~~iBAAiB~~;~~EACjB~~,~~iBAAiB;;CAGnB~~,MAAM,sBAAsB;EAC1B,~~iBAAiB;;CAInB~~,MAAM,qBAAqB,aACxB,UAAsB;EACrB,IACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,~~OAAe~~,~~EAClD~~;GACA,oBAAoB,~~MAAM~~;~~GAC1B~~,~~cAAc;;IAGlB~~,CAAC,~~WAAW~~,CACb;~~CAED~~,gBAAgB;EAEd,SAAS,iBAAiB,aAAa,~~mBAAmB~~;~~EAE1D~~,aAAa;GAEX,SAAS,oBAAoB,aAAa,~~mBAAmB;;IAG9D~~,CAAC,~~mBAAmB~~,CAAC;~~CAExB~~,MAAM,iBAAoD,MAAM;EAC9D,IAAI,kBAAkB;GACpB,EAAE,~~gBAAgB~~;~~GAClB~~,EAAE,~~iBAAiB;;;CAIvB~~,MAAM,qBAAqB;EAEzB,oBAAoB,~~MAAM;;;;;;;CAQ5B~~,MAAM,iBAAiB,MAA4C;EACjE,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,EAAE,~~gBAAgB~~;~~IAClB~~,~~mBAAmB~~;~~IACnB~~;GACF,KAAK;IACH,EAAE,~~gBAAgB~~;~~IAClB~~,oBAAoB,~~MAAM~~;~~IAC1B~~,~~cAAc~~;~~IACd~~;GACF,SACE~~;;;CAIN~~,MAAM,uBAAuB,mBAAmB;CAEhD,OACE,oBAAC,QAAD;EACE,WAAW,GACT,6IACA,uBAAuB,oBAAoB,~~wBAC5C~~;~~EACD~~,MAAK;EACL,UAAU;EACV,gBAAc,uBAAuB,SAAS;EAC9C,cAAY,GAAG,uBAAuB,aAAa,aAAa;EAChE,WAAW;EACX,SAAS;EACT,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,KAAK;EACL,GAAI;EAEH;~~EACI~~"}
1	+ {"version":3,"file":"PressableSpan.mjs","names":[],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type MouseEventHandler,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\n/*\n Props for the PressableSpan component\n /\ntype PressableSpanProps = {\n /\n Callback function triggered when a long press is detected\n * @example\n * ```tsx\n * <PressableSpan onPress={() => console.log('Long pressed!')}>\n * Press and hold me\n * </PressableSpan>\n * ```\n /\n onPress: () => void;\n\n /\n Optional callback function triggered when clicking outside the component while it's in selecting state\n * @example\n * ```tsx\n * <PressableSpan\n * onPress={() => setIsEditing(true)}\n * onClickOutside={() => setIsEditing(false)}\n * >\n * Click outside to deselect\n * </PressableSpan>\n * ```\n /\n onClickOutside?: () => void;\n\n /\n Duration in milliseconds for long press detection\n * @default 400\n * @example\n * ```tsx\n * <PressableSpan pressDuration={800} onPress={() => {}}>\n * Longer press required\n * </PressableSpan>\n * ```\n /\n pressDuration?: number;\n\n /\n External control for the selecting state\n * @example\n * ```tsx\n * <PressableSpan isSelecting={isEditing} onPress={() => {}}>\n * Externally controlled\n * </PressableSpan>\n * ```\n /\n isSelecting?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/\n PressableSpan - An interactive span element that responds to long press gestures\n \n A versatile component that detects long press interactions and provides visual feedback.\n * Commonly used for text editing interfaces, selection systems, and interactive content\n * that requires differentiation between quick clicks and intentional long presses.\n \n ## Key Features\n * - Long Press Detection: Configurable press duration for different interaction patterns\n * - Visual Feedback: Smooth outline transitions to indicate interactive and selected states\n * - Click Outside Detection: Automatically deselects when clicking outside the component\n * - Touch Support: Works seamlessly on both desktop and mobile devices\n * - Accessible: Keyboard navigation support and proper ARIA attributes\n \n ## Use Cases\n * - Text editing interfaces where long press activates edit mode\n * - Content selection systems with visual feedback\n * - Interactive cards or elements that need press-and-hold activation\n * - Mobile-friendly interfaces requiring long press gestures\n \n ## Accessibility\n * - Uses semantic `role=\"button\"` for proper screen reader announcement\n * - Keyboard navigable with `tabIndex={0}`\n * - Focus management with proper blur handling\n * - Visual outline indicators for focus and selection states\n \n @example\n * Basic usage with long press detection:\n * ```tsx\n * <PressableSpan onPress={() => setIsEditing(true)}>\n * Press and hold to edit this text\n * </PressableSpan>\n * ```\n \n @example\n * With custom press duration and click outside handling:\n * ```tsx\n * <PressableSpan\n * pressDuration={600}\n * onPress={() => setIsEditing(true)}\n * onClickOutside={() => setIsEditing(false)}\n * isSelecting={isEditing}\n * >\n * Custom behavior configuration\n * </PressableSpan>\n * ```\n \n @example\n * In a content editing context:\n * ```tsx\n * <PressableSpan\n * onPress={() => startEditingContent(contentId)}\n * onClickOutside={() => saveAndExitEditing()}\n * className=\"prose-text\"\n * >\n * {editableContent}\n * </PressableSpan>\n * ```\n /\n\nexport const PressableSpan: FC<PressableSpanProps> = ({\n children,\n onPress: onSelect,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const elementRef = useRef<HTMLSpanElement>(null);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onSelect();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (\n elementRef.current &&\n !elementRef.current.contains(event.target as Node)\n ) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n /\n Handle keyboard interactions\n * - Enter/Space: Trigger long press action immediately\n * - Escape: Cancel selection/editing state\n */\n const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n handleOnLongPress();\n break;\n case 'Escape':\n e.preventDefault();\n setIsSelectingState(false);\n onUnselect?.();\n break;\n default:\n break;\n }\n };\n\n const isCurrentlySelecting = isSelectingProp ?? isSelectingState;\n\n return (\n <span\n className={cn(\n 'inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200',\n isCurrentlySelecting ? 'outline-inherit' : 'hover:outline-inherit'\n )}\n role=\"button\"\n tabIndex={0}\n aria-pressed={isCurrentlySelecting ? 'true' : 'false'}\n aria-label={`${isCurrentlySelecting ? 'Selected' : 'Selectable'} content`}\n onKeyDown={handleKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n ref={elementRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"mappings":";;;;;;;AAaA,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHtC,MAAa,iBAAyC,EACpD,UACA,SAAS,UACT,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,iBACb,GAAG,YACC;CACJ,MAAM,aAAa,OAAwB,IAAI;CAC/C,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,eAAe;CACxE,MAAM,gBAAgB,OAA6C,IAAI;CAEvE,MAAM,0BAA0B;EAC9B,oBAAoB,IAAI;EACxB,SAAS;CACX;CAEA,MAAM,wBAAwB;EAC5B,cAAc,UAAU,iBAAiB;GACvC,kBAAkB;EACpB,GAAG,aAAa;CAClB;CAEA,MAAM,wBAAwB;EAC5B,IAAI,cAAc,SAAS;GACzB,aAAa,cAAc,OAAO;GAClC,cAAc,UAAU;EAC1B;CACF;CAEA,MAAM,wBAAwB;EAC5B,gBAAgB;EAChB,gBAAgB;CAClB;CAEA,MAAM,sBAAsB;EAC1B,gBAAgB;CAClB;CAGA,MAAM,qBAAqB,aACxB,UAAsB;EACrB,IACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,GACjD;GACA,oBAAoB,KAAK;GACzB,aAAa;EACf;CACF,GACA,CAAC,UAAU,CACb;CAEA,gBAAgB;EAEd,SAAS,iBAAiB,aAAa,kBAAkB;EAEzD,aAAa;GAEX,SAAS,oBAAoB,aAAa,kBAAkB;EAE9D;CACF,GAAG,CAAC,kBAAkB,CAAC;CAEvB,MAAM,iBAAoD,MAAM;EAC9D,IAAI,kBAAkB;GACpB,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB;CACF;CAEA,MAAM,qBAAqB;EAEzB,oBAAoB,KAAK;CAC3B;;;;;;CAOA,MAAM,iBAAiB,MAA4C;EACjE,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,EAAE,eAAe;IACjB,kBAAkB;IAClB;GACF,KAAK;IACH,EAAE,eAAe;IACjB,oBAAoB,KAAK;IACzB,aAAa;IACb;GACF,SACE;EACJ;CACF;CAEA,MAAM,uBAAuB,mBAAmB;CAEhD,OACE,oBAAC,QAAD;EACE,WAAW,GACT,6IACA,uBAAuB,oBAAoB,uBAC7C;EACA,MAAK;EACL,UAAU;EACV,gBAAc,uBAAuB,SAAS;EAC9C,cAAY,GAAG,uBAAuB,aAAa,aAAa;EAChE,WAAW;EACX,SAAS;EACT,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,KAAK;EACL,GAAI;EAEH;CACG;AAEV"}