npm - @intlayer/design-system - Versions diffs - 7.5.13 → 7.6.0-canary.0 - Mend

@intlayer/design-system 7.5.13 → 7.6.0-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 (256) hide show

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditorInput.mjs","names":[~~"ContentEditorInput: FC<ContentEditorInputProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLInputElement>"~~],"sources":["../../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n type ChangeEventHandler,\n type FC,\n type ReactNode,\n useEffect,\n useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Input, type InputProps, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component /\nexport type ContentEditorInputProps = {\n /* The current content to display and edit /\n children: InputProps['value'];\n /* Callback function called when content is saved/validated /\n onContentChange: (content: InputProps['value']) => void;\n /* Whether the editor is disabled /\n disabled?: boolean;\n /* Optional validation function to check content validity /\n validate?: (content: InputProps['value']) => boolean;\n /* Additional buttons to display alongside edit actions /\n additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/\n ContentEditorInput Component\n \n An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n \n ## Features\n * - Inline Input Editing: Edit single-line content with immediate feedback\n * - Validation Support: Optional content validation with visual feedback\n * - Action Buttons: Built-in save/cancel with support for additional buttons\n * - Keyboard Shortcuts: Enter to save, Escape to cancel\n * - Accessibility: Full ARIA support and keyboard navigation\n * - State Management: Handles editing states and validation\n \n ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n \n @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n children,\n onContentChange,\n disabled,\n validate,\n additionalButtons,\n ...props\n}) => {\n const [newValue, setNewValue] = useState<InputProps['value']>(children);\n const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n const isEdited: boolean = newValue !== children;\n\n const handleCancel = () => {\n setNewValue(children);\n setResetIncrementor((prev) => prev + 1);\n };\n\n const handleValid = () => {\n onContentChange(newValue);\n };\n\n const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n setNewValue(e.currentTarget.value);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !disabled && isValid) {\n e.preventDefault();\n handleValid();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n handleCancel();\n }\n };\n\n useEffect(() => {\n setNewValue(children);\n // Force input to reset when children changes externally\n setResetIncrementor((prev) => prev + 1);\n }, [children]);\n\n const isValid = validate?.(newValue) ?? true;\n\n return (\n <div\n className=\"flex size-full flex-col items-center justify-between gap-2\"\n key={String(children)}\n role=\"group\"\n aria-label=\"Content editor input\"\n >\n <Input\n onChange={handleOnContentChange}\n onKeyDown={handleKeyDown}\n key={resetIncrementor}\n aria-label=\"Editable input value\"\n aria-describedby={\n isEdited \|\| additionalButtons\n ? 'content-editor-input-actions'\n : undefined\n }\n aria-invalid={!isValid}\n variant={InputVariant.INVISIBLE}\n className=\"size-full\"\n defaultValue={children}\n disabled={disabled}\n {...props}\n />\n {(isEdited \|\| additionalButtons) && (\n <div\n id=\"content-editor-input-actions\"\n className=\"flex w-full items-center justify-end gap-2\"\n role=\"group\"\n aria-label=\"Edit actions\"\n >\n {isEdited && (\n <>\n <Button\n Icon={Check}\n label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n size={ButtonSize.ICON_SM}\n className=\"cursor-pointer hover:scale-110\"\n disabled={disabled \|\| !isValid}\n onClick={handleValid}\n aria-describedby={!isValid ? 'validation-error' : undefined}\n />\n <Button\n Icon={X}\n label=\"Cancel changes\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"cursor-pointer hover:scale-110\"\n onClick={handleCancel}\n disabled={disabled}\n />\n </>\n )}\n {additionalButtons}\n </div>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,~~MAAaA~~,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,SAAS;CACvE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,~~MAAMC~~,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,~~MAAMC~~,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;KAZC,iBAaL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;KAClD,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAtDH,OAAO,SAAS,CAwDjB"}
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,SAAS;CACvE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;KAZC,iBAaL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;KAClD,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAtDH,OAAO,SAAS,CAwDjB"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentSelector.mjs","names":[~~"ContentSelector: FC<ContentSelectorProps>"~~],"sources":["../../../../src/components/ContentSelector/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\nimport { PressableSpan } from '../PressableSpan';\n\n/*\n Props for the ContentSelector component\n /\ntype ContentSelectorProps = {\n /\n The content to be displayed and made selectable\n * @example\n * ```tsx\n * <ContentSelector onSelect={() => startEditing()}>\n * <h1>Selectable Heading</h1>\n * </ContentSelector>\n * ```\n /\n children: ReactNode;\n\n /\n Callback function triggered when content is selected via long press or keyboard\n * @example\n * ```tsx\n * <ContentSelector\n * onSelect={() => setEditMode(true)}\n * onUnselect={() => setEditMode(false)}\n * >\n * Click content to edit\n * </ContentSelector>\n * ```\n /\n onSelect: () => void;\n\n /\n Optional callback function triggered when clicking outside the selected content\n * Used to deselect the content and exit edit/selection mode\n * @example\n * ```tsx\n * <ContentSelector\n * onSelect={() => enterEditMode()}\n * onUnselect={() => exitEditMode()}\n * >\n * Editable content with auto-deselect\n * </ContentSelector>\n * ```\n /\n onUnselect?: () => void;\n\n /\n External control for the selection state\n * When provided, overrides the internal selection state\n * @example\n * ```tsx\n * <ContentSelector\n * isSelecting={isInEditMode}\n * onSelect={() => {}}\n * >\n * Externally controlled content\n * </ContentSelector>\n * ```\n /\n isSelecting?: boolean;\n\n /\n Duration in milliseconds for long press detection\n * @default 400\n * @example\n * ```tsx\n * <ContentSelector\n * pressDuration={600}\n * onSelect={() => activateSlowSelection()}\n * >\n * Requires longer press\n * </ContentSelector>\n * ```\n /\n pressDuration?: number;\n\n /\n Additional CSS classes for styling the selectable content\n * @example\n * ```tsx\n * <ContentSelector\n * className=\"border-2 border-dashed border-blue-300\"\n * onSelect={() => {}}\n * >\n * Styled selectable content\n * </ContentSelector>\n * ```\n /\n className?: string;\n\n /\n ARIA label for accessibility\n * Provides context about what happens when the content is selected\n * @example\n * ```tsx\n * <ContentSelector\n * aria-label=\"Select to edit this content\"\n * onSelect={() => {}}\n * >\n * Content with accessibility context\n * </ContentSelector>\n * ```\n /\n 'aria-label'?: string;\n\n /\n ID of element providing additional description\n * @example\n * ```tsx\n * <ContentSelector\n * aria-describedby=\"help-text\"\n * onSelect={() => {}}\n * >\n * Content with help\n * </ContentSelector>\n * <div id=\"help-text\">Long press to edit</div>\n * ```\n /\n 'aria-describedby'?: string;\n};\n\n/\n ContentSelector - A higher-level wrapper around PressableSpan for content selection\n \n This component provides a semantic interface for making any content selectable through\n * long press gestures. It's specifically designed for content management interfaces\n * where users need to select text, images, or other elements to perform actions like\n * editing, moving, or applying operations.\n \n ## Key Features\n * - Content Selection: Makes any React content selectable via long press\n * - Visual Feedback: Inherits outline-based selection indicators from PressableSpan\n * - Accessibility: Full keyboard navigation and screen reader support\n * - Click Outside: Automatic deselection when clicking elsewhere\n * - External Control: Can be controlled externally for complex selection states\n \n ## Use Cases\n * - Content management systems with inline editing\n * - Text and media selection interfaces\n * - Interactive documentation with selectable sections\n * - Dashboard widgets with configurable content\n * - Form builders with selectable form elements\n \n ## Accessibility\n * - Inherits all accessibility features from PressableSpan\n * - Keyboard navigation with Tab, Enter, Space, and Escape\n * - Screen reader announcements for selection states\n * - Focus management and proper ARIA attributes\n \n @example\n * Basic content selection:\n * ```tsx\n * <ContentSelector onSelect={() => setIsEditing(true)}>\n * <p>This paragraph becomes selectable</p>\n * </ContentSelector>\n * ```\n \n @example\n * With deselection handling:\n * ```tsx\n * <ContentSelector\n * onSelect={() => setSelectedContent(contentId)}\n * onUnselect={() => setSelectedContent(null)}\n * >\n * <div className=\"content-block\">\n * <h2>Selectable Content Block</h2>\n * <p>Long press to select this entire block</p>\n * </div>\n * </ContentSelector>\n * ```\n \n @example\n * Controlled selection state:\n * ```tsx\n * <ContentSelector\n * isSelecting={selectedItems.includes(itemId)}\n * onSelect={() => selectItem(itemId)}\n * onUnselect={() => deselectItem(itemId)}\n * >\n * <ContentCard data={cardData} />\n * </ContentSelector>\n * ```\n */\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n children,\n onSelect,\n onUnselect,\n isSelecting,\n pressDuration,\n className,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedBy,\n}) => (\n <PressableSpan\n onPress={onSelect}\n onClickOutside={onUnselect}\n isSelecting={isSelecting}\n pressDuration={pressDuration}\n className={className}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n >\n {children}\n </PressableSpan>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LA,~~MAAaA~~,mBAA6C,EACxD,UACA,UACA,YACA,aACA,eACA,WACA,cAAc,WACd,oBAAoB,sBAEpB,oBAAC;CACC,SAAS;CACT,gBAAgB;CACH;CACE;CACJ;CACX,cAAY;CACZ,oBAAkB;CAEjB;EACa"}
1	+ {"version":3,"file":"ContentSelector.mjs","names":[],"sources":["../../../../src/components/ContentSelector/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\nimport { PressableSpan } from '../PressableSpan';\n\n/*\n Props for the ContentSelector component\n /\ntype ContentSelectorProps = {\n /\n The content to be displayed and made selectable\n * @example\n * ```tsx\n * <ContentSelector onSelect={() => startEditing()}>\n * <h1>Selectable Heading</h1>\n * </ContentSelector>\n * ```\n /\n children: ReactNode;\n\n /\n Callback function triggered when content is selected via long press or keyboard\n * @example\n * ```tsx\n * <ContentSelector\n * onSelect={() => setEditMode(true)}\n * onUnselect={() => setEditMode(false)}\n * >\n * Click content to edit\n * </ContentSelector>\n * ```\n /\n onSelect: () => void;\n\n /\n Optional callback function triggered when clicking outside the selected content\n * Used to deselect the content and exit edit/selection mode\n * @example\n * ```tsx\n * <ContentSelector\n * onSelect={() => enterEditMode()}\n * onUnselect={() => exitEditMode()}\n * >\n * Editable content with auto-deselect\n * </ContentSelector>\n * ```\n /\n onUnselect?: () => void;\n\n /\n External control for the selection state\n * When provided, overrides the internal selection state\n * @example\n * ```tsx\n * <ContentSelector\n * isSelecting={isInEditMode}\n * onSelect={() => {}}\n * >\n * Externally controlled content\n * </ContentSelector>\n * ```\n /\n isSelecting?: boolean;\n\n /\n Duration in milliseconds for long press detection\n * @default 400\n * @example\n * ```tsx\n * <ContentSelector\n * pressDuration={600}\n * onSelect={() => activateSlowSelection()}\n * >\n * Requires longer press\n * </ContentSelector>\n * ```\n /\n pressDuration?: number;\n\n /\n Additional CSS classes for styling the selectable content\n * @example\n * ```tsx\n * <ContentSelector\n * className=\"border-2 border-dashed border-blue-300\"\n * onSelect={() => {}}\n * >\n * Styled selectable content\n * </ContentSelector>\n * ```\n /\n className?: string;\n\n /\n ARIA label for accessibility\n * Provides context about what happens when the content is selected\n * @example\n * ```tsx\n * <ContentSelector\n * aria-label=\"Select to edit this content\"\n * onSelect={() => {}}\n * >\n * Content with accessibility context\n * </ContentSelector>\n * ```\n /\n 'aria-label'?: string;\n\n /\n ID of element providing additional description\n * @example\n * ```tsx\n * <ContentSelector\n * aria-describedby=\"help-text\"\n * onSelect={() => {}}\n * >\n * Content with help\n * </ContentSelector>\n * <div id=\"help-text\">Long press to edit</div>\n * ```\n /\n 'aria-describedby'?: string;\n};\n\n/\n ContentSelector - A higher-level wrapper around PressableSpan for content selection\n \n This component provides a semantic interface for making any content selectable through\n * long press gestures. It's specifically designed for content management interfaces\n * where users need to select text, images, or other elements to perform actions like\n * editing, moving, or applying operations.\n \n ## Key Features\n * - Content Selection: Makes any React content selectable via long press\n * - Visual Feedback: Inherits outline-based selection indicators from PressableSpan\n * - Accessibility: Full keyboard navigation and screen reader support\n * - Click Outside: Automatic deselection when clicking elsewhere\n * - External Control: Can be controlled externally for complex selection states\n \n ## Use Cases\n * - Content management systems with inline editing\n * - Text and media selection interfaces\n * - Interactive documentation with selectable sections\n * - Dashboard widgets with configurable content\n * - Form builders with selectable form elements\n \n ## Accessibility\n * - Inherits all accessibility features from PressableSpan\n * - Keyboard navigation with Tab, Enter, Space, and Escape\n * - Screen reader announcements for selection states\n * - Focus management and proper ARIA attributes\n \n @example\n * Basic content selection:\n * ```tsx\n * <ContentSelector onSelect={() => setIsEditing(true)}>\n * <p>This paragraph becomes selectable</p>\n * </ContentSelector>\n * ```\n \n @example\n * With deselection handling:\n * ```tsx\n * <ContentSelector\n * onSelect={() => setSelectedContent(contentId)}\n * onUnselect={() => setSelectedContent(null)}\n * >\n * <div className=\"content-block\">\n * <h2>Selectable Content Block</h2>\n * <p>Long press to select this entire block</p>\n * </div>\n * </ContentSelector>\n * ```\n \n @example\n * Controlled selection state:\n * ```tsx\n * <ContentSelector\n * isSelecting={selectedItems.includes(itemId)}\n * onSelect={() => selectItem(itemId)}\n * onUnselect={() => deselectItem(itemId)}\n * >\n * <ContentCard data={cardData} />\n * </ContentSelector>\n * ```\n */\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n children,\n onSelect,\n onUnselect,\n isSelecting,\n pressDuration,\n className,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedBy,\n}) => (\n <PressableSpan\n onPress={onSelect}\n onClickOutside={onUnselect}\n isSelecting={isSelecting}\n pressDuration={pressDuration}\n className={className}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n >\n {children}\n </PressableSpan>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LA,MAAa,mBAA6C,EACxD,UACA,UACA,YACA,aACA,eACA,WACA,cAAc,WACd,oBAAoB,sBAEpB,oBAAC;CACC,SAAS;CACT,gBAAgB;CACH;CACE;CACJ;CACX,cAAY;CACZ,oBAAkB;CAEjB;EACa"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DictionaryEditor.mjs","names":[~~"DictionaryEditor: FC<DictionaryEditorProps>"~~],"sources":["../../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEditedContent,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, Locale } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\n\ntype DictionaryEditorProps = {\n dictionary: Dictionary;\n locale: Locale;\n onDelete?: () => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n dictionary,\n ...props\n}) => {\n const { editedContent, addEditedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n\n return (\n <div className=\"flex flex-col gap-2\">\n <NodeWrapper\n {...props}\n keyPath={[]}\n dictionary={dictionary}\n key={JSON.stringify(\n (editedContent?.[dictionary.localId!] ?? dictionary).content\n )}\n editedContent={editedContent?.[dictionary.localId!]?.content}\n focusedKeyPath={focusedContent?.keyPath}\n section={dictionary.content}\n onContentChange={(content) => {\n addEditedContent(\n dictionary.localId!,\n content.newValue,\n content.keyPath\n );\n }}\n onFocusKeyPath={setFocusedContentKeyPath}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAgBA,~~MAAaA~~,oBAA+C,EAC1D,YACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,qBAAqB,kBAAkB;CAC9D,MAAM,EAAE,gBAAgB,6BACtB,4BAA4B;AAE9B,QACE,oBAAC;EAAI,WAAU;YACb,8BAAC;GACC,GAAI;GACJ,SAAS,EAAE;GACC;GACZ,KAAK,KAAK,WACP,gBAAgB,WAAW,YAAa,YAAY,QACtD;GACD,eAAe,gBAAgB,WAAW,UAAW;GACrD,gBAAgB,gBAAgB;GAChC,SAAS,WAAW;GACpB,kBAAkB,YAAY;AAC5B,qBACE,WAAW,SACX,QAAQ,UACR,QAAQ,QACT;;GAEH,gBAAgB;IAChB;GACE"}
1	+ {"version":3,"file":"DictionaryEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEditedContent,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, Locale } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\n\ntype DictionaryEditorProps = {\n dictionary: Dictionary;\n locale: Locale;\n onDelete?: () => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n dictionary,\n ...props\n}) => {\n const { editedContent, addEditedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n\n return (\n <div className=\"flex flex-col gap-2\">\n <NodeWrapper\n {...props}\n keyPath={[]}\n dictionary={dictionary}\n key={JSON.stringify(\n (editedContent?.[dictionary.localId!] ?? dictionary).content\n )}\n editedContent={editedContent?.[dictionary.localId!]?.content}\n focusedKeyPath={focusedContent?.keyPath}\n section={dictionary.content}\n onContentChange={(content) => {\n addEditedContent(\n dictionary.localId!,\n content.newValue,\n content.keyPath\n );\n }}\n onFocusKeyPath={setFocusedContentKeyPath}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAgBA,MAAa,oBAA+C,EAC1D,YACA,GAAG,YACC;CACJ,MAAM,EAAE,eAAe,qBAAqB,kBAAkB;CAC9D,MAAM,EAAE,gBAAgB,6BACtB,4BAA4B;AAE9B,QACE,oBAAC;EAAI,WAAU;YACb,8BAAC;GACC,GAAI;GACJ,SAAS,EAAE;GACC;GACZ,KAAK,KAAK,WACP,gBAAgB,WAAW,YAAa,YAAY,QACtD;GACD,eAAe,gBAAgB,WAAW,UAAW;GACrD,gBAAgB,gBAAgB;GAChC,SAAS,WAAW;GACpB,kBAAkB,YAAY;AAC5B,qBACE,WAAW,SACX,QAAQ,UACR,QAAQ,QACT;;GAEH,gBAAgB;IAChB;GACE"}

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

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

package/dist/esm/components/DictionaryEditor/NodeWrapper/ArrayWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArrayWrapper.mjs","names":[~~"ArrayWrapper: FC<ArrayWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/ArrayWrapper.tsx"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core';\nimport type { ContentNode } from '@intlayer/types';\nimport { type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype ArrayWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: ContentNode[];\n};\n\nexport const ArrayWrapper: FC<ArrayWrapperProps> = (props) => {\n const { keyPath, section, onFocusKeyPath, focusedKeyPath = [] } = props;\n\n return section.map((subSection, key) => {\n const newKeyPathEl: KeyPath = {\n key,\n type: NodeType.Array,\n };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n return (\n <ItemLayout\n level={keyPath.length}\n key={JSON.stringify(subSection)}\n title={`${key}`}\n description=\"\"\n isSelected={isSameKeyPath(newKeyPath, focusedKeyPath)}\n onClick={(e) => {\n e.stopPropagation();\n onFocusKeyPath(newKeyPath);\n }}\n >\n <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n </ItemLayout>\n );\n });\n};\n"],"mappings":";;;;;;;AAWA,~~MAAaA~~,gBAAuC,UAAU;CAC5D,MAAM,EAAE,SAAS,SAAS,gBAAgB,iBAAiB,EAAE,KAAK;AAElE,QAAO,QAAQ,KAAK,YAAY,QAAQ;EACtC,~~MAAMC~~,eAAwB;GAC5B;GACA,MAAM,SAAS;GAChB;EACD,~~MAAMC~~,aAAwB,CAAC,GAAG,SAAS,aAAa;AAExD,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO,GAAG;GACV,aAAY;GACZ,YAAY,cAAc,YAAY,eAAe;GACrD,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,mBAAe,WAAW;;aAG5B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS;KAAc;KAT/D,KAAK,UAAU,WAAW,CAUpB;GAEf"}
1	+ {"version":3,"file":"ArrayWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/ArrayWrapper.tsx"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core';\nimport type { ContentNode } from '@intlayer/types';\nimport { type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype ArrayWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: ContentNode[];\n};\n\nexport const ArrayWrapper: FC<ArrayWrapperProps> = (props) => {\n const { keyPath, section, onFocusKeyPath, focusedKeyPath = [] } = props;\n\n return section.map((subSection, key) => {\n const newKeyPathEl: KeyPath = {\n key,\n type: NodeType.Array,\n };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n return (\n <ItemLayout\n level={keyPath.length}\n key={JSON.stringify(subSection)}\n title={`${key}`}\n description=\"\"\n isSelected={isSameKeyPath(newKeyPath, focusedKeyPath)}\n onClick={(e) => {\n e.stopPropagation();\n onFocusKeyPath(newKeyPath);\n }}\n >\n <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n </ItemLayout>\n );\n });\n};\n"],"mappings":";;;;;;;AAWA,MAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,SAAS,SAAS,gBAAgB,iBAAiB,EAAE,KAAK;AAElE,QAAO,QAAQ,KAAK,YAAY,QAAQ;EACtC,MAAM,eAAwB;GAC5B;GACA,MAAM,SAAS;GAChB;EACD,MAAM,aAAwB,CAAC,GAAG,SAAS,aAAa;AAExD,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO,GAAG;GACV,aAAY;GACZ,YAAY,cAAc,YAAY,eAAe;GACrD,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,mBAAe,WAAW;;aAG5B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS;KAAc;KAT/D,KAAK,UAAU,WAAW,CAUpB;GAEf"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/ConditionWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConditionWrapper.mjs","names":[~~"ConditionWrapper: FC<ConditionWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/ConditionWrapper.tsx"],"sourcesContent":["import type { ConditionContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype ConditionWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: ConditionContent<ContentNode>;\n};\n\nexport const ConditionWrapper: FC<ConditionWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n {Object.keys(section)\n .filter((key) => !traceKeys.includes(key))\n .map((key) => {\n const newKeyPathEl: KeyPath = {\n type: NodeType.Condition,\n key,\n };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const subSection =\n section[NodeType.Condition][\n key as keyof (typeof section)[NodeType.Condition]\n ]!;\n\n return (\n <>\n <span className=\"flex items-center font-bold\">{key}</span>\n <NodeWrapper\n {...props}\n key={key}\n keyPath={newKeyPath}\n section={subSection}\n />\n </>\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;AASA,~~MAAaA~~,oBAA+C,UAAU;CACpE,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,oBAAC;EAAI,WAAU;YACZ,OAAO,KAAK,QAAQ,CAClB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;GACZ,~~MAAMC~~,eAAwB;IAC5B,MAAM,SAAS;IACf;IACD;GACD,~~MAAMC~~,aAAwB,CAAC,GAAG,SAAS,aAAa;GAExD,MAAM,aACJ,QAAQ,SAAS,WACf;AAGJ,UACE,8CACE,oBAAC;IAAK,WAAU;cAA+B;KAAW,EAC1D,8BAAC;IACC,GAAI;IACC;IACL,SAAS;IACT,SAAS;KACT,IACD;IAEL;GACA"}
1	+ {"version":3,"file":"ConditionWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/ConditionWrapper.tsx"],"sourcesContent":["import type { ConditionContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype ConditionWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: ConditionContent<ContentNode>;\n};\n\nexport const ConditionWrapper: FC<ConditionWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n {Object.keys(section)\n .filter((key) => !traceKeys.includes(key))\n .map((key) => {\n const newKeyPathEl: KeyPath = {\n type: NodeType.Condition,\n key,\n };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const subSection =\n section[NodeType.Condition][\n key as keyof (typeof section)[NodeType.Condition]\n ]!;\n\n return (\n <>\n <span className=\"flex items-center font-bold\">{key}</span>\n <NodeWrapper\n {...props}\n key={key}\n keyPath={newKeyPath}\n section={subSection}\n />\n </>\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;AASA,MAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,oBAAC;EAAI,WAAU;YACZ,OAAO,KAAK,QAAQ,CAClB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;GACZ,MAAM,eAAwB;IAC5B,MAAM,SAAS;IACf;IACD;GACD,MAAM,aAAwB,CAAC,GAAG,SAAS,aAAa;GAExD,MAAM,aACJ,QAAQ,SAAS,WACf;AAGJ,UACE,8CACE,oBAAC;IAAK,WAAU;cAA+B;KAAW,EAC1D,8BAAC;IACC,GAAI;IACC;IACL,SAAS;IACT,SAAS;KACT,IACD;IAEL;GACA"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumerationWrapper.mjs","names":[~~"EnumerationWrapper: FC<EnumerationWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.tsx"],"sourcesContent":["import type { EnumerationContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype EnumerationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: EnumerationContent<ContentNode>;\n};\n\nexport const EnumerationWrapper: FC<EnumerationWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n {Object.keys(section)\n .filter((key) => !traceKeys.includes(key))\n .map((key) => {\n const newKeyPathEl: KeyPath = {\n type: NodeType.Enumeration,\n key,\n };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const subSection =\n section[NodeType.Enumeration][\n key as keyof (typeof section)[NodeType.Enumeration]\n ]!;\n\n return (\n <>\n <span className=\"flex items-center font-bold\">{key}</span>\n <NodeWrapper\n {...props}\n key={key}\n keyPath={newKeyPath}\n section={subSection}\n />\n </>\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;AASA,~~MAAaA~~,sBAAmD,UAAU;CACxE,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,oBAAC;EAAI,WAAU;YACZ,OAAO,KAAK,QAAQ,CAClB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;GACZ,~~MAAMC~~,eAAwB;IAC5B,MAAM,SAAS;IACf;IACD;GACD,~~MAAMC~~,aAAwB,CAAC,GAAG,SAAS,aAAa;GAExD,MAAM,aACJ,QAAQ,SAAS,aACf;AAGJ,UACE,8CACE,oBAAC;IAAK,WAAU;cAA+B;KAAW,EAC1D,8BAAC;IACC,GAAI;IACC;IACL,SAAS;IACT,SAAS;KACT,IACD;IAEL;GACA"}
1	+ {"version":3,"file":"EnumerationWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.tsx"],"sourcesContent":["import type { EnumerationContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype EnumerationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: EnumerationContent<ContentNode>;\n};\n\nexport const EnumerationWrapper: FC<EnumerationWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n {Object.keys(section)\n .filter((key) => !traceKeys.includes(key))\n .map((key) => {\n const newKeyPathEl: KeyPath = {\n type: NodeType.Enumeration,\n key,\n };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const subSection =\n section[NodeType.Enumeration][\n key as keyof (typeof section)[NodeType.Enumeration]\n ]!;\n\n return (\n <>\n <span className=\"flex items-center font-bold\">{key}</span>\n <NodeWrapper\n {...props}\n key={key}\n keyPath={newKeyPath}\n section={subSection}\n />\n </>\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;AASA,MAAa,sBAAmD,UAAU;CACxE,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,oBAAC;EAAI,WAAU;YACZ,OAAO,KAAK,QAAQ,CAClB,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,CACzC,KAAK,QAAQ;GACZ,MAAM,eAAwB;IAC5B,MAAM,SAAS;IACf;IACD;GACD,MAAM,aAAwB,CAAC,GAAG,SAAS,aAAa;GAExD,MAAM,aACJ,QAAQ,SAAS,aACf;AAGJ,UACE,8CACE,oBAAC;IAAK,WAAU;cAA+B;KAAW,EAC1D,8BAAC;IACC,GAAI;IACC;IACL,SAAS;IACT,SAAS;KACT,IACD;IAEL;GACA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileWrapper.mjs","names":["~~FileWrapper: FC<FileWrapperProps>","newKeyPath: KeyPath[]","~~content"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import { type FileContent, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport {\n type KeyPath,\n type LocalDictionaryId,\n NodeType,\n} from '@intlayer/types';\nimport type { FC } from 'react';\nimport { StringWrapper, type StringWrapperProps } from './StringWrapper';\n\ntype FileWrapperProps = Omit<StringWrapperProps, 'section'> & {\n section: FileContent;\n};\n\nexport const FileWrapper: FC<FileWrapperProps> = (props) => {\n const { keyPath, section } = props;\n const { addEditedContent } = useEditedContent();\n const editedContentValue = getContentNodeByKeyPath(\n props.editedContent,\n keyPath\n ) as FileContent \| undefined;\n\n const subSection = section[NodeType.File];\n const { content } = section;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.File,\n },\n ];\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <span className=\"text-neutral text-sm\">{subSection} </span>\n <StringWrapper\n {...props}\n keyPath={newKeyPath}\n section={content}\n editedContentValue={editedContentValue?.content}\n onContentChange={(content) => {\n addEditedContent(\n props.dictionary.localId as LocalDictionaryId,\n {\n ...section,\n content: content.newValue,\n } as FileContent,\n keyPath\n );\n }}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;;AAcA,~~MAAaA~~,eAAqC,UAAU;CAC1D,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,EAAE,qBAAqB,kBAAkB;CAC/C,MAAM,qBAAqB,wBACzB,MAAM,eACN,QACD;CAED,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,EAAE,YAAY;CAEpB,~~MAAMC~~,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,MAChB,CACF;AAED,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAK,WAAU;cAAwB,YAAW;IAAQ,EAC3D,oBAAC;GACC,GAAI;GACJ,SAAS;GACT,SAAS;GACT,oBAAoB,oBAAoB;GACxC,kBAAkB,cAAY;AAC5B,qBACE,MAAM,WAAW,SACjB;KACE,GAAG;KACH,~~SAASC~~,UAAQ;KAClB,EACD,QACD;;IAEH;GACE"}
1	+ {"version":3,"file":"FileWrapper.mjs","names":["content"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import { type FileContent, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport {\n type KeyPath,\n type LocalDictionaryId,\n NodeType,\n} from '@intlayer/types';\nimport type { FC } from 'react';\nimport { StringWrapper, type StringWrapperProps } from './StringWrapper';\n\ntype FileWrapperProps = Omit<StringWrapperProps, 'section'> & {\n section: FileContent;\n};\n\nexport const FileWrapper: FC<FileWrapperProps> = (props) => {\n const { keyPath, section } = props;\n const { addEditedContent } = useEditedContent();\n const editedContentValue = getContentNodeByKeyPath(\n props.editedContent,\n keyPath\n ) as FileContent \| undefined;\n\n const subSection = section[NodeType.File];\n const { content } = section;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.File,\n },\n ];\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <span className=\"text-neutral text-sm\">{subSection} </span>\n <StringWrapper\n {...props}\n keyPath={newKeyPath}\n section={content}\n editedContentValue={editedContentValue?.content}\n onContentChange={(content) => {\n addEditedContent(\n props.dictionary.localId as LocalDictionaryId,\n {\n ...section,\n content: content.newValue,\n } as FileContent,\n keyPath\n );\n }}\n />\n </div>\n );\n};\n"],"mappings":";;;;;;;AAcA,MAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,EAAE,qBAAqB,kBAAkB;CAC/C,MAAM,qBAAqB,wBACzB,MAAM,eACN,QACD;CAED,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,EAAE,YAAY;CAEpB,MAAM,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,MAChB,CACF;AAED,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAK,WAAU;cAAwB,YAAW;IAAQ,EAC3D,oBAAC;GACC,GAAI;GACJ,SAAS;GACT,SAAS;GACT,oBAAoB,oBAAoB;GACxC,kBAAkB,cAAY;AAC5B,qBACE,MAAM,WAAW,SACjB;KACE,GAAG;KACH,SAASA,UAAQ;KAClB,EACD,QACD;;IAEH;GACE"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/InsertionWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InsertionWrapper.mjs","names":[~~"InsertionWrapper: FC<InsertionWrapperProps>","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/InsertionWrapper.tsx"],"sourcesContent":["import type { InsertionContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype InsertionWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: InsertionContent<ContentNode>;\n};\n\nexport const InsertionWrapper: FC<InsertionWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Insertion,\n },\n ];\n\n const subSection = section[NodeType.Insertion];\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n </div>\n );\n};\n"],"mappings":";;;;;AASA,~~MAAaA~~,oBAA+C,UAAU;CACpE,MAAM,EAAE,SAAS,YAAY;CAE7B,~~MAAMC~~,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,WAChB,CACF;CAED,MAAM,aAAa,QAAQ,SAAS;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAY,GAAI;GAAO,SAAS;GAAY,SAAS;IAAc;GAChE"}
1	+ {"version":3,"file":"InsertionWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/InsertionWrapper.tsx"],"sourcesContent":["import type { InsertionContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype InsertionWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: InsertionContent<ContentNode>;\n};\n\nexport const InsertionWrapper: FC<InsertionWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Insertion,\n },\n ];\n\n const subSection = section[NodeType.Insertion];\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n </div>\n );\n};\n"],"mappings":";;;;;AASA,MAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAM,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,WAChB,CACF;CAED,MAAM,aAAa,QAAQ,SAAS;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAY,GAAI;GAAO,SAAS;GAAY,SAAS;IAAc;GAChE"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/MarkdownWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownWrapper.mjs","names":[~~"MarkdownWrapper: FC<MarkdownWrapperProps>","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/MarkdownWrapper.tsx"],"sourcesContent":["import type { MarkdownContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype MarkdownWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: MarkdownContent<ContentNode>;\n};\n\nexport const MarkdownWrapper: FC<MarkdownWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Markdown,\n },\n ];\n\n const subSection = section[NodeType.Markdown] as ContentNode;\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n </div>\n );\n};\n"],"mappings":";;;;;AASA,~~MAAaA~~,mBAA6C,UAAU;CAClE,MAAM,EAAE,SAAS,YAAY;CAE7B,~~MAAMC~~,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,UAChB,CACF;CAED,MAAM,aAAa,QAAQ,SAAS;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAY,GAAI;GAAO,SAAS;GAAY,SAAS;IAAc;GAChE"}
1	+ {"version":3,"file":"MarkdownWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/MarkdownWrapper.tsx"],"sourcesContent":["import type { MarkdownContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype MarkdownWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: MarkdownContent<ContentNode>;\n};\n\nexport const MarkdownWrapper: FC<MarkdownWrapperProps> = (props) => {\n const { keyPath, section } = props;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Markdown,\n },\n ];\n\n const subSection = section[NodeType.Markdown] as ContentNode;\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n </div>\n );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAA6C,UAAU;CAClE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAM,aAAwB,CAC5B,GAAG,SACH,EACE,MAAM,SAAS,UAChB,CACF;CAED,MAAM,aAAa,QAAQ,SAAS;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAY,GAAI;GAAO,SAAS;GAAY,SAAS;IAAc;GAChE"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NestedObjectWrapper.mjs","names":[~~"NestedObjectWrapper: FC<NestedObjectWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx"],"sourcesContent":["import { camelCaseToSentence } from '@intlayer/config/client';\nimport { isSameKeyPath } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport { type FC, memo, useMemo } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype NestedObjectWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: Record<string, ContentNode>;\n};\n\nexport const NestedObjectWrapper: FC<NestedObjectWrapperProps> = memo(\n (props) => {\n const { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;\n\n const sectionKeys = useMemo(\n () =>\n Object.keys(section ?? {}).filter((key) => !traceKeys.includes(key)),\n [section]\n );\n\n return sectionKeys.map((key) => {\n const newKeyPathEl: KeyPath = { key, type: NodeType.Object };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const isSelected = isSameKeyPath(newKeyPath, focusedKeyPath);\n\n return (\n <ItemLayout\n level={keyPath.length}\n key={key}\n title={camelCaseToSentence(key)}\n description=\"\"\n isSelected={isSelected}\n onClick={(e) => {\n e.stopPropagation();\n\n if (isSelected) {\n onFocusKeyPath([]);\n } else {\n onFocusKeyPath(newKeyPath);\n }\n }}\n >\n <NodeWrapper {...props} keyPath={newKeyPath} section={section[key]} />\n </ItemLayout>\n );\n });\n }\n);\n"],"mappings":";;;;;;;;;AAWA,~~MAAaA~~,sBAAoD,MAC9D,UAAU;CACT,MAAM,EAAE,SAAS,SAAS,iBAAiB,EAAE,EAAE,mBAAmB;AAQlE,QANoB,cAEhB,OAAO,KAAK,WAAW,EAAE,CAAC,CAAC,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,EACtE,CAAC,QAAQ,CACV,CAEkB,KAAK,QAAQ;EAC9B,~~MAAMC~~,eAAwB;GAAE;GAAK,MAAM,SAAS;GAAQ;EAC5D,~~MAAMC~~,aAAwB,CAAC,GAAG,SAAS,aAAa;EAExD,MAAM,aAAa,cAAc,YAAY,eAAe;AAE5D,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO,oBAAoB,IAAI;GAC/B,aAAY;GACA;GACZ,UAAU,MAAM;AACd,MAAE,iBAAiB;AAEnB,QAAI,WACF,gBAAe,EAAE,CAAC;QAElB,gBAAe,WAAW;;aAI9B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS,QAAQ;KAAQ;KAdjE,IAeM;GAEf;EAEL"}
1	+ {"version":3,"file":"NestedObjectWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx"],"sourcesContent":["import { camelCaseToSentence } from '@intlayer/config/client';\nimport { isSameKeyPath } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport { type FC, memo, useMemo } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps, traceKeys } from './index';\n\ntype NestedObjectWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: Record<string, ContentNode>;\n};\n\nexport const NestedObjectWrapper: FC<NestedObjectWrapperProps> = memo(\n (props) => {\n const { keyPath, section, focusedKeyPath = [], onFocusKeyPath } = props;\n\n const sectionKeys = useMemo(\n () =>\n Object.keys(section ?? {}).filter((key) => !traceKeys.includes(key)),\n [section]\n );\n\n return sectionKeys.map((key) => {\n const newKeyPathEl: KeyPath = { key, type: NodeType.Object };\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const isSelected = isSameKeyPath(newKeyPath, focusedKeyPath);\n\n return (\n <ItemLayout\n level={keyPath.length}\n key={key}\n title={camelCaseToSentence(key)}\n description=\"\"\n isSelected={isSelected}\n onClick={(e) => {\n e.stopPropagation();\n\n if (isSelected) {\n onFocusKeyPath([]);\n } else {\n onFocusKeyPath(newKeyPath);\n }\n }}\n >\n <NodeWrapper {...props} keyPath={newKeyPath} section={section[key]} />\n </ItemLayout>\n );\n });\n }\n);\n"],"mappings":";;;;;;;;;AAWA,MAAa,sBAAoD,MAC9D,UAAU;CACT,MAAM,EAAE,SAAS,SAAS,iBAAiB,EAAE,EAAE,mBAAmB;AAQlE,QANoB,cAEhB,OAAO,KAAK,WAAW,EAAE,CAAC,CAAC,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAI,CAAC,EACtE,CAAC,QAAQ,CACV,CAEkB,KAAK,QAAQ;EAC9B,MAAM,eAAwB;GAAE;GAAK,MAAM,SAAS;GAAQ;EAC5D,MAAM,aAAwB,CAAC,GAAG,SAAS,aAAa;EAExD,MAAM,aAAa,cAAc,YAAY,eAAe;AAE5D,SACE,oBAAC;GACC,OAAO,QAAQ;GAEf,OAAO,oBAAoB,IAAI;GAC/B,aAAY;GACA;GACZ,UAAU,MAAM;AACd,MAAE,iBAAiB;AAEnB,QAAI,WACF,gBAAe,EAAE,CAAC;QAElB,gBAAe,WAAW;;aAI9B,oBAAC;IAAY,GAAI;IAAO,SAAS;IAAY,SAAS,QAAQ;KAAQ;KAdjE,IAeM;GAEf;EAEL"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StringWrapper.mjs","names":[~~"StringWrapper: FC<StringWrapperProps>"~~],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField';\nimport { getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport { cn } from '@utils/cn';\nimport type { FC } from 'react';\nimport type { NodeWrapperProps } from './index';\n\nexport type StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: string;\n editedContentValue?: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n keyPath,\n section,\n editedContent,\n editedContentValue: editedContentValueProp,\n onContentChange,\n onFocusKeyPath,\n renderSection,\n}) => {\n const currentLocale = useEditorLocale();\n const editedContentValue =\n editedContentValueProp ??\n getContentNodeByKeyPath(editedContent, keyPath, currentLocale);\n\n if (editedContentValue && typeof editedContentValue !== 'string') {\n return (\n <>\n Error loading section - Edited content Incoherence with the original\n content format\n </>\n );\n }\n\n const level = keyPath.length;\n\n const content = String(editedContentValue ?? section);\n\n return (\n <span\n role=\"button\"\n tabIndex={0}\n className={cn(\n 'w-full rounded-md p-2 text-left transition',\n 'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n level === 2 && 'hover:bg-card/30',\n level >= 3 && ''\n )}\n onClick={(e) => {\n e.stopPropagation();\n onFocusKeyPath(keyPath);\n }}\n >\n {typeof renderSection === 'function' ? (\n renderSection(content)\n ) : (\n <EditableFieldTextArea\n aria-label=\"Editable field\"\n defaultValue={content}\n onSave={(newValue) => onContentChange({ keyPath, newValue })}\n onCancel={() => null}\n />\n )}\n </span>\n );\n};\n"],"mappings":";;;;;;;AAYA,~~MAAaA~~,iBAAyC,EACpD,SACA,SACA,eACA,oBAAoB,wBACpB,iBACA,gBACA,oBACI;CACJ,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,qBACJ,0BACA,wBAAwB,eAAe,SAAS,cAAc;AAEhE,KAAI,sBAAsB,OAAO,uBAAuB,SACtD,QACE,0CAAE,wFAGC;CAIP,MAAM,QAAQ,QAAQ;CAEtB,MAAM,UAAU,OAAO,sBAAsB,QAAQ;AAErD,QACE,oBAAC;EACC,MAAK;EACL,UAAU;EACV,WAAW,GACT,8CACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,GACf;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,kBAAe,QAAQ;;YAGxB,OAAO,kBAAkB,aACxB,cAAc,QAAQ,GAEtB,oBAAC;GACC,cAAW;GACX,cAAc;GACd,SAAS,aAAa,gBAAgB;IAAE;IAAS;IAAU,CAAC;GAC5D,gBAAgB;IAChB;GAEC"}
1	+ {"version":3,"file":"StringWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField';\nimport { getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport { cn } from '@utils/cn';\nimport type { FC } from 'react';\nimport type { NodeWrapperProps } from './index';\n\nexport type StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: string;\n editedContentValue?: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n keyPath,\n section,\n editedContent,\n editedContentValue: editedContentValueProp,\n onContentChange,\n onFocusKeyPath,\n renderSection,\n}) => {\n const currentLocale = useEditorLocale();\n const editedContentValue =\n editedContentValueProp ??\n getContentNodeByKeyPath(editedContent, keyPath, currentLocale);\n\n if (editedContentValue && typeof editedContentValue !== 'string') {\n return (\n <>\n Error loading section - Edited content Incoherence with the original\n content format\n </>\n );\n }\n\n const level = keyPath.length;\n\n const content = String(editedContentValue ?? section);\n\n return (\n <span\n role=\"button\"\n tabIndex={0}\n className={cn(\n 'w-full rounded-md p-2 text-left transition',\n 'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n level === 2 && 'hover:bg-card/30',\n level >= 3 && ''\n )}\n onClick={(e) => {\n e.stopPropagation();\n onFocusKeyPath(keyPath);\n }}\n >\n {typeof renderSection === 'function' ? (\n renderSection(content)\n ) : (\n <EditableFieldTextArea\n aria-label=\"Editable field\"\n defaultValue={content}\n onSave={(newValue) => onContentChange({ keyPath, newValue })}\n onCancel={() => null}\n />\n )}\n </span>\n );\n};\n"],"mappings":";;;;;;;AAYA,MAAa,iBAAyC,EACpD,SACA,SACA,eACA,oBAAoB,wBACpB,iBACA,gBACA,oBACI;CACJ,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,qBACJ,0BACA,wBAAwB,eAAe,SAAS,cAAc;AAEhE,KAAI,sBAAsB,OAAO,uBAAuB,SACtD,QACE,0CAAE,wFAGC;CAIP,MAAM,QAAQ,QAAQ;CAEtB,MAAM,UAAU,OAAO,sBAAsB,QAAQ;AAErD,QACE,oBAAC;EACC,MAAK;EACL,UAAU;EACV,WAAW,GACT,8CACA,2DACA,UAAU,KAAK,oBACf,SAAS,KAAK,GACf;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,kBAAe,QAAQ;;YAGxB,OAAO,kBAAkB,aACxB,cAAc,QAAQ,GAEtB,oBAAC;GACC,cAAW;GACX,cAAc;GACd,SAAS,aAAa,gBAAgB;IAAE;IAAS;IAAU,CAAC;GAC5D,gBAAgB;IAChB;GAEC"}

package/dist/esm/components/DictionaryEditor/NodeWrapper/TranslationWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TranslationWrapper.mjs","names":[~~"TranslationWrapper: FC<TranslationWrapperProps>","newKeyPathEl: KeyPath","newKeyPath: KeyPath[~~]"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/TranslationWrapper.tsx"],"sourcesContent":["import type { TranslationContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype TranslationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: TranslationContent<ContentNode>;\n};\n\nexport const TranslationWrapper: FC<TranslationWrapperProps> = (props) => {\n const { keyPath, section, locale } = props;\n\n const newKeyPathEl: KeyPath = {\n type: NodeType.Translation,\n key: locale,\n };\n\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const subSection =\n section.translation[\n locale as unknown as keyof (typeof section)['translation']\n ]!;\n\n return <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />;\n};\n"],"mappings":";;;;;AASA,~~MAAaA~~,sBAAmD,UAAU;CACxE,MAAM,EAAE,SAAS,SAAS,WAAW;CAErC,~~MAAMC~~,eAAwB;EAC5B,MAAM,SAAS;EACf,KAAK;EACN;CAED,~~MAAMC~~,aAAwB,CAAC,GAAG,SAAS,aAAa;CAExD,MAAM,aACJ,QAAQ,YACN;AAGJ,QAAO,oBAAC;EAAY,GAAI;EAAO,SAAS;EAAY,SAAS;GAAc"}
1	+ {"version":3,"file":"TranslationWrapper.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/TranslationWrapper.tsx"],"sourcesContent":["import type { TranslationContent } from '@intlayer/core';\nimport { type ContentNode, type KeyPath, NodeType } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype TranslationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n section: TranslationContent<ContentNode>;\n};\n\nexport const TranslationWrapper: FC<TranslationWrapperProps> = (props) => {\n const { keyPath, section, locale } = props;\n\n const newKeyPathEl: KeyPath = {\n type: NodeType.Translation,\n key: locale,\n };\n\n const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n const subSection =\n section.translation[\n locale as unknown as keyof (typeof section)['translation']\n ]!;\n\n return <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />;\n};\n"],"mappings":";;;;;AASA,MAAa,sBAAmD,UAAU;CACxE,MAAM,EAAE,SAAS,SAAS,WAAW;CAErC,MAAM,eAAwB;EAC5B,MAAM,SAAS;EACf,KAAK;EACN;CAED,MAAM,aAAwB,CAAC,GAAG,SAAS,aAAa;CAExD,MAAM,aACJ,QAAQ,YACN;AAGJ,QAAO,oBAAC;EAAY,GAAI;EAAO,SAAS;EAAY,SAAS;GAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[~~"traceKeys: string[~~]","~~NodeWrapper: FC<NodeWrapperProps>"],"~~sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ConditionContent,\n type EnumerationContent,\n type FileContent,\n getContentNodeByKeyPath,\n getNodeType,\n type InsertionContent,\n type MarkdownContent,\n type TranslationContent,\n} from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport {\n type ContentNode,\n type Dictionary,\n type KeyPath,\n type Locale,\n NodeType,\n} from '@intlayer/types';\nimport { type FC, memo, type ReactNode, useMemo } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n keyPath: KeyPath[];\n dictionary: Dictionary;\n section: ContentNode;\n onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n locale: Locale;\n editedContent: ContentNode;\n focusedKeyPath: KeyPath[] \| undefined;\n onFocusKeyPath: (keyPath: KeyPath[]) => void;\n onClickEdit?: (keyPath: KeyPath[]) => void;\n renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = memo((props) => {\n const currentLocale = useEditorLocale();\n const section = useMemo(() => {\n const editedContentValue = getContentNodeByKeyPath(\n props.editedContent,\n props.keyPath,\n currentLocale\n );\n return editedContentValue ?? props.section;\n }, [props.editedContent, props.keyPath, props.section]);\n\n const nodeType = useMemo(() => getNodeType(section), [section]);\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return (\n <span className=\"text-neutral text-xs\">React node not editable</span>\n );\n }\n\n if (nodeType === NodeType.Nested) {\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n [Nested] Dictionary\n </div>\n );\n }\n\n if (nodeType === NodeType.Markdown) {\n return (\n <MarkdownWrapper\n {...props}\n section={section as MarkdownContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Translation) {\n return (\n <TranslationWrapper\n {...props}\n section={section as TranslationContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Enumeration) {\n return (\n <EnumerationWrapper\n {...props}\n section={section as EnumerationContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Condition) {\n return (\n <ConditionWrapper\n {...props}\n section={section as ConditionContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Insertion) {\n return (\n <InsertionWrapper\n {...props}\n section={section as InsertionContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Array) {\n return (\n <ArrayWrapper\n {...props}\n section={section as unknown as ContentNode[]}\n />\n );\n }\n\n if (nodeType === NodeType.File) {\n return <FileWrapper {...props} section={section as FileContent} />;\n }\n\n return (\n <NestedObjectWrapper\n {...props}\n section={section as unknown as Record<string, ContentNode>}\n />\n );\n }\n\n if (typeof section === 'string') {\n return <StringWrapper {...props} section={section} />;\n }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,~~MAAaA~~,YAAsB;CAAC;CAAY;CAAM;CAAW;AAejE,~~MAAaC~~,cAAoC,MAAM,UAAU;CAC/D,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,UAAU,cAAc;AAM5B,SAL2B,wBACzB,MAAM,eACN,MAAM,SACN,cACD,IAC4B,MAAM;IAClC;EAAC,MAAM;EAAe,MAAM;EAAS,MAAM;EAAQ,CAAC;CAEvD,MAAM,WAAW,cAAc,YAAY,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAE/D,KAAI,OAAO,YAAY,UAAU;AAC/B,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GAAK,WAAU;aAAuB;IAA8B;AAIzE,MAAI,aAAa,SAAS,OACxB,QACE,oBAAC;GAAI,WAAU;aAAuC;IAEhD;AAIV,MAAI,aAAa,SAAS,SACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,MACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,KACxB,QAAO,oBAAC;GAAY,GAAI;GAAgB;IAA0B;AAGpE,SACE,oBAAC;GACC,GAAI;GACK;IACT;;AAIN,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC;EAAc,GAAI;EAAgB;GAAW;EAEvD"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ConditionContent,\n type EnumerationContent,\n type FileContent,\n getContentNodeByKeyPath,\n getNodeType,\n type InsertionContent,\n type MarkdownContent,\n type TranslationContent,\n} from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport {\n type ContentNode,\n type Dictionary,\n type KeyPath,\n type Locale,\n NodeType,\n} from '@intlayer/types';\nimport { type FC, memo, type ReactNode, useMemo } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n keyPath: KeyPath[];\n dictionary: Dictionary;\n section: ContentNode;\n onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n locale: Locale;\n editedContent: ContentNode;\n focusedKeyPath: KeyPath[] \| undefined;\n onFocusKeyPath: (keyPath: KeyPath[]) => void;\n onClickEdit?: (keyPath: KeyPath[]) => void;\n renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = memo((props) => {\n const currentLocale = useEditorLocale();\n const section = useMemo(() => {\n const editedContentValue = getContentNodeByKeyPath(\n props.editedContent,\n props.keyPath,\n currentLocale\n );\n return editedContentValue ?? props.section;\n }, [props.editedContent, props.keyPath, props.section]);\n\n const nodeType = useMemo(() => getNodeType(section), [section]);\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return (\n <span className=\"text-neutral text-xs\">React node not editable</span>\n );\n }\n\n if (nodeType === NodeType.Nested) {\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n [Nested] Dictionary\n </div>\n );\n }\n\n if (nodeType === NodeType.Markdown) {\n return (\n <MarkdownWrapper\n {...props}\n section={section as MarkdownContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Translation) {\n return (\n <TranslationWrapper\n {...props}\n section={section as TranslationContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Enumeration) {\n return (\n <EnumerationWrapper\n {...props}\n section={section as EnumerationContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Condition) {\n return (\n <ConditionWrapper\n {...props}\n section={section as ConditionContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Insertion) {\n return (\n <InsertionWrapper\n {...props}\n section={section as InsertionContent<ContentNode>}\n />\n );\n }\n\n if (nodeType === NodeType.Array) {\n return (\n <ArrayWrapper\n {...props}\n section={section as unknown as ContentNode[]}\n />\n );\n }\n\n if (nodeType === NodeType.File) {\n return <FileWrapper {...props} section={section as FileContent} />;\n }\n\n return (\n <NestedObjectWrapper\n {...props}\n section={section as unknown as Record<string, ContentNode>}\n />\n );\n }\n\n if (typeof section === 'string') {\n return <StringWrapper {...props} section={section} />;\n }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAa,YAAsB;CAAC;CAAY;CAAM;CAAW;AAejE,MAAa,cAAoC,MAAM,UAAU;CAC/D,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,UAAU,cAAc;AAM5B,SAL2B,wBACzB,MAAM,eACN,MAAM,SACN,cACD,IAC4B,MAAM;IAClC;EAAC,MAAM;EAAe,MAAM;EAAS,MAAM;EAAQ,CAAC;CAEvD,MAAM,WAAW,cAAc,YAAY,QAAQ,EAAE,CAAC,QAAQ,CAAC;AAE/D,KAAI,OAAO,YAAY,UAAU;AAC/B,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GAAK,WAAU;aAAuB;IAA8B;AAIzE,MAAI,aAAa,SAAS,OACxB,QACE,oBAAC;GAAI,WAAU;aAAuC;IAEhD;AAIV,MAAI,aAAa,SAAS,SACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,MACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,KACxB,QAAO,oBAAC;GAAY,GAAI;GAAgB;IAA0B;AAGpE,SACE,oBAAC;GACC,GAAI;GACK;IACT;;AAIN,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC;EAAc,GAAI;EAAgB;GAAW;EAEvD"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditor.mjs","names":[~~"ContentEditor: FC<NodeEditorProps>"~~],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core';\nimport {\n useEditedContent,\n useEditorLocale,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types';\nimport { type FC, useEffect } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { TextEditorContainer } from './ContentEditorView/TextEditor';\nimport { getIsEditableSection } from './getIsEditableSection';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n dictionary,\n isDarkMode,\n}) => {\n const { content, key, localId } = dictionary;\n const { editedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n\n const focusedKeyPath = focusedContent?.keyPath;\n const section =\n typeof editedContent?.[localId as LocalDictionaryId]?.content ===\n 'undefined'\n ? content\n : editedContent?.[localId as LocalDictionaryId]?.content;\n\n const currentLocale = useEditorLocale();\n const focusedSection = getContentNodeByKeyPath(\n section,\n focusedKeyPath ?? [],\n currentLocale\n );\n const isEditableBaseSection = getIsEditableSection(section);\n const isEditableFocusedSection = getIsEditableSection(focusedSection);\n\n useEffect(() => {\n if (typeof focusedSection === 'undefined') {\n setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);\n }\n }, []);\n\n return (\n <div>\n <div className=\"mb-6 flex items-center justify-between gap-2\">\n <KeyPathBreadcrumb\n dictionaryKey={key}\n keyPath={focusedKeyPath ?? []}\n onClickKeyPath={setFocusedContentKeyPath}\n />\n <div className=\"flex items-center gap-2\">\n <LocaleSwitcherContent />\n </div>\n </div>\n <div className=\"flex flex-1 gap-2 overflow-visible max-md:flex-col\">\n {typeof section === 'object' &&\n section &&\n !isEditableBaseSection &&\n Object.keys(section).length > 0 && (\n <Container\n border\n background=\"none\"\n className=\"top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n roundedSize=\"xl\"\n transparency=\"sm\"\n >\n <NavigationViewNode\n keyPath={[]}\n section={section}\n dictionary={dictionary}\n />\n </Container>\n )}\n {(isEditableFocusedSection \|\| (focusedKeyPath ?? []).length > 0) && (\n <TextEditorContainer\n keyPath={focusedKeyPath ?? []}\n section={focusedSection}\n dictionary={dictionary}\n isDarkMode={isDarkMode}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,~~MAAaA~~,iBAAsC,EACjD,YACA,iBACI;CACJ,MAAM,EAAE,SAAS,KAAK,YAAY;CAClC,MAAM,EAAE,kBAAkB,kBAAkB;CAC5C,MAAM,EAAE,gBAAgB,6BACtB,4BAA4B;CAE9B,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,UACJ,OAAO,gBAAgB,UAA+B,YACtD,cACI,UACA,gBAAgB,UAA+B;CAErD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,iBAAiB,wBACrB,SACA,kBAAkB,EAAE,EACpB,cACD;CACD,MAAM,wBAAwB,qBAAqB,QAAQ;CAC3D,MAAM,2BAA2B,qBAAqB,eAAe;AAErE,iBAAgB;AACd,MAAI,OAAO,mBAAmB,YAC5B,0BAAyB,gBAAgB,SAAS,MAAM,GAAG,GAAG,IAAI,EAAE,CAAC;IAEtE,EAAE,CAAC;AAEN,QACE,qBAAC,oBACC,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,eAAe;GACf,SAAS,kBAAkB,EAAE;GAC7B,gBAAgB;IAChB,EACF,oBAAC;GAAI,WAAU;aACb,oBAAC,0BAAwB;IACrB;GACF,EACN,qBAAC;EAAI,WAAU;aACZ,OAAO,YAAY,YAClB,WACA,CAAC,yBACD,OAAO,KAAK,QAAQ,CAAC,SAAS,KAC5B,oBAAC;GACC;GACA,YAAW;GACX,WAAU;GACV,aAAY;GACZ,cAAa;aAEb,oBAAC;IACC,SAAS,EAAE;IACF;IACG;KACZ;IACQ,GAEd,6BAA6B,kBAAkB,EAAE,EAAE,SAAS,MAC5D,oBAAC;GACC,SAAS,kBAAkB,EAAE;GAC7B,SAAS;GACG;GACA;IACZ;GAEA,IACF"}
1	+ {"version":3,"file":"ContentEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core';\nimport {\n useEditedContent,\n useEditorLocale,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types';\nimport { type FC, useEffect } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { TextEditorContainer } from './ContentEditorView/TextEditor';\nimport { getIsEditableSection } from './getIsEditableSection';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n dictionary,\n isDarkMode,\n}) => {\n const { content, key, localId } = dictionary;\n const { editedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n\n const focusedKeyPath = focusedContent?.keyPath;\n const section =\n typeof editedContent?.[localId as LocalDictionaryId]?.content ===\n 'undefined'\n ? content\n : editedContent?.[localId as LocalDictionaryId]?.content;\n\n const currentLocale = useEditorLocale();\n const focusedSection = getContentNodeByKeyPath(\n section,\n focusedKeyPath ?? [],\n currentLocale\n );\n const isEditableBaseSection = getIsEditableSection(section);\n const isEditableFocusedSection = getIsEditableSection(focusedSection);\n\n useEffect(() => {\n if (typeof focusedSection === 'undefined') {\n setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);\n }\n }, []);\n\n return (\n <div>\n <div className=\"mb-6 flex items-center justify-between gap-2\">\n <KeyPathBreadcrumb\n dictionaryKey={key}\n keyPath={focusedKeyPath ?? []}\n onClickKeyPath={setFocusedContentKeyPath}\n />\n <div className=\"flex items-center gap-2\">\n <LocaleSwitcherContent />\n </div>\n </div>\n <div className=\"flex flex-1 gap-2 overflow-visible max-md:flex-col\">\n {typeof section === 'object' &&\n section &&\n !isEditableBaseSection &&\n Object.keys(section).length > 0 && (\n <Container\n border\n background=\"none\"\n className=\"top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n roundedSize=\"xl\"\n transparency=\"sm\"\n >\n <NavigationViewNode\n keyPath={[]}\n section={section}\n dictionary={dictionary}\n />\n </Container>\n )}\n {(isEditableFocusedSection \|\| (focusedKeyPath ?? []).length > 0) && (\n <TextEditorContainer\n keyPath={focusedKeyPath ?? []}\n section={focusedSection}\n dictionary={dictionary}\n isDarkMode={isDarkMode}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAa,iBAAsC,EACjD,YACA,iBACI;CACJ,MAAM,EAAE,SAAS,KAAK,YAAY;CAClC,MAAM,EAAE,kBAAkB,kBAAkB;CAC5C,MAAM,EAAE,gBAAgB,6BACtB,4BAA4B;CAE9B,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,UACJ,OAAO,gBAAgB,UAA+B,YACtD,cACI,UACA,gBAAgB,UAA+B;CAErD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,iBAAiB,wBACrB,SACA,kBAAkB,EAAE,EACpB,cACD;CACD,MAAM,wBAAwB,qBAAqB,QAAQ;CAC3D,MAAM,2BAA2B,qBAAqB,eAAe;AAErE,iBAAgB;AACd,MAAI,OAAO,mBAAmB,YAC5B,0BAAyB,gBAAgB,SAAS,MAAM,GAAG,GAAG,IAAI,EAAE,CAAC;IAEtE,EAAE,CAAC;AAEN,QACE,qBAAC,oBACC,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,eAAe;GACf,SAAS,kBAAkB,EAAE;GAC7B,gBAAgB;IAChB,EACF,oBAAC;GAAI,WAAU;aACb,oBAAC,0BAAwB;IACrB;GACF,EACN,qBAAC;EAAI,WAAU;aACZ,OAAO,YAAY,YAClB,WACA,CAAC,yBACD,OAAO,KAAK,QAAQ,CAAC,SAAS,KAC5B,oBAAC;GACC;GACA,YAAW;GACX,WAAU;GACV,aAAY;GACZ,cAAa;aAEb,oBAAC;IACC,SAAS,EAAE;IACF;IACG;KACZ;IACQ,GAEd,6BAA6B,kBAAkB,EAAE,EAAE,SAAS,MAC5D,oBAAC;GACC,SAAS,kBAAkB,EAAE;GAC7B,SAAS;GACG;GACA;IACZ;GAEA,IACF"}