npm - @intlayer/design-system - Versions diffs - 9.4.1 → 9.4.3 - Mend

@intlayer/design-system 9.4.1 → 9.4.3

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

Files changed (215) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\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 useLayoutEffect,\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;\nconst CONTAINER_VERTICAL_PADDING_PX = 40;\nconst CONTAINER_MIN_HEIGHT_PX = 400;\n\n/*\n Border-box height carried by a `ResizeObserverEntry`, equivalent to\n * `offsetHeight` but already computed by the browser during layout, so reading\n * it never forces a reflow.\n /\nconst getEntryBlockSize = (entry: ResizeObserverEntry): number =>\n entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\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// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 screenWidth) / 10 === 30% of viewport width\nconst getCardPositionX = (\n index: number,\n displayedIndex: number,\n containerWidth: number\n) => {\n const diff = index - displayedIndex;\n const gapPercentage = containerWidth < 600 ? 0.15 : 0.3; // Dropped to 15% for a tighter cluster\n const step = Math.min(containerWidth * gapPercentage, 300);\n\n // The 'px' here is mandatory\n return `${diff * step}px`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> & { isCarouselItem: true } =\n Object.assign(\n ({ children, className, ...props }: CarouselItemProps) => (\n <div className={cn('size-full', className)} {...props}>\n {children}\n </div>\n ),\n { isCarouselItem: true as const }\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-0 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=\"hoverable\"\n color=\"neutral\"\n label={previousSlide.value}\n roundedSize=\"full\"\n onClick={(e) => {\n e.stopPropagation();\n handlePrev();\n }}\n Icon={ChevronLeft}\n size=\"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=\"hoverable\"\n color=\"neutral\"\n roundedSize=\"full\"\n label={nextSlide.value}\n onClick={(e) => {\n e.stopPropagation();\n handleNext();\n }}\n Icon={ChevronRight}\n size=\"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 (\n isValidElement(child) &&\n (child.type === CarouselItem \|\|\n (child.type as { isCarouselItem?: boolean }).isCarouselItem === true)\n ) {\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 const [containerWidth, setContainerWidth] = 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 const itemHeightsRef = useRef<Map<Element, number>>(new Map());\n\n // Navigation Logic\n const handleSwitchItem = (diff: number) => {\n if (containerWidth === 0) return;\n\n // Use container width for the threshold\n const swipeStep = containerWidth / 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 /*\n Tracks the container width and the height of the tallest slide.\n \n The container height is the output of this measurement, so the observer\n * must never read geometry back from the DOM: React commits the new inline\n * height between two observer callbacks, and every read after that commit is\n * a forced reflow. `ResizeObserverEntry` already carries the boxes the\n * browser computed during layout, which are free to read.\n */\n useLayoutEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const items = itemsRef.current.filter((item) => item !== null);\n const itemHeights = itemHeightsRef.current;\n\n const publishMaxHeight = () => {\n const maxHeight = Math.max(0, ...itemHeights.values());\n\n if (maxHeight > 0) {\n setContainerHeight(maxHeight + CONTAINER_VERTICAL_PADDING_PX);\n }\n };\n\n // First pass: every read happens before any state write, so the initial\n // measurement costs a single layout.\n const initialWidth = container.clientWidth;\n items.forEach((item) => {\n itemHeights.set(item, item.offsetHeight);\n });\n\n setContainerWidth(initialWidth);\n publishMaxHeight();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === container) {\n setContainerWidth(entry.contentRect.width);\n return;\n }\n\n itemHeights.set(entry.target, getEntryBlockSize(entry));\n });\n\n publishMaxHeight();\n });\n\n observer.observe(container);\n items.forEach((item) => {\n observer.observe(item);\n });\n\n return () => {\n observer.disconnect();\n itemHeights.clear();\n };\n }, [totalItems]);\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 flex w-full cursor-grab select-none items-center overflow-hidden pb-4 outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n 'max-w-350',\n className\n )}\n style={{\n height: containerHeight > 0 ? containerHeight : 'auto',\n minHeight: `${CONTAINER_MIN_HEIGHT_PX}px`,\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 transform: `\n translateX(${getCardPositionX(\n index,\n displayedIndex,\n containerWidth\n )})\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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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\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 useLayoutEffect,\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;\nconst CONTAINER_VERTICAL_PADDING_PX = 40;\nconst CONTAINER_MIN_HEIGHT_PX = 400;\n\n/*\n Border-box height carried by a `ResizeObserverEntry`, equivalent to\n * `offsetHeight` but already computed by the browser during layout, so reading\n * it never forces a reflow.\n /\nconst getEntryBlockSize = (entry: ResizeObserverEntry): number =>\n entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\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// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 screenWidth) / 10 === 30% of viewport width\nconst getCardPositionX = (\n index: number,\n displayedIndex: number,\n containerWidth: number\n) => {\n const diff = index - displayedIndex;\n const gapPercentage = containerWidth < 600 ? 0.15 : 0.3; // Dropped to 15% for a tighter cluster\n const step = Math.min(containerWidth * gapPercentage, 300);\n\n // The 'px' here is mandatory\n return `${diff * step}px`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> & { isCarouselItem: true } =\n Object.assign(\n ({ children, className, ...props }: CarouselItemProps) => (\n <div className={cn('size-full', className)} {...props}>\n {children}\n </div>\n ),\n { isCarouselItem: true as const }\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-0 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=\"hoverable\"\n color=\"foreground\"\n label={previousSlide.value}\n roundedSize=\"full\"\n onClick={(e) => {\n e.stopPropagation();\n handlePrev();\n }}\n Icon={ChevronLeft}\n size=\"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-muted-foreground 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 'size-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n isActive ? 'size-3.5 bg-text' : 'bg-text/20 hover:bg-text/40'\n )}\n />\n );\n })}\n\n <Popover identifier=\"carousel-next\">\n <Button\n variant=\"hoverable\"\n color=\"foreground\"\n roundedSize=\"full\"\n label={nextSlide.value}\n onClick={(e) => {\n e.stopPropagation();\n handleNext();\n }}\n Icon={ChevronRight}\n size=\"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-muted-foreground 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 (\n isValidElement(child) &&\n (child.type === CarouselItem \|\|\n (child.type as { isCarouselItem?: boolean }).isCarouselItem === true)\n ) {\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 const [containerWidth, setContainerWidth] = 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 const itemHeightsRef = useRef<Map<Element, number>>(new Map());\n\n // Navigation Logic\n const handleSwitchItem = (diff: number) => {\n if (containerWidth === 0) return;\n\n // Use container width for the threshold\n const swipeStep = containerWidth / 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 /*\n Tracks the container width and the height of the tallest slide.\n \n The container height is the output of this measurement, so the observer\n * must never read geometry back from the DOM: React commits the new inline\n * height between two observer callbacks, and every read after that commit is\n * a forced reflow. `ResizeObserverEntry` already carries the boxes the\n * browser computed during layout, which are free to read.\n */\n useLayoutEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const items = itemsRef.current.filter((item) => item !== null);\n const itemHeights = itemHeightsRef.current;\n\n const publishMaxHeight = () => {\n const maxHeight = Math.max(0, ...itemHeights.values());\n\n if (maxHeight > 0) {\n setContainerHeight(maxHeight + CONTAINER_VERTICAL_PADDING_PX);\n }\n };\n\n // First pass: every read happens before any state write, so the initial\n // measurement costs a single layout.\n const initialWidth = container.clientWidth;\n items.forEach((item) => {\n itemHeights.set(item, item.offsetHeight);\n });\n\n setContainerWidth(initialWidth);\n publishMaxHeight();\n\n const observer = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target === container) {\n setContainerWidth(entry.contentRect.width);\n return;\n }\n\n itemHeights.set(entry.target, getEntryBlockSize(entry));\n });\n\n publishMaxHeight();\n });\n\n observer.observe(container);\n items.forEach((item) => {\n observer.observe(item);\n });\n\n return () => {\n observer.disconnect();\n itemHeights.clear();\n };\n }, [totalItems]);\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 flex w-full cursor-grab select-none items-center overflow-hidden pb-4 outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n 'max-w-350',\n className\n )}\n style={{\n height: containerHeight > 0 ? containerHeight : 'auto',\n minHeight: `${CONTAINER_MIN_HEIGHT_PX}px`,\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 transform: `\n translateX(${getCardPositionX(\n index,\n displayedIndex,\n containerWidth\n )})\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 CHANGED Viewed

@@ -18,7 +18,7 @@ const collapsibleTableVariants = cva("w-full max-w-full overflow-hidden rounded-
 			full: "w-full max-w-none"
 		},
 		variant: {
-			default: "border-neutral/20 bg-card",
+			default: "bg-card",
 			dark: "border-[#B5B5B5] bg-[#242424]",
 			ghost: "border-transparent bg-transparent",
 			outlined: "border-2 border-primary/20 bg-background"
@@ -47,8 +47,8 @@ const headerVariants = cva("flex w-full cursor-pointer items-center justify-betw
 		},
 		borderStyle: {
 			none: "",
-			dashed: "border-neutral/20 border-b border-dotted",
-			solid: "border-neutral/20 border-b border-solid"
+			dashed: "border-b border-dotted",
+			solid: "border-b border-solid"
 		}
 	},
 	defaultVariants: {
@@ -145,13 +145,13 @@ const CollapsibleTable = ({ title, data, className, headerClassName, contentClas
 					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
 						className: trClassName,
 						children: tableColumns.map((column) => /* @__PURE__ */ jsx("th", {
-							className: cn("pb-2 text-left font-medium text-sm text-text/70", thClassName),
+							className: cn("pb-2 text-left font-medium text-foreground/70 text-sm", thClassName),
 							children: column
 						}, column))
 					}) }), /* @__PURE__ */ jsx("tbody", { children: data.map((row, index) => /* @__PURE__ */ jsx("tr", {
 						className: cn("bg-neutral/5 transition-colors hover:bg-neutral/10", trClassName),
 						children: tableColumns.map((column) => /* @__PURE__ */ jsx("td", {
-							className: cn("rounded px-3 py-2 text-sm text-text", tdClassName),
+							className: cn("rounded px-3 py-2 text-foreground text-sm", tdClassName),
 							children: renderCellContent(column, row[column], row)
 						}, column))
 					}, index)) })]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CollapsibleTable.mjs","names":[],"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 w-full 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-dotted',\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<HTMLElement>, '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 */\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) => {\n allKeys.add(key);\n });\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 <section\n className={cn(\n collapsibleTableVariants({ size, variant, spacing }),\n className\n )}\n aria-label={ariaLabel}\n {...props}\n >\n <button\n id={`${generatedContentId}-header`}\n type=\"button\"\n onClick={toggleExpanded}\n disabled={disabled}\n className={cn(\n headerVariants({\n variant,\n borderStyle: isExpanded ? borderStyle : 'none',\n }),\n headerClassName,\n disabled && 'cursor-not-allowed opacity-50'\n )}\n aria-expanded={isExpanded}\n aria-controls={generatedContentId}\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 </button>\n\n <MaxHeightSmoother isHidden={!isExpanded}>\n <section\n id={generatedContentId}\n className={cn('overflow-x-auto p-3', contentClassName)}\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 </section>\n </MaxHeightSmoother>\n </section>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CollapsibleTable.mjs","names":[],"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: '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 w-full 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-b border-dotted',\n solid: '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<HTMLElement>, '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 */\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) => {\n allKeys.add(key);\n });\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 <section\n className={cn(\n collapsibleTableVariants({ size, variant, spacing }),\n className\n )}\n aria-label={ariaLabel}\n {...props}\n >\n <button\n id={`${generatedContentId}-header`}\n type=\"button\"\n onClick={toggleExpanded}\n disabled={disabled}\n className={cn(\n headerVariants({\n variant,\n borderStyle: isExpanded ? borderStyle : 'none',\n }),\n headerClassName,\n disabled && 'cursor-not-allowed opacity-50'\n )}\n aria-expanded={isExpanded}\n aria-controls={generatedContentId}\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 </button>\n\n <MaxHeightSmoother isHidden={!isExpanded}>\n <section\n id={generatedContentId}\n className={cn('overflow-x-auto p-3', contentClassName)}\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-foreground/70 text-sm',\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-foreground text-sm',\n tdClassName\n )}\n >\n {renderCellContent(column, row[column], row)}\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </section>\n </MaxHeightSmoother>\n </section>\n );\n};\n"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 * Container component variants using class-variance-authority
 * Provides flexible styling options for background, padding, borders, and layout
 */
-const containerVariants = cva("flex flex-col text-text backdrop-blur", {
+const containerVariants = cva("flex flex-col text-foreground backdrop-blur", {
 	variants: {
 		roundedSize: {
 			none: "rounded-none",
@@ -50,7 +50,7 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		borderColor: {
 			primary: "border-primary",
 			secondary: "border-secondary",
-			neutral: "border-neutral/20",
+			neutral: "",
 			card: "border-card",
 			text: "border-text",
 			error: "border-error",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"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',\n },\n transparency: {\n none: 'bg-card',\n xs: 'bg-card/95',\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-3 py-2',\n md: 'px-4 py-3',\n lg: 'px-6 py-4',\n xl: 'px-8 py-6',\n '2xl': 'px-10 py-8',\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/20~~',\n card: 'border-card',\n text: 'border-text',\n error: 'border-error',\n warning: 'border-warning',\n success: 'border-success',\n },\n background: {\n none: 'backdrop-blur-none',\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 compoundVariants: [\n {\n background: 'none',\n class: 'bg-transparent',\n },\n ],\n});\n\n/* Available rounded corner sizes for the container /\nexport type ContainerRoundedSize = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Background transparency levels for the container /\nexport type ContainerTransparency = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Padding sizes for container content /\nexport type ContainerPadding = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Separator options for dividing container children /\nexport type ContainerSeparator = 'without' \| 'x' \| 'y' \| 'both';\n\n/* Border color options for the container /\nexport type ContainerBorderColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'card'\n \| 'text'\n \| 'error'\n \| 'warning'\n \| 'success';\n\n/* Background interaction states for the container /\nexport type ContainerBackground = 'none' \| 'hoverable' \| 'with';\n\n/* Gap sizes between container children /\nexport type ContainerGap = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\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;EACR;EACA,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;EACR;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;EACX;EACA,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;EACR;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;CACF;CACA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;CACP;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;CACT,CACF;AACF,~~CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqED~~,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;CACF,CAAC,GACD,SACF;CACA,GAAI;CAEH;AACE"}
1	+ {"version":3,"file":"index.mjs","names":[],"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(\n 'flex flex-col text-foreground backdrop-blur',\n {\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',\n },\n transparency: {\n none: 'bg-card',\n xs: 'bg-card/95',\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-3 py-2',\n md: 'px-4 py-3',\n lg: 'px-6 py-4',\n xl: 'px-8 py-6',\n '2xl': 'px-10 py-8',\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: '',\n card: 'border-card',\n text: 'border-text',\n error: 'border-error',\n warning: 'border-warning',\n success: 'border-success',\n },\n background: {\n none: 'backdrop-blur-none',\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 compoundVariants: [\n {\n background: 'none',\n class: 'bg-transparent',\n },\n ],\n }\n);\n\n/* Available rounded corner sizes for the container /\nexport type ContainerRoundedSize = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Background transparency levels for the container /\nexport type ContainerTransparency = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n/* Padding sizes for container content /\nexport type ContainerPadding = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\n/* Separator options for dividing container children /\nexport type ContainerSeparator = 'without' \| 'x' \| 'y' \| 'both';\n\n/* Border color options for the container /\nexport type ContainerBorderColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'card'\n \| 'text'\n \| 'error'\n \| 'warning'\n \| 'success';\n\n/* Background interaction states for the container /\nexport type ContainerBackground = 'none' \| 'hoverable' \| 'with';\n\n/* Gap sizes between container children /\nexport type ContainerGap = 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl';\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,IAC/B,+CACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;EACR;EACA,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;EACR;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;EACX;EACA,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;EACR;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;CACF;CACA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;CACP;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;CACT,CACF;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;CACF,CAAC,GACD,SACF;CACA,GAAI;CAEH;AACE"}

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useUser } from "../../api/useUser/index.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useUser } from "../../api/useUser/index.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/DictionaryEditor/ItemLayout.mjs CHANGED Viewed

@@ -21,7 +21,7 @@ const ItemLayout = ({ level, title, description, children, rightParam, isSelecte
 					children: rightParam
 				})]
 			}), description && /* @__PURE__ */ jsx("p", {
-				className: "pl-3 text-card text-sm",
+				className: "pl-3 text-card-foreground text-sm",
 				children: description
 			})]
 		}),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemLayout.mjs","names":[],"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,MAAa,cAAoC,EAC/C,OACA,OACA,aACA,UACA,YACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,6BACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,IACd,eAAe,QAAQ,YACzB;CACA,GAAI;WAEJ,oBAAC,WAAD;EACE,QAAQ;EACR,OAAO;EACP,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GACT,UAAU,KAAK,WACf,UAAU,KAAK,WACf,UAAU,KAAK,WACf,SAAS,KAAK,WAChB;eAEC;IACG,IACL,cACC,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,EAEJ;OACJ,eACC,oBAAC,KAAD;IAAG,WAAU;~~cAA0B~~;GAAe,~~EAErD~~;;YAGP,oBAAC,OAAD;GAAK,WAAU;GAAkB;EAAc;CACtC;AACR"}
1	+ {"version":3,"file":"ItemLayout.mjs","names":[],"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-foreground 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,MAAa,cAAoC,EAC/C,OACA,OACA,aACA,UACA,YACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,6BACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,IACd,eAAe,QAAQ,YACzB;CACA,GAAI;WAEJ,oBAAC,WAAD;EACE,QAAQ;EACR,OAAO;EACP,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GACT,UAAU,KAAK,WACf,UAAU,KAAK,WACf,UAAU,KAAK,WACf,SAAS,KAAK,WAChB;eAEC;IACG,IACL,cACC,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,EAEJ;OACJ,eACC,oBAAC,KAAD;IAAG,WAAU;cAAqC;GAAe,EAEhE;;YAGP,oBAAC,OAAD;GAAK,WAAU;GAAkB;EAAc;CACtC;AACR"}

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
-import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
@@ -8,17 +7,18 @@ import { Container } from "../../Container/index.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
-import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { renameKey } from "./object.mjs";
 import { Label } from "../../Label/index.mjs";
+import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { EnumKeyInput } from "../EnumKeyInput.mjs";
 import { SafeHtmlRenderer } from "./SafeHtmlRenderer.mjs";
 import { Fragment, Suspense, lazy, memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash, WandSparkles } from "lucide-react";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getLocaleName } from "@intlayer/core/localization";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { camelCaseToSentence } from "@intlayer/config/client";
@@ -174,7 +174,7 @@ const EnumerationTextEditor = ({ section, keyPath, dictionary, renderSection })
 										variant: "hoverable",
 										size: "sm",
 										color: "error",
-										className: "ml-auto text-neutral hover:text-error",
+										className: "ml-auto text-muted-foreground hover:text-error",
 										Icon: Trash,
 										onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
 										children: removeEnumeration.text
@@ -261,7 +261,7 @@ const SelectTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
 										variant: "hoverable",
 										size: "sm",
 										color: "error",
-										className: "ml-auto text-neutral hover:text-error",
+										className: "ml-auto text-muted-foreground hover:text-error",
 										Icon: Trash,
 										onClick: () => addEditedContent(dictionary.localId, void 0, childrenKeyPath),
 										children: removeSelectCase.text
@@ -459,7 +459,7 @@ const ArrayTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
 									variant: "hoverable",
 									size: "sm",
 									color: "error",
-									className: "ml-auto text-neutral hover:text-error",
+									className: "ml-auto text-muted-foreground hover:text-error",
 									onClick: () => {
 										const newKeyPath = [...keyPath, {
 											type: NodeTypes.ARRAY,
@@ -710,7 +710,7 @@ const TextEditor = memo(function TextEditor({ section, keyPath, dictionary, rend
 	if (nodeType === NodeTypes.REACT_NODE) return /* @__PURE__ */ jsxs("div", {
 		className: "flex w-full flex-col gap-2",
 		children: [/* @__PURE__ */ jsx("span", { children: "(React Node)" }), /* @__PURE__ */ jsx("span", {
-			className: "flex text-neutral text-xs",
+			className: "flex text-muted-foreground text-xs",
 			children: tsxNotEditable
 		})]
 	});