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

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

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

Files changed (363) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.mjs","names":["Button: FC<ButtonProps>"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { Loader } from '../Loader';\n\n/*\n Button size variants for different use cases\n /\nexport enum ButtonSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n ICON_SM = 'icon-sm',\n ICON_MD = 'icon-md',\n ICON_LG = 'icon-lg',\n ICON_XL = 'icon-xl',\n}\n\n/\n Icon positioning within the button\n /\nexport enum ButtonIconPosition {\n LEFT = 'left',\n RIGHT = 'right',\n}\n\nconst buttonIconVariants = cva('', {\n variants: {\n size: {\n [`${ButtonSize.SM}`]: '-translate-y-1/2 absolute top-1/2 size-3',\n [`${ButtonSize.MD}`]: '-translate-y-1/2 absolute top-1/2 size-4',\n [`${ButtonSize.LG}`]: '-translate-y-1/2 absolute top-1/2 size-5',\n [`${ButtonSize.XL}`]: '-translate-y-1/2 absolute top-1/2 size-6',\n [`${ButtonSize.ICON_SM}`]: 'size-3',\n [`${ButtonSize.ICON_MD}`]: 'size-4',\n [`${ButtonSize.ICON_LG}`]: 'size-5',\n [`${ButtonSize.ICON_XL}`]: 'size-6',\n },\n position: {\n [`${ButtonIconPosition.LEFT}`]: 'left-3',\n [`${ButtonIconPosition.RIGHT}`]: 'right-3',\n },\n },\n defaultVariants: {\n size: ButtonSize.MD,\n },\n});\n\n/\n Button visual style variants\n /\nexport enum ButtonVariant {\n DEFAULT = 'default',\n NONE = 'none',\n OUTLINE = 'outline',\n LINK = 'link',\n INVISIBLE_LINK = 'invisible-link',\n HOVERABLE = 'hoverable',\n FADE = 'fade',\n INPUT = 'input',\n}\n\n/\n Button color themes that work with the design system\n /\nexport enum ButtonColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n CARD = 'card',\n TEXT_INVERSE = 'text-inverse',\n CURRENT = 'current',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\n/\n Text alignment options for button content\n /\nexport enum ButtonTextAlign {\n LEFT = 'left',\n CENTER = 'center',\n RIGHT = 'right',\n}\n\n/\n Enhanced button variants with improved accessibility and focus states\n /\nconst buttonVariants = cva(\n 'relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n size: {\n [`${ButtonSize.SM}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n [`${ButtonSize.MD}`]: 'min-h-8 px-6 text-sm max-md:py-2',\n [`${ButtonSize.LG}`]: 'min-h-10 px-8 text-lg max-md:py-3',\n [`${ButtonSize.XL}`]: 'min-h-11 px-10 text-xl max-md:py-4',\n [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n [`${ButtonSize.ICON_LG}`]: 'p-2',\n [`${ButtonSize.ICON_XL}`]: 'p-3',\n },\n color: {\n [`${ButtonColor.PRIMARY}`]:\n 'text-primary :text-text-light focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50',\n [`${ButtonColor.SECONDARY}`]:\n 'text-secondary :text-text-light focus:ring-secondary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-secondary-500/50',\n [`${ButtonColor.DESTRUCTIVE}`]:\n 'text-destructive :text-text-light focus:ring-destructive-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-destructive-500/50',\n [`${ButtonColor.NEUTRAL}`]:\n 'text-neutral :text-text-light focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50',\n [`${ButtonColor.CARD}`]:\n 'text-card :text-text-light focus:ring-card-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-card-500/50',\n [`${ButtonColor.LIGHT}`]:\n 'text-white :text-text-light focus:ring-white/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-white/50',\n [`${ButtonColor.DARK}`]:\n 'text-neutral-800 :text-text-light focus:ring-neutral-800/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-800/50',\n [`${ButtonColor.TEXT}`]:\n 'text-text :text-text-opposite focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50',\n [`${ButtonColor.CURRENT}`]:\n 'text-current :text-text-light focus:ring-current/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-current/50',\n [`${ButtonColor.TEXT_INVERSE}`]:\n 'text-text-opposite :text-text focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50',\n [`${ButtonColor.ERROR}`]:\n 'text-error :text-text-light focus:ring-error/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-error/50',\n [`${ButtonColor.SUCCESS}`]:\n 'text-success :text-text-light focus:ring-success/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-success/50',\n [`${ButtonColor.CUSTOM}`]:\n 'focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50',\n },\n variant: {\n [`${ButtonVariant.DEFAULT}`]:\n 'rounded-lg bg-current hover:bg-current/90',\n [`${ButtonVariant.NONE}`]:\n 'border-none bg-current/0 text-inherit hover:bg-current/0',\n [`${ButtonVariant.OUTLINE}`]:\n ':!text-current rounded-lg border-[1.5px] border-current bg-current/0 hover:bg-current/30',\n [`${ButtonVariant.LINK}`]:\n ':!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n [`${ButtonVariant.INVISIBLE_LINK}`]:\n ':!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n [`${ButtonVariant.HOVERABLE}`]:\n ':!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n [`${ButtonVariant.FADE}`]:\n ':!text-current rounded-lg border-none bg-current/10 transition hover:bg-current/20 aria-[current]:bg-current/5',\n\n [`${ButtonVariant.INPUT}`]: [\n ':!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-input-text text-sm shadow-none outline-0 transition-all',\n 'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error',\n 'disabled:opacity-50',\n ],\n },\n\n textAlign: {\n [`${ButtonTextAlign.LEFT}`]: 'text-left',\n [`${ButtonTextAlign.CENTER}`]: 'text-center',\n [`${ButtonTextAlign.RIGHT}`]: 'text-right',\n },\n\n isFullWidth: {\n true: 'w-full',\n false: '',\n },\n\n hasIconLeft: {\n true: 'px-12',\n false: '',\n },\n hasIconRight: {\n true: 'pr-8',\n false: '',\n },\n },\n defaultVariants: {\n variant: ButtonVariant.DEFAULT,\n size: ButtonSize.MD,\n color: ButtonColor.CUSTOM,\n textAlign: ButtonTextAlign.CENTER,\n isFullWidth: false,\n hasIconRight: false,\n hasIconLeft: false,\n },\n }\n);\n\n/\n Enhanced Button component props with comprehensive type safety and accessibility features\n /\nexport type ButtonProps = DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n> &\n VariantProps<typeof buttonVariants> & {\n /\n Accessible label for screen readers and assistive technologies.\n * This is required for accessibility compliance.\n /\n label: string;\n\n /\n Optional icon to display on the left side of the button\n /\n Icon?: FC \| LucideIcon;\n\n /\n Optional icon to display on the right side of the button\n /\n IconRight?: FC \| LucideIcon;\n\n /\n Additional CSS classes for icon styling\n /\n iconClassName?: string;\n\n /\n Shows loading spinner and disables button interaction when true\n /\n isLoading?: boolean;\n\n /\n Marks the button as active (useful for navigation or toggle states)\n /\n isActive?: boolean;\n\n /\n Marks the button as selected\n /\n isSelected?: boolean;\n\n /\n Makes the button span the full width of its container\n /\n isFullWidth?: boolean;\n\n /\n Additional description for complex buttons (optional)\n /\n 'aria-describedby'?: string;\n\n /\n Expanded state for collapsible sections (optional)\n /\n 'aria-expanded'?: boolean;\n\n /\n Controls whether the button has popup/menu (optional)\n /\n 'aria-haspopup'?:\n \| boolean\n \| 'true'\n \| 'false'\n \| 'menu'\n \| 'listbox'\n \| 'tree'\n \| 'grid'\n \| 'dialog';\n\n /\n Indicates if button controls are currently pressed (for toggle buttons)\n /\n 'aria-pressed'?: boolean;\n };\n\n/\n Button Component - A comprehensive, accessible button component\n \n Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n \n @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n \n // Button with icon and loading state\n * <Button\n * label=\"Save document\"\n * Icon={SaveIcon}\n * isLoading={saving}\n * disabled={!hasChanges}\n * >\n * Save\n * </Button>\n \n // Destructive action button\n * <Button\n * variant={ButtonVariant.OUTLINE}\n * color={ButtonColor.DESTRUCTIVE}\n * label=\"Delete item permanently\"\n * aria-describedby=\"delete-warning\"\n * >\n * Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n variant,\n size,\n color,\n children,\n Icon,\n IconRight,\n iconClassName,\n isLoading = false,\n isActive = false,\n isSelected = false,\n isFullWidth = false,\n textAlign,\n disabled,\n label,\n className,\n type = 'button',\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': ariaPressed,\n\n ...props\n}) => {\n const isLink =\n variant === ButtonVariant.LINK \|\| variant === ButtonVariant.INVISIBLE_LINK;\n const isIconOnly = !children && (Icon \|\| IconRight);\n\n const accessibilityProps = {\n 'aria-label': isIconOnly ? label : undefined,\n 'aria-labelledby': !isIconOnly ? undefined : undefined,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n 'aria-busy': isLoading,\n 'aria-current': (isActive ? 'page' : undefined) as 'page' \| undefined,\n 'aria-disabled': disabled \|\| isLoading,\n 'aria-selected': isSelected,\n };\n\n return (\n <button\n disabled={isLoading \|\| disabled}\n role={isLink ? 'link' : 'button'}\n type={type}\n className={buttonVariants({\n variant,\n size,\n color,\n isFullWidth,\n textAlign:\n textAlign ??\n (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n hasIconLeft: Boolean(\n typeof children !== 'undefined' &&\n (typeof Icon !== 'undefined' \|\| isLoading)\n ),\n hasIconRight: Boolean(\n typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n ),\n className,\n })}\n {...accessibilityProps}\n {...props}\n >\n {Icon && !isLoading && (\n <Icon\n className={buttonIconVariants({\n size,\n className: iconClassName,\n position: ButtonIconPosition.LEFT,\n })}\n aria-hidden=\"true\"\n />\n )}\n\n <Loader\n className={buttonIconVariants({\n size,\n className: iconClassName,\n position: ButtonIconPosition.LEFT,\n })}\n isLoading={isLoading}\n aria-hidden=\"true\"\n data-testid=\"loader\"\n />\n\n {children && <span>{children}</span>}\n\n {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n {IconRight && (\n <IconRight\n className={buttonIconVariants({\n size,\n className: iconClassName,\n position: ButtonIconPosition.RIGHT,\n })}\n aria-hidden=\"true\"\n />\n )}\n </button>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.mjs","names":["Button: FC<ButtonProps>"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { ContainerRoundedSize } from '../Container';\nimport { Loader } from '../Loader';\n\n/*\n Button size variants for different use cases\n /\nexport enum ButtonSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n ICON_SM = 'icon-sm',\n ICON_MD = 'icon-md',\n ICON_LG = 'icon-lg',\n ICON_XL = 'icon-xl',\n}\n\nconst buttonIconVariants = cva('flex-none shrink-0', {\n variants: {\n size: {\n [`${ButtonSize.SM}`]: 'size-3',\n [`${ButtonSize.MD}`]: 'size-4',\n [`${ButtonSize.LG}`]: 'size-5',\n [`${ButtonSize.XL}`]: 'size-6',\n [`${ButtonSize.ICON_SM}`]: 'size-3',\n [`${ButtonSize.ICON_MD}`]: 'size-4',\n [`${ButtonSize.ICON_LG}`]: 'size-4',\n [`${ButtonSize.ICON_XL}`]: 'size-5',\n },\n },\n defaultVariants: {\n size: ButtonSize.MD,\n },\n});\n\n/\n Button visual style variants\n /\nexport enum ButtonVariant {\n DEFAULT = 'default',\n NONE = 'none',\n OUTLINE = 'outline',\n LINK = 'link',\n INVISIBLE_LINK = 'invisible-link',\n HOVERABLE = 'hoverable',\n FADE = 'fade',\n INPUT = 'input',\n}\n\n/\n Button color themes that work with the design system\n /\nexport enum ButtonColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n CARD = 'card',\n TEXT_INVERSE = 'text-inverse',\n CURRENT = 'current',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\n/\n Text alignment options for button content\n /\nexport enum ButtonTextAlign {\n LEFT = 'left',\n CENTER = 'center',\n RIGHT = 'right',\n}\n\n/\n Enhanced button variants with improved accessibility and focus states\n /\nexport const buttonVariants = cva(\n 'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n size: {\n [`${ButtonSize.SM}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n [`${ButtonSize.MD}`]: 'min-h-8 px-6 text-sm max-md:py-2',\n [`${ButtonSize.LG}`]: 'min-h-10 px-8 text-lg max-md:py-3',\n [`${ButtonSize.XL}`]: 'min-h-11 px-10 text-xl max-md:py-4',\n [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n [`${ButtonSize.ICON_LG}`]: 'p-2',\n [`${ButtonSize.ICON_XL}`]: 'p-3',\n },\n color: {\n [`${ButtonColor.PRIMARY}`]:\n 'hover-primary-500/20 text-primary ring-primary-500/20 :text-text-light',\n [`${ButtonColor.SECONDARY}`]:\n 'hover-secondary-500/20 text-secondary ring-secondary-500/20 :text-text-light',\n [`${ButtonColor.DESTRUCTIVE}`]:\n 'hover-destructive-500/20 text-destructive ring-destructive-500/20 :text-text-light',\n [`${ButtonColor.NEUTRAL}`]:\n 'hover-neutral-500/20 text-neutral ring-neutral-500/20 :text-text-light',\n [`${ButtonColor.CARD}`]:\n 'hover-card-500/20 text-card ring-card-500/20 :text-text-light',\n [`${ButtonColor.LIGHT}`]:\n 'hover-white-500/20 text-white ring-white/20 :text-text-light',\n [`${ButtonColor.DARK}`]:\n 'hover-neutral-500/20 text-neutral-800 ring-neutral-800/50 :text-text-light',\n [`${ButtonColor.TEXT}`]:\n 'hover-neutral-500/20 text-text ring-neutral-500/20 :text-text-opposite',\n [`${ButtonColor.CURRENT}`]:\n 'hover-current-500/20 text-current ring-current/20 :text-text-light',\n [`${ButtonColor.TEXT_INVERSE}`]:\n 'hover-neutral-500/20 text-text-opposite ring-neutral-500/20 :text-text',\n [`${ButtonColor.ERROR}`]:\n 'hover-error-500/20 text-error ring-error/20 :text-text-light',\n [`${ButtonColor.SUCCESS}`]:\n 'hover-success-500/20 text-success ring-success/20 :text-text-light',\n [`${ButtonColor.CUSTOM}`]: '',\n },\n roundedSize: {\n [`${ContainerRoundedSize.NONE}`]: 'rounded-none',\n [`${ContainerRoundedSize.SM}`]:\n 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n [`${ContainerRoundedSize.MD}`]:\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n [`${ContainerRoundedSize.LG}`]:\n 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n [`${ContainerRoundedSize.XL}`]:\n 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n },\n variant: {\n [`${ButtonVariant.DEFAULT}`]: [\n 'bg-current',\n 'hover:bg-current/90',\n\n // Hover ring (similar spirit to your input)\n 'hover:ring-6', // width\n 'aria-selected:ring-6',\n ],\n\n [`${ButtonVariant.OUTLINE}`]: [\n 'rounded-2xl border-[1.5px] border-current bg-current/0 :text-current!',\n 'hover:bg-current/10',\n\n // Same hover ring behavior as DEFAULT for coherence\n 'hover:ring-6',\n 'aria-selected:ring-6',\n ],\n\n [`${ButtonVariant.NONE}`]:\n 'border-none bg-current/0 text-inherit hover:bg-current/0',\n\n [`${ButtonVariant.LINK}`]:\n 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 :text-current! hover:bg-transparent hover:underline',\n\n [`${ButtonVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 :text-current! hover:bg-transparent',\n\n [`${ButtonVariant.HOVERABLE}`]:\n 'rounded-lg border-none bg-current/0 transition :text-current! hover:bg-current/10 aria-[current]:bg-current/5',\n\n [`${ButtonVariant.FADE}`]:\n 'rounded-lg border-none bg-current/10 transition :text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n\n [`${ButtonVariant.INPUT}`]: [\n // base styles\n 'text-text',\n 'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',\n 'transition-shadow duration-100 md:text-sm',\n 'ring-0', // base ring\n 'disabled:opacity-50',\n\n 'text-text',\n 'bg-neutral-50 dark:bg-neutral-950',\n 'hover:bg-neutral-100/90 dark:hover:bg-neutral-900/90',\n 'ring-neutral-100 dark:ring-neutral-700',\n\n // Hover ring (similar spirit to your input)\n 'hover:ring-3', // width\n 'aria-selected:ring-4',\n 'focus-visible:ring-2',\n 'disabled:ring-0',\n\n // Focus ring + animation\n 'focus-visible:outline-none',\n\n // Remove any weird box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // aria-invalid border color\n 'aria-invalid:border-error',\n ],\n },\n\n textAlign: {\n [`${ButtonTextAlign.LEFT}`]: 'justify-start text-left',\n [`${ButtonTextAlign.CENTER}`]: 'justify-center text-center',\n [`${ButtonTextAlign.RIGHT}`]: 'justify-end text-right',\n },\n\n isFullWidth: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: `${ButtonVariant.DEFAULT}`,\n size: `${ButtonSize.MD}`,\n color: `${ButtonColor.CUSTOM}`,\n roundedSize: `${ContainerRoundedSize.MD}`,\n textAlign: `${ButtonTextAlign.CENTER}`,\n isFullWidth: false,\n },\n }\n);\n\n/*\n Enhanced Button component props with comprehensive type safety and accessibility features\n /\nexport type ButtonProps = DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n> &\n VariantProps<typeof buttonVariants> & {\n /\n Accessible label for screen readers and assistive technologies.\n * This is required for accessibility compliance.\n /\n label: string \| null;\n\n /\n Optional icon to display on the left side of the button\n /\n Icon?: FC \| LucideIcon;\n\n /\n Optional icon to display on the right side of the button\n /\n IconRight?: FC \| LucideIcon;\n\n /\n Additional CSS classes for icon styling\n /\n iconClassName?: string;\n\n /\n Shows loading spinner and disables button interaction when true\n /\n isLoading?: boolean;\n\n /\n Marks the button as active (useful for navigation or toggle states)\n /\n isActive?: boolean;\n\n /\n Marks the button as selected\n /\n isSelected?: boolean;\n\n /\n Makes the button span the full width of its container\n /\n isFullWidth?: boolean;\n\n /\n Additional description for complex buttons (optional)\n /\n 'aria-describedby'?: string;\n\n /\n Expanded state for collapsible sections (optional)\n /\n 'aria-expanded'?: boolean;\n\n /\n Controls whether the button has popup/menu (optional)\n /\n 'aria-haspopup'?:\n \| boolean\n \| 'true'\n \| 'false'\n \| 'menu'\n \| 'listbox'\n \| 'tree'\n \| 'grid'\n \| 'dialog';\n\n /\n Indicates if button controls are currently pressed (for toggle buttons)\n /\n 'aria-pressed'?: boolean;\n };\n\n/\n Button Component - A comprehensive, accessible button component\n \n Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n \n @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n \n // Button with icon and loading state\n * <Button\n * label=\"Save document\"\n * Icon={SaveIcon}\n * isLoading={saving}\n * disabled={!hasChanges}\n * >\n * Save\n * </Button>\n \n // Destructive action button\n * <Button\n * variant={`${ButtonVariant.OUTLINE}`}\n * color={ButtonColor.DESTRUCTIVE}\n * label=\"Delete item permanently\"\n * aria-describedby=\"delete-warning\"\n * >\n * Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n variant,\n size,\n color,\n children,\n Icon,\n IconRight,\n iconClassName,\n isLoading = false,\n isActive = false,\n isSelected = false,\n isFullWidth = false,\n roundedSize,\n textAlign,\n disabled,\n label,\n className,\n type = 'button',\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': ariaPressed,\n ...props\n}) => {\n const isLink =\n variant === `${ButtonVariant.LINK}` \|\|\n variant === `${ButtonVariant.INVISIBLE_LINK}`;\n const isIconOnly = !children && (Icon \|\| IconRight);\n\n const accessibilityProps = {\n 'aria-label': isIconOnly ? (label ?? undefined) : undefined,\n 'aria-labelledby': !isIconOnly ? undefined : undefined,\n 'aria-describedby': ariaDescribedBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n 'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n 'aria-busy': isLoading,\n 'aria-current': (isActive ? 'page' : undefined) as 'page' \| undefined,\n 'aria-disabled': disabled \|\| isLoading,\n 'aria-selected': isSelected,\n };\n\n const isSquareButton =\n size === ButtonSize.ICON_SM \|\|\n size === ButtonSize.ICON_MD \|\|\n size === ButtonSize.ICON_LG \|\|\n size === ButtonSize.ICON_XL;\n\n return (\n <button\n disabled={isLoading \|\| disabled}\n role={isLink ? 'link' : 'button'}\n type={type}\n className={buttonVariants({\n variant,\n size,\n color,\n isFullWidth,\n roundedSize,\n textAlign:\n textAlign ??\n (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n className,\n })}\n {...accessibilityProps}\n {...props}\n >\n {Icon && !isLoading && (\n <Icon\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'mr-3', iconClassName),\n })}\n aria-hidden=\"true\"\n />\n )}\n\n <div\n className={cn(\n 'flex w-0 items-center justify-center transition-[width] duration-300',\n isLoading && size === ButtonSize.SM && 'w-3',\n isLoading && size === ButtonSize.MD && 'w-4',\n isLoading && size === ButtonSize.LG && 'w-5',\n isLoading && size === ButtonSize.XL && 'w-6'\n )}\n >\n <Loader\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'mr-3', iconClassName),\n })}\n isLoading={isLoading}\n aria-hidden=\"true\"\n data-testid=\"loader\"\n />\n </div>\n\n {children && (\n <span className=\"flex-1 truncate whitespace-nowrap\">{children}</span>\n )}\n\n {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n {IconRight && (\n <IconRight\n className={buttonIconVariants({\n size,\n className: cn(!isSquareButton && 'ml-3', iconClassName),\n })}\n aria-hidden=\"true\"\n />\n )}\n </button>\n );\n};\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-import { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant } from "./Button.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants } from "./Button.mjs";
-export { Button, ButtonColor, ButtonIconPosition, ButtonSize, ButtonTextAlign, ButtonVariant };
+export { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants };

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

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ClickOutsideDiv/index.tsx
-const ClickOutsideDiv = ({ children, onClickOutSide, listenForEscape = false, disabled = false,...props }) => {
+const ClickOutsideDiv = ({ children, onClickOutSide, listenForEscape = false, disabled = false, ...props }) => {
 	const divRef = useRef(null);
 	const handleClickOutside = useCallback((event) => {
 		if (disabled) return;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["ClickOutsideDiv: FC<ClickOutsideDivProps>"],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n type HTMLAttributes,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n /*\n Callback function called when a click occurs outside the component\n /\n onClickOutSide: () => void;\n /\n Whether to listen for Escape key presses\n * @default false\n /\n listenForEscape?: boolean;\n /\n Whether the component is disabled (won't trigger onClickOutSide)\n * @default false\n */\n disabled?: boolean;\n}> &\n HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n children,\n onClickOutSide,\n listenForEscape = false,\n disabled = false,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (disabled) return;\n\n // If clicking outside of the referenced element, call onClickOutSide\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n onClickOutSide();\n }\n },\n [onClickOutSide, disabled]\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (disabled \|\| !listenForEscape) return;\n\n if (event.key === 'Escape') {\n onClickOutSide();\n }\n },\n [onClickOutSide, disabled, listenForEscape]\n );\n\n useEffect(() => {\n // Attach the event listeners\n document.addEventListener('mousedown', handleClickOutside, {\n passive: true,\n });\n\n if (listenForEscape) {\n document.addEventListener('keydown', handleKeyDown);\n }\n\n // Clean up on unmount\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n if (listenForEscape) {\n document.removeEventListener('keydown', handleKeyDown);\n }\n };\n }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n return (\n <div\n ref={divRef}\n {...props}\n // Add role for better accessibility when used as a container\n role={props.role \|\| 'region'}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;AA6BA,MAAaA,mBAA6C,EACxD,UACA,gBACA,kBAAkB,OAClB,WAAW,~~MACX~~,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,SAAU;AAGd,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,CAClE,iBAAgB;IAGpB,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,MAAI,YAAY,CAAC,gBAAiB;AAElC,MAAI,MAAM,QAAQ,SAChB,iBAAgB;IAGpB;EAAC;EAAgB;EAAU;EAAgB,CAC5C;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,oBAAoB,EACzD,SAAS,MACV,CAAC;AAEF,MAAI,gBACF,UAAS,iBAAiB,WAAW,cAAc;AAIrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,OAAI,gBACF,UAAS,oBAAoB,WAAW,cAAc;;IAGzD;EAAC;EAAoB;EAAe;EAAgB,CAAC;AAExD,QACE,oBAAC;EACC,KAAK;EACL,GAAI;EAEJ,MAAM,MAAM,QAAQ;EAEnB;GACG"}
1	+ {"version":3,"file":"index.mjs","names":["ClickOutsideDiv: FC<ClickOutsideDivProps>"],"sources":["../../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC,\n type HTMLAttributes,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n /*\n Callback function called when a click occurs outside the component\n /\n onClickOutSide: () => void;\n /\n Whether to listen for Escape key presses\n * @default false\n /\n listenForEscape?: boolean;\n /\n Whether the component is disabled (won't trigger onClickOutSide)\n * @default false\n */\n disabled?: boolean;\n}> &\n HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n children,\n onClickOutSide,\n listenForEscape = false,\n disabled = false,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (disabled) return;\n\n // If clicking outside of the referenced element, call onClickOutSide\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n onClickOutSide();\n }\n },\n [onClickOutSide, disabled]\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (disabled \|\| !listenForEscape) return;\n\n if (event.key === 'Escape') {\n onClickOutSide();\n }\n },\n [onClickOutSide, disabled, listenForEscape]\n );\n\n useEffect(() => {\n // Attach the event listeners\n document.addEventListener('mousedown', handleClickOutside, {\n passive: true,\n });\n\n if (listenForEscape) {\n document.addEventListener('keydown', handleKeyDown);\n }\n\n // Clean up on unmount\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n if (listenForEscape) {\n document.removeEventListener('keydown', handleKeyDown);\n }\n };\n }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n return (\n <div\n ref={divRef}\n {...props}\n // Add role for better accessibility when used as a container\n role={props.role \|\| 'region'}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;AA6BA,MAAaA,mBAA6C,EACxD,UACA,gBACA,kBAAkB,OAClB,WAAW,OACX,GAAG,YACC;CACJ,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MAAI,SAAU;AAGd,MAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,OAAe,CAClE,iBAAgB;IAGpB,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,MAAI,YAAY,CAAC,gBAAiB;AAElC,MAAI,MAAM,QAAQ,SAChB,iBAAgB;IAGpB;EAAC;EAAgB;EAAU;EAAgB,CAC5C;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,oBAAoB,EACzD,SAAS,MACV,CAAC;AAEF,MAAI,gBACF,UAAS,iBAAiB,WAAW,cAAc;AAIrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,OAAI,gBACF,UAAS,oBAAoB,WAAW,cAAc;;IAGzD;EAAC;EAAoB;EAAe;EAAgB,CAAC;AAExD,QACE,oBAAC;EACC,KAAK;EACL,GAAI;EAEJ,MAAM,MAAM,QAAQ;EAEnB;GACG"}

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

@@ -161,7 +161,7 @@ const tableVariants = cva("w-full border-collapse", {
 * @param aria-label - Accessible label for screen readers describing the table purpose
 * @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided
 */
-const CollapsibleTable = ({ title, data, className, headerClassName, contentClassName, tableClassName, thClassName, tdClassName, trClassName, defaultExpanded = false, isExpanded: controlledExpanded, onExpandToggle, toggleIcon, size, variant, spacing, borderStyle, tableSpacing, tableLayout, columnRenderers, disabled = false, "aria-label": ariaLabel, contentId,...props }) => {
+const CollapsibleTable = ({ title, data, className, headerClassName, contentClassName, tableClassName, thClassName, tdClassName, trClassName, defaultExpanded = false, isExpanded: controlledExpanded, onExpandToggle, toggleIcon, size, variant, spacing, borderStyle, tableSpacing, tableLayout, columnRenderers, disabled = false, "aria-label": ariaLabel, contentId, ...props }) => {
 	const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
 	const isExpanded = controlledExpanded ?? internalExpanded;
 	const toggleExpanded = () => {

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

	@@ -1 +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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"}
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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"}

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

@@ -8,11 +8,11 @@ import { Dialog, DialogContent } from "@radix-ui/react-dialog";
 import { Command as Command$1 } from "cmdk";
 //#region src/components/Command/index.tsx
-const CommandRoot = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1, {
+const CommandRoot = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1, {
 	className: cn("flex size-full flex-col overflow-hidden rounded-md", className),
 	...props
 });
-const CommandDialog = ({ children,...props }) => /* @__PURE__ */ jsx(Dialog, {
+const CommandDialog = ({ children, ...props }) => /* @__PURE__ */ jsx(Dialog, {
 	...props,
 	children: /* @__PURE__ */ jsx(DialogContent, {
 		className: "overflow-hidden p-0",
@@ -22,7 +22,7 @@ const CommandDialog = ({ children,...props }) => /* @__PURE__ */ jsx(Dialog, {
 		})
 	})
 });
-const CommandInput = ({ className,...props }) => /* @__PURE__ */ jsxs("div", {
+const CommandInput = ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex w-full items-center",
 	"cmdk-input-wrapper": "",
 	children: [/* @__PURE__ */ jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
@@ -30,7 +30,7 @@ const CommandInput = ({ className,...props }) => /* @__PURE__ */ jsxs("div", {
 		...props
 	})]
 });
-const CommandList = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandList = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.List, {
 	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
 	...props
 });
@@ -38,19 +38,19 @@ const CommandEmpty = (props) => /* @__PURE__ */ jsx(Command$1.Empty, {
 	className: "py-6 text-center text-sm",
 	...props
 });
-const CommandGroup = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.Group, {
 	className: cn("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", className),
 	...props
 });
-const CommandSeparator = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.Separator, {
 	className: cn("-mx-1 h-px bg-border", className),
 	...props
 });
-const CommandItem = ({ className,...props }) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Command$1.Item, {
 	className: cn("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", className),
 	...props
 });
-const CommandShortcut = ({ className,...props }) => {
+const CommandShortcut = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: cn("ml-auto text-muted-foreground text-xs tracking-widest", className),
 		...props

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

	@@ -1 +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(\n 'flex size-full flex-col overflow-hidden rounded-md',\n className\n )}\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,~~UACA~~,GAAG,YAEH,oBAACC;CACC,WAAW,GACT,sDACA,UACD;CACD,GAAI;EACJ;AAKJ,MAAMC,iBAAyC,EAAE,~~SAAU~~,GAAG,YAC5D,oBAAC;CAAO,GAAI;WACV,oBAAC;EAAc,WAAU;YACvB,oBAAC;GAAY,WAAU;GACpB;IACW;GACA;EACT;AAGX,MAAMC,gBAAmE,EACvE,~~UACA~~,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,~~UACA~~,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,~~UACA~~,GAAG,YAEH,oBAACL,UAAiB;CAChB,WAAW,GACT,0NACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMM,oBAED,EAAE,~~UAAW~~,GAAG,YACnB,oBAACN,UAAiB;CAChB,WAAW,GAAG,wBAAwB,UAAU;CAChD,GAAI;EACJ;AAGJ,MAAMO,eAAiE,EACrE,~~UACA~~,GAAG,YAEH,oBAACP,UAAiB;CAChB,WAAW,GACT,2PACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,mBAAmB,EACvB,~~UACA~~,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"}
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(\n 'flex size-full flex-col overflow-hidden rounded-md',\n className\n )}\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,GACT,sDACA,UACD;CACD,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 CHANGED Viewed

@@ -11,13 +11,13 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 	variants: {
 		roundedSize: {
 			none: "rounded-none",
-			sm: "rounded-sm",
-			md: "rounded-md",
-			lg: "rounded-lg",
-			xl: "rounded-xl",
-			"2xl": "rounded-2xl",
-			"3xl": "rounded-3xl",
-			full: "rounded-full"
+			sm: "rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md",
+			md: "rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg",
+			lg: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+			xl: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+			"2xl": "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+			"3xl": "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
+			full: "rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full"
 		},
 		transparency: {
 			none: "bg-card",
@@ -29,10 +29,11 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		},
 		padding: {
 			none: "p-0",
-			sm: "p-1",
-			md: "p-2",
-			lg: "p-3",
-			xl: "p-4"
+			sm: "px-2 py-4",
+			md: "px-4 py-6",
+			lg: "px-6 py-8",
+			xl: "px-8 py-10",
+			"2xl": "px-10 py-12"
 		},
 		separator: {
 			without: "",
@@ -55,7 +56,7 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		},
 		background: {
 			none: "bg-inherit",
-			hoverable: "!bg-opacity-5 hover:!bg-opacity-10 focus:!bg-opacity-10 aria-selected:!bg-opacity-15 backdrop-blur-0 hover:backdrop-blur focus:backdrop-blur aria-selected:backdrop-blur",
+			hoverable: "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",
 			with: ""
 		},
 		gap: {
@@ -173,7 +174,7 @@ let ContainerGap = /* @__PURE__ */ function(ContainerGap$1) {
 * @param className - Additional CSS classes
 * @param props - Additional HTML div attributes including ARIA attributes
 */
-const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap,...props }) => /* @__PURE__ */ jsx("div", {
+const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn(containerVariants({
 		roundedSize,
 		transparency,

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

	@@ -1 +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',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-~~2xl~~',\n '3xl': 'rounded-~~3xl~~',\n full: '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: 'p-1',\n md: 'p-2',\n lg: 'p-3',\n xl: 'p-4',\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.5px]',\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 hover:!bg-opacity-10 focus:!bg-opacity-10 aria-selected:!bg-opacity-15 ~~backdrop-blur-0 hover:backdrop-blur focus:backdrop-blur~~ 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: 'md',\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 TWO_XL = '2xl',\n THREE_XL = '3xl',\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 TWO_XL = '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 className,\n })\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,~~OAAO~~;~~GACP~~,~~OAAO~~;~~GACP~~,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;~~GACL~~;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;;;;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,~~IACA~~,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACA;EACD,CAAC,CACH;CACD,GAAI;CAEH;EACG"}
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 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.5px]',\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: 'md',\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 TWO_XL = '2xl',\n THREE_XL = '3xl',\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 TWO_XL = '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 className,\n })\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,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;;;;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;EACA;EACD,CAAC,CACH;CACD,GAAI;CAEH;EACG"}

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

@@ -34,7 +34,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * @param isEditing - Whether editor is in editing mode
 * @param props - Additional AutoSizedTextArea props
 */
-const ContentEditor = ({ children, onContentChange, isEditing,...props }) => {
+const ContentEditor = ({ children, onContentChange, isEditing, ...props }) => {
 	const [newValue, setNewValue] = useState(children);
 	const [resetIncrementor, setResetIncrementor] = useState(0);
 	const isEdited = newValue !== children;

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

	@@ -1 +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,~~UACA~~,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"}
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"}

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

@@ -35,7 +35,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * @param additionalButtons - Extra buttons to display
 * @param props - Additional Input component props
 */
-const ContentEditorInput = ({ children, onContentChange, disabled, validate, additionalButtons,...props }) => {
+const ContentEditorInput = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
 	const [newValue, setNewValue] = useState(children);
 	const [resetIncrementor, setResetIncrementor] = useState(0);
 	const isEdited = newValue !== children;

package/dist/esm/components/ContentEditor/ContentEditorInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditorInput.mjs","names":["ContentEditorInput: FC<ContentEditorInputProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLInputElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.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 { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component /\nexport type ContentEditorInputProps = {\n /* The current content to display and edit /\n children: InputProps['value'];\n /* Callback function called when content is saved/validated /\n onContentChange: (content: InputProps['value']) => void;\n /* Whether the editor is disabled /\n disabled?: boolean;\n /* Optional validation function to check content validity /\n validate?: (content: InputProps['value']) => boolean;\n /* Additional buttons to display alongside edit actions /\n additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/\n ContentEditorInput Component\n \n An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n \n ## Features\n * - Inline Input Editing: Edit single-line content with immediate feedback\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 * - Accessibility: Full ARIA support and keyboard navigation\n * - State Management: Handles editing states and validation\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\n * - Focus management and visual indicators\n \n @param children - Current input value\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 Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n children,\n onContentChange,\n disabled,\n validate,\n additionalButtons,\n ...props\n}) => {\n const [newValue, setNewValue] = useState<InputProps['value']>(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<HTMLInputElement> = (e) => {\n setNewValue(e.currentTarget.value);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !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 input 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={String(children)}\n role=\"group\"\n aria-label=\"Content editor input\"\n >\n <Input\n onChange={handleOnContentChange}\n onKeyDown={handleKeyDown}\n key={resetIncrementor}\n aria-label=\"Editable input value\"\n aria-describedby={\n isEdited \|\| additionalButtons\n ? 'content-editor-input-actions'\n : undefined\n }\n aria-invalid={!isValid}\n variant={InputVariant.INVISIBLE}\n className=\"size-full\"\n defaultValue={children}\n disabled={disabled}\n {...props}\n />\n {(isEdited \|\| additionalButtons) && (\n <div\n id=\"content-editor-input-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={!isValid ? 'validation-error' : undefined}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAaA,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,~~kBACA~~,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,SAAS;CACvE,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,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,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,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;KAZC,iBAaL,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,oBAAkB,CAAC,UAAU,qBAAqB;KAClD,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAtDH,OAAO,SAAS,CAwDjB"}
1	+ {"version":3,"file":"ContentEditorInput.mjs","names":["ContentEditorInput: FC<ContentEditorInputProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLInputElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.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 { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component /\nexport type ContentEditorInputProps = {\n /* The current content to display and edit /\n children: InputProps['value'];\n /* Callback function called when content is saved/validated /\n onContentChange: (content: InputProps['value']) => void;\n /* Whether the editor is disabled /\n disabled?: boolean;\n /* Optional validation function to check content validity /\n validate?: (content: InputProps['value']) => boolean;\n /* Additional buttons to display alongside edit actions /\n additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/\n ContentEditorInput Component\n \n An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n \n ## Features\n * - Inline Input Editing: Edit single-line content with immediate feedback\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 * - Accessibility: Full ARIA support and keyboard navigation\n * - State Management: Handles editing states and validation\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\n * - Focus management and visual indicators\n \n @param children - Current input value\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 Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n children,\n onContentChange,\n disabled,\n validate,\n additionalButtons,\n ...props\n}) => {\n const [newValue, setNewValue] = useState<InputProps['value']>(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<HTMLInputElement> = (e) => {\n setNewValue(e.currentTarget.value);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !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 input 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={String(children)}\n role=\"group\"\n aria-label=\"Content editor input\"\n >\n <Input\n onChange={handleOnContentChange}\n onKeyDown={handleKeyDown}\n key={resetIncrementor}\n aria-label=\"Editable input value\"\n aria-describedby={\n isEdited \|\| additionalButtons\n ? 'content-editor-input-actions'\n : undefined\n }\n aria-invalid={!isValid}\n variant={InputVariant.INVISIBLE}\n className=\"size-full\"\n defaultValue={children}\n disabled={disabled}\n {...props}\n />\n {(isEdited \|\| additionalButtons) && (\n <div\n id=\"content-editor-input-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={!isValid ? 'validation-error' : undefined}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAaA,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,SAAS;CACvE,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,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,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,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;KAZC,iBAaL,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,oBAAkB,CAAC,UAAU,qBAAqB;KAClD,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAtDH,OAAO,SAAS,CAwDjB"}

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

@@ -38,7 +38,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * @param additionalButtons - Extra buttons to display
 * @param props - Additional AutoSizedTextArea component props
 */
-const ContentEditorTextArea = ({ children, onContentChange, disabled, validate, additionalButtons,...props }) => {
+const ContentEditorTextArea = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
 	const { isAuthenticated } = useUser();
 	const [newValue, setNewValue] = useState(children);
 	const [resetIncrementor, setResetIncrementor] = useState(0);

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

	@@ -1 +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,~~kBACA~~,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"}
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"}

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

@@ -76,7 +76,7 @@ import { useIntlayer } from "react-intlayer";
 * </div>
 * ```
 */
-const CopyButton = ({ content,...props }) => {
+const CopyButton = ({ content, ...props }) => {
 	const [copied, setCopied] = useState(false);
 	const [error, setError] = useState(false);
 	const { label } = useIntlayer("copy-button");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["CopyButton: FC<CopyButtonProps>","error"],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n Button,\n ButtonColor,\n type ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from '../Button';\n\n/*\n Props for the CopyButton component\n /\ntype CopyButtonProps = {\n /\n The text content to copy to the clipboard\n * @example\n * ```tsx\n * <CopyButton content=\"Hello World!\" />\n * ```\n /\n content: string;\n} & Partial<ButtonProps>;\n\n/\n CopyButton - A specialized button component for copying text to the clipboard\n \n This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n \n ## Key Features\n * - Clipboard Integration: Uses modern Clipboard API for reliable text copying\n * - Visual Feedback: Icon changes from copy to check mark on successful copy\n * - Auto-Reset: Automatically reverts to copy icon after 1 second\n * - Error Handling: Graceful error handling with console logging\n * - Accessibility: Full keyboard navigation and screen reader support\n * - Internationalization: Multi-language support via Intlayer\n \n ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n \n ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n \n ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n \n @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n \n @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n * content=\"https://example.com/api/endpoint\"\n * label=\"Copy API endpoint\"\n * variant={ButtonVariant.OUTLINE}\n * color={ButtonColor.PRIMARY}\n * size={ButtonSize.ICON_MD}\n * />\n * ```\n \n @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n * <pre className=\"bg-gray-100 p-4 rounded\">\n * <code>npm install @intlayer/design-system</code>\n * </pre>\n * <CopyButton\n * content=\"npm install @intlayer/design-system\"\n * className=\"absolute top-2 right-2\"\n * label=\"Copy installation command\"\n * />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n const [copied, setCopied] = useState(false);\n const [error, setError] = useState(false);\n const { label } = useIntlayer('copy-button');\n\n const handleCopy = async () => {\n try {\n setError(false);\n await navigator.clipboard.writeText(content);\n setCopied(true);\n } catch (error) {\n console.error('Failed to copy text: ', error);\n setError(true);\n }\n };\n\n useEffect(() => {\n if (copied \|\| error) {\n const timer = setTimeout(() => {\n setCopied(false);\n setError(false);\n }, 1000);\n return () => clearTimeout(timer);\n }\n }, [copied, error]);\n\n // Determine the current state for accessibility\n const getAriaLabel = () => {\n if (copied) return 'Content copied to clipboard';\n if (error) return 'Failed to copy content';\n return props.label ?? label.value;\n };\n\n return (\n <Button\n Icon={copied ? CopyCheckIcon : CopyIcon}\n onClick={handleCopy}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n size={ButtonSize.ICON_SM}\n tabIndex={0}\n title={getAriaLabel()}\n {...props}\n label={getAriaLabel()}\n aria-describedby={\n copied ? 'copy-success' : error ? 'copy-error' : undefined\n }\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAaA,cAAmC,EAAE,~~QAAS~~,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,EAAE,UAAU,YAAY,cAAc;CAE5C,MAAM,aAAa,YAAY;AAC7B,MAAI;AACF,YAAS,MAAM;AACf,SAAM,UAAU,UAAU,UAAU,QAAQ;AAC5C,aAAU,KAAK;WACRC,SAAO;AACd,WAAQ,MAAM,yBAAyBA,QAAM;AAC7C,YAAS,KAAK;;;AAIlB,iBAAgB;AACd,MAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;AAC7B,cAAU,MAAM;AAChB,aAAS,MAAM;MACd,IAAK;AACR,gBAAa,aAAa,MAAM;;IAEjC,CAAC,QAAQ,MAAM,CAAC;CAGnB,MAAM,qBAAqB;AACzB,MAAI,OAAQ,QAAO;AACnB,MAAI,MAAO,QAAO;AAClB,SAAO,MAAM,SAAS,MAAM;;AAG9B,QACE,oBAAC;EACC,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAS,cAAc;EACvB,OAAO,YAAY;EACnB,MAAM,WAAW;EACjB,UAAU;EACV,OAAO,cAAc;EACrB,GAAI;EACJ,OAAO,cAAc;EACrB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;GAEnD"}
1	+ {"version":3,"file":"index.mjs","names":["CopyButton: FC<CopyButtonProps>","error"],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n Button,\n ButtonColor,\n type ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from '../Button';\n\n/*\n Props for the CopyButton component\n /\ntype CopyButtonProps = {\n /\n The text content to copy to the clipboard\n * @example\n * ```tsx\n * <CopyButton content=\"Hello World!\" />\n * ```\n /\n content: string;\n} & Partial<ButtonProps>;\n\n/\n CopyButton - A specialized button component for copying text to the clipboard\n \n This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n \n ## Key Features\n * - Clipboard Integration: Uses modern Clipboard API for reliable text copying\n * - Visual Feedback: Icon changes from copy to check mark on successful copy\n * - Auto-Reset: Automatically reverts to copy icon after 1 second\n * - Error Handling: Graceful error handling with console logging\n * - Accessibility: Full keyboard navigation and screen reader support\n * - Internationalization: Multi-language support via Intlayer\n \n ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n \n ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n \n ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n \n @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n \n @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n * content=\"https://example.com/api/endpoint\"\n * label=\"Copy API endpoint\"\n * variant={ButtonVariant.OUTLINE}\n * color={ButtonColor.PRIMARY}\n * size={ButtonSize.ICON_MD}\n * />\n * ```\n \n @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n * <pre className=\"bg-gray-100 p-4 rounded\">\n * <code>npm install @intlayer/design-system</code>\n * </pre>\n * <CopyButton\n * content=\"npm install @intlayer/design-system\"\n * className=\"absolute top-2 right-2\"\n * label=\"Copy installation command\"\n * />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n const [copied, setCopied] = useState(false);\n const [error, setError] = useState(false);\n const { label } = useIntlayer('copy-button');\n\n const handleCopy = async () => {\n try {\n setError(false);\n await navigator.clipboard.writeText(content);\n setCopied(true);\n } catch (error) {\n console.error('Failed to copy text: ', error);\n setError(true);\n }\n };\n\n useEffect(() => {\n if (copied \|\| error) {\n const timer = setTimeout(() => {\n setCopied(false);\n setError(false);\n }, 1000);\n return () => clearTimeout(timer);\n }\n }, [copied, error]);\n\n // Determine the current state for accessibility\n const getAriaLabel = () => {\n if (copied) return 'Content copied to clipboard';\n if (error) return 'Failed to copy content';\n return props.label ?? label.value;\n };\n\n return (\n <Button\n Icon={copied ? CopyCheckIcon : CopyIcon}\n onClick={handleCopy}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n size={ButtonSize.ICON_SM}\n tabIndex={0}\n title={getAriaLabel()}\n {...props}\n label={getAriaLabel()}\n aria-describedby={\n copied ? 'copy-success' : error ? 'copy-error' : undefined\n }\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAaA,cAAmC,EAAE,SAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,EAAE,UAAU,YAAY,cAAc;CAE5C,MAAM,aAAa,YAAY;AAC7B,MAAI;AACF,YAAS,MAAM;AACf,SAAM,UAAU,UAAU,UAAU,QAAQ;AAC5C,aAAU,KAAK;WACRC,SAAO;AACd,WAAQ,MAAM,yBAAyBA,QAAM;AAC7C,YAAS,KAAK;;;AAIlB,iBAAgB;AACd,MAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;AAC7B,cAAU,MAAM;AAChB,aAAS,MAAM;MACd,IAAK;AACR,gBAAa,aAAa,MAAM;;IAEjC,CAAC,QAAQ,MAAM,CAAC;CAGnB,MAAM,qBAAqB;AACzB,MAAI,OAAQ,QAAO;AACnB,MAAI,MAAO,QAAO;AAClB,SAAO,MAAM,SAAS,MAAM;;AAG9B,QACE,oBAAC;EACC,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAS,cAAc;EACvB,OAAO,YAAY;EACnB,MAAM,WAAW;EACjB,UAAU;EACV,OAAO,cAAc;EACrB,GAAI;EACJ,OAAO,cAAc;EACrB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;GAEnD"}