npm - @intlayer/design-system - Versions diffs - 7.0.8 → 7.0.9-canary.2 - Mend

@intlayer/design-system 7.0.8 → 7.0.9-canary.2

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

package/dist/esm/components/MaxHeightSmoother/index.mjs CHANGED Viewed

@@ -146,7 +146,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @returns A smooth height-transitioning container with configurable interaction modes
 */
-const MaxHeightSmoother = ({ children, isHidden, className = "", isOverable = false, isFocusable = false, minHeight = 0,...props }) => /* @__PURE__ */ jsx("div", {
+const MaxHeightSmoother = ({ children, isHidden, className = "", isOverable = false, isFocusable = false, minHeight = 0, ...props }) => /* @__PURE__ */ jsx("div", {
 	"aria-hidden": isFocusable ? isHidden : void 0,
 	tabIndex: isFocusable ? 0 : void 0,
 	role: isFocusable ? "button" : "none",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["MaxHeightSmoother: FC<MaxHeightSmootherProps>"],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the MaxHeightSmoother component\n /\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n /* Content to render within the smoother container /\n children: ReactNode;\n /* Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior /\n isHidden?: boolean;\n /* Enable expand-on-hover behavior /\n isOverable?: boolean;\n /* Enable expand-on-focus behavior for accessibility and keyboard navigation /\n isFocusable?: boolean;\n /* Minimum height in pixels for the collapsed state /\n minHeight?: number;\n}\n\n/\n MaxHeightSmoother Component\n \n A sophisticated container component that provides smooth height transitions\n * for collapsible content. Uses CSS Grid's fractional rows to create fluid\n * animations without JavaScript height calculations, making it performant\n * and smooth across all devices and screen sizes.\n \n @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n \n <MaxHeightSmoother isHidden={isCollapsed}>\n * <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable={true}>\n * <div>\n * <p>This content expands when you hover over the container.</p>\n * <p>Perfect for preview cards or tooltips.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Accessible focus-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable={true}>\n * <div>\n * <h3>Expandable Section</h3>\n * <p>Tab to focus this container to expand the content.</p>\n * <p>Great for accessible progressive disclosure.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n * isOverable={true}\n * minHeight={100}\n * className=\"border rounded-lg p-4\"\n * >\n * <div>\n * <h3>Article Preview</h3>\n * <p>This article preview shows the first few lines...</p>\n * <p>Hover to see the full content with smooth expansion.</p>\n * <p>The minHeight ensures some content is always visible.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Combined hover and focus behavior:\n * ```tsx\n * <MaxHeightSmoother\n * isOverable={true}\n * isFocusable={true}\n * minHeight={80}\n * >\n * <div>\n * <h4>Interactive Card</h4>\n * <p>Expands on both hover and keyboard focus.</p>\n * <p>Accessible to both mouse and keyboard users.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n Features:\n * - Smooth CSS Grid-based height transitions (700ms duration)\n * - Three interaction modes: controlled, hover, and focus\n * - Configurable minimum height for collapsed state\n * - Accessible keyboard navigation support\n * - Overflow handling with smooth scrolling\n * - ARIA attributes for screen reader compatibility\n * - Performance-optimized with CSS-only animations\n * - Responsive design that works on all screen sizes\n \n Animation Technique:\n * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions\n * instead of height animations, which provides:\n * - Smooth animations without knowing content height\n * - Better performance (no layout recalculations)\n * - More reliable across different content types\n * - Automatic adaptation to dynamic content changes\n \n Interaction Modes:\n * 1. Controlled: Use `isHidden` prop for external state control\n * 2. Hover: Set `isOverable={true}` for mouse hover expansion\n * 3. Focus: Set `isFocusable={true}` for keyboard focus expansion\n * 4. Combined: Use both `isOverable` and `isFocusable` together\n \n Accessibility Features:\n * - `role=\"button\"` when focusable for proper screen reader context\n * - `tabIndex={0}` for keyboard navigation when focusable\n * - `aria-hidden` attribute for screen reader control\n * - Semantic focus management with focus-within pseudo-class\n * - High contrast focus indicators\n * - Respects prefers-reduced-motion settings\n \n Use Cases:\n * - FAQ accordions and expandable sections\n * - Article previews and read-more functionality\n * - Card hover effects and content previews\n * - Progressive disclosure for complex forms\n * - Tooltip and popover content containers\n * - Mobile-friendly collapsible navigation\n * - Dashboard widget expansion\n * - Email preview in mail clients\n \n Performance Considerations:\n * - Pure CSS animations (no JavaScript timer overhead)\n * - GPU acceleration through transform-based animations\n * - Minimal repaints and layout shifts\n * - Efficient event handling with CSS pseudo-classes\n * - No DOM measurements or calculations required\n \n @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand behavior\n * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes for styling\n * @param props.style - Inline styles (note: minHeight style will be applied)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n \n @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n children,\n isHidden,\n className = '',\n isOverable = false,\n isFocusable = false,\n minHeight = 0,\n ...props\n}) => (\n <div\n aria-hidden={isFocusable ? isHidden : undefined}\n tabIndex={isFocusable ? 0 : undefined}\n role={isFocusable ? 'button' : 'none'}\n className={cn(\n 'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n typeof isHidden !== 'undefined' &&\n !isHidden &&\n 'grid-rows-[1fr] overflow-x-auto',\n isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n isFocusable &&\n 'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n className\n )}\n {...props}\n >\n <div\n style={{\n minHeight: `${minHeight}px`,\n }}\n className={cn(\n isOverable && 'group-hover/height-smoother:visible',\n isFocusable && 'group-focus/height-smoother:visible',\n className\n )}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAaA,qBAAiD,EAC5D,UACA,UACA,YAAY,IACZ,aAAa,OACb,cAAc,OACd,YAAY,~~EACZ~~,GAAG,YAEH,oBAAC;CACC,eAAa,cAAc,WAAW;CACtC,UAAU,cAAc,IAAI;CAC5B,MAAM,cAAc,WAAW;CAC/B,WAAW,GACT,sHACA,OAAO,aAAa,eAClB,CAAC,YACD,mCACF,cAAc,+CACd,eACE,yGACF,UACD;CACD,GAAI;WAEJ,oBAAC;EACC,OAAO,EACL,WAAW,GAAG,UAAU,KACzB;EACD,WAAW,GACT,cAAc,uCACd,eAAe,uCACf,UACD;EAEA;GACG;EACF"}
1	+ {"version":3,"file":"index.mjs","names":["MaxHeightSmoother: FC<MaxHeightSmootherProps>"],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the MaxHeightSmoother component\n /\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n /* Content to render within the smoother container /\n children: ReactNode;\n /* Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior /\n isHidden?: boolean;\n /* Enable expand-on-hover behavior /\n isOverable?: boolean;\n /* Enable expand-on-focus behavior for accessibility and keyboard navigation /\n isFocusable?: boolean;\n /* Minimum height in pixels for the collapsed state /\n minHeight?: number;\n}\n\n/\n MaxHeightSmoother Component\n \n A sophisticated container component that provides smooth height transitions\n * for collapsible content. Uses CSS Grid's fractional rows to create fluid\n * animations without JavaScript height calculations, making it performant\n * and smooth across all devices and screen sizes.\n \n @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n \n <MaxHeightSmoother isHidden={isCollapsed}>\n * <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable={true}>\n * <div>\n * <p>This content expands when you hover over the container.</p>\n * <p>Perfect for preview cards or tooltips.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Accessible focus-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable={true}>\n * <div>\n * <h3>Expandable Section</h3>\n * <p>Tab to focus this container to expand the content.</p>\n * <p>Great for accessible progressive disclosure.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n * isOverable={true}\n * minHeight={100}\n * className=\"border rounded-lg p-4\"\n * >\n * <div>\n * <h3>Article Preview</h3>\n * <p>This article preview shows the first few lines...</p>\n * <p>Hover to see the full content with smooth expansion.</p>\n * <p>The minHeight ensures some content is always visible.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Combined hover and focus behavior:\n * ```tsx\n * <MaxHeightSmoother\n * isOverable={true}\n * isFocusable={true}\n * minHeight={80}\n * >\n * <div>\n * <h4>Interactive Card</h4>\n * <p>Expands on both hover and keyboard focus.</p>\n * <p>Accessible to both mouse and keyboard users.</p>\n * </div>\n * </MaxHeightSmoother>\n * ```\n \n Features:\n * - Smooth CSS Grid-based height transitions (700ms duration)\n * - Three interaction modes: controlled, hover, and focus\n * - Configurable minimum height for collapsed state\n * - Accessible keyboard navigation support\n * - Overflow handling with smooth scrolling\n * - ARIA attributes for screen reader compatibility\n * - Performance-optimized with CSS-only animations\n * - Responsive design that works on all screen sizes\n \n Animation Technique:\n * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions\n * instead of height animations, which provides:\n * - Smooth animations without knowing content height\n * - Better performance (no layout recalculations)\n * - More reliable across different content types\n * - Automatic adaptation to dynamic content changes\n \n Interaction Modes:\n * 1. Controlled: Use `isHidden` prop for external state control\n * 2. Hover: Set `isOverable={true}` for mouse hover expansion\n * 3. Focus: Set `isFocusable={true}` for keyboard focus expansion\n * 4. Combined: Use both `isOverable` and `isFocusable` together\n \n Accessibility Features:\n * - `role=\"button\"` when focusable for proper screen reader context\n * - `tabIndex={0}` for keyboard navigation when focusable\n * - `aria-hidden` attribute for screen reader control\n * - Semantic focus management with focus-within pseudo-class\n * - High contrast focus indicators\n * - Respects prefers-reduced-motion settings\n \n Use Cases:\n * - FAQ accordions and expandable sections\n * - Article previews and read-more functionality\n * - Card hover effects and content previews\n * - Progressive disclosure for complex forms\n * - Tooltip and popover content containers\n * - Mobile-friendly collapsible navigation\n * - Dashboard widget expansion\n * - Email preview in mail clients\n \n Performance Considerations:\n * - Pure CSS animations (no JavaScript timer overhead)\n * - GPU acceleration through transform-based animations\n * - Minimal repaints and layout shifts\n * - Efficient event handling with CSS pseudo-classes\n * - No DOM measurements or calculations required\n \n @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand behavior\n * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes for styling\n * @param props.style - Inline styles (note: minHeight style will be applied)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n \n @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n children,\n isHidden,\n className = '',\n isOverable = false,\n isFocusable = false,\n minHeight = 0,\n ...props\n}) => (\n <div\n aria-hidden={isFocusable ? isHidden : undefined}\n tabIndex={isFocusable ? 0 : undefined}\n role={isFocusable ? 'button' : 'none'}\n className={cn(\n 'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n typeof isHidden !== 'undefined' &&\n !isHidden &&\n 'grid-rows-[1fr] overflow-x-auto',\n isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n isFocusable &&\n 'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n className\n )}\n {...props}\n >\n <div\n style={{\n minHeight: `${minHeight}px`,\n }}\n className={cn(\n isOverable && 'group-hover/height-smoother:visible',\n isFocusable && 'group-focus/height-smoother:visible',\n className\n )}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAaA,qBAAiD,EAC5D,UACA,UACA,YAAY,IACZ,aAAa,OACb,cAAc,OACd,YAAY,GACZ,GAAG,YAEH,oBAAC;CACC,eAAa,cAAc,WAAW;CACtC,UAAU,cAAc,IAAI;CAC5B,MAAM,cAAc,WAAW;CAC/B,WAAW,GACT,sHACA,OAAO,aAAa,eAClB,CAAC,YACD,mCACF,cAAc,+CACd,eACE,yGACF,UACD;CACD,GAAI;WAEJ,oBAAC;EACC,OAAO,EACL,WAAW,GAAG,UAAU,KACzB;EACD,WAAW,GACT,cAAc,uCACd,eAAe,uCACf,UACD;EAEA;GACG;EACF"}

package/dist/esm/components/MaxWidthSmoother/index.mjs CHANGED Viewed

@@ -2,7 +2,7 @@ import { cn } from "../../utils/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/MaxWidthSmoother/index.tsx
-const MaxWidthSmoother = ({ children, isHidden, minWidth = 0, align = "left", className,...props }) => /* @__PURE__ */ jsx("div", {
+const MaxWidthSmoother = ({ children, isHidden, minWidth = 0, align = "left", className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out", isHidden ? "" : "grid-cols-[1fr]", className),
 	"aria-hidden": isHidden,
 	...props,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype Align = 'left' \| 'right';\n\ntype MaxHeightSmootherProps = HTMLAttributes<HTMLDivElement> & {\n isHidden: boolean;\n minWidth?: number;\n align?: Align;\n};\n\nexport const MaxWidthSmoother = ({\n children,\n isHidden,\n minWidth = 0,\n align = 'left',\n className,\n ...props\n}: MaxHeightSmootherProps) => (\n <div\n className={cn(\n 'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n isHidden ? '' : 'grid-cols-[1fr]',\n className\n )}\n aria-hidden={isHidden}\n {...props}\n >\n <div\n style={{\n minWidth: `${minWidth}px`,\n }}\n tabIndex={isHidden !== false ? undefined : -1}\n className={cn(align === 'right' && 'ml-auto')}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":";;;;AAWA,MAAa,oBAAoB,EAC/B,UACA,UACA,WAAW,GACX,QAAQ,QACR,~~UACA~~,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,oHACA,WAAW,KAAK,mBAChB,UACD;CACD,eAAa;CACb,GAAI;WAEJ,oBAAC;EACC,OAAO,EACL,UAAU,GAAG,SAAS,KACvB;EACD,UAAU,aAAa,QAAQ,SAAY;EAC3C,WAAW,GAAG,UAAU,WAAW,UAAU;EAE5C;GACG;EACF"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype Align = 'left' \| 'right';\n\ntype MaxHeightSmootherProps = HTMLAttributes<HTMLDivElement> & {\n isHidden: boolean;\n minWidth?: number;\n align?: Align;\n};\n\nexport const MaxWidthSmoother = ({\n children,\n isHidden,\n minWidth = 0,\n align = 'left',\n className,\n ...props\n}: MaxHeightSmootherProps) => (\n <div\n className={cn(\n 'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n isHidden ? '' : 'grid-cols-[1fr]',\n className\n )}\n aria-hidden={isHidden}\n {...props}\n >\n <div\n style={{\n minWidth: `${minWidth}px`,\n }}\n tabIndex={isHidden !== false ? undefined : -1}\n className={cn(align === 'right' && 'ml-auto')}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":";;;;AAWA,MAAa,oBAAoB,EAC/B,UACA,UACA,WAAW,GACX,QAAQ,QACR,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,oHACA,WAAW,KAAK,mBAChB,UACD;CACD,eAAa;CACb,GAAI;WAEJ,oBAAC;EACC,OAAO,EACL,UAAU,GAAG,SAAS,KACvB;EACD,UAAU,aAAa,QAAQ,SAAY;EAC3C,WAAW,GAAG,UAAU,WAAW,UAAU;EAE5C;GACG;EACF"}

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

@@ -2,14 +2,15 @@
 import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { X } from "lucide-react";
+import { useEffect } from "react";
 import { cva } from "class-variance-authority";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 import { createPortal } from "react-dom";
@@ -34,7 +35,7 @@ let ModalSize = /* @__PURE__ */ function(ModalSize$1) {
 * Class name variants for different modal sizes using class-variance-authority
 * Defines responsive sizing and scrollable content for modal containers
 */
-const modalVariants = cva("cursor-default justify-center overflow-auto py-3 shadow-sm", {
+const modalVariants = cva("cursor-default justify-center overflow-auto p-3 shadow-sm", {
 	variants: { size: {
 		sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
 		md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
@@ -116,13 +117,22 @@ const MotionModal = motion.create(Container);
 * @param props - Modal component props
 * @returns JSX element rendered via createPortal
 */
-const Modal = ({ children, isOpen, container, disableScroll = true, onClose, hasCloseButton = false, title, size = ModalSize.MD, className,...props }) => {
+const Modal = ({ children, isOpen, container, disableScroll = true, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, ...props }) => {
 	const containerElement = useGetElementOrWindow(container);
 	useScrollBlockage({
 		key: "modal",
 		disableScroll: isOpen && disableScroll
 	});
-	if (!containerElement) return /* @__PURE__ */ jsx(Fragment, {});
+	useEffect(() => {
+		const handleEscape = (event) => {
+			if (event.key === "Escape" && isOpen && onClose) onClose();
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [isOpen, onClose]);
+	if (!containerElement) return /* @__PURE__ */ jsx(Fragment$1, {});
 	const hasTitle = typeof title === "string";
 	return createPortal(/* @__PURE__ */ jsx(motion.div, {
 		className: "invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur",
@@ -150,43 +160,40 @@ const Modal = ({ children, isOpen, container, disableScroll = true, onClose, has
 			onClose?.();
 		},
 		"aria-hidden": !isOpen,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex justify-center p-4",
-			children: /* @__PURE__ */ jsxs(MotionModal, {
-				onClick: (e) => e.stopPropagation(),
-				initial: { scale: isOpen ? .5 : 1 },
-				animate: { scale: isOpen ? 1 : .5 },
-				transition: { duration: .3 },
-				className: modalVariants({
-					size,
-					className
-				}),
-				role: "dialog",
-				"aria-modal": true,
-				roundedSize: "2xl",
-				...props,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: cn("cursor-default px-4", hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`),
-					children: [hasTitle && /* @__PURE__ */ jsx(H3, {
-						className: "ml-4 flex items-center justify-center font-bold text-lg",
-						children: title
-					}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
-						variant: ButtonVariant.HOVERABLE,
-						color: ButtonColor.TEXT,
-						label: "Close modal",
-						className: "ml-auto",
-						onClick: (e) => {
-							e.stopPropagation();
-							onClose?.();
-						},
-						Icon: X,
-						size: ButtonSize.ICON_MD
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex flex-1 flex-col items-center overflow-auto",
-					children
+		children: /* @__PURE__ */ jsxs(MotionModal, {
+			onClick: (e) => e.stopPropagation(),
+			initial: { scale: isOpen ? .5 : 1 },
+			animate: { scale: isOpen ? 1 : .5 },
+			transition: { duration: .3 },
+			className: modalVariants({
+				size,
+				className
+			}),
+			role: "dialog",
+			"aria-modal": true,
+			roundedSize: "2xl",
+			...props,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("cursor-default", hasCloseButton && hasTitle ? `flex items-start` : hasCloseButton ? `flex justify-end` : hasTitle ? `items-center` : `hidden`),
+				children: [hasTitle && /* @__PURE__ */ jsx(H3, {
+					className: "mt-2 mb-4 ml-4 flex items-center justify-center font-bold text-lg",
+					children: title
+				}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.HOVERABLE,
+					color: ButtonColor.TEXT,
+					label: "Close modal",
+					className: "ml-auto",
+					onClick: (e) => {
+						e.stopPropagation();
+						onClose?.();
+					},
+					Icon: X,
+					size: ButtonSize.ICON_MD
 				})]
-			})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 flex-col items-center",
+				children
+			})]
 		})
 	}), containerElement);
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mjs","names":["m","Modal: FC<ModalProps>"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/*\n Enumeration of available modal sizes\n /\nexport enum ModalSize {\n /* Small modal: max height 30vh, max width xl /\n SM = 'sm',\n /* Medium modal: max height 50vh, max width xl /\n MD = 'md',\n /* Large modal: max height 70vh, max width 2xl /\n LG = 'lg',\n /* Extra large modal: max height 95vh, max width 6xl /\n XL = 'xl',\n /* Unset size: max height 95vh, full width responsive /\n UNSET = 'unset',\n}\n\n/\n Props for the Modal component\n /\ntype ModalProps = {\n /* Content to be displayed inside the modal /\n children: ReactNode;\n /* Controls whether the modal is visible /\n isOpen: boolean;\n /* Callback function called when the modal should be closed /\n onClose?: () => void;\n /* Container element to render the modal into (defaults to document.body) /\n container?: HTMLElement;\n /* Whether to disable scrolling on the background content /\n disableScroll?: boolean;\n /* Whether to display a close button in the modal header /\n hasCloseButton?: boolean;\n /* Optional title displayed at the top of the modal /\n title?: string;\n /* Size variant for the modal /\n size?: ModalSize \| `${ModalSize}`;\n} & Pick<\n ContainerProps,\n \| 'className'\n \| 'transparency'\n \| 'border'\n \| 'background'\n \| 'roundedSize'\n \| 'borderColor'\n \| 'padding'\n \| 'separator'\n \| 'gap'\n>;\n\n/\n Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n /\nconst modalVariants = cva(\n 'cursor-default justify-center overflow-auto py-3 shadow-sm',\n {\n variants: {\n size: {\n /* Small modal: height auto, max-height 30vh, width 95vw, max-width xl /\n sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n /* Medium modal: height auto, max-height 50vh, width 95vw, max-width xl /\n md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n /* Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl /\n lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n /* Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl /\n xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n /* Unset modal: height auto, max-height 95vh, width 95vw, no max-width /\n unset: 'h-auto max-h-[95vh] w-[95vw]',\n },\n },\n defaultVariants: {\n size: 'unset',\n },\n }\n);\n\n/\n Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n /\nconst MotionModal = m.create(Container);\n\n/\n Modal Component\n \n A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n \n Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n \n @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n * <p>Modal content goes here</p>\n * </Modal>\n * ```\n \n @example\n * With title and close button:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * title=\"Confirm Action\"\n * hasCloseButton\n * size={ModalSize.LG}\n * >\n * <div>\n * <p>Are you sure you want to continue?</p>\n * <Button onClick={onConfirm}>Confirm</Button>\n * </div>\n * </Modal>\n * ```\n \n @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * container={customContainer}\n * background=\"card\"\n * padding=\"lg\"\n * border=\"default\"\n * >\n * Content with custom styling\n * </Modal>\n * ```\n \n Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n \n @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n children,\n isOpen,\n container,\n disableScroll = true,\n onClose,\n hasCloseButton = false,\n title,\n size = ModalSize.MD,\n className,\n ...props\n}) => {\n const containerElement = useGetElementOrWindow(container);\n\n useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n if (!containerElement) return <></>;\n\n const hasTitle = typeof title === 'string';\n\n return createPortal(\n <m.div\n className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur\"\n animate={isOpen ? 'visible' : 'invisible'}\n variants={{\n visible: {\n opacity: 1,\n visibility: 'visible',\n transition: { duration: 0.1, when: 'beforeChildren' },\n },\n invisible: {\n opacity: 0,\n visibility: 'hidden',\n transition: { duration: 0.1, when: 'afterChildren' },\n },\n }}\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n aria-hidden={!isOpen}\n >\n <~~div className=\"flex justify-center p-4~~\~~">\~~n ~~<MotionModal\n~~ onClick={(e) => e.stopPropagation()}\n initial={{ scale: isOpen ? 0.5 : 1 }}\n animate={{ scale: isOpen ? 1 : 0.5 }}\n transition={{ duration: 0.3 }}\n className={modalVariants({\n size,\n className,\n })}\n role=\"dialog\"\n aria-modal\n roundedSize=\"2xl\"\n {...props}\n >\n <div\n className={cn(\n 'cursor-default ~~px-4~~',\n hasCloseButton && hasTitle\n ? `flex items-~~center justify-center~~`\n : hasCloseButton\n ? `flex ~~items-center~~ justify-end`\n : hasTitle\n ? `items-center`\n : `hidden`\n )}\n >\n {hasTitle && (\n <H3 className=\"ml-4 flex items-center justify-center font-bold text-lg\">\n {title}\n </H3>\n )}\n {hasCloseButton && (\n <Button\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n label=\"Close modal\"\n className=\"ml-auto\"\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n Icon={X}\n size={ButtonSize.ICON_MD}\n />\n )}\n </div>\n <div className=\"flex flex-1 flex-col items-center ~~overflow-auto~~\"~~>\n~~ {children}\n </div>\n </MotionModal>\n ~~</div>\n~~ </m.div>,\n containerElement\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~AAgBA,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;AAwCF,MAAM,gBAAgB,IACpB,~~8DACA~~;CACE,UAAU,EACR,MAAM;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;;;;;AAMD,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAaC,SAAyB,EACpC,UACA,QACA,WACA,gBAAgB,MAChB,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,~~UACA~~,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,KAAI,CAAC,iBAAkB,QAAO,~~iCAAK~~;CAEnC,MAAM,WAAW,OAAO,UAAU;AAElC,QAAO,aACL,oBAACD,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,~~oBAAC;GAAI,WAAU;aACb,~~qBAAC;~~IACC~~,UAAU,MAAM,EAAE,iBAAiB;~~IACnC~~,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;~~IACpC~~,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;~~IACpC~~,YAAY,EAAE,UAAU,IAAK;~~IAC7B~~,WAAW,cAAc;~~KACvB~~;~~KACA~~;~~KACD~~,CAAC;~~IACF~~,MAAK;~~IACL~~;~~IACA~~,aAAY;~~IACZ~~,GAAI;~~eAEJ~~,qBAAC;~~KACC~~,WAAW,GACT,~~uBACA~~,kBAAkB,WACd,~~qCACA~~,iBACE,~~kCACA~~,WACE,iBACA,SACT;~~gBAEA~~,YACC,oBAAC;~~MAAG~~,WAAU;~~gBACX~~;~~OACE~~,EAEN,kBACC,oBAAC;~~MACC~~,SAAS,cAAc;~~MACvB~~,OAAO,YAAY;~~MACnB~~,OAAM;~~MACN~~,WAAU;~~MACV~~,UAAU,MAAM;AACd,~~SAAE~~,iBAAiB;AACnB,~~kBAAW~~;;~~MAEb~~,MAAM;~~MACN~~,MAAM,WAAW;~~OACjB~~;~~MAEA~~,EACN,oBAAC;~~KAAI~~,WAAU;~~KACZ~~;~~MACG~~;~~KACM~~;~~IACV;GACA~~,EACR,iBACD"}
1	+ {"version":3,"file":"Modal.mjs","names":["m","Modal: FC<ModalProps>"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/*\n Enumeration of available modal sizes\n /\nexport enum ModalSize {\n /* Small modal: max height 30vh, max width xl /\n SM = 'sm',\n /* Medium modal: max height 50vh, max width xl /\n MD = 'md',\n /* Large modal: max height 70vh, max width 2xl /\n LG = 'lg',\n /* Extra large modal: max height 95vh, max width 6xl /\n XL = 'xl',\n /* Unset size: max height 95vh, full width responsive /\n UNSET = 'unset',\n}\n\n/\n Props for the Modal component\n /\ntype ModalProps = {\n /* Content to be displayed inside the modal /\n children: ReactNode;\n /* Controls whether the modal is visible /\n isOpen: boolean;\n /* Callback function called when the modal should be closed /\n onClose?: () => void;\n /* Container element to render the modal into (defaults to document.body) /\n container?: HTMLElement;\n /* Whether to disable scrolling on the background content /\n disableScroll?: boolean;\n /* Whether to display a close button in the modal header /\n hasCloseButton?: boolean;\n /* Optional title displayed at the top of the modal /\n title?: string;\n /* Size variant for the modal /\n size?: ModalSize \| `${ModalSize}`;\n} & Pick<\n ContainerProps,\n \| 'className'\n \| 'transparency'\n \| 'border'\n \| 'background'\n \| 'roundedSize'\n \| 'borderColor'\n \| 'padding'\n \| 'separator'\n \| 'gap'\n>;\n\n/\n Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n /\nconst modalVariants = cva(\n 'cursor-default justify-center overflow-auto p-3 shadow-sm',\n {\n variants: {\n size: {\n /* Small modal: height auto, max-height 30vh, width 95vw, max-width xl /\n sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n /* Medium modal: height auto, max-height 50vh, width 95vw, max-width xl /\n md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n /* Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl /\n lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n /* Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl /\n xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n /* Unset modal: height auto, max-height 95vh, width 95vw, no max-width /\n unset: 'h-auto max-h-[95vh] w-[95vw]',\n },\n },\n defaultVariants: {\n size: 'unset',\n },\n }\n);\n\n/\n Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n /\nconst MotionModal = m.create(Container);\n\n/\n Modal Component\n \n A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n \n Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n \n @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n * <p>Modal content goes here</p>\n * </Modal>\n * ```\n \n @example\n * With title and close button:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * title=\"Confirm Action\"\n * hasCloseButton\n * size={ModalSize.LG}\n * >\n * <div>\n * <p>Are you sure you want to continue?</p>\n * <Button onClick={onConfirm}>Confirm</Button>\n * </div>\n * </Modal>\n * ```\n \n @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * container={customContainer}\n * background=\"card\"\n * padding=\"lg\"\n * border=\"default\"\n * >\n * Content with custom styling\n * </Modal>\n * ```\n \n Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n \n @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n children,\n isOpen,\n container,\n disableScroll = true,\n onClose,\n hasCloseButton = false,\n title,\n size = ModalSize.MD,\n className,\n ...props\n}) => {\n const containerElement = useGetElementOrWindow(container);\n\n useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen && onClose) {\n onClose();\n }\n };\n\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.removeEventListener('keydown', handleEscape);\n };\n }, [isOpen, onClose]);\n\n if (!containerElement) return <></>;\n\n const hasTitle = typeof title === 'string';\n\n return createPortal(\n <m.div\n className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur\"\n animate={isOpen ? 'visible' : 'invisible'}\n variants={{\n visible: {\n opacity: 1,\n visibility: 'visible',\n transition: { duration: 0.1, when: 'beforeChildren' },\n },\n invisible: {\n opacity: 0,\n visibility: 'hidden',\n transition: { duration: 0.1, when: 'afterChildren' },\n },\n }}\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n aria-hidden={!isOpen}\n >\n <MotionModal\n onClick={(e) => e.stopPropagation()}\n initial={{ scale: isOpen ? 0.5 : 1 }}\n animate={{ scale: isOpen ? 1 : 0.5 }}\n transition={{ duration: 0.3 }}\n className={modalVariants({\n size,\n className,\n })}\n role=\"dialog\"\n aria-modal\n roundedSize=\"2xl\"\n {...props}\n >\n <div\n className={cn(\n 'cursor-default',\n hasCloseButton && hasTitle\n ? `flex items-start`\n : hasCloseButton\n ? `flex justify-end`\n : hasTitle\n ? `items-center`\n : `hidden`\n )}\n >\n {hasTitle && (\n <H3 className=\"mt-2 mb-4 ml-4 flex items-center justify-center font-bold text-lg\">\n {title}\n </H3>\n )}\n {hasCloseButton && (\n <Button\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n label=\"Close modal\"\n className=\"ml-auto\"\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n Icon={X}\n size={ButtonSize.ICON_MD}\n />\n )}\n </div>\n <div className=\"flex flex-1 flex-col items-center\">{children}</div>\n </MotionModal>\n </m.div>,\n containerElement\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBA,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;AAwCF,MAAM,gBAAgB,IACpB,6DACA;CACE,UAAU,EACR,MAAM;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;;;;;AAMD,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAaC,SAAyB,EACpC,UACA,QACA,WACA,gBAAgB,MAChB,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAIb,WAAS,iBAAiB,WAAW,aAAa;AAElD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,mCAAK;CAEnC,MAAM,WAAW,OAAO,UAAU;AAElC,QAAO,aACL,oBAACD,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC;GACC,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IACvB;IACA;IACD,CAAC;GACF,MAAK;GACL;GACA,aAAY;GACZ,GAAI;cAEJ,qBAAC;IACC,WAAW,GACT,kBACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;eAEA,YACC,oBAAC;KAAG,WAAU;eACX;MACE,EAEN,kBACC,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;MACjB;KAEA,EACN,oBAAC;IAAI,WAAU;IAAqC;KAAe;IACvD;GACR,EACR,iBACD"}

package/dist/esm/components/Navbar/Burger.mjs CHANGED Viewed

@@ -57,7 +57,7 @@ const lineStyle = "bg-text  absolute top-1/2 block h-[2px] w-8 transition durati
 * @param props - Burger component props
 * @returns Animated burger menu JSX element
 */
-const Burger = ({ isActive = false, className,...props }) => /* @__PURE__ */ jsxs("div", {
+const Burger = ({ isActive = false, className, ...props }) => /* @__PURE__ */ jsxs("div", {
 	className: cn("relative mr-3 size-10 cursor-pointer", className),
 	"aria-checked": isActive,
 	"aria-expanded": isActive,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Burger.mjs","names":[],"sources":["../../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the Burger menu component\n /\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n /* Whether the burger menu is in active/open state /\n isActive?: boolean;\n}\n\n/\n Shared styles for burger menu lines\n * Creates the classic hamburger menu appearance with smooth transitions\n /\nconst lineStyle =\n 'bg-text absolute top-1/2 block h-[2px] w-8 transition duration-300';\n\n/\n Burger Menu Component\n \n An animated hamburger menu icon that transforms between closed and open states.\n * Commonly used in mobile navigation to toggle menu visibility.\n \n Features:\n * - Smooth CSS transitions between states (300ms duration)\n * - Accessible with proper ARIA attributes\n * - Screen reader support with descriptive labels\n * - Role-based interaction (switch role for toggle behavior)\n * - Responsive sizing (40px × 40px clickable area)\n * - Classic three-line hamburger design\n \n Animation States:\n * - Closed: Three horizontal parallel lines\n * - Open: Top and bottom lines rotate to form an X, middle line fades out\n \n Accessibility Features:\n * - `role=\"switch\"` indicates toggle behavior\n * - `aria-expanded` reflects current menu state\n * - `aria-checked` provides current selection state\n * - `aria-controls` links to controlled menu element\n * - Dynamic `aria-label` describes current action\n \n @example\n * Basic usage:\n * ```tsx\n * const [isMenuOpen, setIsMenuOpen] = useState(false);\n \n <Burger\n * isActive={isMenuOpen}\n * onClick={() => setIsMenuOpen(!isMenuOpen)}\n * />\n * ```\n \n @example\n * With custom styling:\n * ```tsx\n * <Burger\n * isActive={isMenuOpen}\n * onClick={toggleMenu}\n * className=\"lg:hidden\"\n * style={{ zIndex: 1000 }}\n * />\n * ```\n \n @param props - Burger component props\n * @returns Animated burger menu JSX element\n */\nexport const Burger = ({\n isActive = false,\n className,\n ...props\n}: BurgerProps) => (\n <div\n className={cn('relative mr-3 size-10 cursor-pointer', className)}\n aria-checked={isActive}\n aria-expanded={isActive}\n aria-controls=\"mobile-menu\"\n role=\"switch\"\n aria-label={isActive ? 'Close menu' : 'Open menu'}\n {...props}\n >\n <div>\n <div\n className={cn(lineStyle, isActive ? 'rotate-[-45deg]' : 'rotate-0')}\n />\n <div\n className={cn(\n lineStyle,\n isActive ? '-translate-y-3 opacity-0' : '-translate-y-2 opacity-100'\n )}\n />\n </div>\n\n <div>\n <div className={cn(lineStyle, isActive ? 'opacity-0' : 'opacity-100')} />\n </div>\n\n <div>\n <div\n className={cn(lineStyle, isActive ? 'rotate-[45deg]' : 'rotate-0')}\n />\n <div\n className={cn(\n lineStyle,\n isActive ? 'translate-y-3 opacity-0' : 'translate-y-2 opacity-100'\n )}\n />\n </div>\n </div>\n);\n"],"mappings":";;;;;;;;AAeA,MAAM,YACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDF,MAAa,UAAU,EACrB,WAAW,OACX,~~UACA~~,GAAG,YAEH,qBAAC;CACC,WAAW,GAAG,wCAAwC,UAAU;CAChE,gBAAc;CACd,iBAAe;CACf,iBAAc;CACd,MAAK;CACL,cAAY,WAAW,eAAe;CACtC,GAAI;;EAEJ,qBAAC,oBACC,oBAAC,SACC,WAAW,GAAG,WAAW,WAAW,oBAAoB,WAAW,GACnE,EACF,oBAAC,SACC,WAAW,GACT,WACA,WAAW,6BAA6B,6BACzC,GACD,IACE;EAEN,oBAAC,mBACC,oBAAC,SAAI,WAAW,GAAG,WAAW,WAAW,cAAc,cAAc,GAAI,GACrE;EAEN,qBAAC,oBACC,oBAAC,SACC,WAAW,GAAG,WAAW,WAAW,mBAAmB,WAAW,GAClE,EACF,oBAAC,SACC,WAAW,GACT,WACA,WAAW,4BAA4B,4BACxC,GACD,IACE;;EACF"}
1	+ {"version":3,"file":"Burger.mjs","names":[],"sources":["../../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the Burger menu component\n /\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n /* Whether the burger menu is in active/open state /\n isActive?: boolean;\n}\n\n/\n Shared styles for burger menu lines\n * Creates the classic hamburger menu appearance with smooth transitions\n /\nconst lineStyle =\n 'bg-text absolute top-1/2 block h-[2px] w-8 transition duration-300';\n\n/\n Burger Menu Component\n \n An animated hamburger menu icon that transforms between closed and open states.\n * Commonly used in mobile navigation to toggle menu visibility.\n \n Features:\n * - Smooth CSS transitions between states (300ms duration)\n * - Accessible with proper ARIA attributes\n * - Screen reader support with descriptive labels\n * - Role-based interaction (switch role for toggle behavior)\n * - Responsive sizing (40px × 40px clickable area)\n * - Classic three-line hamburger design\n \n Animation States:\n * - Closed: Three horizontal parallel lines\n * - Open: Top and bottom lines rotate to form an X, middle line fades out\n \n Accessibility Features:\n * - `role=\"switch\"` indicates toggle behavior\n * - `aria-expanded` reflects current menu state\n * - `aria-checked` provides current selection state\n * - `aria-controls` links to controlled menu element\n * - Dynamic `aria-label` describes current action\n \n @example\n * Basic usage:\n * ```tsx\n * const [isMenuOpen, setIsMenuOpen] = useState(false);\n \n <Burger\n * isActive={isMenuOpen}\n * onClick={() => setIsMenuOpen(!isMenuOpen)}\n * />\n * ```\n \n @example\n * With custom styling:\n * ```tsx\n * <Burger\n * isActive={isMenuOpen}\n * onClick={toggleMenu}\n * className=\"lg:hidden\"\n * style={{ zIndex: 1000 }}\n * />\n * ```\n \n @param props - Burger component props\n * @returns Animated burger menu JSX element\n */\nexport const Burger = ({\n isActive = false,\n className,\n ...props\n}: BurgerProps) => (\n <div\n className={cn('relative mr-3 size-10 cursor-pointer', className)}\n aria-checked={isActive}\n aria-expanded={isActive}\n aria-controls=\"mobile-menu\"\n role=\"switch\"\n aria-label={isActive ? 'Close menu' : 'Open menu'}\n {...props}\n >\n <div>\n <div\n className={cn(lineStyle, isActive ? 'rotate-[-45deg]' : 'rotate-0')}\n />\n <div\n className={cn(\n lineStyle,\n isActive ? '-translate-y-3 opacity-0' : '-translate-y-2 opacity-100'\n )}\n />\n </div>\n\n <div>\n <div className={cn(lineStyle, isActive ? 'opacity-0' : 'opacity-100')} />\n </div>\n\n <div>\n <div\n className={cn(lineStyle, isActive ? 'rotate-[45deg]' : 'rotate-0')}\n />\n <div\n className={cn(\n lineStyle,\n isActive ? 'translate-y-3 opacity-0' : 'translate-y-2 opacity-100'\n )}\n />\n </div>\n </div>\n);\n"],"mappings":";;;;;;;;AAeA,MAAM,YACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDF,MAAa,UAAU,EACrB,WAAW,OACX,WACA,GAAG,YAEH,qBAAC;CACC,WAAW,GAAG,wCAAwC,UAAU;CAChE,gBAAc;CACd,iBAAe;CACf,iBAAc;CACd,MAAK;CACL,cAAY,WAAW,eAAe;CACtC,GAAI;;EAEJ,qBAAC,oBACC,oBAAC,SACC,WAAW,GAAG,WAAW,WAAW,oBAAoB,WAAW,GACnE,EACF,oBAAC,SACC,WAAW,GACT,WACA,WAAW,6BAA6B,6BACzC,GACD,IACE;EAEN,oBAAC,mBACC,oBAAC,SAAI,WAAW,GAAG,WAAW,WAAW,cAAc,cAAc,GAAI,GACrE;EAEN,qBAAC,oBACC,oBAAC,SACC,WAAW,GAAG,WAAW,WAAW,mBAAmB,WAAW,GAClE,EACF,oBAAC,SACC,WAAW,GACT,WACA,WAAW,4BAA4B,4BACxC,GACD,IACE;;EACF"}

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

@@ -70,7 +70,7 @@ const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
 const getButtonSize = (size) => {
 	return size === PaginationSize.SM ? ButtonSize.ICON_SM : size === PaginationSize.LG ? ButtonSize.ICON_LG : ButtonSize.ICON_MD;
 };
-const Pagination = ({ currentPage, totalPages, onPageChange, showFirstLast = false, showPrevNext = true, maxVisiblePages = 5, disabled = false, size = PaginationSize.MD, variant = PaginationVariant.DEFAULT, color = ButtonColor.TEXT, className,...props }) => {
+const Pagination = ({ currentPage, totalPages, onPageChange, showFirstLast = false, showPrevNext = true, maxVisiblePages = 5, disabled = false, size = PaginationSize.MD, variant = PaginationVariant.DEFAULT, color = ButtonColor.TEXT, className, ...props }) => {
 	const pageNumbers = generatePageNumbers(currentPage, totalPages, maxVisiblePages);
 	const buttonSize = getButtonSize(size);
 	const isFirstPage = currentPage === 1;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.mjs","names":["pages: (number \| 'ellipsis')[]","Pagination: FC<PaginationProps>"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n 'flex items-center justify-center gap-1',\n {\n variants: {\n size: {\n sm: 'gap-1',\n md: 'gap-2',\n lg: 'gap-3',\n },\n color: {\n text: 'background-text',\n primary: 'background-primary',\n secondary: 'background-secondary',\n neutral: 'background-neutral',\n destructive: 'background-destructive',\n },\n variant: {\n default: '',\n bordered: 'rounded-lg border border-border p-2',\n ghost: 'bg-transparent',\n },\n },\n defaultVariants: {\n size: 'md',\n variant: 'default',\n },\n }\n);\n\nexport enum PaginationSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum PaginationVariant {\n DEFAULT = 'default',\n BORDERED = 'bordered',\n GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof paginationVariants> & {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n showFirstLast?: boolean;\n showPrevNext?: boolean;\n maxVisiblePages?: number;\n disabled?: boolean;\n };\n\nconst generatePageNumbers = (\n currentPage: number,\n totalPages: number,\n maxVisiblePages: number\n): (number \| 'ellipsis')[] => {\n if (totalPages <= maxVisiblePages) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const pages: (number \| 'ellipsis')[] = [];\n const halfVisible = Math.floor(maxVisiblePages / 2);\n\n pages.push(1);\n\n if (currentPage <= halfVisible + 2) {\n for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n pages.push(i);\n }\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n } else if (currentPage >= totalPages - halfVisible - 1) {\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n for (\n let i = Math.max(2, totalPages - maxVisiblePages + 2);\n i <= totalPages;\n i++\n ) {\n pages.push(i);\n }\n } else {\n pages.push('ellipsis');\n const start = currentPage - halfVisible;\n const end = currentPage + halfVisible;\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n pages.push('ellipsis');\n pages.push(totalPages);\n }\n\n return pages;\n};\n\nconst getButtonSize = (size?: PaginationSize \| `${PaginationSize}` \| null) => {\n return size === PaginationSize.SM\n ? ButtonSize.ICON_SM\n : size === PaginationSize.LG\n ? ButtonSize.ICON_LG\n : ButtonSize.ICON_MD;\n};\n\nexport const Pagination: FC<PaginationProps> = ({\n currentPage,\n totalPages,\n onPageChange,\n showFirstLast = false,\n showPrevNext = true,\n maxVisiblePages = 5,\n disabled = false,\n size = PaginationSize.MD,\n variant = PaginationVariant.DEFAULT,\n color = ButtonColor.TEXT,\n className,\n ...props\n}) => {\n const pageNumbers = generatePageNumbers(\n currentPage,\n totalPages,\n maxVisiblePages\n );\n\n const buttonSize = getButtonSize(size);\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === totalPages;\n\n if (totalPages <= 1) return null;\n\n const handlePageChange = (page: number) => {\n if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n onPageChange(page);\n }\n };\n\n return (\n <div\n className={cn(paginationVariants({ size, variant }), className)}\n {...props}\n >\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={disabled \|\| isFirstPage}\n label=\"Go to previous page\"\n Icon={ChevronLeft}\n className=\"min-w-0 px-2\"\n />\n )}\n\n <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n {pageNumbers.map((page) => {\n if (page === 'ellipsis') {\n return (\n <div\n key={`ellipsis-${page}`}\n className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n >\n <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n </div>\n );\n }\n\n const isActive = page === currentPage;\n return (\n <Button\n key={page}\n variant={isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(page)}\n disabled={disabled}\n label={`Go to page ${page}`}\n className={cn(\n 'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0',\n size === 'sm' && 'h-6 w-6',\n size === 'lg' && 'h-10 w-10',\n isActive && 'font-semibold'\n )}\n >\n {page}\n </Button>\n );\n })}\n </div>\n\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={disabled \|\| isLastPage}\n label=\"Go to next page\"\n Icon={ChevronRight}\n className=\"min-w-0 px-2\"\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAa,qBAAqB,IAChC,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;GACd;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CACF;AAED,IAAY,4DAAL;AACL;AACA;AACA;;;AAGF,IAAY,kEAAL;AACL;AACA;AACA;;;AAcF,MAAM,uBACJ,aACA,YACA,oBAC4B;AAC5B,KAAI,cAAc,gBAChB,QAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,GAAG,GAAG,MAAM,IAAI,EAAE;CAG5D,MAAMA,QAAiC,EAAE;CACzC,MAAM,cAAc,KAAK,MAAM,kBAAkB,EAAE;AAEnD,OAAM,KAAK,EAAE;AAEb,KAAI,eAAe,cAAc,GAAG;AAClC,OAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,kBAAkB,GAAG,aAAa,EAAE,EAAE,IAClE,OAAM,KAAK,EAAE;AAEf,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,MAAI,aAAa,EACf,OAAM,KAAK,WAAW;YAEf,eAAe,aAAa,cAAc,GAAG;AACtD,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,OACE,IAAI,IAAI,KAAK,IAAI,GAAG,aAAa,kBAAkB,EAAE,EACrD,KAAK,YACL,IAEA,OAAM,KAAK,EAAE;QAEV;AACL,QAAM,KAAK,WAAW;EACtB,MAAM,QAAQ,cAAc;EAC5B,MAAM,MAAM,cAAc;AAC1B,OAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,OAAM,KAAK,EAAE;AAEf,QAAM,KAAK,WAAW;AACtB,QAAM,KAAK,WAAW;;AAGxB,QAAO;;AAGT,MAAM,iBAAiB,SAAuD;AAC5E,QAAO,SAAS,eAAe,KAC3B,WAAW,UACX,SAAS,eAAe,KACtB,WAAW,UACX,WAAW;;AAGnB,MAAaC,cAAmC,EAC9C,aACA,YACA,cACA,gBAAgB,OAChB,eAAe,MACf,kBAAkB,GAClB,WAAW,OACX,OAAO,eAAe,IACtB,UAAU,kBAAkB,SAC5B,QAAQ,YAAY,MACpB,~~UACA~~,GAAG,YACC;CACJ,MAAM,cAAc,oBAClB,aACA,YACA,gBACD;CAED,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,gBAAgB;AAEnC,KAAI,cAAc,EAAG,QAAO;CAE5B,MAAM,oBAAoB,SAAiB;AACzC,MAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,YAC3D,cAAa,KAAK;;AAItB,QACE,qBAAC;EACC,WAAW,GAAG,mBAAmB;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;EAC/D,GAAI;;GAEH,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;GAGJ,oBAAC;IAAI,WAAU;cACZ,YAAY,KAAK,SAAS;AACzB,SAAI,SAAS,WACX,QACE,oBAAC;MAEC,WAAU;gBAEV,oBAAC,kBAAe,WAAU,kCAAkC;QAHvD,YAAY,OAIb;KAIV,MAAM,WAAW,SAAS;AAC1B,YACE,oBAAC;MAEC,SAAS,WAAW,cAAc,UAAU,cAAc;MAC1D,MAAM;MACN,OAAO,YAAY;MACnB,eAAe,iBAAiB,KAAK;MAC3B;MACV,OAAO,cAAc;MACrB,WAAW,GACT,sEACA,SAAS,QAAQ,WACjB,SAAS,QAAQ,aACjB,YAAY,gBACb;gBAEA;QAdI,KAeE;MAEX;KACE;GAEL,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;;GAEA"}
1	+ {"version":3,"file":"Pagination.mjs","names":["pages: (number \| 'ellipsis')[]","Pagination: FC<PaginationProps>"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\nexport const paginationVariants = cva(\n 'flex items-center justify-center gap-1',\n {\n variants: {\n size: {\n sm: 'gap-1',\n md: 'gap-2',\n lg: 'gap-3',\n },\n color: {\n text: 'background-text',\n primary: 'background-primary',\n secondary: 'background-secondary',\n neutral: 'background-neutral',\n destructive: 'background-destructive',\n },\n variant: {\n default: '',\n bordered: 'rounded-lg border border-border p-2',\n ghost: 'bg-transparent',\n },\n },\n defaultVariants: {\n size: 'md',\n variant: 'default',\n },\n }\n);\n\nexport enum PaginationSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum PaginationVariant {\n DEFAULT = 'default',\n BORDERED = 'bordered',\n GHOST = 'ghost',\n}\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof paginationVariants> & {\n currentPage: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n showFirstLast?: boolean;\n showPrevNext?: boolean;\n maxVisiblePages?: number;\n disabled?: boolean;\n };\n\nconst generatePageNumbers = (\n currentPage: number,\n totalPages: number,\n maxVisiblePages: number\n): (number \| 'ellipsis')[] => {\n if (totalPages <= maxVisiblePages) {\n return Array.from({ length: totalPages }, (_, i) => i + 1);\n }\n\n const pages: (number \| 'ellipsis')[] = [];\n const halfVisible = Math.floor(maxVisiblePages / 2);\n\n pages.push(1);\n\n if (currentPage <= halfVisible + 2) {\n for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n pages.push(i);\n }\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n } else if (currentPage >= totalPages - halfVisible - 1) {\n if (totalPages > maxVisiblePages) {\n pages.push('ellipsis');\n }\n for (\n let i = Math.max(2, totalPages - maxVisiblePages + 2);\n i <= totalPages;\n i++\n ) {\n pages.push(i);\n }\n } else {\n pages.push('ellipsis');\n const start = currentPage - halfVisible;\n const end = currentPage + halfVisible;\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n pages.push('ellipsis');\n pages.push(totalPages);\n }\n\n return pages;\n};\n\nconst getButtonSize = (size?: PaginationSize \| `${PaginationSize}` \| null) => {\n return size === PaginationSize.SM\n ? ButtonSize.ICON_SM\n : size === PaginationSize.LG\n ? ButtonSize.ICON_LG\n : ButtonSize.ICON_MD;\n};\n\nexport const Pagination: FC<PaginationProps> = ({\n currentPage,\n totalPages,\n onPageChange,\n showFirstLast = false,\n showPrevNext = true,\n maxVisiblePages = 5,\n disabled = false,\n size = PaginationSize.MD,\n variant = PaginationVariant.DEFAULT,\n color = ButtonColor.TEXT,\n className,\n ...props\n}) => {\n const pageNumbers = generatePageNumbers(\n currentPage,\n totalPages,\n maxVisiblePages\n );\n\n const buttonSize = getButtonSize(size);\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === totalPages;\n\n if (totalPages <= 1) return null;\n\n const handlePageChange = (page: number) => {\n if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n onPageChange(page);\n }\n };\n\n return (\n <div\n className={cn(paginationVariants({ size, variant }), className)}\n {...props}\n >\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={disabled \|\| isFirstPage}\n label=\"Go to previous page\"\n Icon={ChevronLeft}\n className=\"min-w-0 px-2\"\n />\n )}\n\n <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n {pageNumbers.map((page) => {\n if (page === 'ellipsis') {\n return (\n <div\n key={`ellipsis-${page}`}\n className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n >\n <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n </div>\n );\n }\n\n const isActive = page === currentPage;\n return (\n <Button\n key={page}\n variant={isActive ? ButtonVariant.DEFAULT : ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(page)}\n disabled={disabled}\n label={`Go to page ${page}`}\n className={cn(\n 'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0',\n size === 'sm' && 'h-6 w-6',\n size === 'lg' && 'h-10 w-10',\n isActive && 'font-semibold'\n )}\n >\n {page}\n </Button>\n );\n })}\n </div>\n\n {showPrevNext && (\n <Button\n variant={ButtonVariant.OUTLINE}\n size={buttonSize}\n color={ButtonColor.TEXT}\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={disabled \|\| isLastPage}\n label=\"Go to next page\"\n Icon={ChevronRight}\n className=\"min-w-0 px-2\"\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAa,qBAAqB,IAChC,0CACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACT,WAAW;GACX,SAAS;GACT,aAAa;GACd;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CACF;AAED,IAAY,4DAAL;AACL;AACA;AACA;;;AAGF,IAAY,kEAAL;AACL;AACA;AACA;;;AAcF,MAAM,uBACJ,aACA,YACA,oBAC4B;AAC5B,KAAI,cAAc,gBAChB,QAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,GAAG,GAAG,MAAM,IAAI,EAAE;CAG5D,MAAMA,QAAiC,EAAE;CACzC,MAAM,cAAc,KAAK,MAAM,kBAAkB,EAAE;AAEnD,OAAM,KAAK,EAAE;AAEb,KAAI,eAAe,cAAc,GAAG;AAClC,OAAK,IAAI,IAAI,GAAG,KAAK,KAAK,IAAI,kBAAkB,GAAG,aAAa,EAAE,EAAE,IAClE,OAAM,KAAK,EAAE;AAEf,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,MAAI,aAAa,EACf,OAAM,KAAK,WAAW;YAEf,eAAe,aAAa,cAAc,GAAG;AACtD,MAAI,aAAa,gBACf,OAAM,KAAK,WAAW;AAExB,OACE,IAAI,IAAI,KAAK,IAAI,GAAG,aAAa,kBAAkB,EAAE,EACrD,KAAK,YACL,IAEA,OAAM,KAAK,EAAE;QAEV;AACL,QAAM,KAAK,WAAW;EACtB,MAAM,QAAQ,cAAc;EAC5B,MAAM,MAAM,cAAc;AAC1B,OAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,OAAM,KAAK,EAAE;AAEf,QAAM,KAAK,WAAW;AACtB,QAAM,KAAK,WAAW;;AAGxB,QAAO;;AAGT,MAAM,iBAAiB,SAAuD;AAC5E,QAAO,SAAS,eAAe,KAC3B,WAAW,UACX,SAAS,eAAe,KACtB,WAAW,UACX,WAAW;;AAGnB,MAAaC,cAAmC,EAC9C,aACA,YACA,cACA,gBAAgB,OAChB,eAAe,MACf,kBAAkB,GAClB,WAAW,OACX,OAAO,eAAe,IACtB,UAAU,kBAAkB,SAC5B,QAAQ,YAAY,MACpB,WACA,GAAG,YACC;CACJ,MAAM,cAAc,oBAClB,aACA,YACA,gBACD;CAED,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,gBAAgB;AAEnC,KAAI,cAAc,EAAG,QAAO;CAE5B,MAAM,oBAAoB,SAAiB;AACzC,MAAI,CAAC,YAAY,QAAQ,KAAK,QAAQ,cAAc,SAAS,YAC3D,cAAa,KAAK;;AAItB,QACE,qBAAC;EACC,WAAW,GAAG,mBAAmB;GAAE;GAAM;GAAS,CAAC,EAAE,UAAU;EAC/D,GAAI;;GAEH,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;GAGJ,oBAAC;IAAI,WAAU;cACZ,YAAY,KAAK,SAAS;AACzB,SAAI,SAAS,WACX,QACE,oBAAC;MAEC,WAAU;gBAEV,oBAAC,kBAAe,WAAU,kCAAkC;QAHvD,YAAY,OAIb;KAIV,MAAM,WAAW,SAAS;AAC1B,YACE,oBAAC;MAEC,SAAS,WAAW,cAAc,UAAU,cAAc;MAC1D,MAAM;MACN,OAAO,YAAY;MACnB,eAAe,iBAAiB,KAAK;MAC3B;MACV,OAAO,cAAc;MACrB,WAAW,GACT,sEACA,SAAS,QAAQ,WACjB,SAAS,QAAQ,aACjB,YAAY,gBACb;gBAEA;QAdI,KAeE;MAEX;KACE;GAEL,gBACC,oBAAC;IACC,SAAS,cAAc;IACvB,MAAM;IACN,OAAO,YAAY;IACnB,eAAe,iBAAiB,cAAc,EAAE;IAChD,UAAU,YAAY;IACtB,OAAM;IACN,MAAM;IACN,WAAU;KACV;;GAEA"}

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

@@ -9,8 +9,11 @@ import { useNumber } from "react-intlayer/format";
 const ShowingResultsNumberItems = ({ currentPage, pageSize, totalItems }) => {
 	const { showingResults } = useIntlayer("pagination");
 	const number = useNumber();
-	const start = Math.max(totalItems, (currentPage - 1) * pageSize + 1);
-	const end = Math.min(currentPage * pageSize, totalItems);
+	const safePageSize = Math.max(1, pageSize);
+	const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));
+	const page = Math.min(Math.max(1, currentPage), totalPages);
+	const start = totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);
+	const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);
 	return /* @__PURE__ */ jsx("div", {
 		className: "text-neutral-600 text-sm dark:text-neutral-400",
 		children: showingResults({

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

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

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

@@ -92,7 +92,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * @param props - DotPattern component props
 * @returns SVG element with repeating dot pattern
 */
-const DotPattern = ({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const DotPattern = ({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	"aria-hidden": "true",
 	className: cn("pointer-events-none absolute inset-0 h-full w-full fill-neutral/30", className),
 	...props,

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

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

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

@@ -111,7 +111,7 @@ const id = "grid-pattern";
 * @param props - GridPattern component props
 * @returns SVG element with repeating grid pattern and optional highlights
 */
-const GridPattern = ({ width = 40, height = 40, x = -1, y = -1, strokeDasharray = 0, squares, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const GridPattern = ({ width = 40, height = 40, x = -1, y = -1, strokeDasharray = 0, squares, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	"aria-hidden": "true",
 	className: cn("pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30", className),
 	...props,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GridPattern.mjs","names":["GridPattern: FC<GridPatternProps>","x","y"],"sources":["../../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\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,MAAaA,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,~~UACA~~,GAAG,YAEH,qBAAC;CACC,eAAY;CACZ,WAAW,GACT,0HACA,UACD;CACD,GAAI;;EAEJ,oBAAC,oBACC,oBAAC;GACK;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC;IACC,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;KACjB;IACM,GACL;EACP,oBAAC;GAAK,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;IAAM;EACvE,WACC,oBAAC;GACI;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAACC,KAAGC,SAChB,oBAAC;IACC,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAGD,MAAI,QAAQ;IACf,GAAGC,MAAI,SAAS;MAJX,GAAGD,IAAE,GAAGC,MAKb,CACF;IACE;;EAEJ"}
1	+ {"version":3,"file":"GridPattern.mjs","names":["GridPattern: FC<GridPatternProps>","x","y"],"sources":["../../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\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,MAAaA,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,WACA,GAAG,YAEH,qBAAC;CACC,eAAY;CACZ,WAAW,GACT,0HACA,UACD;CACD,GAAI;;EAEJ,oBAAC,oBACC,oBAAC;GACK;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC;IACC,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;KACjB;IACM,GACL;EACP,oBAAC;GAAK,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;IAAM;EACvE,WACC,oBAAC;GACI;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAACC,KAAGC,SAChB,oBAAC;IACC,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAGD,MAAI,QAAQ;IACf,GAAGC,MAAI,SAAS;MAJX,GAAGD,IAAE,GAAGC,MAKb,CACF;IACE;;EAEJ"}

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

@@ -117,7 +117,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * @param props - Spotlight component props
 * @returns Animated SVG spotlight effect with blur filters
 */
-const Spotlight = ({ fill = "currentColor", cy = 273.501, rx = 1924.71, ry = 273.501, cx = 1924.71, opacity = .21, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const Spotlight = ({ fill = "currentColor", cy = 273.501, rx = 1924.71, ry = 273.501, cx = 1924.71, opacity = .21, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	className: cn("pointer-events-none absolute size-screen animate-spotlight opacity-0", className),
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 3787 2842",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SpotLight.mjs","names":["Spotlight: FC<SpotlightProps>"],"sources":["../../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\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,MAAaA,aAAiC,EAC5C,OAAO,gBACP,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,UAAU,KACV,~~UACA~~,GAAG,YAEH,qBAAC;CACC,WAAW,GACT,wEACA,UACD;CACD,OAAM;CACN,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;YAEJ,oBAAC;EAAE,QAAO;EAAe,WAAU;YACjC,oBAAC;GACK;GACA;GACA;GACA;GACE;GACN,aAAa;GACb,WAAU;IACD;GACT,EACJ,oBAAC,oBACC,qBAAC;EACC,IAAG;EACH,GAAE;EACF,GAAE;EACF,OAAM;EACN,QAAO;EACP,aAAY;EACZ,2BAA0B;;GAE1B,oBAAC;IAAQ,cAAa;IAAI,QAAO;KAA+B;GAChE,oBAAC;IACC,MAAK;IACL,IAAG;IACH,KAAI;IACJ,QAAO;KACE;GACX,oBAAC;IACC,cAAa;IACb,QAAO;KACS;;GACX,GACJ;EACH"}
1	+ {"version":3,"file":"SpotLight.mjs","names":["Spotlight: FC<SpotlightProps>"],"sources":["../../../../src/components/Pattern/SpotLight.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\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,MAAaA,aAAiC,EAC5C,OAAO,gBACP,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,UAAU,KACV,WACA,GAAG,YAEH,qBAAC;CACC,WAAW,GACT,wEACA,UACD;CACD,OAAM;CACN,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;YAEJ,oBAAC;EAAE,QAAO;EAAe,WAAU;YACjC,oBAAC;GACK;GACA;GACA;GACA;GACE;GACN,aAAa;GACb,WAAU;IACD;GACT,EACJ,oBAAC,oBACC,qBAAC;EACC,IAAG;EACH,GAAE;EACF,GAAE;EACF,OAAM;EACN,QAAO;EACP,aAAY;EACZ,2BAA0B;;GAE1B,oBAAC;IAAQ,cAAa;IAAI,QAAO;KAA+B;GAChE,oBAAC;IACC,MAAK;IACL,IAAG;IACH,KAAI;IACJ,QAAO;KACE;GACX,oBAAC;IACC,cAAa;IACb,QAAO;KACS;;GACX,GACJ;EACH"}

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

@@ -34,7 +34,7 @@ const PopoverComponent = (props) => {
 * @param props - Popover Detail component props
 * @returns Positioned popover content with animations and accessibility
 */
-const Detail$1 = ({ xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW,...props }) => {
+const Detail$1 = ({ xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, ...props }) => {
 	const popoverRef = useRef(null);
 	const [computedXAlign, setComputedXAlign] = useState(xAlign);
 	const [computedYAlign, setComputedYAlign] = useState(yAlign);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic.mjs","names":["PopoverComponent: FC<PopoverProps>","Detail: FC<DetailProps>","triggerElement","StaticDetail","Popover: PopoverType","Detail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n PopoverXAlign,\n PopoverYAlign,\n Detail as StaticDetail,\n} from './static';\n\n/*\n Popover Component (Client-side)\n \n Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/\n Popover Detail Component (Client-side)\n \n Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n \n Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number \| undefined>(undefined);\n\n useEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = PopoverYAlign.ABOVE;\n }\n } else if (\n yAlign === PopoverYAlign.ABOVE &&\n spaceAbove < popoverRect.height\n ) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = PopoverYAlign.BELOW;\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = PopoverXAlign.END;\n }\n } else if (\n xAlign === PopoverXAlign.END &&\n spaceLeft < popoverRect.width\n ) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = PopoverXAlign.START;\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [props.identifier, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMA,oBAAsC,UAAU;AACpD,QAAO,oBAAC,iBAAc,GAAI,QAAS;;;;;;;;;;;;;;;;;;AAmBrC,MAAMC,YAA2B,EAC/B,SAAS,cAAc,OACvB,SAAS,cAAc,~~MACvB~~,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,iBAAgB;EACd,MAAM,uBAAuB;AAC3B,OAAI,CAAC,WAAW,QAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAMC,mBAAiB,SAAS,eAC9B,2BAA2B,MAAM,aAClC;AAED,OAAI,CAACA,iBAAgB;GAErB,MAAM,cAAcA,iBAAe,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,kBAAkB,CAEzC;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,cAAc,SAAS,aAAa,YAAY,QAE7D;SAAI,cAAc,YAAY,OAC5B,aAAY,cAAc;eAG5B,WAAW,cAAc,SACzB,aAAa,YAAY,QAGzB;SAAI,cAAc,YAAY,OAC5B,aAAY,cAAc;;IAK9B,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;AAEtC,QAAI,WAAW,cAAc,SAAS,aAAa,YAAY,OAE7D;SAAI,aAAa,YAAY,MAC3B,aAAY,cAAc;eAG5B,WAAW,cAAc,OACzB,YAAY,YAAY,OAGxB;SAAI,cAAc,YAAY,MAC5B,aAAY,cAAc;;AAI9B,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,oBAACC;EACC,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;GACxC;GACD;;AAKN,MAAaC,UAAuB;AAEpC,QAAQ,SAASC"}
1	+ {"version":3,"file":"dynamic.mjs","names":["PopoverComponent: FC<PopoverProps>","Detail: FC<DetailProps>","triggerElement","StaticDetail","Popover: PopoverType","Detail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n PopoverXAlign,\n PopoverYAlign,\n Detail as StaticDetail,\n} from './static';\n\n/*\n Popover Component (Client-side)\n \n Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/\n Popover Detail Component (Client-side)\n \n Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n \n Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = PopoverXAlign.START,\n yAlign = PopoverYAlign.BELOW,\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number \| undefined>(undefined);\n\n useEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === PopoverYAlign.BELOW && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = PopoverYAlign.ABOVE;\n }\n } else if (\n yAlign === PopoverYAlign.ABOVE &&\n spaceAbove < popoverRect.height\n ) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = PopoverYAlign.BELOW;\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === PopoverXAlign.START && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = PopoverXAlign.END;\n }\n } else if (\n xAlign === PopoverXAlign.END &&\n spaceLeft < popoverRect.width\n ) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = PopoverXAlign.START;\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(\n `unrollable-panel-button-${props.identifier}`\n );\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [props.identifier, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMA,oBAAsC,UAAU;AACpD,QAAO,oBAAC,iBAAc,GAAI,QAAS;;;;;;;;;;;;;;;;;;AAmBrC,MAAMC,YAA2B,EAC/B,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,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,iBAAgB;EACd,MAAM,uBAAuB;AAC3B,OAAI,CAAC,WAAW,QAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAMC,mBAAiB,SAAS,eAC9B,2BAA2B,MAAM,aAClC;AAED,OAAI,CAACA,iBAAgB;GAErB,MAAM,cAAcA,iBAAe,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,kBAAkB,CAEzC;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,cAAc,SAAS,aAAa,YAAY,QAE7D;SAAI,cAAc,YAAY,OAC5B,aAAY,cAAc;eAG5B,WAAW,cAAc,SACzB,aAAa,YAAY,QAGzB;SAAI,cAAc,YAAY,OAC5B,aAAY,cAAc;;IAK9B,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;AAEtC,QAAI,WAAW,cAAc,SAAS,aAAa,YAAY,OAE7D;SAAI,aAAa,YAAY,MAC3B,aAAY,cAAc;eAG5B,WAAW,cAAc,OACzB,YAAY,YAAY,OAGxB;SAAI,cAAc,YAAY,MAC5B,aAAY,cAAc;;AAI9B,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,oBAACC;EACC,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;GACxC;GACD;;AAKN,MAAaC,UAAuB;AAEpC,QAAQ,SAASC"}

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

@@ -105,7 +105,7 @@ let PopoverYAlign = /* @__PURE__ */ function(PopoverYAlign$1) {
 * @param props - Popover component props
 * @returns Trigger container with popover functionality
 */
-const PopoverStatic = ({ children, className, identifier,...props }) => /* @__PURE__ */ jsx("div", {
+const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("group/popover relative flex cursor-pointer", className),
 	id: `unrollable-panel-button-${identifier}`,
 	"aria-haspopup": true,
@@ -175,7 +175,7 @@ const PopoverStatic = ({ children, className, identifier,...props }) => /* @__PU
 * @param props - Popover Detail component props
 * @returns Positioned popover content with animations and accessibility
 */
-const Detail = forwardRef(({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, identifier, className, displayArrow = true,...props }, ref) => /* @__PURE__ */ jsx(Container, {
+const Detail = forwardRef(({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, identifier, className, displayArrow = true, ...props }, ref) => /* @__PURE__ */ jsx(Container, {
 	ref,
 	transparency: "sm",
 	role: "group",