npm - @intlayer/design-system - Versions diffs - 7.0.7 → 7.0.8-canary.0 - Mend

@intlayer/design-system 7.0.7 → 7.0.8-canary.0

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

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

@@ -54,6 +54,7 @@ let ButtonVariant = /* @__PURE__ */ function(ButtonVariant$1) {
 	ButtonVariant$1["LINK"] = "link";
 	ButtonVariant$1["INVISIBLE_LINK"] = "invisible-link";
 	ButtonVariant$1["HOVERABLE"] = "hoverable";
+	ButtonVariant$1["FADE"] = "fade";
 	ButtonVariant$1["INPUT"] = "input";
 	return ButtonVariant$1;
 }({});
@@ -68,7 +69,9 @@ let ButtonColor = /* @__PURE__ */ function(ButtonColor$1) {
 	ButtonColor$1["LIGHT"] = "light";
 	ButtonColor$1["DARK"] = "dark";
 	ButtonColor$1["TEXT"] = "text";
+	ButtonColor$1["CARD"] = "card";
 	ButtonColor$1["TEXT_INVERSE"] = "text-inverse";
+	ButtonColor$1["CURRENT"] = "current";
 	ButtonColor$1["ERROR"] = "error";
 	ButtonColor$1["SUCCESS"] = "success";
 	ButtonColor$1["CUSTOM"] = "custom";
@@ -103,9 +106,11 @@ const buttonVariants = cva("relative cursor-pointer truncate whitespace-nowrap f
 			[`${ButtonColor.SECONDARY}`]: "text-secondary *:text-text-light focus:ring-secondary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-secondary-500/50",
 			[`${ButtonColor.DESTRUCTIVE}`]: "text-destructive *:text-text-light focus:ring-destructive-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-destructive-500/50",
 			[`${ButtonColor.NEUTRAL}`]: "text-neutral *:text-text-light focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
+			[`${ButtonColor.CARD}`]: "text-card *:text-text-light focus:ring-card-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-card-500/50",
 			[`${ButtonColor.LIGHT}`]: "text-white *:text-text-light focus:ring-white/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-white/50",
 			[`${ButtonColor.DARK}`]: "text-neutral-800 *:text-text-light focus:ring-neutral-800/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-800/50",
 			[`${ButtonColor.TEXT}`]: "text-text *:text-text-opposite focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
+			[`${ButtonColor.CURRENT}`]: "text-current *:text-text-light focus:ring-current/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-current/50",
 			[`${ButtonColor.TEXT_INVERSE}`]: "text-text-opposite *:text-text focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
 			[`${ButtonColor.ERROR}`]: "text-error *:text-text-light focus:ring-error/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-error/50",
 			[`${ButtonColor.SUCCESS}`]: "text-success *:text-text-light focus:ring-success/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-success/50",
@@ -118,6 +123,7 @@ const buttonVariants = cva("relative cursor-pointer truncate whitespace-nowrap f
 			[`${ButtonVariant.LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
 			[`${ButtonVariant.INVISIBLE_LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
 			[`${ButtonVariant.HOVERABLE}`]: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
+			[`${ButtonVariant.FADE}`]: "*:!text-current rounded-lg border-none bg-current/10 transition hover:bg-current/20 aria-[current]:bg-current/5",
 			[`${ButtonVariant.INPUT}`]: [
 				"*:!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",
 				"border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",

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 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 TEXT_INVERSE = 'text-inverse',\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.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.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.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 { 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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"}

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs CHANGED Viewed

@@ -39,13 +39,13 @@ const SaveForm = ({ dictionary, mode, className, onDelete, onSave,...props }) =>
 		} });
 	};
 	const handlePushDictionary = () => {
-		if (!editedContent?.[dictionary.localId]) return;
-		pushDictionaries({ dictionaries: [{
+		const updatedDictionary = {
 			...dictionary,
 			...editedContent?.[dictionary.localId]
-		}] }, { onSuccess: (res) => {
+		};
+		pushDictionaries({ dictionaries: [updatedDictionary] }, { onSuccess: (res) => {
 			if (res) {
-				setLocaleDictionary(editedContent?.[dictionary.localId]);
+				setLocaleDictionary(updatedDictionary);
 				restoreEditedContent(dictionary.localId);
 				onSave?.();
 			}

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SaveForm.mjs","names":["SaveForm: FC<DictionaryDetailsProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport {\n useDictionariesRecordActions,\n useEditedContent,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types';\nimport {\n ArrowUpFromLine,\n Download,\n RotateCcw,\n Save,\n Trash,\n} from 'lucide-react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type FormHTMLAttributes,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Modal, ModalSize } from '../../../components/Modal';\nimport {\n useAuth,\n useDeleteDictionary,\n usePushDictionaries,\n useWriteDictionary,\n} from '../../../hooks';\nimport { cn } from '../../../utils/cn';\nimport { ButtonColor, ButtonVariant } from '../../Button';\nimport { Form } from '../../Form';\n\ntype DictionaryDetailsProps = {\n dictionary: Dictionary;\n mode: ('local' \| 'remote')[];\n onDelete?: () => void;\n onSave?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n dictionary,\n mode,\n className,\n onDelete,\n onSave,\n ...props\n}) => {\n const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n const { setLocaleDictionary } = useDictionariesRecordActions();\n const { mutate: deleteDictionary, isPending: isDeleting } =\n useDeleteDictionary();\n const { mutate: writeDictionary, isPending: isWriting } =\n useWriteDictionary();\n const { mutate: pushDictionaries, isPending: isPushing } =\n usePushDictionaries();\n const isLoading = isWriting \|\| isPushing;\n\n const { editedContent, restoreEditedContent } = useEditedContent();\n const {\n deleteButton,\n resetButton,\n saveButton,\n publishButton,\n downloadButton,\n confirmation,\n } = useIntlayer('save-dictionary-details');\n const { isAuthenticated } = useAuth();\n\n const editedDictionary = editedContent?.[dictionary.localId!];\n\n const isEdited =\n editedDictionary &&\n JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n const isDistantDictionary =\n typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n const handleSaveDictionaryConfirmation = async () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n writeDictionary(\n {\n dictionary: updatedDictionary,\n },\n {\n onSuccess: () => {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n },\n }\n );\n };\n\n const handlePushDictionary = () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n pushDictionaries(\n { dictionaries: [updatedDictionary] },\n {\n onSuccess: (res) => {\n if (res) {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n }\n },\n }\n );\n };\n\n const handleDeleteDictionary = () => {\n if (!(dictionary as unknown as DistantDictionary).id) return;\n\n deleteDictionary(\n {\n dictionaryId: (\n dictionary as unknown as DistantDictionary\n ).id.toString(),\n },\n {\n onSuccess: (res) => {\n if (res) {\n onDelete?.();\n }\n },\n }\n );\n };\n\n return (\n <>\n <Modal\n isOpen={isFormatAlertModalOpen}\n title={confirmation.title.value}\n size={ModalSize.MD}\n >\n <form className=\"size-full px-3\">\n <p className=\"py-4 text-neutral text-sm\">{confirmation.message}</p>\n\n <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n <Form.Button\n label={confirmation.cancelButton.label.value}\n disabled={!isEdited \|\| isLoading}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n variant={ButtonVariant.OUTLINE}\n onClick={() => setIsFormatAlertModalOpen(false)}\n >\n {confirmation.cancelButton.text}\n </Form.Button>\n <Form.Button\n label={confirmation.confirmButton.label.value}\n disabled={!isEdited \|\| isLoading}\n Icon={Save}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handleSaveDictionaryConfirmation}\n >\n {confirmation.confirmButton.text}\n </Form.Button>\n </div>\n </form>\n </Modal>\n <form\n className={cn('flex justify-end gap-2 max-md:flex-col', className)}\n {...props}\n >\n {mode.includes('remote') &&\n isDistantDictionary &&\n onDelete &&\n isAuthenticated && (\n <Form.Button\n label={deleteButton.label.value}\n Icon={Trash}\n color={ButtonColor.ERROR}\n variant={ButtonVariant.OUTLINE}\n className=\"max-md:w-full\"\n isLoading={isDeleting}\n onClick={handleDeleteDictionary}\n >\n {deleteButton.text}\n </Form.Button>\n )}\n {isEdited && (\n <Form.Button\n label={resetButton.label.value}\n disabled={!isEdited}\n Icon={RotateCcw}\n variant={ButtonVariant.OUTLINE}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n onClick={() => restoreEditedContent(dictionary.localId!)}\n >\n {resetButton.text}\n </Form.Button>\n )}\n {mode.includes('local') && (\n <Form.Button\n label={downloadButton.label.value}\n disabled={!isEdited \|\| isLoading}\n Icon={Download}\n color={ButtonColor.TEXT}\n variant={\n isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n }\n className=\"max-md:w-full\"\n isLoading={isWriting}\n onClick={() => setIsFormatAlertModalOpen(true)}\n >\n {downloadButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n <Form.Button\n label={publishButton.label.value}\n disabled={isLoading}\n Icon={ArrowUpFromLine}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {publishButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') &&\n isAuthenticated &&\n isDistantDictionary &&\n isEdited && (\n <Form.Button\n label={saveButton.label.value}\n disabled={!isEdited \|\| isLoading}\n Icon={Save}\n color=\"text\"\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {saveButton.text}\n </Form.Button>\n )}\n </form>\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"SaveForm.mjs","names":["SaveForm: FC<DictionaryDetailsProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport {\n useDictionariesRecordActions,\n useEditedContent,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types';\nimport {\n ArrowUpFromLine,\n Download,\n RotateCcw,\n Save,\n Trash,\n} from 'lucide-react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type FormHTMLAttributes,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Modal, ModalSize } from '../../../components/Modal';\nimport {\n useAuth,\n useDeleteDictionary,\n usePushDictionaries,\n useWriteDictionary,\n} from '../../../hooks';\nimport { cn } from '../../../utils/cn';\nimport { ButtonColor, ButtonVariant } from '../../Button';\nimport { Form } from '../../Form';\n\ntype DictionaryDetailsProps = {\n dictionary: Dictionary;\n mode: ('local' \| 'remote')[];\n onDelete?: () => void;\n onSave?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n dictionary,\n mode,\n className,\n onDelete,\n onSave,\n ...props\n}) => {\n const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n const { setLocaleDictionary } = useDictionariesRecordActions();\n const { mutate: deleteDictionary, isPending: isDeleting } =\n useDeleteDictionary();\n const { mutate: writeDictionary, isPending: isWriting } =\n useWriteDictionary();\n const { mutate: pushDictionaries, isPending: isPushing } =\n usePushDictionaries();\n const isLoading = isWriting \|\| isPushing;\n\n const { editedContent, restoreEditedContent } = useEditedContent();\n const {\n deleteButton,\n resetButton,\n saveButton,\n publishButton,\n downloadButton,\n confirmation,\n } = useIntlayer('save-dictionary-details');\n const { isAuthenticated } = useAuth();\n\n const editedDictionary = editedContent?.[dictionary.localId!];\n\n const isEdited =\n editedDictionary &&\n JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n const isDistantDictionary =\n typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n const handleSaveDictionaryConfirmation = async () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n writeDictionary(\n {\n dictionary: updatedDictionary,\n },\n {\n onSuccess: () => {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n },\n }\n );\n };\n\n const handlePushDictionary = () => {\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n pushDictionaries(\n { dictionaries: [updatedDictionary] },\n {\n onSuccess: (res) => {\n if (res) {\n setLocaleDictionary(updatedDictionary);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n }\n },\n }\n );\n };\n\n const handleDeleteDictionary = () => {\n if (!(dictionary as unknown as DistantDictionary).id) return;\n\n deleteDictionary(\n {\n dictionaryId: (\n dictionary as unknown as DistantDictionary\n ).id.toString(),\n },\n {\n onSuccess: (res) => {\n if (res) {\n onDelete?.();\n }\n },\n }\n );\n };\n\n return (\n <>\n <Modal\n isOpen={isFormatAlertModalOpen}\n title={confirmation.title.value}\n size={ModalSize.MD}\n >\n <form className=\"size-full px-3\">\n <p className=\"py-4 text-neutral text-sm\">{confirmation.message}</p>\n\n <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n <Form.Button\n label={confirmation.cancelButton.label.value}\n disabled={!isEdited \|\| isLoading}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n variant={ButtonVariant.OUTLINE}\n onClick={() => setIsFormatAlertModalOpen(false)}\n >\n {confirmation.cancelButton.text}\n </Form.Button>\n <Form.Button\n label={confirmation.confirmButton.label.value}\n disabled={!isEdited \|\| isLoading}\n Icon={Save}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handleSaveDictionaryConfirmation}\n >\n {confirmation.confirmButton.text}\n </Form.Button>\n </div>\n </form>\n </Modal>\n <form\n className={cn('flex justify-end gap-2 max-md:flex-col', className)}\n {...props}\n >\n {mode.includes('remote') &&\n isDistantDictionary &&\n onDelete &&\n isAuthenticated && (\n <Form.Button\n label={deleteButton.label.value}\n Icon={Trash}\n color={ButtonColor.ERROR}\n variant={ButtonVariant.OUTLINE}\n className=\"max-md:w-full\"\n isLoading={isDeleting}\n onClick={handleDeleteDictionary}\n >\n {deleteButton.text}\n </Form.Button>\n )}\n {isEdited && (\n <Form.Button\n label={resetButton.label.value}\n disabled={!isEdited}\n Icon={RotateCcw}\n variant={ButtonVariant.OUTLINE}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n onClick={() => restoreEditedContent(dictionary.localId!)}\n >\n {resetButton.text}\n </Form.Button>\n )}\n {mode.includes('local') && (\n <Form.Button\n label={downloadButton.label.value}\n disabled={!isEdited \|\| isLoading}\n Icon={Download}\n color={ButtonColor.TEXT}\n variant={\n isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n }\n className=\"max-md:w-full\"\n isLoading={isWriting}\n onClick={() => setIsFormatAlertModalOpen(true)}\n >\n {downloadButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n <Form.Button\n label={publishButton.label.value}\n disabled={isLoading}\n Icon={ArrowUpFromLine}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {publishButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') &&\n isAuthenticated &&\n isDistantDictionary &&\n isEdited && (\n <Form.Button\n label={saveButton.label.value}\n disabled={!isEdited \|\| isLoading}\n Icon={Save}\n color=\"text\"\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {saveButton.text}\n </Form.Button>\n )}\n </form>\n </>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/IDE/CopyCode.mjs CHANGED Viewed

@@ -2,7 +2,8 @@
 import { CopyButton } from "../CopyButton/index.mjs";
-import { Popover, PopoverXAlign } from "../Popover/index.mjs";
+import { PopoverXAlign } from "../Popover/static.mjs";
+import { Popover } from "../Popover/dynamic.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";

package/dist/esm/components/IDE/CopyCode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyCode.mjs","names":["CopyCode: FC<CopyCodeProps>"],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAWA,MAAaA,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}
1	+ {"version":3,"file":"CopyCode.mjs","names":["CopyCode: FC<CopyCodeProps>"],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAaA,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}

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

@@ -1,5 +1,6 @@
+import { CodeBlock, CodeDefault } from "./CodeBlockClient.mjs";
 import { Code } from "./Code.mjs";
 import { FileList } from "./FileList.mjs";
 import { IDE } from "./IDE.mjs";
-export { Code, FileList, IDE };
+export { Code, CodeBlock, CodeDefault, FileList, IDE };

package/dist/esm/components/Input/Checkbox.mjs CHANGED Viewed

@@ -1,3 +1,4 @@
+import { cn } from "../../utils/cn.mjs";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -58,7 +59,7 @@ let CheckboxColor = /* @__PURE__ */ function(CheckboxColor$1) {
 	CheckboxColor$1["CUSTOM"] = "custom";
 	return CheckboxColor$1;
 }({});
-const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className,...props }) => /* @__PURE__ */ jsx("input", {
+const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName,...props }) => /* @__PURE__ */ jsx("input", {
 	type: "checkbox",
 	className: checkboxVariants({
 		variant,
@@ -73,7 +74,7 @@ const Checkbox = (props) => {
 	const { label, name, id } = props;
 	return label ? /* @__PURE__ */ jsxs("label", {
 		htmlFor: id ?? name,
-		className: "flex cursor-pointer items-center gap-x-4 font-medium text-sm",
+		className: cn("flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm", props.labelClassName),
 		children: [/* @__PURE__ */ jsx(Input, {
 			id: id ?? name,
 			...props

package/dist/esm/components/Input/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","names":["Input: FC<CheckboxProps>","Checkbox: FC<CheckboxProps>"],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n variants: {\n variant: {\n default: [\n 'pointer rounded border-2 bg-input-background text-input-text 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 'checked:border-checkbox-checked-border checked:bg-checkbox-checked',\n 'disabled:opacity-50',\n ],\n },\n size: {\n sm: 'size-4',\n md: 'size-5',\n lg: 'size-6',\n },\n color: {\n primary: 'accent-primary',\n secondary: 'accent-secondary',\n destructive: 'accent-destructive',\n neutral: 'accent-neutral',\n light: 'accent-light',\n text: 'accent-text',\n dark: 'accent-dark',\n error: 'accent-error',\n success: 'accent-success',\n custom: 'accent-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'primary',\n validationStyleEnabled: 'disabled',\n size: 'md',\n },\n});\n\nexport enum CheckboxSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum CheckboxColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n TEXT = 'text',\n DARK = 'dark',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n name: string;\n validationStyleEnabled?: boolean;\n label?: ReactNode;\n} & Omit<\n VariantProps<typeof checkboxVariants>,\n 'validationStyleEnabled' \| 'size' \| 'color'\n > & {\n size?: CheckboxSize \| `${CheckboxSize}`;\n color?: CheckboxColor \| `${CheckboxColor}`;\n };\n\nconst Input: FC<CheckboxProps> = ({\n validationStyleEnabled = false,\n label,\n size,\n color,\n name,\n variant,\n className,\n ...props\n}) => (\n <input\n type=\"checkbox\"\n className={checkboxVariants({\n variant,\n size,\n color,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n className,\n })}\n {...props}\n />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const { label, name, id } = props;\n\n return label ? (\n <label\n htmlFor={id ?? name}\n className~~=\"~~flex cursor-pointer items-center gap-x-4 font-medium text-sm\"\n >\n <Input id={id ?? name} {...props} />\n {label}\n </label>\n ) : (\n <Input id={id ?? name} {...props} />\n );\n};\n"],"mappings":"~~;;;;AAQA~~,MAAa,mBAAmB,IAAI,IAAI;CACtC,UAAU;EACR,SAAS,EACP,SAAS;GACP;GACA;GACA;GACA;GACD,EACF;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,QAAQ;GACT;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;EACP;CACF,CAAC;AAEF,IAAY,wDAAL;AACL;AACA;AACA;;;AAGF,IAAY,0DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;~~AAkBF~~,MAAMA,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,~~UACA~~,GAAG,YAEH,oBAAC;CACC,MAAK;CACL,WAAW,iBAAiB;EAC1B;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC;CACF,GAAI;EACJ;AAGJ,MAAaC,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;AAE5B,QAAO,QACL,qBAAC;EACC,SAAS,MAAM;EACf,~~WAAU~~;~~aAEV~~,oBAAC;GAAM,IAAI,MAAM;GAAM,GAAI;IAAS,EACnC;GACK,GAER,oBAAC;EAAM,IAAI,MAAM;EAAM,GAAI;GAAS"}
1	+ {"version":3,"file":"Checkbox.mjs","names":["Input: FC<CheckboxProps>","Checkbox: FC<CheckboxProps>"],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n DetailedHTMLProps,\n FC,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const checkboxVariants = cva('', {\n variants: {\n variant: {\n default: [\n 'pointer rounded border-2 bg-input-background text-input-text 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 'checked:border-checkbox-checked-border checked:bg-checkbox-checked',\n 'disabled:opacity-50',\n ],\n },\n size: {\n sm: 'size-4',\n md: 'size-5',\n lg: 'size-6',\n },\n color: {\n primary: 'accent-primary',\n secondary: 'accent-secondary',\n destructive: 'accent-destructive',\n neutral: 'accent-neutral',\n light: 'accent-light',\n text: 'accent-text',\n dark: 'accent-dark',\n error: 'accent-error',\n success: 'accent-success',\n custom: 'accent-custom',\n },\n validationStyleEnabled: {\n disabled: '',\n enabled: 'valid:border-success invalid:border-error',\n },\n },\n defaultVariants: {\n variant: 'default',\n color: 'primary',\n validationStyleEnabled: 'disabled',\n size: 'md',\n },\n});\n\nexport enum CheckboxSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport enum CheckboxColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n TEXT = 'text',\n DARK = 'dark',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n 'size'\n> & {\n name: string;\n validationStyleEnabled?: boolean;\n label?: ReactNode;\n} & Omit<\n VariantProps<typeof checkboxVariants>,\n 'validationStyleEnabled' \| 'size' \| 'color'\n > & {\n size?: CheckboxSize \| `${CheckboxSize}`;\n color?: CheckboxColor \| `${CheckboxColor}`;\n labelClassName?: string;\n };\n\nconst Input: FC<CheckboxProps> = ({\n validationStyleEnabled = false,\n label,\n size,\n color,\n name,\n variant,\n className,\n labelClassName,\n ...props\n}) => (\n <input\n type=\"checkbox\"\n className={checkboxVariants({\n variant,\n size,\n color,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n className,\n })}\n {...props}\n />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const { label, name, id } = props;\n\n return label ? (\n <label\n htmlFor={id ?? name}\n className={cn(\n 'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n props.labelClassName\n )}\n >\n <Input id={id ?? name} {...props} />\n {label}\n </label>\n ) : (\n <Input id={id ?? name} {...props} />\n );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAAI,IAAI;CACtC,UAAU;EACR,SAAS,EACP,SAAS;GACP;GACA;GACA;GACA;GACD,EACF;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,QAAQ;GACT;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;EACP;CACF,CAAC;AAEF,IAAY,wDAAL;AACL;AACA;AACA;;;AAGF,IAAY,0DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAmBF,MAAMA,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,eACA,GAAG,YAEH,oBAAC;CACC,MAAK;CACL,WAAW,iBAAiB;EAC1B;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC;CACF,GAAI;EACJ;AAGJ,MAAaC,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;AAE5B,QAAO,QACL,qBAAC;EACC,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,eACP;aAED,oBAAC;GAAM,IAAI,MAAM;GAAM,GAAI;IAAS,EACnC;GACK,GAER,oBAAC;EAAM,IAAI,MAAM;EAAM,GAAI;GAAS"}

package/dist/esm/components/MarkDownRender/processor.mjs CHANGED Viewed

@@ -3,6 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MarkDownRender/processor.tsx
 /**
+* it's a fork
+* [markdown-to-jsx v7.7.14](https://github.com/quantizor/markdown-to-jsx) from quantizor
+* [simple-markdown v0.2.2](https://github.com/Khan/simple-markdown) from Khan Academy.
+*/
+/**
 * Analogous to `node.type`. Please note that the values here may change at any time,
 * so do not hard code against the value directly.
 */