npm - @intlayer/design-system - Versions diffs - 8.12.1 → 8.12.3 - Mend

@intlayer/design-system 8.12.1 → 8.12.3

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 (804) hide show

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 } 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 },\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 type PaginationSize = \n \| 'sm' \|\n 'md' \|\n 'lg';\n\nexport type PaginationVariant = \n \| 'default' \|\n 'bordered' \|\n 'ghost';\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 === 'sm') {\n return 'icon-sm';\n } else if (size === 'lg') {\n return 'icon-lg';\n } else {\n return '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 = 'md',\n variant = 'default',\n color = '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=\"outline\"\n size={buttonSize}\n color=\"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 ? 'default' : 'outline'\n }\n size={buttonSize}\n color=\"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=\"outline\"\n size={buttonSize}\n color=\"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":"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"}
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 } 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 },\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 type PaginationSize = \n \| 'sm' \|\n 'md' \|\n 'lg';\n\nexport type PaginationVariant = \n \| 'default' \|\n 'bordered' \|\n 'ghost';\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 === 'sm') {\n return 'icon-sm';\n } else if (size === 'lg') {\n return 'icon-lg';\n } else {\n return '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 = 'md',\n variant = 'default',\n color = '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=\"outline\"\n size={buttonSize}\n color=\"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 ? 'default' : 'outline'\n }\n size={buttonSize}\n color=\"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=\"outline\"\n size={buttonSize}\n color=\"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":"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"}

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,~~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~~"}
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;AAE5E,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,eAAe;GACd,OAAO,OAAO,MAAM;GACpB,KAAK,OAAO,IAAI;GAChB,OAAO,OAAO,WAAW;GAC1B,CAAC;EACE"}

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;~~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~~"}
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"}

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 size-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,kEACA,~~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,MAAK;~~CACN~~,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 size-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,kEACA,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,MAAK;EACL,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,~~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~~"}
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"}

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,~~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"}
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"}

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 { useLayoutEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\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 = 'start',\n yAlign = '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 useLayoutEffect(() => {\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 === 'below' && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = 'above';\n }\n } else if (yAlign === 'above' && spaceAbove < popoverRect.height) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = '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 === 'start' && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = 'end';\n }\n } else if (xAlign === 'end' && spaceLeft < popoverRect.width) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = '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":";;;;;;;;;;;;;;;;AAqBA,MAAM,oBAAsC,UAAU;~~CACpD~~,~~OAAO~~,oBAAC,eAAD,EAAe,GAAI,~~MAAQ;AACpC;;;;;;;;;;;;;;;;;AAkBA~~,MAAM,UAA2B,EAC/B,SAAS,SACT,SAAS,SACT,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~~,~~sBAAsB~~;EACpB,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~~,WAAW,WAAW,aAAa,YAAY,QAEjD;SAAI,cAAc,YAAY,~~QAC5B~~,~~YAAY~~;~~IACd~~,~~OACK,IAAI,~~WAAW,WAAW,aAAa,YAAY,QAExD;SAAI,cAAc,YAAY,~~QAC5B~~,~~YAAY;IACd;IAIF~~,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;~~IAEtC~~,~~IAAI~~,WAAW,WAAW,aAAa,YAAY,OAEjD;SAAI,aAAa,YAAY,~~OAC3B~~,~~YAAY~~;~~IACd~~,~~OACK,IAAI,~~WAAW,SAAS,YAAY,YAAY,OAErD;SAAI,cAAc,YAAY,~~OAC5B~~,~~YAAY;IACd;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"}
1	+ {"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\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 = 'start',\n yAlign = '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 useLayoutEffect(() => {\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 === 'below' && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = 'above';\n }\n } else if (yAlign === 'above' && spaceAbove < popoverRect.height) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = '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 === 'start' && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = 'end';\n }\n } else if (xAlign === 'end' && spaceLeft < popoverRect.width) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = '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":";;;;;;;;;;;;;;;;AAqBA,MAAM,oBAAsC,UAAU;AACpD,QAAO,oBAAC,eAAD,EAAe,GAAI,OAAS;;;;;;;;;;;;;;;;;;AAmBrC,MAAM,UAA2B,EAC/B,SAAS,SACT,SAAS,SACT,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;AAEvE,uBAAsB;EACpB,MAAM,uBAAuB;AAC3B,OAAI,CAAC,WAAW,QAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,aAClC;AAED,OAAI,CAAC,eAAgB;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;AAK9C,eAFyB,KAAK,IAAI,kBAAkB,kBAExB,CAAC;GAG7B,MAAM,eAAe,eAAe,UAAU,SAAS,YAAY;AACnE,OAAI,cAAc;AAChB,mBAAe,MAAM,aAAa;AAClC,mBAAe,UAAU,OAAO,YAAY;;AAI9C,+BAA4B;IAC1B,MAAM,cAAc,eAAe,uBAAuB;AAG1D,QAAI,cAAc;AAChB,oBAAe,MAAM,aAAa;AAClC,oBAAe,UAAU,IAAI,YAAY;;IAI3C,IAAI,YAAY;IAChB,MAAM,aAAa,iBAAiB,YAAY,SAAS;IACzD,MAAM,aAAa,YAAY,MAAM;AAErC,QAAI,WAAW,WAAW,aAAa,YAAY,QAEjD;SAAI,cAAc,YAAY,OAC5B,aAAY;eAEL,WAAW,WAAW,aAAa,YAAY,QAExD;SAAI,cAAc,YAAY,OAC5B,aAAY;;IAKhB,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;AAEtC,QAAI,WAAW,WAAW,aAAa,YAAY,OAEjD;SAAI,aAAa,YAAY,MAC3B,aAAY;eAEL,WAAW,SAAS,YAAY,YAAY,OAErD;SAAI,cAAc,YAAY,MAC5B,aAAY;;AAIhB,sBAAkB,UAAU;AAC5B,sBAAkB,UAAU;KAC5B;;EAIJ,MAAM,YAAY,WAAW,gBAAgB,EAAE;EAG/C,MAAM,iBAAiB,SAAS,eAC9B,2BAA2B,MAAM,aAClC;AAED,MAAI,gBAAgB;AAClB,kBAAe,iBAAiB,cAAc,eAAe;AAC7D,kBAAe,iBAAiB,WAAW,eAAe;;EAI5D,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,mBAAgB;IAChB;AAEF,MAAI,WAAW,QACb,gBAAe,QAAQ,WAAW,QAAQ;AAG5C,SAAO,iBAAiB,UAAU,eAAe;AACjD,SAAO,iBAAiB,UAAU,gBAAgB,KAAK;AAEvD,eAAa;AACX,gBAAa,UAAU;AACvB,OAAI,gBAAgB;AAClB,mBAAe,oBAAoB,cAAc,eAAe;AAChE,mBAAe,oBAAoB,WAAW,eAAe;;AAE/D,kBAAe,YAAY;AAC3B,UAAO,oBAAoB,UAAU,eAAe;AACpD,UAAO,oBAAoB,UAAU,gBAAgB,KAAK;;IAE3D;EAAC,MAAM;EAAY;EAAQ;EAAO,CAAC;AAGtC,QACE,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"}

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 {\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 type PopoverXAlign = 'start' \| 'center' \| 'end';\n\n/\n Vertical alignment options for popover positioning\n /\nexport type PopoverYAlign = 'below' \| 'above';\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=\"end\"\n * yAlign=\"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=\"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 = 'start',\n yAlign = '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 === 'below' && '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 === 'below' &&\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwHA,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,SAAS,SACT,SAAS,SACT,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,WAAW,yBACtB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,WACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,~~SACF~~;~~CACA~~,GAAI;CAEH;~~AACQ~~;~~AAGb~~,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 type PopoverXAlign = 'start' \| 'center' \| 'end';\n\n/\n Vertical alignment options for popover positioning\n /\nexport type PopoverYAlign = 'below' \| 'above';\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=\"end\"\n * yAlign=\"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=\"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 = 'start',\n yAlign = '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 === 'below' && '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 === 'below' &&\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwHA,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,SAAS,SACT,SAAS,SACT,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,WAAW,yBACtB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,WACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,UACD;CACD,GAAI;CAEH;CACS;AAGd,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,~~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~~"}
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;AAC9B,sBAAoB,KAAK;AACzB,YAAU;;CAGZ,MAAM,wBAAwB;AAC5B,gBAAc,UAAU,iBAAiB;AACvC,sBAAmB;KAClB,cAAc;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,cAAc,SAAS;AACzB,gBAAa,cAAc,QAAQ;AACnC,iBAAc,UAAU;;;CAI5B,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,mBAAiB;;CAGnB,MAAM,sBAAsB;AAC1B,mBAAiB;;CAInB,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,EAClD;AACA,uBAAoB,MAAM;AAC1B,iBAAc;;IAGlB,CAAC,WAAW,CACb;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,mBAAmB;AAE1D,eAAa;AAEX,YAAS,oBAAoB,aAAa,mBAAmB;;IAG9D,CAAC,mBAAmB,CAAC;CAExB,MAAM,iBAAoD,MAAM;AAC9D,MAAI,kBAAkB;AACpB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAM,qBAAqB;AAEzB,sBAAoB,MAAM;;;;;;;CAQ5B,MAAM,iBAAiB,MAA4C;AACjE,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,MAAE,gBAAgB;AAClB,uBAAmB;AACnB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,wBAAoB,MAAM;AAC1B,kBAAc;AACd;GACF,QACE;;;CAIN,MAAM,uBAAuB,mBAAmB;AAEhD,QACE,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"}

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

@@ -1,12 +1,12 @@
 'use client';
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow } from '@hooks/index';\nimport { useDevice } from '@hooks/useDevice';\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawer } from './useRightDrawer';\n\n/*\n Configuration for the back button functionality in the RightDrawer\n \n @interface BackButtonProps\n /\ntype BackButtonProps = {\n /* Callback function triggered when the back button is clicked /\n onBack: () => void;\n /* Optional custom text for the back buttoDefaults to \"Go back\" if not provided /\n text?: string;\n};\n\n/\n Props configuration for the RightDrawer component\n \n @interface RightDrawerProps\n /\ntype RightDrawerProps = {\n /\n Title displayed in the drawer header\n /\n title?: ReactNode;\n\n /\n Unique identifier for the drawer instancRequired for store management\n /\n identifier: string;\n\n /* The content to be displayed inside the drawer /\n children?: ReactNode;\n\n /\n Optional header content displayed below the title\n /\n header?: ReactNode;\n\n /\n Optional footer content pinned to the bottom of the drawer\n /\n footer?: ReactNode;\n\n /\n Whether the drawer should close when clicking outside of it\n * @default true\n /\n closeOnOutsideClick?: boolean;\n\n /\n Configuration for an optional back button in the drawer header\n /\n backButton?: BackButtonProps;\n\n /\n External control for the open statWhen provided, overrides internal store state\n /\n isOpen?: boolean;\n\n /\n Callback function triggered when the drawer is closed\n /\n onClose?: () => void;\n\n /\n Optional container to render the drawer into.\n * If not provided, it will be rendered into the body.\n /\n container?: HTMLElement;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n footer,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n container,\n}) => {\n const content = useIntlayer('right-drawer');\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const containerElement = useGetElementOrWindow(container);\n\n const {\n open: openDrawer,\n close: closeDrawer,\n isOpen: checkIsOpen,\n } = useRightDrawer();\n const storeIsOpen = checkIsOpen(identifier);\n const isOpen = storeIsOpen;\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n // Handle Click Outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n try {\n if (!panelRef.current) return;\n\n const isClickAble = isOpen && closeOnOutsideClick;\n const isClickOutside =\n event.target && !panelRef.current.contains(event.target as Node);\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (\n (isClickAble && isClickOutside && isAtTopAndVisible) \|\|\n !event.target\n ) {\n closeDrawer(identifier);\n onClose?.();\n }\n } catch (_e) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n window.addEventListener('mousedown', handleClickOutside);\n return () => window.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (isOpenProp === undefined) return;\n if (isOpenProp === storeIsOpen) return;\n\n if (isOpenProp) {\n openDrawer(identifier);\n } else {\n closeDrawer(identifier);\n onCloseRef.current?.();\n }\n }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n // Handle Keyboard on Spare Space (Linter Fix)\n const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) return;\n\n // Allow closing via Enter or Space if focused on the spare area\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n }\n };\n\n if (!containerElement) return <></>;\n\n return createPortal(\n <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n {/ Header /}\n <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label={backButton.text ?? content.goBack.value}\n onClick={backButton.onBack}\n Icon={ChevronLeft}\n >\n {backButton?.text}\n </Button>\n )}\n </div>\n <div>\n <Popover identifier=\"close-drawer\">\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label=\"Close\"\n className=\"ml-auto\"\n onClick={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n Icon={X}\n size=\"icon-md\"\n />\n\n <Popover.Detail identifier=\"close-drawer\">\n <div className=\"flex items-center gap-2 p-2\">\n <span className=\"whitespace-nowrap text-neutral text-xs\">\n {content.closeDrawer}\n </span>\n <KeyboardShortcut\n shortcut=\"Escape\"\n size=\"sm\"\n onTriggered={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n />\n </div>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n {title && (\n <h2 className=\"flex items-center justify-center font-bold text-lg\">\n {title}\n </h2>\n )}\n {header}\n </div>\n\n {/ Body /}\n <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n {/* biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events /}\n <div\n className=\"flex flex-1 flex-col outline-none\"\n onClick={handleSpareSpaceClick}\n onKeyDown={handleSpareSpaceKeyDown}\n ref={childrenContainerRef}\n role=\"button\" // Semantically acts as a button area\n tabIndex={0} // Makes it focusable to receive key events\n >\n {children}\n </div>\n </div>\n\n {/ Footer */}\n {footer && <div className=\"shrink-0\">{footer}</div>}\n </Container>\n </MaxWidthSmoother>\n </div>,\n containerElement\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"RightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow } from '@hooks/index';\nimport { useDevice } from '@hooks/useDevice';\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawer } from './useRightDrawer';\n\n/*\n Configuration for the back button functionality in the RightDrawer\n \n @interface BackButtonProps\n /\ntype BackButtonProps = {\n /* Callback function triggered when the back button is clicked /\n onBack: () => void;\n /* Optional custom text for the back buttoDefaults to \"Go back\" if not provided /\n text?: string;\n};\n\n/\n Props configuration for the RightDrawer component\n \n @interface RightDrawerProps\n /\ntype RightDrawerProps = {\n /\n Title displayed in the drawer header\n /\n title?: ReactNode;\n\n /\n Unique identifier for the drawer instancRequired for store management\n /\n identifier: string;\n\n /* The content to be displayed inside the drawer /\n children?: ReactNode;\n\n /\n Optional header content displayed below the title\n /\n header?: ReactNode;\n\n /\n Optional footer content pinned to the bottom of the drawer\n /\n footer?: ReactNode;\n\n /\n Whether the drawer should close when clicking outside of it\n * @default true\n /\n closeOnOutsideClick?: boolean;\n\n /\n Configuration for an optional back button in the drawer header\n /\n backButton?: BackButtonProps;\n\n /\n External control for the open statWhen provided, overrides internal store state\n /\n isOpen?: boolean;\n\n /\n Callback function triggered when the drawer is closed\n /\n onClose?: () => void;\n\n /\n Optional container to render the drawer into.\n * If not provided, it will be rendered into the body.\n /\n container?: HTMLElement;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n footer,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n container,\n}) => {\n const content = useIntlayer('right-drawer');\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const containerElement = useGetElementOrWindow(container);\n\n const {\n open: openDrawer,\n close: closeDrawer,\n isOpen: checkIsOpen,\n } = useRightDrawer();\n const storeIsOpen = checkIsOpen(identifier);\n const isOpen = storeIsOpen;\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n // Handle Click Outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n try {\n if (!panelRef.current) return;\n\n const isClickAble = isOpen && closeOnOutsideClick;\n const isClickOutside =\n event.target && !panelRef.current.contains(event.target as Node);\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (\n (isClickAble && isClickOutside && isAtTopAndVisible) \|\|\n !event.target\n ) {\n closeDrawer(identifier);\n onClose?.();\n }\n } catch (_e) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n window.addEventListener('mousedown', handleClickOutside);\n return () => window.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (isOpenProp === undefined) return;\n if (isOpenProp === storeIsOpen) return;\n\n if (isOpenProp) {\n openDrawer(identifier);\n } else {\n closeDrawer(identifier);\n onCloseRef.current?.();\n }\n }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n // Handle Keyboard on Spare Space (Linter Fix)\n const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) return;\n\n // Allow closing via Enter or Space if focused on the spare area\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n }\n };\n\n if (!containerElement) return <></>;\n\n return createPortal(\n <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n {/ Header /}\n <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label={backButton.text ?? content.goBack.value}\n onClick={backButton.onBack}\n Icon={ChevronLeft}\n >\n {backButton?.text}\n </Button>\n )}\n </div>\n <div>\n <Popover identifier=\"close-drawer\">\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label=\"Close\"\n className=\"ml-auto\"\n onClick={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n Icon={X}\n size=\"icon-md\"\n />\n\n <Popover.Detail identifier=\"close-drawer\">\n <div className=\"flex items-center gap-2 p-2\">\n <span className=\"whitespace-nowrap text-neutral text-xs\">\n {content.closeDrawer}\n </span>\n <KeyboardShortcut\n shortcut=\"Escape\"\n size=\"sm\"\n onTriggered={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n />\n </div>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n {title && (\n <h2 className=\"flex items-center justify-center font-bold text-lg\">\n {title}\n </h2>\n )}\n {header}\n </div>\n\n {/ Body /}\n <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n {/* biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events /}\n <div\n className=\"flex flex-1 flex-col outline-none\"\n onClick={handleSpareSpaceClick}\n onKeyDown={handleSpareSpaceKeyDown}\n ref={childrenContainerRef}\n role=\"button\" // Semantically acts as a button area\n tabIndex={0} // Makes it focusable to receive key events\n >\n {children}\n </div>\n </div>\n\n {/ Footer */}\n {footer && <div className=\"shrink-0\">{footer}</div>}\n </Container>\n </MaxWidthSmoother>\n </div>,\n containerElement\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/RightDrawer/isElementAtTopAndNotCovered.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"isElementAtTopAndNotCovered.mjs","names":[],"sources":["../../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["/*\n Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements\n \n This function is specifically used by the RightDrawer component to ensure that click-outside\n * detection only triggers when the drawer is actually visible and not obscured by other UI elements.\n \n ## Algorithm\n * 1. Viewport Check: Verifies the element is within the visible viewport bounds\n * 2. Coverage Check: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer\n * 3. Center Point Testing: Tests the center-top point of the element for accurate detection\n \n ## Use Cases\n * - Click-outside detection for modal and drawer components\n * - Visibility validation for overlay components\n * - Z-index conflict resolution\n * - Accessibility focus management\n \n @param element - The HTML element to check for visibility and coverage\n * @returns Boolean indicating if the element is visible at the top and not covered by other elements\n \n @example\n * Basic usage in click-outside detection:\n * ```tsx\n * const handleClickOutside = (event: MouseEvent) => {\n * if (!drawerRef.current) return;\n \n const isVisible = isElementAtTopAndNotCovered(drawerRef.current);\n * const isClickOutside = !drawerRef.current.contains(event.target as Node);\n \n if (isVisible && isClickOutside) {\n * closeDrawer();\n * }\n * };\n * ```\n \n @example\n * Checking multiple overlays:\n * ```tsx\n * const overlays = document.querySelectorAll('.overlay');\n * const visibleOverlays = Array.from(overlays).filter(overlay =>\n * isElementAtTopAndNotCovered(overlay as HTMLElement)\n * );\n * ```\n */\nexport const isElementAtTopAndNotCovered = (element: HTMLElement): boolean => {\n const rect = element.getBoundingClientRect();\n const elemTop = rect.top;\n const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n // Check if element is at the top of the viewport\n const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n // Further check if the element is not covered by any other element at the center point of its top boundary\n if (isVisibleAtTop) {\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n const topElement = document.elementFromPoint(centerX, centerY);\n\n // Check if our element is the topmost element at these coordinates or a child of the topmost element\n return element === topElement \|\| element.contains(topElement);\n }\n\n return false;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,+BAA+B,YAAkC;CAC5E,MAAM,OAAO,QAAQ,~~sBAAsB~~;~~CAC3C~~,MAAM,UAAU,KAAK;CACrB,MAAM,aAAa,KAAK,SAAS;~~CAMjC~~,~~IAHuB~~,WAAW,KAAK,cAAc,OAAO,aAGxC;EAClB,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;EACzC,MAAM,UAAU,KAAK,MAAM;EAC3B,MAAM,aAAa,SAAS,iBAAiB,SAAS,~~OAAO~~;~~EAG7D~~,~~OAAO~~,YAAY,cAAc,QAAQ,SAAS,~~UAAU;CAC9D;CAEA~~,~~OAAO;AACT~~"}
1	+ {"version":3,"file":"isElementAtTopAndNotCovered.mjs","names":[],"sources":["../../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["/*\n Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements\n \n This function is specifically used by the RightDrawer component to ensure that click-outside\n * detection only triggers when the drawer is actually visible and not obscured by other UI elements.\n \n ## Algorithm\n * 1. Viewport Check: Verifies the element is within the visible viewport bounds\n * 2. Coverage Check: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer\n * 3. Center Point Testing: Tests the center-top point of the element for accurate detection\n \n ## Use Cases\n * - Click-outside detection for modal and drawer components\n * - Visibility validation for overlay components\n * - Z-index conflict resolution\n * - Accessibility focus management\n \n @param element - The HTML element to check for visibility and coverage\n * @returns Boolean indicating if the element is visible at the top and not covered by other elements\n \n @example\n * Basic usage in click-outside detection:\n * ```tsx\n * const handleClickOutside = (event: MouseEvent) => {\n * if (!drawerRef.current) return;\n \n const isVisible = isElementAtTopAndNotCovered(drawerRef.current);\n * const isClickOutside = !drawerRef.current.contains(event.target as Node);\n \n if (isVisible && isClickOutside) {\n * closeDrawer();\n * }\n * };\n * ```\n \n @example\n * Checking multiple overlays:\n * ```tsx\n * const overlays = document.querySelectorAll('.overlay');\n * const visibleOverlays = Array.from(overlays).filter(overlay =>\n * isElementAtTopAndNotCovered(overlay as HTMLElement)\n * );\n * ```\n */\nexport const isElementAtTopAndNotCovered = (element: HTMLElement): boolean => {\n const rect = element.getBoundingClientRect();\n const elemTop = rect.top;\n const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n // Check if element is at the top of the viewport\n const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n // Further check if the element is not covered by any other element at the center point of its top boundary\n if (isVisibleAtTop) {\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n const topElement = document.elementFromPoint(centerX, centerY);\n\n // Check if our element is the topmost element at these coordinates or a child of the topmost element\n return element === topElement \|\| element.contains(topElement);\n }\n\n return false;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,+BAA+B,YAAkC;CAC5E,MAAM,OAAO,QAAQ,uBAAuB;CAC5C,MAAM,UAAU,KAAK;CACrB,MAAM,aAAa,KAAK,SAAS;AAMjC,KAHuB,WAAW,KAAK,cAAc,OAAO,aAGxC;EAClB,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;EACzC,MAAM,UAAU,KAAK,MAAM;EAC3B,MAAM,aAAa,SAAS,iBAAiB,SAAS,QAAQ;AAG9D,SAAO,YAAY,cAAc,QAAQ,SAAS,WAAW;;AAG/D,QAAO"}

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n key: 'right-drawer',\n content: {\n goBack: t({\n en: 'Go back',\n 'en-GB': 'Go back',\n ru: 'Назад',\n ja: '戻る',\n fr: 'Retour',\n ko: '뒤로',\n zh: '返回',\n es: 'Volver',\n de: 'Zurück',\n ar: 'رجوع',\n it: 'Indietro',\n pt: 'Voltar',\n hi: 'वापस जाएं',\n tr: 'Geri dön',\n pl: 'Wstecz',\n id: 'Kembali',\n vi: 'Quay lại',\n uk: 'Назад',\n }),\n closeDrawer: t({\n en: 'Close Drawer',\n 'en-GB': 'Close Drawer',\n ru: 'Закрыть панель',\n ja: '引き出しを閉じる',\n fr: 'Fermer le tiroir',\n ko: '서랍 닫기',\n zh: '关闭抽屉',\n es: 'Cerrar cajón',\n de: 'Schublade schließen',\n ar: 'إغلاق الدرج',\n it: 'Chiudi cassetto',\n pt: 'Fechar gaveta',\n hi: 'दराज बंद करें',\n tr: 'Çekmeceyi kapat',\n pl: 'Zamknij szufladę',\n id: 'Tutup laci',\n vi: 'Đóng ngăn kéo',\n uk: 'Закрити бічну панель',\n }),\n },\n title: 'Right Drawer',\n description:\n 'Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").',\n tags: ['component', 'right-drawer', 'ui', 'localization'],\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":";;;AAEA,MAAM,qBAAqB;CACzB,KAAK;CACL,SAAS;EACP,QAAQ,EAAE;GACR,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;GACJ,IAAI;GACJ,IAAI;~~EACN~~,CAAC;~~EACD~~,aAAa,EAAE;GACb,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;GACJ,IAAI;GACJ,IAAI;~~EACN~~,CAAC;~~CACH~~;~~CACA~~,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAgB;EAAM;~~CAAc~~;~~AAC1D~~"}
1	+ {"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n key: 'right-drawer',\n content: {\n goBack: t({\n en: 'Go back',\n 'en-GB': 'Go back',\n ru: 'Назад',\n ja: '戻る',\n fr: 'Retour',\n ko: '뒤로',\n zh: '返回',\n es: 'Volver',\n de: 'Zurück',\n ar: 'رجوع',\n it: 'Indietro',\n pt: 'Voltar',\n hi: 'वापस जाएं',\n tr: 'Geri dön',\n pl: 'Wstecz',\n id: 'Kembali',\n vi: 'Quay lại',\n uk: 'Назад',\n }),\n closeDrawer: t({\n en: 'Close Drawer',\n 'en-GB': 'Close Drawer',\n ru: 'Закрыть панель',\n ja: '引き出しを閉じる',\n fr: 'Fermer le tiroir',\n ko: '서랍 닫기',\n zh: '关闭抽屉',\n es: 'Cerrar cajón',\n de: 'Schublade schließen',\n ar: 'إغلاق الدرج',\n it: 'Chiudi cassetto',\n pt: 'Fechar gaveta',\n hi: 'दराज बंद करें',\n tr: 'Çekmeceyi kapat',\n pl: 'Zamknij szufladę',\n id: 'Tutup laci',\n vi: 'Đóng ngăn kéo',\n uk: 'Закрити бічну панель',\n }),\n },\n title: 'Right Drawer',\n description:\n 'Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").',\n tags: ['component', 'right-drawer', 'ui', 'localization'],\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":";;;AAEA,MAAM,qBAAqB;CACzB,KAAK;CACL,SAAS;EACP,QAAQ,EAAE;GACR,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;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,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;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAgB;EAAM;EAAe;CAC1D"}

package/dist/esm/components/RightDrawer/useRightDrawer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n private listeners = new Set<() => void>();\n private drawers: DrawerState = {};\n\n subscribe = (listener: () => void) => {\n this.listeners.add(listener);\n return () => {\n this.listeners.delete(listener);\n };\n };\n\n getSnapshot = () => {\n return this.drawers;\n };\n\n open = (key: string) => {\n if (this.drawers[key]) return;\n this.drawers = { ...this.drawers, [key]: true };\n this.emit();\n };\n\n close = (key: string) => {\n if (!this.drawers[key]) return;\n this.drawers = { ...this.drawers, [key]: false };\n this.emit();\n };\n\n set = (states: DrawerState) => {\n let changed = false;\n const newDrawers = { ...this.drawers };\n\n for (const [key, value] of Object.entries(states)) {\n if (newDrawers[key] !== value) {\n newDrawers[key] = value;\n changed = true;\n }\n }\n\n if (changed) {\n this.drawers = newDrawers;\n this.emit();\n }\n };\n\n private emit = () => {\n this.listeners.forEach((listener) => {\n listener();\n });\n };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n const drawers = useSyncExternalStore(\n drawerManager.subscribe,\n drawerManager.getSnapshot,\n () => ({}) as DrawerState\n );\n\n return {\n open: drawerManager.open,\n close: drawerManager.close,\n set: drawerManager.set,\n isOpen: (key: string) => !!drawers[key],\n };\n};\n"],"mappings":";;;;;AAMA,IAAM,mBAAN,MAAuB;CACrB,AAAQ,4BAAY,IAAI,~~IAAgB~~;~~CACxC~~,AAAQ,UAAuB,~~CAAC~~;~~CAEhC~~,aAAa,aAAyB;~~EACpC~~,~~KAAK~~,UAAU,IAAI,~~QAAQ~~;~~EAC3B~~,~~aAAa~~;~~GACX~~,~~KAAK~~,UAAU,OAAO,~~QAAQ;EAChC;CACF;CAEA~~,oBAAoB;~~EAClB~~,~~OAAO~~,KAAK~~;CACd;CAEA~~,QAAQ,QAAgB;~~EACtB~~,~~IAAI~~,KAAK,QAAQ,~~MAAM~~;~~EACvB~~,~~KAAK~~,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;~~EAAK~~;~~EAC9C~~,~~KAAK~~,~~KAAK;CACZ;CAEA~~,SAAS,QAAgB;~~EACvB~~,~~IAAI~~,CAAC,KAAK,QAAQ,~~MAAM~~;~~EACxB~~,~~KAAK~~,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;~~EAAM~~;~~EAC/C~~,~~KAAK~~,~~KAAK;CACZ;CAEA~~,OAAO,WAAwB;EAC7B,IAAI,UAAU;EACd,MAAM,aAAa,EAAE,GAAG,KAAK,~~QAAQ~~;~~EAErC~~,~~KAAK~~,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,~~MAAM~~,~~GAC9C~~,~~IAAI~~,WAAW,SAAS,OAAO;~~GAC7B~~,~~WAAW~~,OAAO;~~GAClB~~,~~UAAU;EACZ;EAGF~~,~~IAAI~~,SAAS;~~GACX~~,~~KAAK~~,UAAU;~~GACf~~,~~KAAK~~,~~KAAK;EACZ;CACF;CAEA~~,AAAQ,aAAa;~~EACnB~~,~~KAAK~~,UAAU,SAAS,aAAa;~~GACnC~~,~~SAAS~~;~~EACX~~,~~CAAC;CACH;AACF;AAEA,~~MAAa,gBAAgB,IAAI,~~iBAAiB~~;~~AAElD~~,MAAa,uBAAuB;CAClC,MAAM,UAAU,qBACd,cAAc,WACd,cAAc,oBACP,~~CAAC~~,EACV;~~CAEA~~,~~OAAO~~;EACL,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,KAAK,cAAc;EACnB,SAAS,QAAgB,CAAC,CAAC,QAAQ;~~CACrC;AACF~~"}
1	+ {"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n private listeners = new Set<() => void>();\n private drawers: DrawerState = {};\n\n subscribe = (listener: () => void) => {\n this.listeners.add(listener);\n return () => {\n this.listeners.delete(listener);\n };\n };\n\n getSnapshot = () => {\n return this.drawers;\n };\n\n open = (key: string) => {\n if (this.drawers[key]) return;\n this.drawers = { ...this.drawers, [key]: true };\n this.emit();\n };\n\n close = (key: string) => {\n if (!this.drawers[key]) return;\n this.drawers = { ...this.drawers, [key]: false };\n this.emit();\n };\n\n set = (states: DrawerState) => {\n let changed = false;\n const newDrawers = { ...this.drawers };\n\n for (const [key, value] of Object.entries(states)) {\n if (newDrawers[key] !== value) {\n newDrawers[key] = value;\n changed = true;\n }\n }\n\n if (changed) {\n this.drawers = newDrawers;\n this.emit();\n }\n };\n\n private emit = () => {\n this.listeners.forEach((listener) => {\n listener();\n });\n };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n const drawers = useSyncExternalStore(\n drawerManager.subscribe,\n drawerManager.getSnapshot,\n () => ({}) as DrawerState\n );\n\n return {\n open: drawerManager.open,\n close: drawerManager.close,\n set: drawerManager.set,\n isOpen: (key: string) => !!drawers[key],\n };\n};\n"],"mappings":";;;;;AAMA,IAAM,mBAAN,MAAuB;CACrB,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,UAAuB,EAAE;CAEjC,aAAa,aAAyB;AACpC,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,oBAAoB;AAClB,SAAO,KAAK;;CAGd,QAAQ,QAAgB;AACtB,MAAI,KAAK,QAAQ,KAAM;AACvB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAM;AAC/C,OAAK,MAAM;;CAGb,SAAS,QAAgB;AACvB,MAAI,CAAC,KAAK,QAAQ,KAAM;AACxB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAO;AAChD,OAAK,MAAM;;CAGb,OAAO,WAAwB;EAC7B,IAAI,UAAU;EACd,MAAM,aAAa,EAAE,GAAG,KAAK,SAAS;AAEtC,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAC/C,KAAI,WAAW,SAAS,OAAO;AAC7B,cAAW,OAAO;AAClB,aAAU;;AAId,MAAI,SAAS;AACX,QAAK,UAAU;AACf,QAAK,MAAM;;;CAIf,AAAQ,aAAa;AACnB,OAAK,UAAU,SAAS,aAAa;AACnC,aAAU;IACV;;;AAIN,MAAa,gBAAgB,IAAI,kBAAkB;AAEnD,MAAa,uBAAuB;CAClC,MAAM,UAAU,qBACd,cAAc,WACd,cAAc,oBACP,EAAE,EACV;AAED,QAAO;EACL,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,KAAK,cAAc;EACnB,SAAS,QAAgB,CAAC,CAAC,QAAQ;EACpC"}