@intlayer/design-system 7.5.9 → 7.5.10

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

@@ -0,0 +1,271 @@
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
+import { Popover } from "../Popover/dynamic.mjs";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/Carousel/index.tsx
+const SWIPE_THRESHOLD_DIVISOR = 5;
+const TRANSITION_DELAY_MS = 50;
+const CarouselContext = createContext(null);
+const useCarousel = () => {
+	const context = useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a Carousel");
+	return context;
+};
+const getCardStyle = (index, displayedIndex) => {
+	switch (Math.abs(index - displayedIndex)) {
+		case 0: return "opacity-100 z-40";
+		case 1: return "opacity-75 z-30 cursor-pointer";
+		case 2: return "opacity-50 z-20 pointer-events-none";
+		default: return "opacity-0 z-10 pointer-events-none";
+	}
+};
+const getCardScale = (index, displayedIndex) => {
+	switch (Math.abs(index - displayedIndex)) {
+		case 0: return 1;
+		case 1: return .9;
+		case 2: return .8;
+		default: return .7;
+	}
+};
+const getCardPositionX = (index, displayedIndex) => {
+	return `${(index - displayedIndex) * 30}vw`;
+};
+const CarouselItem = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("h-full w-full", className),
+		...props,
+		children
+	});
+};
+const CarouselIndicators = ({ className, disableKeyboardShortcuts = false, ...props }) => {
+	const { selectedIndex, setSelectedIndex, totalItems, handlePrev, handleNext } = useCarousel();
+	const { goToSlide, previousSlide, nextSlide } = useIntlayer("carousel");
+	if (totalItems <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Popover, {
+				identifier: "carousel-prev",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.HOVERABLE,
+					color: ButtonColor.NEUTRAL,
+					label: previousSlide.value,
+					roundedSize: "full",
+					onClick: (e) => {
+						e.stopPropagation();
+						handlePrev();
+					},
+					Icon: ChevronLeft,
+					size: ButtonSize.ICON_MD,
+					disabled: selectedIndex === 0
+				}), /* @__PURE__ */ jsx(Popover.Detail, {
+					identifier: "carousel-prev",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 p-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "whitespace-nowrap text-neutral text-xs",
+							children: previousSlide.value
+						}), /* @__PURE__ */ jsx(KeyboardShortcut, {
+							shortcut: "ArrowLeft",
+							disabled: disableKeyboardShortcuts,
+							size: "sm",
+							onTriggered: handlePrev
+						})]
+					})
+				})]
+			}),
+			Array.from({ length: totalItems }).map((_, index) => {
+				const isActive = index === selectedIndex;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						setSelectedIndex(index);
+					},
+					"aria-label": goToSlide({ index: index + 1 }).value,
+					className: cn("h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2", isActive ? "scale-110 bg-text" : "bg-text/20 hover:bg-text/40")
+				}, index);
+			}),
+			/* @__PURE__ */ jsxs(Popover, {
+				identifier: "carousel-next",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.HOVERABLE,
+					color: ButtonColor.NEUTRAL,
+					roundedSize: "full",
+					label: nextSlide.value,
+					onClick: (e) => {
+						e.stopPropagation();
+						handleNext();
+					},
+					Icon: ChevronRight,
+					size: ButtonSize.ICON_MD,
+					disabled: selectedIndex === totalItems - 1
+				}), /* @__PURE__ */ jsx(Popover.Detail, {
+					identifier: "carousel-next",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 p-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "whitespace-nowrap text-neutral text-xs",
+							children: nextSlide.value
+						}), /* @__PURE__ */ jsx(KeyboardShortcut, {
+							shortcut: "ArrowRight",
+							size: "sm",
+							onTriggered: handleNext,
+							disabled: disableKeyboardShortcuts
+						})]
+					})
+				})]
+			})
+		]
+	});
+};
+const partitionCarouselChildren = (children) => {
+	const slides = [];
+	const others = [];
+	children.forEach((child) => {
+		if (isValidElement(child) && child.type === CarouselItem) slides.push(child);
+		else others.push(child);
+	});
+	return [slides, others];
+};
+const CarouselRoot = ({ children, className, initialIndex = 0, onIndexChange, ...props }) => {
+	const [slides, others] = partitionCarouselChildren(Children.toArray(children));
+	const totalItems = slides.length;
+	const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+	const [displayedIndex, setDisplayedIndex] = useState(initialIndex);
+	const [containerHeight, setContainerHeight] = useState(0);
+	const [startX, setStartX] = useState(0);
+	const [isDragging, setIsDragging] = useState(false);
+	const containerRef = useRef(null);
+	const itemsRef = useRef([]);
+	const handleSwitchItem = (diff) => {
+		if (typeof window === "undefined") return;
+		const swipeStep = window.innerWidth / SWIPE_THRESHOLD_DIVISOR;
+		const numSwipe = Math.round(diff / swipeStep);
+		if (Math.abs(numSwipe) >= 1) {
+			const newIndex = displayedIndex - numSwipe;
+			const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));
+			if (clampedIndex !== selectedIndex) {
+				setSelectedIndex(clampedIndex);
+				setStartX((prev) => prev + diff);
+			}
+		}
+	};
+	const handleNext = () => {
+		setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));
+	};
+	const handlePrev = () => {
+		setSelectedIndex((prev) => Math.max(prev - 1, 0));
+	};
+	const handleMouseDown = (e) => {
+		setIsDragging(true);
+		setStartX(e.clientX);
+	};
+	const handleMouseMove = (e) => {
+		if (isDragging) handleSwitchItem(e.clientX - startX);
+	};
+	const handleDragEnd = () => setIsDragging(false);
+	const handleTouchStart = (e) => {
+		setIsDragging(true);
+		setStartX(e.touches[0].clientX);
+	};
+	const handleTouchMove = (e) => {
+		if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);
+	};
+	useEffect(() => {
+		if (selectedIndex) onIndexChange?.(selectedIndex);
+	}, [selectedIndex, onIndexChange]);
+	useEffect(() => {
+		let interval;
+		if (selectedIndex !== displayedIndex) interval = setInterval(() => {
+			setDisplayedIndex((prev) => {
+				if (prev === selectedIndex) {
+					clearInterval(interval);
+					return prev;
+				}
+				return prev < selectedIndex ? prev + 1 : prev - 1;
+			});
+		}, TRANSITION_DELAY_MS);
+		return () => clearInterval(interval);
+	}, [selectedIndex, displayedIndex]);
+	useEffect(() => {
+		const calculateMaxHeight = () => {
+			const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);
+			const maxHeight = Math.max(0, ...heights);
+			if (maxHeight > 0) setContainerHeight(maxHeight + 40);
+		};
+		calculateMaxHeight();
+		const observer = new ResizeObserver(() => {
+			calculateMaxHeight();
+		});
+		itemsRef.current.forEach((item) => {
+			if (item) observer.observe(item);
+		});
+		return () => observer.disconnect();
+	}, [totalItems]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			selectedIndex,
+			setSelectedIndex,
+			totalItems,
+			handlePrev,
+			handleNext
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: cn("relative w-full cursor-grab select-none outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing", className),
+			style: {
+				height: containerHeight > 0 ? containerHeight : "auto",
+				minHeight: "400px"
+			},
+			onMouseDown: handleMouseDown,
+			onMouseMove: handleMouseMove,
+			onMouseUp: handleDragEnd,
+			onMouseLeave: handleDragEnd,
+			onTouchStart: handleTouchStart,
+			onTouchMove: handleTouchMove,
+			onTouchEnd: handleDragEnd,
+			role: "region",
+			"aria-label": "Carousel",
+			...props,
+			children: [slides.map((child, index) => {
+				return /* @__PURE__ */ jsx("div", {
+					role: "button",
+					tabIndex: 0,
+					ref: (el) => {
+						itemsRef.current[index] = el;
+					},
+					className: cn("absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out", "outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0", getCardStyle(index, displayedIndex)),
+					onClick: (e) => {
+						e.stopPropagation();
+						setSelectedIndex(index);
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") setSelectedIndex(index);
+					},
+					style: { transform: `
+                  translateX(${getCardPositionX(index, displayedIndex)}) 
+                  scale(${getCardScale(index, displayedIndex)})
+                ` },
+					children: child
+				}, index);
+			}), others]
+		})
+	});
+};
+const Carousel = Object.assign(CarouselRoot, {
+	Item: CarouselItem,
+	Indicators: CarouselIndicators
+});
+
+//#endregion
+export { Carousel };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CarouselItem: FC<CarouselItemProps>","CarouselIndicators: FC<CarouselIndicatorsProps>","slides: ReactElement[]","others: ReactNode[]","CarouselRoot: FC<CarouselProps>","handleMouseDown: MouseEventHandler<HTMLDivElement>","handleMouseMove: MouseEventHandler<HTMLDivElement>","handleTouchStart: TouchEventHandler<HTMLDivElement>","handleTouchMove: TouchEventHandler<HTMLDivElement>","interval: NodeJS.Timeout"],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\n// Removed useIsMounted as it is no longer needed for positioning\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// FIX 1: Use CSS units (vw) instead of window.innerWidth (pixels)\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (index: number, displayedIndex: number) => {\n  const diff = index - displayedIndex;\n  return `${diff * 30}vw`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> = ({\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('h-full w-full', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (isValidElement(child) && child.type === CarouselItem) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (typeof window === 'undefined') return;\n\n    const screenWidth = window.innerWidth;\n    const swipeStep = screenWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0].clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative w-full cursor-grab select-none outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          className\n        )}\n        style={{\n          height: containerHeight > 0 ? containerHeight : 'auto',\n          minHeight: '400px',\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleDragEnd}\n        onMouseLeave={handleDragEnd}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleDragEnd}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        {...props}\n      >\n        {slides.map((child, index) => {\n          return (\n            <div\n              key={index}\n              role=\"button\"\n              tabIndex={0}\n              ref={(el) => {\n                itemsRef.current[index] = el;\n              }}\n              // FIX 2: Removed isMounted checks and invisible classes.\n              // CSS units allow correct SSR rendering.\n              className={cn(\n                'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out',\n                'outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',\n                getCardStyle(index, displayedIndex)\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                setSelectedIndex(index);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') setSelectedIndex(index);\n              }}\n              style={{\n                // FIX 3: getCardPositionX now returns '30vw', so no 'px' suffix needed here\n                transform: `\n                  translateX(${getCardPositionX(index, displayedIndex)}) \n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTable.mjs","names":["CollapsibleTable: FC<CollapsibleTableProps>","data"],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n// Container variants using CVA\nconst collapsibleTableVariants = cva(\n  'w-full max-w-full overflow-hidden rounded-lg border bg-card',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-4xl',\n        xl: 'max-w-6xl',\n        full: 'w-full max-w-none',\n      },\n      variant: {\n        default: 'border-neutral/20 bg-card',\n        dark: 'border-[#B5B5B5] bg-[#242424]',\n        ghost: 'border-transparent bg-transparent',\n        outlined: 'border-2 border-primary/20 bg-background',\n      },\n      spacing: {\n        none: '',\n        sm: 'm-2',\n        md: 'm-4',\n        lg: 'm-6',\n        auto: 'm-auto',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n      spacing: 'auto',\n    },\n  }\n);\n\n// Header variants\nconst headerVariants = cva(\n  'flex cursor-pointer items-center justify-between p-3 transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-neutral/5',\n        dark: 'hover:bg-neutral/10',\n        ghost: 'hover:bg-primary/5',\n        outlined: 'hover:bg-primary/5',\n      },\n      borderStyle: {\n        none: '',\n        dashed: 'border-neutral/20 border-b border-dashed',\n        solid: 'border-neutral/20 border-b border-solid',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      borderStyle: 'dashed',\n    },\n  }\n);\n\n// Table variants\nconst tableVariants = cva('w-full border-collapse', {\n  variants: {\n    spacing: {\n      none: 'border-spacing-0',\n      sm: 'border-spacing-1',\n      md: 'border-spacing-2',\n      lg: 'border-spacing-4',\n    },\n    layout: {\n      auto: 'table-auto',\n      fixed: 'table-fixed',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n    layout: 'auto',\n  },\n});\n\nexport interface CollapsibleTableProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof collapsibleTableVariants> {\n  /** Table title displayed in the header */\n  title: string;\n  /** Array of data objects to display in the table */\n  data: Record<string, unknown>[];\n  /** Custom class for the main container */\n  className?: string;\n  /** Custom class for the header section */\n  headerClassName?: string;\n  /** Custom class for the content wrapper */\n  contentClassName?: string;\n  /** Custom class for the table element */\n  tableClassName?: string;\n  /** Custom class for table header cells */\n  thClassName?: string;\n  /** Custom class for table body cells */\n  tdClassName?: string;\n  /** Custom class for table rows */\n  trClassName?: string;\n  /** Controls if the table is expanded by default */\n  defaultExpanded?: boolean;\n  /** Controlled expansion state */\n  isExpanded?: boolean;\n  /** Callback when expansion state changes */\n  onExpandToggle?: (expanded: boolean) => void;\n  /** Custom icon for the toggle (defaults to ChevronRight) */\n  toggleIcon?: ReactNode;\n  /** Header border style variant */\n  borderStyle?: 'none' | 'dashed' | 'solid';\n  /** Table spacing variant */\n  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';\n  /** Table layout variant */\n  tableLayout?: 'auto' | 'fixed';\n  /** Custom column renderers */\n  columnRenderers?: Record<\n    string,\n    (value: unknown, row: Record<string, unknown>) => ReactNode\n  >;\n  /** Disable the collapse functionality */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the table content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * CollapsibleTable component that displays tabular data in an expandable/collapsible format.\n * It provides a clickable header that controls the visibility of the table content with smooth animations.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable styling with CVA variants (size, variant, spacing)\n * - Multiple className props for granular styling control\n * - Custom column rendering and ordering\n * - Accessible with proper ARIA attributes and keyboard navigation\n * - Responsive design with overflow handling\n * - Empty state customization\n * - Flexible data structure support\n *\n * @example\n * // Basic usage\n * const userData = [\n *   { name: 'John Doe', role: 'Developer', experience: '5 years' },\n *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },\n * ];\n *\n * <CollapsibleTable\n *   title=\"Team Members\"\n *   data={userData}\n *   defaultExpanded={true}\n * />\n *\n * @example\n * // Advanced usage with custom styling and renderers\n * const projectData = [\n *   { name: 'Project A', status: 'active', priority: 'high' },\n *   { name: 'Project B', status: 'completed', priority: 'medium' },\n * ];\n *\n * const columnRenderers = {\n *   status: (value) => (\n *     <Badge variant={value === 'active' ? 'success' : 'default'}>\n *       {value}\n *     </Badge>\n *   ),\n *   priority: (value) => (\n *     <span className={`font-semibold ${\n *       value === 'high' ? 'text-red-600' :\n *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'\n *     }`}>\n *       {value}\n *     </span>\n *   ),\n * };\n *\n * <CollapsibleTable\n *   title=\"Project Dashboard\"\n *   data={projectData}\n *   variant=\"dark\"\n *   size=\"lg\"\n *   borderStyle=\"solid\"\n *   columnRenderers={columnRenderers}\n *   headerClassName=\"bg-slate-800 text-white\"\n *   tableClassName=\"bg-slate-900\"\n *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}\n * />\n *\n * @param title - The text or React node displayed in the table header\n * @param data - Array of objects representing table rows. Keys become column headers, values become cell content\n * @param className - Additional CSS classes for the main container element\n * @param headerClassName - Additional CSS classes for the clickable header section\n * @param contentClassName - Additional CSS classes for the table content wrapper\n * @param tableClassName - Additional CSS classes for the HTML table element\n * @param thClassName - Additional CSS classes for table header cells (th elements)\n * @param tdClassName - Additional CSS classes for table body cells (td elements)\n * @param trClassName - Additional CSS classes for table rows (tr elements)\n * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)\n * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled\n * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter\n * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react\n * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'\n * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'\n * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'\n * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'\n * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'\n * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode\n * @param disabled - When true, disables click interaction and shows disabled visual state\n * @param aria-label - Accessible label for screen readers describing the table purpose\n * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided\n */\nexport const CollapsibleTable: FC<CollapsibleTableProps> = ({\n  title,\n  data,\n  className,\n  headerClassName,\n  contentClassName,\n  tableClassName,\n  thClassName,\n  tdClassName,\n  trClassName,\n  defaultExpanded = false,\n  isExpanded: controlledExpanded,\n  onExpandToggle,\n  toggleIcon,\n  size,\n  variant,\n  spacing,\n  borderStyle,\n  tableSpacing,\n  tableLayout,\n  columnRenderers,\n  disabled = false,\n  'aria-label': ariaLabel,\n  contentId,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n  const isExpanded = controlledExpanded ?? internalExpanded;\n\n  const toggleExpanded = () => {\n    if (disabled) return;\n    const newState = !isExpanded;\n    if (onExpandToggle) onExpandToggle(newState);\n    else setInternalExpanded(newState);\n  };\n\n  const getColumns = (data: Record<string, unknown>[]) => {\n    if (Array.isArray(data) && data.length > 0) {\n      const allKeys = new Set<string>();\n      data.forEach((item) => {\n        if (item && typeof item === 'object') {\n          Object.keys(item).forEach((key) => allKeys.add(key));\n        }\n      });\n      return Array.from(allKeys);\n    }\n    return [];\n  };\n\n  const tableColumns = getColumns(data);\n  const generatedContentId =\n    contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;\n\n  const renderCellContent = (\n    column: string,\n    value: unknown,\n    row: Record<string, unknown>\n  ) => {\n    if (columnRenderers?.[column]) {\n      return columnRenderers[column](value, row);\n    }\n    return String(value ?? '—');\n  };\n\n  return (\n    <div\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <div\n        onClick={toggleExpanded}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\n        aria-disabled={disabled}\n      >\n        <p className=\"font-semibold\">{title}</p>\n        <div\n          className={cn(\n            'transition-transform duration-200',\n            isExpanded && 'rotate-90',\n            disabled && 'opacity-50'\n          )}\n        >\n          {toggleIcon ?? <ChevronRight size={16} />}\n        </div>\n      </div>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <div\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\n          role=\"region\"\n          aria-labelledby={`${generatedContentId}-header`}\n        >\n          <table\n            className={cn(\n              tableVariants({ spacing: tableSpacing, layout: tableLayout }),\n              'border-separate',\n              tableClassName\n            )}\n          >\n            <thead>\n              <tr className={trClassName}>\n                {tableColumns.map((column) => (\n                  <th\n                    key={column}\n                    className={cn(\n                      'pb-2 text-left font-medium text-sm text-text/70',\n                      thClassName\n                    )}\n                  >\n                    {column}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((row, index) => (\n                <tr\n                  key={index}\n                  className={cn(\n                    'bg-neutral/5 transition-colors hover:bg-neutral/10',\n                    trClassName\n                  )}\n                >\n                  {tableColumns.map((column) => (\n                    <td\n                      key={column}\n                      className={cn(\n                        'rounded px-3 py-2 text-sm text-text',\n                        tdClassName\n                      )}\n                    >\n                      {renderCellContent(column, row[column], row)}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CollapsibleTable.mjs","names":["CollapsibleTable: FC<CollapsibleTableProps>","data"],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, type HTMLAttributes, type ReactNode, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n// Container variants using CVA\nconst collapsibleTableVariants = cva(\n  'w-full max-w-full overflow-hidden rounded-lg border bg-card',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-lg',\n        md: 'max-w-2xl',\n        lg: 'max-w-4xl',\n        xl: 'max-w-6xl',\n        full: 'w-full max-w-none',\n      },\n      variant: {\n        default: 'border-neutral/20 bg-card',\n        dark: 'border-[#B5B5B5] bg-[#242424]',\n        ghost: 'border-transparent bg-transparent',\n        outlined: 'border-2 border-primary/20 bg-background',\n      },\n      spacing: {\n        none: '',\n        sm: 'm-2',\n        md: 'm-4',\n        lg: 'm-6',\n        auto: 'm-auto',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n      spacing: 'auto',\n    },\n  }\n);\n\n// Header variants\nconst headerVariants = cva(\n  'flex cursor-pointer items-center justify-between p-3 transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-neutral/5',\n        dark: 'hover:bg-neutral/10',\n        ghost: 'hover:bg-primary/5',\n        outlined: 'hover:bg-primary/5',\n      },\n      borderStyle: {\n        none: '',\n        dashed: 'border-neutral/20 border-b border-dashed',\n        solid: 'border-neutral/20 border-b border-solid',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      borderStyle: 'dashed',\n    },\n  }\n);\n\n// Table variants\nconst tableVariants = cva('w-full border-collapse', {\n  variants: {\n    spacing: {\n      none: 'border-spacing-0',\n      sm: 'border-spacing-1',\n      md: 'border-spacing-2',\n      lg: 'border-spacing-4',\n    },\n    layout: {\n      auto: 'table-auto',\n      fixed: 'table-fixed',\n    },\n  },\n  defaultVariants: {\n    spacing: 'md',\n    layout: 'auto',\n  },\n});\n\nexport interface CollapsibleTableProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof collapsibleTableVariants> {\n  /** Table title displayed in the header */\n  title: string;\n  /** Array of data objects to display in the table */\n  data: Record<string, unknown>[];\n  /** Custom class for the main container */\n  className?: string;\n  /** Custom class for the header section */\n  headerClassName?: string;\n  /** Custom class for the content wrapper */\n  contentClassName?: string;\n  /** Custom class for the table element */\n  tableClassName?: string;\n  /** Custom class for table header cells */\n  thClassName?: string;\n  /** Custom class for table body cells */\n  tdClassName?: string;\n  /** Custom class for table rows */\n  trClassName?: string;\n  /** Controls if the table is expanded by default */\n  defaultExpanded?: boolean;\n  /** Controlled expansion state */\n  isExpanded?: boolean;\n  /** Callback when expansion state changes */\n  onExpandToggle?: (expanded: boolean) => void;\n  /** Custom icon for the toggle (defaults to ChevronRight) */\n  toggleIcon?: ReactNode;\n  /** Header border style variant */\n  borderStyle?: 'none' | 'dashed' | 'solid';\n  /** Table spacing variant */\n  tableSpacing?: 'none' | 'sm' | 'md' | 'lg';\n  /** Table layout variant */\n  tableLayout?: 'auto' | 'fixed';\n  /** Custom column renderers */\n  columnRenderers?: Record<\n    string,\n    (value: unknown, row: Record<string, unknown>) => ReactNode\n  >;\n  /** Disable the collapse functionality */\n  disabled?: boolean;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the table content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * CollapsibleTable component that displays tabular data in an expandable/collapsible format.\n * It provides a clickable header that controls the visibility of the table content with smooth animations.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Customizable styling with CVA variants (size, variant, spacing)\n * - Multiple className props for granular styling control\n * - Custom column rendering and ordering\n * - Accessible with proper ARIA attributes and keyboard navigation\n * - Responsive design with overflow handling\n * - Empty state customization\n * - Flexible data structure support\n *\n * @example\n * // Basic usage\n * const userData = [\n *   { name: 'John Doe', role: 'Developer', experience: '5 years' },\n *   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },\n * ];\n *\n * <CollapsibleTable\n *   title=\"Team Members\"\n *   data={userData}\n *   defaultExpanded={true}\n * />\n *\n * @example\n * // Advanced usage with custom styling and renderers\n * const projectData = [\n *   { name: 'Project A', status: 'active', priority: 'high' },\n *   { name: 'Project B', status: 'completed', priority: 'medium' },\n * ];\n *\n * const columnRenderers = {\n *   status: (value) => (\n *     <Badge variant={value === 'active' ? 'success' : 'default'}>\n *       {value}\n *     </Badge>\n *   ),\n *   priority: (value) => (\n *     <span className={`font-semibold ${\n *       value === 'high' ? 'text-red-600' :\n *       value === 'medium' ? 'text-yellow-600' : 'text-green-600'\n *     }`}>\n *       {value}\n *     </span>\n *   ),\n * };\n *\n * <CollapsibleTable\n *   title=\"Project Dashboard\"\n *   data={projectData}\n *   variant=\"dark\"\n *   size=\"lg\"\n *   borderStyle=\"solid\"\n *   columnRenderers={columnRenderers}\n *   headerClassName=\"bg-slate-800 text-white\"\n *   tableClassName=\"bg-slate-900\"\n *   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}\n * />\n *\n * @param title - The text or React node displayed in the table header\n * @param data - Array of objects representing table rows. Keys become column headers, values become cell content\n * @param className - Additional CSS classes for the main container element\n * @param headerClassName - Additional CSS classes for the clickable header section\n * @param contentClassName - Additional CSS classes for the table content wrapper\n * @param tableClassName - Additional CSS classes for the HTML table element\n * @param thClassName - Additional CSS classes for table header cells (th elements)\n * @param tdClassName - Additional CSS classes for table body cells (td elements)\n * @param trClassName - Additional CSS classes for table rows (tr elements)\n * @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)\n * @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled\n * @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter\n * @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react\n * @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'\n * @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'\n * @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'\n * @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'\n * @param tableLayout - CSS table-layout property: 'auto' | 'fixed'\n * @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode\n * @param disabled - When true, disables click interaction and shows disabled visual state\n * @param aria-label - Accessible label for screen readers describing the table purpose\n * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided\n */\nexport const CollapsibleTable: FC<CollapsibleTableProps> = ({\n  title,\n  data,\n  className,\n  headerClassName,\n  contentClassName,\n  tableClassName,\n  thClassName,\n  tdClassName,\n  trClassName,\n  defaultExpanded = false,\n  isExpanded: controlledExpanded,\n  onExpandToggle,\n  toggleIcon,\n  size,\n  variant,\n  spacing,\n  borderStyle,\n  tableSpacing,\n  tableLayout,\n  columnRenderers,\n  disabled = false,\n  'aria-label': ariaLabel,\n  contentId,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n\n  const isExpanded = controlledExpanded ?? internalExpanded;\n\n  const toggleExpanded = () => {\n    if (disabled) return;\n    const newState = !isExpanded;\n    if (onExpandToggle) onExpandToggle(newState);\n    else setInternalExpanded(newState);\n  };\n\n  const getColumns = (data: Record<string, unknown>[]) => {\n    if (Array.isArray(data) && data.length > 0) {\n      const allKeys = new Set<string>();\n      data.forEach((item) => {\n        if (item && typeof item === 'object') {\n          Object.keys(item).forEach((key) => allKeys.add(key));\n        }\n      });\n      return Array.from(allKeys);\n    }\n    return [];\n  };\n\n  const tableColumns = getColumns(data);\n  const generatedContentId =\n    contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;\n\n  const renderCellContent = (\n    column: string,\n    value: unknown,\n    row: Record<string, unknown>\n  ) => {\n    if (columnRenderers?.[column]) {\n      return columnRenderers[column](value, row);\n    }\n    return String(value ?? '—');\n  };\n\n  return (\n    <div\n      className={cn(\n        collapsibleTableVariants({ size, variant, spacing }),\n        className\n      )}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      <div\n        onClick={toggleExpanded}\n        className={cn(\n          headerVariants({\n            variant,\n            borderStyle: isExpanded ? borderStyle : 'none',\n          }),\n          headerClassName,\n          disabled && 'cursor-not-allowed opacity-50'\n        )}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-expanded={isExpanded}\n        aria-controls={generatedContentId}\n        aria-disabled={disabled}\n      >\n        <p className=\"font-semibold\">{title}</p>\n        <div\n          className={cn(\n            'transition-transform duration-200',\n            isExpanded && 'rotate-90',\n            disabled && 'opacity-50'\n          )}\n        >\n          {toggleIcon ?? <ChevronRight size={16} />}\n        </div>\n      </div>\n\n      <MaxHeightSmoother isHidden={!isExpanded}>\n        <div\n          id={generatedContentId}\n          className={cn('overflow-x-auto p-3', contentClassName)}\n          role=\"region\"\n          aria-labelledby={`${generatedContentId}-header`}\n        >\n          <table\n            className={cn(\n              tableVariants({ spacing: tableSpacing, layout: tableLayout }),\n              'border-separate',\n              tableClassName\n            )}\n          >\n            <thead>\n              <tr className={trClassName}>\n                {tableColumns.map((column) => (\n                  <th\n                    key={column}\n                    className={cn(\n                      'pb-2 text-left font-medium text-sm text-text/70',\n                      thClassName\n                    )}\n                  >\n                    {column}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {data.map((row, index) => (\n                <tr\n                  key={index}\n                  className={cn(\n                    'bg-neutral/5 transition-colors hover:bg-neutral/10',\n                    trClassName\n                  )}\n                >\n                  {tableColumns.map((column) => (\n                    <td\n                      key={column}\n                      className={cn(\n                        'rounded px-3 py-2 text-sm text-text',\n                        tdClassName\n                      )}\n                    >\n                      {renderCellContent(column, row[column], row)}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["CommandRoot: FC<ComponentProps<typeof CommandPrimitive>>","CommandPrimitive","CommandDialog: FC<CommandDialogProps>","CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>>","CommandList: FC<ComponentProps<typeof CommandPrimitive.List>>","CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>>","CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>>","CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n>","CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>>"],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn('flex flex-col overflow-hidden rounded-md', className)}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-muted-foreground text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"mappings":";;;;;;;;;AAaA,MAAaA,eAA4D,EACvE,WACA,GAAG,YAEH,oBAACC;CACC,WAAW,GAAG,4CAA4C,UAAU;CACpE,GAAI;EACJ;AAKJ,MAAMC,iBAAyC,EAAE,UAAU,GAAG,YAC5D,oBAAC;CAAO,GAAI;WACV,oBAAC;EAAc,WAAU;YACvB,oBAAC;GAAY,WAAU;GACpB;IACW;GACA;EACT;AAGX,MAAMC,gBAAmE,EACvE,WACA,GAAG,YAEH,qBAAC;CAAI,WAAU;CAA2B,sBAAmB;YAC3D,oBAAC,UAAO,WAAU,oCAAoC,EACtD,oBAACF,UAAiB;EAChB,WAAW,GACT,kJACA,UACD;EACD,GAAI;GACJ;EACE;AAGR,MAAMG,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACH,UAAiB;CAChB,WAAW,GAAG,mDAAmD,UAAU;CAC3E,GAAI;EACJ;AAGJ,MAAMI,gBACJ,UACG,oBAACJ,UAAiB;CAAM,WAAU;CAA2B,GAAI;EAAS;AAE/E,MAAMK,gBAAmE,EACvE,WACA,GAAG,YAEH,oBAACL,UAAiB;CAChB,WAAW,GACT,0NACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAACN,UAAiB;CAChB,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;EACJ;AAGJ,MAAMO,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACP,UAAiB;CAChB,WAAW,GACT,2PACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,YACkC;AACrC,QACE,oBAAC;EACC,WAAW,GACT,yDACA,UACD;EACD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;AAqBN,MAAa,UAAU;CACrB,GAAG;CACH,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,MAAM;CACN,UAAU;CACX"}
+{"version":3,"file":"index.mjs","names":["CommandRoot: FC<ComponentProps<typeof CommandPrimitive>>","CommandPrimitive","CommandDialog: FC<CommandDialogProps>","CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>>","CommandList: FC<ComponentProps<typeof CommandPrimitive.List>>","CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>>","CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>>","CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n>","CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>>"],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\n'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  type DialogProps,\n} from '@radix-ui/react-dialog';\nimport { cn } from '@utils/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport type { ComponentProps, FC, HTMLAttributes } from 'react';\n\nexport const CommandRoot: FC<ComponentProps<typeof CommandPrimitive>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive\n    className={cn('flex flex-col overflow-hidden rounded-md', className)}\n    {...props}\n  />\n);\n\ntype CommandDialogProps = DialogProps;\n\nconst CommandDialog: FC<CommandDialogProps> = ({ children, ...props }) => (\n  <Dialog {...props}>\n    <DialogContent className=\"overflow-hidden p-0\">\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]_svg]:size-5\">\n        {children}\n      </CommandRoot>\n    </DialogContent>\n  </Dialog>\n);\n\nconst CommandInput: FC<ComponentProps<typeof CommandPrimitive.Input>> = ({\n  className,\n  ...props\n}) => (\n  <div className=\"flex w-full items-center\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        'flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n\nconst CommandList: FC<ComponentProps<typeof CommandPrimitive.List>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.List\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n);\n\nconst CommandEmpty: FC<ComponentProps<typeof CommandPrimitive.Empty>> = (\n  props\n) => <CommandPrimitive.Empty className=\"py-6 text-center text-sm\" {...props} />;\n\nconst CommandGroup: FC<ComponentProps<typeof CommandPrimitive.Group>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandSeparator: FC<\n  ComponentProps<typeof CommandPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <CommandPrimitive.Separator\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n);\n\nconst CommandItem: FC<ComponentProps<typeof CommandPrimitive.Item>> = ({\n  className,\n  ...props\n}) => (\n  <CommandPrimitive.Item\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-muted-foreground text-xs tracking-widest',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Command>\n *   <Command.Trigger>\n *     <Command.Input placeholder=\"Search...\" />\n *   </Command.Trigger>\n *   <Command.Dialog>\n *     <Command.List>\n *       <Command.Item>Item 1</Command.Item>\n *       <Command.Item>Item 2</Command.Item>\n *       <Command.Item>Item 3</Command.Item>\n *     </Command.List>\n *   </Command.Dialog>\n * </Command>\n * ```\n */\nexport const Command = {\n  ...CommandRoot,\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Separator: CommandSeparator,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n};\n"],"mappings":";;;;;;;;;AAaA,MAAaA,eAA4D,EACvE,WACA,GAAG,YAEH,oBAACC;CACC,WAAW,GAAG,4CAA4C,UAAU;CACpE,GAAI;EACJ;AAKJ,MAAMC,iBAAyC,EAAE,UAAU,GAAG,YAC5D,oBAAC;CAAO,GAAI;WACV,oBAAC;EAAc,WAAU;YACvB,oBAAC;GAAY,WAAU;GACpB;IACW;GACA;EACT;AAGX,MAAMC,gBAAmE,EACvE,WACA,GAAG,YAEH,qBAAC;CAAI,WAAU;CAA2B,sBAAmB;YAC3D,oBAAC,UAAO,WAAU,oCAAoC,EACtD,oBAACF,UAAiB;EAChB,WAAW,GACT,kJACA,UACD;EACD,GAAI;GACJ;EACE;AAGR,MAAMG,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACH,UAAiB;CAChB,WAAW,GAAG,mDAAmD,UAAU;CAC3E,GAAI;EACJ;AAGJ,MAAMI,gBACJ,UACG,oBAACJ,UAAiB;CAAM,WAAU;CAA2B,GAAI;EAAS;AAE/E,MAAMK,gBAAmE,EACvE,WACA,GAAG,YAEH,oBAACL,UAAiB;CAChB,WAAW,GACT,0NACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAACN,UAAiB;CAChB,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;EACJ;AAGJ,MAAMO,eAAiE,EACrE,WACA,GAAG,YAEH,oBAACP,UAAiB;CAChB,WAAW,GACT,2PACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,mBAAmB,EACvB,WACA,GAAG,YACkC;AACrC,QACE,oBAAC;EACC,WAAW,GACT,yDACA,UACD;EACD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;AAqBN,MAAa,UAAU;CACrB,GAAG;CACH,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,MAAM;CACN,UAAU;CACX"}

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

@@ -22,7 +22,7 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		},
 		transparency: {
 			none: "bg-card",
-			sm: "bg-card/95",
+			sm: "bg-card/90",
 			md: "bg-card/70",
 			lg: "bg-card/40",
 			xl: "bg-card/20",

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Container: FC<ContainerProps>"],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/95',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-2 py-4',\n      md: 'px-4 py-6',\n      lg: 'px-6 py-8',\n      xl: 'px-8 py-10',\n      '2xl': 'px-10 py-12',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACF,CAAC;;AAGF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,0EAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,oEAAL;AACL;AACA;AACA;AACA;;;;AAIF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,sEAAL;AACL;AACA;AACA;;;;AAIF,IAAY,wDAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,MAAaA,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACD,CAAC,EACF,UACD;CACD,GAAI;CAEH;EACG"}
+{"version":3,"file":"index.mjs","names":["Container: FC<ContainerProps>"],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-2 py-4',\n      md: 'px-4 py-6',\n      lg: 'px-6 py-8',\n      xl: 'px-8 py-10',\n      '2xl': 'px-10 py-12',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACF,CAAC;;AAGF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,0EAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,oEAAL;AACL;AACA;AACA;AACA;;;;AAIF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,sEAAL;AACL;AACA;AACA;;;;AAIF,IAAY,wDAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,MAAaA,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACD,CAAC,EACF,UACD;CACD,GAAI;CAEH;EACG"}

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","names":["ContentEditor: FC<ContentEditorProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\n */\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAaA,iBAAyC,EACpD,UACA,iBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,GAAG;CAEnC,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,WAAW,GACT,8DACA,YAAY,gBAAgB,iBAC7B;GACD,UAAU;GACV,WAAW;GAEX,SAAS,aAAa;GACtB,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;KALC,iBAML,EACD,YACC,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEX,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,mBAAa;;;KAGjB,EACF,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,oBAAc;;;KAGlB;IACE;GAEJ"}
+{"version":3,"file":"ContentEditor.mjs","names":["ContentEditor: FC<ContentEditorProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\n */\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAaA,iBAAyC,EACpD,UACA,iBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,GAAG;CAEnC,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,WAAW,GACT,8DACA,YAAY,gBAAgB,iBAC7B;GACD,UAAU;GACV,WAAW;GAEX,SAAS,aAAa;GACtB,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;KALC,iBAML,EACD,YACC,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEX,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,mBAAa;;;KAGjB,EACF,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,oBAAc;;;KAGlB;IACE;GAEJ"}

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.mjs","names":["ContentEditorTextArea: FC<ContentEditorTextAreaProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { useUser } from '../../hooks/useUser';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        value={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAaA,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,SAAS;CACrC,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,GAAG;CAE1C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;AACzE,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;KAbC,iBAcL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;KAE3C,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAzDH,SA2DD"}
+{"version":3,"file":"ContentEditorTextArea.mjs","names":["ContentEditorTextArea: FC<ContentEditorTextAreaProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@hooks/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        value={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAaA,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,SAAS;CACrC,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,GAAG;CAE1C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;AACzE,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;KAbC,iBAcL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;KAE3C,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAzDH,SA2DD"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["CopyToClipboard: FC<CopyToClipboardProps>"],"sources":["../../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: () => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n\n  /**\n   * Disable the copy to clipboard functionality and return the children\n   * @default false\n   */\n  disable?: boolean;\n\n  /**\n   * Prevent the default behavior of the link when clicked\n   * @default true\n   */\n  preventDefault?: boolean;\n}\n\nexport const useCopyToClipboard = (\n  text?: string,\n  feedbackDuration = 2000,\n  onCopySuccess?: () => void,\n  onCopyError?: (error: Error) => void\n) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copy = async () => {\n    if (!text) return;\n\n    try {\n      if (navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        onCopyError?.(new Error('Clipboard API not supported in this browser'));\n        return;\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.();\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n    }\n  };\n\n  return { isCopied, copy };\n};\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n  disable,\n  preventDefault = true,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard(\n    text,\n    feedbackDuration,\n    onCopySuccess,\n    onCopyError\n  );\n\n  if (disable) return <span className={className}>{children}</span>;\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      handleCopy(event);\n    }\n  };\n\n  const handleCopy = (event: MouseEvent | KeyboardEvent) => {\n    if (preventDefault) event.preventDefault();\n\n    copy();\n  };\n\n  const currentAriaLabel = isCopied ? ariaCopiedLabel : ariaLabel;\n\n  const IconComponent = isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full cursor-pointer items-center gap-2 rounded-md p-0.5 hover:bg-neutral/10',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      <span className=\"min-w-0 break-all\">{children}</span>\n\n      {text && (\n        <IconComponent\n          className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\"\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAsEA,MAAa,sBACX,MACA,mBAAmB,KACnB,eACA,gBACG;CACH,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,OAAO,YAAY;AACvB,MAAI,CAAC,KAAM;AAEX,MAAI;AACF,OAAI,UAAU,WAAW,UACvB,OAAM,UAAU,UAAU,UAAU,KAAK;QACpC;AACL,kCAAc,IAAI,MAAM,8CAA8C,CAAC;AACvE;;AAGF,eAAY,KAAK;AACjB,oBAAiB,YAAY,MAAM,EAAE,iBAAiB;AACtD,oBAAiB;WACV,OAAO;GACd,MAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,iBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,aAAa,CAAC;;;AAI3E,QAAO;EAAE;EAAU;EAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC3B,MAAaA,mBAA6C,EACxD,MACA,UACA,WACA,cAAc,YAAY,qBAC1B,qBAAqB,kBAAkB,uBACvC,mBAAmB,KACnB,eACA,aACA,SACA,iBAAiB,WACb;CACJ,MAAM,EAAE,UAAU,SAAS,mBACzB,MACA,kBACA,eACA,YACD;AAED,KAAI,QAAS,QAAO,oBAAC;EAAgB;EAAY;GAAgB;CAEjE,MAAM,iBAAiB,UAAyB;AAC9C,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,YAAW,MAAM;;CAIrB,MAAM,cAAc,UAAsC;AACxD,MAAI,eAAgB,OAAM,gBAAgB;AAE1C,QAAM;;CAGR,MAAM,mBAAmB,WAAW,kBAAkB;CAEtD,MAAM,gBAAgB,WAAW,YAAY;AAE7C,QACE,qBAAC;EACC,WAAW,GACT,iGACA,UACD;EACD,SAAS;EACT,WAAW;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,gBAAc;EACd,eAAY;aAEZ,oBAAC;GAAK,WAAU;GAAqB;IAAgB,EAEpD,QACC,oBAAC;GACC,WAAU;GACV,eAAY;IACZ;GAEC"}
+{"version":3,"file":"index.mjs","names":["CopyToClipboard: FC<CopyToClipboardProps>"],"sources":["../../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useState,\n} from 'react';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: () => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n\n  /**\n   * Disable the copy to clipboard functionality and return the children\n   * @default false\n   */\n  disable?: boolean;\n\n  /**\n   * Prevent the default behavior of the link when clicked\n   * @default true\n   */\n  preventDefault?: boolean;\n}\n\nexport const useCopyToClipboard = (\n  text?: string,\n  feedbackDuration = 2000,\n  onCopySuccess?: () => void,\n  onCopyError?: (error: Error) => void\n) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copy = async () => {\n    if (!text) return;\n\n    try {\n      if (navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        onCopyError?.(new Error('Clipboard API not supported in this browser'));\n        return;\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.();\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n    }\n  };\n\n  return { isCopied, copy };\n};\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n  disable,\n  preventDefault = true,\n}) => {\n  const { isCopied, copy } = useCopyToClipboard(\n    text,\n    feedbackDuration,\n    onCopySuccess,\n    onCopyError\n  );\n\n  if (disable) return <span className={className}>{children}</span>;\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      handleCopy(event);\n    }\n  };\n\n  const handleCopy = (event: MouseEvent | KeyboardEvent) => {\n    if (preventDefault) event.preventDefault();\n\n    copy();\n  };\n\n  const currentAriaLabel = isCopied ? ariaCopiedLabel : ariaLabel;\n\n  const IconComponent = isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full cursor-pointer items-center gap-2 rounded-md p-0.5 hover:bg-neutral/10',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      <span className=\"min-w-0 break-all\">{children}</span>\n\n      {text && (\n        <IconComponent\n          className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\"\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAsEA,MAAa,sBACX,MACA,mBAAmB,KACnB,eACA,gBACG;CACH,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,OAAO,YAAY;AACvB,MAAI,CAAC,KAAM;AAEX,MAAI;AACF,OAAI,UAAU,WAAW,UACvB,OAAM,UAAU,UAAU,UAAU,KAAK;QACpC;AACL,kCAAc,IAAI,MAAM,8CAA8C,CAAC;AACvE;;AAGF,eAAY,KAAK;AACjB,oBAAiB,YAAY,MAAM,EAAE,iBAAiB;AACtD,oBAAiB;WACV,OAAO;GACd,MAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,iBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,aAAa,CAAC;;;AAI3E,QAAO;EAAE;EAAU;EAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC3B,MAAaA,mBAA6C,EACxD,MACA,UACA,WACA,cAAc,YAAY,qBAC1B,qBAAqB,kBAAkB,uBACvC,mBAAmB,KACnB,eACA,aACA,SACA,iBAAiB,WACb;CACJ,MAAM,EAAE,UAAU,SAAS,mBACzB,MACA,kBACA,eACA,YACD;AAED,KAAI,QAAS,QAAO,oBAAC;EAAgB;EAAY;GAAgB;CAEjE,MAAM,iBAAiB,UAAyB;AAC9C,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,YAAW,MAAM;;CAIrB,MAAM,cAAc,UAAsC;AACxD,MAAI,eAAgB,OAAM,gBAAgB;AAE1C,QAAM;;CAGR,MAAM,mBAAmB,WAAW,kBAAkB;CAEtD,MAAM,gBAAgB,WAAW,YAAY;AAE7C,QACE,qBAAC;EACC,WAAW,GACT,iGACA,UACD;EACD,SAAS;EACT,WAAW;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,gBAAc;EACd,eAAY;aAEZ,oBAAC;GAAK,WAAU;GAAqB;IAAgB,EAEpD,QACC,oBAAC;GACC,WAAU;GACV,eAAY;IACZ;GAEC"}

package/dist/esm/components/DictionaryEditor/ItemLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.mjs","names":["ItemLayout: FC<ItemWrapperProps>"],"sources":["../../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-lg',\n                level === 1 && 'text-md',\n                level === 2 && 'text-md',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"pl-3 text-card text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      <div className=\"size-full px-2\">{children}</div>\n    </Accordion>\n  </div>\n);\n"],"mappings":";;;;;AAaA,MAAaA,cAAoC,EAC/C,OACA,OACA,aACA,UACA,YACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,IACd,eAAe,QAAQ,aACxB;CACD,GAAI;WAEJ,oBAAC;EACC,QAAQ;EACR,OAAO;EACP,QACE,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAW,GACT,UAAU,KAAK,WACf,UAAU,KAAK,WACf,UAAU,KAAK,WACf,SAAS,KAAK,YACf;eAEA;MACI,EACN,cACC,oBAAC;KAAI,WAAU;eACZ;MACG;KAEJ,EACL,eACC,oBAAC;IAAE,WAAU;cAA0B;KAAgB;IAErD;YAGR,oBAAC;GAAI,WAAU;GAAkB;IAAe;GACtC;EACR"}
+{"version":3,"file":"ItemLayout.mjs","names":["ItemLayout: FC<ItemWrapperProps>"],"sources":["../../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-lg',\n                level === 1 && 'text-md',\n                level === 2 && 'text-md',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"pl-3 text-card text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      <div className=\"size-full px-2\">{children}</div>\n    </Accordion>\n  </div>\n);\n"],"mappings":";;;;;AAaA,MAAaA,cAAoC,EAC/C,OACA,OACA,aACA,UACA,YACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,IACd,eAAe,QAAQ,aACxB;CACD,GAAI;WAEJ,oBAAC;EACC,QAAQ;EACR,OAAO;EACP,QACE,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAW,GACT,UAAU,KAAK,WACf,UAAU,KAAK,WACf,UAAU,KAAK,WACf,SAAS,KAAK,YACf;eAEA;MACI,EACN,cACC,oBAAC;KAAI,WAAU;eACZ;MACG;KAEJ,EACL,eACC,oBAAC;IAAE,WAAU;cAA0B;KAAgB;IAErD;YAGR,oBAAC;GAAI,WAAU;GAAkB;IAAe;GACtC;EACR"}