npm - @intlayer/design-system - Versions diffs - 8.11.3 → 8.12.0 - Mend

@intlayer/design-system 8.11.3 → 8.12.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 (275) hide show

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

@@ -85,76 +85,6 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		class: "bg-transparent"
 	}]
 });
-/** Available rounded corner sizes for the container */
-let ContainerRoundedSize = /* @__PURE__ */ function(ContainerRoundedSize) {
-	ContainerRoundedSize["NONE"] = "none";
-	ContainerRoundedSize["SM"] = "sm";
-	ContainerRoundedSize["MD"] = "md";
-	ContainerRoundedSize["LG"] = "lg";
-	ContainerRoundedSize["XL"] = "xl";
-	ContainerRoundedSize["2xl"] = "2xl";
-	ContainerRoundedSize["3xl"] = "3xl";
-	ContainerRoundedSize["4xl"] = "4xl";
-	ContainerRoundedSize["5xl"] = "5xl";
-	ContainerRoundedSize["FULL"] = "full";
-	return ContainerRoundedSize;
-}({});
-/** Background transparency levels for the container */
-let ContainerTransparency = /* @__PURE__ */ function(ContainerTransparency) {
-	ContainerTransparency["NONE"] = "none";
-	ContainerTransparency["SM"] = "sm";
-	ContainerTransparency["MD"] = "md";
-	ContainerTransparency["LG"] = "lg";
-	ContainerTransparency["XL"] = "xl";
-	ContainerTransparency["FULL"] = "full";
-	return ContainerTransparency;
-}({});
-/** Padding sizes for container content */
-let ContainerPadding = /* @__PURE__ */ function(ContainerPadding) {
-	ContainerPadding["NONE"] = "none";
-	ContainerPadding["SM"] = "sm";
-	ContainerPadding["MD"] = "md";
-	ContainerPadding["LG"] = "lg";
-	ContainerPadding["XL"] = "xl";
-	return ContainerPadding;
-}({});
-/** Separator options for dividing container children */
-let ContainerSeparator = /* @__PURE__ */ function(ContainerSeparator) {
-	ContainerSeparator["WITHOUT"] = "without";
-	ContainerSeparator["X"] = "x";
-	ContainerSeparator["Y"] = "y";
-	ContainerSeparator["BOTH"] = "both";
-	return ContainerSeparator;
-}({});
-/** Border color options for the container */
-let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor) {
-	ContainerBorderColor["PRIMARY"] = "primary";
-	ContainerBorderColor["SECONDARY"] = "secondary";
-	ContainerBorderColor["NEUTRAL"] = "neutral";
-	ContainerBorderColor["CARD"] = "card";
-	ContainerBorderColor["TEXT"] = "text";
-	ContainerBorderColor["ERROR"] = "error";
-	ContainerBorderColor["WARNING"] = "warning";
-	ContainerBorderColor["SUCCESS"] = "success";
-	return ContainerBorderColor;
-}({});
-/** Background interaction states for the container */
-let ContainerBackground = /* @__PURE__ */ function(ContainerBackground) {
-	ContainerBackground["NONE"] = "none";
-	ContainerBackground["HOVERABLE"] = "hoverable";
-	ContainerBackground["WITH"] = "with";
-	return ContainerBackground;
-}({});
-/** Gap sizes between container children */
-let ContainerGap = /* @__PURE__ */ function(ContainerGap) {
-	ContainerGap["NONE"] = "none";
-	ContainerGap["SM"] = "sm";
-	ContainerGap["MD"] = "md";
-	ContainerGap["LG"] = "lg";
-	ContainerGap["XL"] = "xl";
-	ContainerGap["2xl"] = "2xl";
-	return ContainerGap;
-}({});
 /**
 * Container Component
 *
@@ -200,5 +130,5 @@ const Container = ({ children, roundedSize, padding, transparency, separator, cl
 });
 //#endregion
-export { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };
+export { Container, containerVariants };
 //# sourceMappingURL=index.mjs.map

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

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

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

@@ -1,7 +1,6 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { InputVariant } from "../Input/Input.mjs";
 import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
 import { useState } from "react";
 import { Check, X } from "lucide-react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { ~~InputVariant } from '../Input';\nimport {~~\n AutoSizedTextArea,\n type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component /\nexport type ContentEditorProps = {\n /* The current content to display and edit /\n children: string;\n /* Callback function called when content is saved/validated /\n onContentChange: (content: string) => void;\n /* Whether the editor is currently in editing mode /\n isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/\n ContentEditor Component\n \n An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n \n ## Features\n * - Inline Editing: Edit content directly in place with visual feedback\n * - Auto-sizing: Textarea automatically adjusts to content size\n * - Validation Controls: Check and X buttons appear when content is modified\n * - Keyboard Support: Full keyboard navigation and accessibility\n * - State Management: Handles editing states and content validation\n \n ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n \n @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\n */\nexport const ContentEditor: FC<ContentEditorProps> = ({\n children,\n onContentChange,\n isEditing,\n ...props\n}) => {\n const [newValue, setNewValue] = useState<string>(children);\n const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n const isEdited: boolean = newValue !== children;\n\n const handleCancel = () => {\n setNewValue(children);\n setResetIncrementor((prev) => prev + 1);\n };\n\n const handleValid = () => {\n onContentChange(newValue);\n };\n\n const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n setNewValue(e.target.value ?? '');\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault();\n handleValid();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n handleCancel();\n }\n };\n\n return (\n <div\n className=\"flex flex-row items-center justify-between gap-2\"\n role=\"group\"\n aria-label=\"Content editor\"\n >\n <AutoSizedTextArea\n className={cn(\n 'break-word m-3 inline w-full bg-transparent outline-hidden',\n isEditing ? 'cursor-text' : 'cursor-pointer'\n )}\n onChange={handleOnContentChange}\n onKeyDown={handleKeyDown}\n key={resetIncrementor}\n variant~~={InputVariant.INVISIBLE}~~\n defaultValue={children}\n aria-label=\"Editable content\"\n aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n {...props}\n />\n {isEdited && (\n <div\n id=\"content-editor-actions\"\n className=\"flex flex-row items-center justify-between gap-2\"\n role=\"group\"\n aria-label=\"Edit actions\"\n >\n <Check\n className=\"cursor-pointer text-green-600 hover:scale-110\"\n size={16}\n onClick={handleValid}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes (Ctrl+Enter)\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n handleValid();\n }\n }}\n />\n <X\n className=\"cursor-pointer text-red-600 hover:scale-110\"\n size={16}\n onClick={handleCancel}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes (Escape)\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n handleCancel();\n }\n }}\n />\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA~~,MAAa,iBAAyC,EACpD,UACA,iBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,QAAQ;CACzD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;CAElC,MAAM,iBAAiB,MAAgD;EACrE,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;GACjD,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,OACE,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAW;YAHb,CAKE,oBAAC,mBAAD;GACE,WAAW,GACT,8DACA,YAAY,gBAAgB,gBAC9B;GACA,UAAU;GACV,WAAW;GAEX;~~GACA~~,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;EACL,GANM,gBAMN,GACA,YACC,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAME,oBAAC,OAAD;IACE,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;MACtC,EAAE,eAAe;MACjB,YAAY;KACd;IACF;GACD,IACD,oBAAC,GAAD;IACE,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;MACtC,EAAE,eAAe;MACjB,aAAa;KACf;IACF;GACD,EACE;IAEJ;;AAET"}
1	+ {"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport {\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=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,iBAAyC,EACpD,UACA,iBACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,QAAQ;CACzD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;CAElC,MAAM,iBAAiB,MAAgD;EACrE,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;GACjD,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,OACE,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAW;YAHb,CAKE,oBAAC,mBAAD;GACE,WAAW,GACT,8DACA,YAAY,gBAAgB,gBAC9B;GACA,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;EACL,GANM,gBAMN,GACA,YACC,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAME,oBAAC,OAAD;IACE,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;MACtC,EAAE,eAAe;MACjB,YAAY;KACd;IACF;GACD,IACD,oBAAC,GAAD;IACE,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;KAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;MACtC,EAAE,eAAe;MACjB,aAAa;KACf;IACF;GACD,EACE;IAEJ;;AAET"}

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

@@ -1,7 +1,7 @@
 'use client';
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { Input, InputVariant } from "../Input/Input.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Input } from "../Input/Input.mjs";
 import { useEffect, useState } from "react";
 import { Check, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditorInput.mjs","names":[],"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,MAAa,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,QAAQ;CACtE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAA+D,MAAM;EACzE,YAAY,EAAE,cAAc,KAAK;CACnC;CAEA,MAAM,iBAAiB,MAA6C;EAClE,IAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;GAC7C,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,gBAAgB;EACd,YAAY,QAAQ;EAEpB,qBAAqB,SAAS,OAAO,CAAC;CACxC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,WAAW,QAAQ,KAAK;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,OAAD;GACE,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf;~~GACA~~,WAAU;GACV,cAAc;GACJ;GACV,GAAI;EACL,GAbM,gBAaN,IACC,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD;~~IACA~~;~~IACA~~;~~IACA~~,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;GACnD,IACD,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN;~~IACA~~;~~IACA~~;~~IACA~~,WAAU;IACV,SAAS;IACC;GACX,EACD,MAEH,iBACE;IAEJ;IAxDE,OAAO,QAAQ,CAwDjB;AAET"}
1	+ {"version":3,"file":"ContentEditorInput.mjs","names":[],"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 } from '../Button';\nimport { Input, type InputProps } 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=\"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=\"hoverable\"\n color=\"text\"\n size=\"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=\"hoverable\"\n size=\"icon-sm\"\n color=\"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,MAAa,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,QAAQ;CACtE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAA+D,MAAM;EACzE,YAAY,EAAE,cAAc,KAAK;CACnC;CAEA,MAAM,iBAAiB,MAA6C;EAClE,IAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;GAC7C,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,gBAAgB;EACd,YAAY,QAAQ;EAEpB,qBAAqB,SAAS,OAAO,CAAC;CACxC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,WAAW,QAAQ,KAAK;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,OAAD;GACE,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAQ;GACR,WAAU;GACV,cAAc;GACJ;GACV,GAAI;EACL,GAbM,gBAaN,IACC,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAQ;IACR,OAAM;IACN,MAAK;IACL,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;GACnD,IACD,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN,SAAQ;IACR,MAAK;IACL,OAAM;IACN,WAAU;IACV,SAAS;IACC;GACX,EACD,MAEH,iBACE;IAEJ;IAxDE,OAAO,QAAQ,CAwDjB;AAET"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@api/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n type ChangeEventHandler,\n type FC,\n type ReactNode,\n useEffect,\n useState,\n} from 'react';\nimport { Button, ~~ButtonColor, ButtonSize, ButtonVariant~~ } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component /\nexport type ContentEditorTextAreaProps = {\n /* The current content to display and edit /\n children: string;\n /* Callback function called when content is saved/validated /\n onContentChange: (content: string) => void;\n /* Whether the editor is disabled /\n disabled?: boolean;\n /* Optional validation function to check content validity /\n validate?: (content: string) => boolean;\n /* Additional buttons to display alongside edit actions /\n additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/\n ContentEditorTextArea Component\n \n An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n \n ## Features\n * - Auto-sizing Textarea: Automatically adjusts height to content\n * - Autocomplete Integration: Smart text completion when user is authenticated\n * - Validation Support: Optional content validation with visual feedback\n * - Action Buttons: Built-in save/cancel with support for additional buttons\n * - Keyboard Shortcuts: Enter to save, Escape to cancel\n * - User Authentication: Autocomplete features activate based on auth status\n * - Accessibility: Full ARIA support and keyboard navigation\n \n ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n \n @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n children,\n onContentChange,\n disabled,\n validate,\n additionalButtons,\n ...props\n}) => {\n const { isAuthenticated } = useUser();\n const [newValue, setNewValue] = useState<string>(children);\n const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n const isEdited: boolean = newValue !== children;\n\n const handleCancel = () => {\n setNewValue(children);\n setResetIncrementor((prev) => prev + 1);\n };\n\n const handleValid = () => {\n onContentChange(newValue);\n };\n\n const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n setNewValue(e.currentTarget.value ?? '');\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && (e.metaKey \|\| e.ctrlKey) && !disabled && isValid) {\n e.preventDefault();\n handleValid();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n handleCancel();\n }\n };\n\n useEffect(() => {\n setNewValue(children);\n // Force textarea to reset when children changes externally\n setResetIncrementor((prev) => prev + 1);\n }, [children]);\n\n const isValid = validate?.(newValue) ?? true;\n\n return (\n <div\n className=\"flex size-full flex-col items-center justify-between gap-2\"\n key={children}\n role=\"group\"\n aria-label=\"Content editor textarea\"\n >\n <AutoCompleteTextarea\n onChange={handleOnContentChange}\n onKeyDown={handleKeyDown}\n key={resetIncrementor}\n variant=\"invisible\"\n className=\"size-full\"\n value={children}\n isActive={isAuthenticated}\n disabled={disabled}\n aria-label=\"Editable textarea content\"\n aria-describedby={\n isEdited \|\| additionalButtons\n ? 'content-editor-textarea-actions'\n : undefined\n }\n aria-invalid={!isValid}\n {...props}\n />\n {(isEdited \|\| additionalButtons) && (\n <div\n id=\"content-editor-textarea-actions\"\n className=\"flex w-full items-center justify-end gap-2\"\n role=\"group\"\n aria-label=\"Edit actions\"\n >\n {isEdited && (\n <>\n <Button\n Icon={Check}\n label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n variant~~={ButtonVariant.HOVERABLE}~~\n color~~={ButtonColor.TEXT}~~\n size~~={ButtonSize.ICON_SM}~~\n className=\"cursor-pointer hover:scale-110\"\n disabled={disabled \|\| !isValid}\n onClick={handleValid}\n aria-describedby={\n !isValid ? 'textarea-validation-error' : undefined\n }\n />\n <Button\n Icon={X}\n label=\"Cancel changes\"\n variant~~={ButtonVariant.HOVERABLE}~~\n size~~={ButtonSize.ICON_SM}~~\n color~~={ButtonColor.TEXT}~~\n className=\"cursor-pointer hover:scale-110\"\n onClick={handleCancel}\n disabled={disabled}\n />\n </>\n )}\n {additionalButtons}\n </div>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,QAAQ;CACpC,MAAM,CAAC,UAAU,eAAe,SAAiB,QAAQ;CACzD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;CAEzC,MAAM,iBAAiB,MAAgD;EACrE,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;GACzE,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,gBAAgB;EACd,YAAY,QAAQ;EAEpB,qBAAqB,SAAS,OAAO,CAAC;CACxC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,WAAW,QAAQ,KAAK;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,sBAAD;GACE,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;EACL,GAdM,gBAcN,IACC,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD;~~IACA~~;~~IACA~~;~~IACA~~,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;GAE5C,IACD,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN;~~IACA~~;~~IACA~~;~~IACA~~,WAAU;IACV,SAAS;IACC;GACX,EACD,MAEH,iBACE;IAEJ;IA3DE,QA2DF;AAET"}
1	+ {"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@api/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n type ChangeEventHandler,\n type FC,\n type ReactNode,\n useEffect,\n useState,\n} from 'react';\nimport { Button } 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=\"hoverable\"\n color=\"text\"\n size=\"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=\"hoverable\"\n size=\"icon-sm\"\n color=\"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,MAAa,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,QAAQ;CACpC,MAAM,CAAC,UAAU,eAAe,SAAiB,QAAQ;CACzD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;CAEzC,MAAM,iBAAiB,MAAgD;EACrE,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;GACzE,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,gBAAgB;EACd,YAAY,QAAQ;EAEpB,qBAAqB,SAAS,OAAO,CAAC;CACxC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,WAAW,QAAQ,KAAK;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,sBAAD;GACE,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;EACL,GAdM,gBAcN,IACC,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAQ;IACR,OAAM;IACN,MAAK;IACL,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;GAE5C,IACD,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN,SAAQ;IACR,MAAK;IACL,OAAM;IACN,WAAU;IACV,SAAS;IACC;GACX,EACD,MAEH,iBACE;IAEJ;IA3DE,QA2DF;AAET"}

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

@@ -1,5 +1,5 @@
+import { ContentEditor } from "./ContentEditor.mjs";
 import { ContentEditorInput } from "./ContentEditorInput.mjs";
 import { ContentEditorTextArea } from "./ContentEditorTextArea.mjs";
-import { ContentEditor } from "./ContentEditor.mjs";
 export { ContentEditor, ContentEditorInput, ContentEditorTextArea };

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

@@ -1,6 +1,6 @@
 'use client';
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Button } from "../Button/Button.mjs";
 import { useEffect, useState } from "react";
 import { CopyCheckIcon, CopyIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
@@ -54,9 +54,9 @@ import { useIntlayer } from "react-intlayer";
 * <CopyButton
 *   content="https://example.com/api/endpoint"
 *   label="Copy API endpoint"
-*   variant={ButtonVariant.OUTLINE}
-*   color={ButtonColor.PRIMARY}
-*   size={ButtonSize.ICON_MD}
+*   variant="outline"
+*   color="primary"
+*   size="icon-md"
 * />
 * ```
 *

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"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~~,MAAa,cAAmC,EAAE,SAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,EAAE,UAAU,YAAY,aAAa;CAE3C,MAAM,aAAa,YAAY;EAC7B,IAAI;GACF,SAAS,KAAK;GACd,MAAM,UAAU,UAAU,UAAU,OAAO;GAC3C,UAAU,IAAI;EAChB,SAAS,OAAO;GACd,QAAQ,MAAM,yBAAyB,KAAK;GAC5C,SAAS,IAAI;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;IAC7B,UAAU,KAAK;IACf,SAAS,KAAK;GAChB,GAAG,GAAI;GACP,aAAa,aAAa,KAAK;EACjC;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,qBAAqB;EACzB,IAAI,QAAQ,OAAO;EACnB,IAAI,OAAO,OAAO;EAClB,OAAO,MAAM,SAAS,MAAM;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT;~~EACA~~;~~EACA~~;~~EACA~~,UAAU;EACV,OAAO,aAAa;EACpB,GAAI;EACJ,OAAO,aAAa;EACpB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;CAEpD;AAEL"}
1	+ {"version":3,"file":"index.mjs","names":[],"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 { Button, type ButtonProps } 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=\"outline\"\n * color=\"primary\"\n * size=\"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=\"hoverable\"\n color=\"text\"\n size=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,MAAa,cAAmC,EAAE,SAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,EAAE,UAAU,YAAY,aAAa;CAE3C,MAAM,aAAa,YAAY;EAC7B,IAAI;GACF,SAAS,KAAK;GACd,MAAM,UAAU,UAAU,UAAU,OAAO;GAC3C,UAAU,IAAI;EAChB,SAAS,OAAO;GACd,QAAQ,MAAM,yBAAyB,KAAK;GAC5C,SAAS,IAAI;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;IAC7B,UAAU,KAAK;IACf,SAAS,KAAK;GAChB,GAAG,GAAI;GACP,aAAa,aAAa,KAAK;EACjC;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,qBAAqB;EACzB,IAAI,QAAQ,OAAO;EACnB,IAAI,OAAO,OAAO;EAClB,OAAO,MAAM,SAAS,MAAM;CAC9B;CAEA,OACE,oBAAC,QAAD;EACE,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAQ;EACR,OAAM;EACN,MAAK;EACL,UAAU;EACV,OAAO,aAAa;EACpB,GAAI;EACJ,OAAO,aAAa;EACpB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;CAEpD;AAEL"}

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

@@ -2,8 +2,8 @@
 import { NodeWrapper } from "./NodeWrapper/index.mjs";
 import { createElement } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/DictionaryEditor/DictionaryEditor.tsx
 const DictionaryEditor = ({ dictionary, ...props }) => {

package/dist/esm/components/DictionaryEditor/NodeWrapper/BooleanWrapper.mjs CHANGED Viewed

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils/cn.mjs";
 import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
 import { useEditorLocale } from "@intlayer/editor-react";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 //#region src/components/DictionaryEditor/NodeWrapper/BooleanWrapper.tsx

package/dist/esm/components/DictionaryEditor/NodeWrapper/FileWrapper.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { StringWrapper } from "./StringWrapper.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEditedContent } from "@intlayer/editor-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";

package/dist/esm/components/DictionaryEditor/NodeWrapper/NumberWrapper.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "../../../utils/cn.mjs";
 import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
 import { useEditorLocale } from "@intlayer/editor-react";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 //#region src/components/DictionaryEditor/NodeWrapper/NumberWrapper.tsx

package/dist/esm/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "../../../utils/cn.mjs";
 import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
 import { useEditorLocale } from "@intlayer/editor-react";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 //#region src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs CHANGED Viewed

@@ -14,8 +14,8 @@ import { NumberWrapper } from "./NumberWrapper.mjs";
 import { PluralWrapper } from "./PluralWrapper.mjs";
 import { TranslationWrapper } from "./TranslationWrapper.mjs";
 import { memo, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useEditorLocale } from "@intlayer/editor-react";
+import { jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";

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

@@ -7,8 +7,8 @@ import { getIsEditableSection } from "./getIsEditableSection.mjs";
 import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
 import { useDeferredValue, useEffect, useTransition } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 //#region src/components/DictionaryFieldEditor/ContentEditor.tsx

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

@@ -1,25 +1,24 @@
 'use client';
-import { Container } from "../../Container/index.mjs";
+import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { Loader } from "../../Loader/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
+import { Button } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
-import { InputVariant } from "../../Input/Input.mjs";
-import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/SwitchSelector.mjs";
-import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
-import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
+import { Container } from "../../Container/index.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
+import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
+import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { renameKey } from "./object.mjs";
 import { Label } from "../../Label/index.mjs";
 import { EnumKeyInput } from "../EnumKeyInput.mjs";
 import { SafeHtmlRenderer } from "./SafeHtmlRenderer.mjs";
 import { Fragment, Suspense, lazy, memo, useState } from "react";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { Plus, Trash, WandSparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getLocaleName } from "@intlayer/core/localization";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { camelCaseToSentence } from "@intlayer/config/client";