npm - @intlayer/design-system - Versions diffs - 7.5.9 → 7.5.11 - Mend

@intlayer/design-system 7.5.9 → 7.5.11

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

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationViewNode.mjs","names":["traceKeys: string[]","NavigationViewNode: FC<NodeWrapperProps>","keyPath","childKeyPath: KeyPath[]","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n isSameKeyPath,\n} from '@intlayer/core';\nimport {\n useEditedContentActions,\n useEditorLocale,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport {\n type KeyPath,\n type LocalDictionaryId,\n NodeType,\n} from '@intlayer/types';\nimport type { ContentNode, Dictionary } from 'intlayer';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Accordion } from '../../Accordion';\nimport {\n Button,\n ButtonColor,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n keyPath: KeyPath[];\n section: ContentNode;\n dictionary: Dictionary;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionary,\n}) => {\n const { locales } = configuration.internationalization;\n const currentLocale = useEditorLocale();\n const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } =\n useFocusUnmergedDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return <>React Node</>;\n }\n\n if (nodeType === NodeType.Translation) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {locales.map((translationKey) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Translation, key: translationKey },\n ];\n\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Enumeration \|\| nodeType === NodeType.Condition) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Array) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {(section as unknown as ContentNode[]).map((subSection, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Array, key: index },\n ];\n\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n isActive={getIsSelected(childKeyPath)}\n >\n Item {index}\n </Button>\n );\n }\n\n return (\n <Accordion\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n header={`Item ${index}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </Accordion>\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionary.localId as LocalDictionaryId,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n }\n\n const sectionArray = Object.keys(section);\n return (\n <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n {sectionArray.map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Object, key },\n ];\n\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n label={`${goToField.label.value} ${key}`}\n key={key}\n isActive={getIsSelected(childKeyPath)}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(key)}\n </Button>\n );\n }\n\n return (\n <Accordion\n key={key}\n label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </Accordion>\n );\n })}\n </div>\n );\n }\n\n return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"NavigationViewNode.mjs","names":["traceKeys: string[]","NavigationViewNode: FC<NodeWrapperProps>","keyPath","childKeyPath: KeyPath[]","newKeyPath: KeyPath[]"],"sources":["../../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { Accordion } from '@components/Accordion';\nimport {\n Button,\n ButtonColor,\n ButtonTextAlign,\n ButtonVariant,\n} from '@components/Button';\nimport configuration from '@intlayer/config/built';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n isSameKeyPath,\n} from '@intlayer/core';\nimport {\n useEditedContentActions,\n useEditorLocale,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport {\n type KeyPath,\n type LocalDictionaryId,\n NodeType,\n} from '@intlayer/types';\nimport type { ContentNode, Dictionary } from 'intlayer';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n keyPath: KeyPath[];\n section: ContentNode;\n dictionary: Dictionary;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionary,\n}) => {\n const { locales } = configuration.internationalization;\n const currentLocale = useEditorLocale();\n const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } =\n useFocusUnmergedDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return <>React Node</>;\n }\n\n if (nodeType === NodeType.Translation) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {locales.map((translationKey) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Translation, key: translationKey },\n ];\n\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Enumeration \|\| nodeType === NodeType.Condition) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Array) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {(section as unknown as ContentNode[]).map((subSection, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Array, key: index },\n ];\n\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n isActive={getIsSelected(childKeyPath)}\n >\n Item {index}\n </Button>\n );\n }\n\n return (\n <Accordion\n key={JSON.stringify(childKeyPath)}\n label={`${goToField.label.value} ${index}`}\n header={`Item ${index}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </Accordion>\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionary.localId as LocalDictionaryId,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n );\n }\n\n const sectionArray = Object.keys(section);\n return (\n <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n {sectionArray.map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Object, key },\n ];\n\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n const isEditableSubSection = getIsEditableSection(subSection);\n\n if (isEditableSubSection) {\n return (\n <Button\n label={`${goToField.label.value} ${key}`}\n key={key}\n isActive={getIsSelected(childKeyPath)}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(key)}\n </Button>\n );\n }\n\n return (\n <Accordion\n key={key}\n label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 flex w-full max-w-full\">\n <div className=\"flex-1 pl-10\">\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionary={dictionary}\n />\n </div>\n </div>\n </Accordion>\n );\n })}\n </div>\n );\n }\n\n return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"mappings":"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"}

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

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

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

@@ -160,7 +160,7 @@ const ObjectView = ({ section, keyPath, dictionaryLocalId }) => {
 					}],
 					dictionaryLocalId
 				})
-			}, key))
+			}, `${JSON.stringify(keyPath)}-object-${key}`))
 		}), /* @__PURE__ */ jsx(Button, {
 			label: addNodeButton.label.value,
 			variant: ButtonVariant.HOVERABLE,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StructureView.mjs","names":["NodeTypeView: FC<NodeTypeViewProps>","nodeType","NodeView: FC<NodeWrapperProps>","prevKeyPath: KeyPath[]","lastKeyPath: KeyPath","ObjectView: FC<ObjectViewProps>","StructureView: FC<StructureViewProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getDefaultNode,\n getNodeChildren,\n getNodeType,\n isSameKeyPath,\n} from '@intlayer/core';\nimport {\n useConfiguration,\n useEditedContentActions,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport {\n type KeyPath,\n type LocalDictionaryId,\n NodeType,\n type TypedNode,\n} from '@intlayer/types';\nimport type { ContentNode } from 'intlayer';\nimport { Plus, Trash } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../../Button';\nimport { Container } from '../../Container';\nimport { EditableFieldInput } from '../../EditableField';\nimport { InputVariant } from '../../Input';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\n\ntype NodeTypeViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n section,\n dictionaryLocalId,\n keyPath,\n onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n const locales = useConfiguration()?.internationalization.locales ?? [];\n const nodeType = getNodeType(section);\n const children = getNodeChildren(section);\n\n const onNodeTypeChange = (content?: ContentNode) => {\n const transformedContent = getDefaultNode(\n nodeType,\n locales,\n content\n ) as ContentNode;\n\n onNodeTypeChangeProp(transformedContent);\n };\n\n if (\n nodeType === NodeType.Translation \|\|\n nodeType === NodeType.Condition \|\|\n nodeType === NodeType.Gender \|\|\n nodeType === NodeType.Enumeration\n ) {\n const firstKey = Object.keys(\n (section as unknown as TypedNode)[nodeType as keyof typeof section]\n )[0];\n const childrenKeyPath = [\n ...keyPath,\n { type: nodeType, key: firstKey },\n ] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Array) {\n const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Object) {\n return (\n <>\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n <div className=\"mt-6 ml-10\">\n <StructureView\n keyPath={keyPath}\n section={section}\n dictionaryLocalId={dictionaryLocalId}\n />\n </div>\n </>\n );\n }\n\n return (\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n }\n />\n );\n};\n\ntype NodeWrapperProps = {\n sectionKey?: string;\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n sectionKey,\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n const handleRenameNodeKey = (keyName: string) => {\n renameEditedContent(dictionaryLocalId, keyName, keyPath);\n const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n const newKeyPath: KeyPath[] = [\n ...prevKeyPath,\n { ...lastKeyPath, key: keyName } as KeyPath,\n ];\n setFocusedContentKeyPath(newKeyPath);\n };\n\n return (\n <Container\n transparency=\"xl\"\n roundedSize=\"xl\"\n className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n border\n borderColor=\"text\"\n background=\"none\"\n aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n onClick={() => setFocusedContentKeyPath(keyPath)}\n >\n <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n {typeof sectionKey === 'string' && (\n <div className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-10\">\n <EditableFieldInput\n name=\"key\"\n aria-label=\"Key\"\n placeholder={titleInput.placeholder.value}\n defaultValue={sectionKey}\n onSave={(value) => handleRenameNodeKey(value)}\n variant={InputVariant.INVISIBLE}\n />\n <Button\n label={deleteButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"translate-x-2\"\n Icon={Trash}\n onClick={() => {\n addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n setFocusedContentKeyPath(parentKeyPath);\n }}\n />\n </div>\n\n <span className=\"ml-3 text-neutral text-sm\">\n ( {camelCaseToSentence(sectionKey)} )\n </span>\n </div>\n )}\n <NodeTypeView\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n section={section}\n onNodeTypeChange={(content) => {\n addEditedContent(dictionaryLocalId, content, keyPath);\n }}\n />\n </div>\n </Container>\n );\n};\n\ntype ObjectViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { addNodeButton } = useIntlayer('structure-view');\n const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n const { addEditedContent } = useEditedContentActions();\n\n if (!section \|\| typeof section !== 'object') {\n return <div>Not an object</div>;\n }\n\n return (\n <div className=\"flex flex-col gap-2 overflow-y-auto\">\n <ul className=\"mr-auto flex flex-col gap-4\">\n {Object.keys(section).map((key) => (\n <li key={key} className=\"flex w-full\">\n <NodeView\n sectionKey={key}\n section={section?.[key as keyof typeof section]}\n keyPath={[...keyPath, { type: NodeType.Object, key }]}\n dictionaryLocalId={dictionaryLocalId}\n />\n </li>\n ))}\n </ul>\n <Button\n label={addNodeButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.MD}\n color={ButtonColor.TEXT}\n Icon={Plus}\n className=\"flex-1\"\n onClick={() => {\n const newKey = 'newKey';\n const newKeyPath = [\n ...keyPath,\n { type: NodeType.Object, key: newKey },\n ] as KeyPath[];\n addEditedContent(dictionaryLocalId, '', newKeyPath);\n setFocusedContentKeyPath(newKeyPath);\n }}\n >\n {addNodeButton.text}\n </Button>\n </div>\n );\n};\n\ntype StructureViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n if (\n !section \|\|\n typeof section !== 'object' \|\|\n typeof section.nodeType === 'string'\n ) {\n return (\n <NodeView\n sectionKey={'content'}\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n }\n\n return (\n <ObjectView\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"StructureView.mjs","names":["NodeTypeView: FC<NodeTypeViewProps>","nodeType","NodeView: FC<NodeWrapperProps>","prevKeyPath: KeyPath[]","lastKeyPath: KeyPath","ObjectView: FC<ObjectViewProps>","StructureView: FC<StructureViewProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { EditableFieldInput } from '@components/EditableField';\nimport { InputVariant } from '@components/Input';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getDefaultNode,\n getNodeChildren,\n getNodeType,\n isSameKeyPath,\n} from '@intlayer/core';\nimport {\n useConfiguration,\n useEditedContentActions,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport {\n type KeyPath,\n type LocalDictionaryId,\n NodeType,\n type TypedNode,\n} from '@intlayer/types';\nimport type { ContentNode } from 'intlayer';\nimport { Plus, Trash } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\n\ntype NodeTypeViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n section,\n dictionaryLocalId,\n keyPath,\n onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n const locales = useConfiguration()?.internationalization.locales ?? [];\n const nodeType = getNodeType(section);\n const children = getNodeChildren(section);\n\n const onNodeTypeChange = (content?: ContentNode) => {\n const transformedContent = getDefaultNode(\n nodeType,\n locales,\n content\n ) as ContentNode;\n\n onNodeTypeChangeProp(transformedContent);\n };\n\n if (\n nodeType === NodeType.Translation \|\|\n nodeType === NodeType.Condition \|\|\n nodeType === NodeType.Gender \|\|\n nodeType === NodeType.Enumeration\n ) {\n const firstKey = Object.keys(\n (section as unknown as TypedNode)[nodeType as keyof typeof section]\n )[0];\n const childrenKeyPath = [\n ...keyPath,\n { type: nodeType, key: firstKey },\n ] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Array) {\n const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Object) {\n return (\n <>\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n <div className=\"mt-6 ml-10\">\n <StructureView\n keyPath={keyPath}\n section={section}\n dictionaryLocalId={dictionaryLocalId}\n />\n </div>\n </>\n );\n }\n\n return (\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n }\n />\n );\n};\n\ntype NodeWrapperProps = {\n sectionKey?: string;\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n sectionKey,\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n const handleRenameNodeKey = (keyName: string) => {\n renameEditedContent(dictionaryLocalId, keyName, keyPath);\n const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n const newKeyPath: KeyPath[] = [\n ...prevKeyPath,\n { ...lastKeyPath, key: keyName } as KeyPath,\n ];\n setFocusedContentKeyPath(newKeyPath);\n };\n\n return (\n <Container\n transparency=\"xl\"\n roundedSize=\"xl\"\n className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n border\n borderColor=\"text\"\n background=\"none\"\n aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n onClick={() => setFocusedContentKeyPath(keyPath)}\n >\n <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n {typeof sectionKey === 'string' && (\n <div className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-10\">\n <EditableFieldInput\n name=\"key\"\n aria-label=\"Key\"\n placeholder={titleInput.placeholder.value}\n defaultValue={sectionKey}\n onSave={(value) => handleRenameNodeKey(value)}\n variant={InputVariant.INVISIBLE}\n />\n <Button\n label={deleteButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"translate-x-2\"\n Icon={Trash}\n onClick={() => {\n addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n setFocusedContentKeyPath(parentKeyPath);\n }}\n />\n </div>\n\n <span className=\"ml-3 text-neutral text-sm\">\n ( {camelCaseToSentence(sectionKey)} )\n </span>\n </div>\n )}\n <NodeTypeView\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n section={section}\n onNodeTypeChange={(content) => {\n addEditedContent(dictionaryLocalId, content, keyPath);\n }}\n />\n </div>\n </Container>\n );\n};\n\ntype ObjectViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { addNodeButton } = useIntlayer('structure-view');\n const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n const { addEditedContent } = useEditedContentActions();\n\n if (!section \|\| typeof section !== 'object') {\n return <div>Not an object</div>;\n }\n\n return (\n <div className=\"flex flex-col gap-2 overflow-y-auto\">\n <ul className=\"mr-auto flex flex-col gap-4\">\n {Object.keys(section).map((key) => (\n <li\n key={`${JSON.stringify(keyPath)}-object-${key}`}\n className=\"flex w-full\"\n >\n <NodeView\n sectionKey={key}\n section={section?.[key as keyof typeof section]}\n keyPath={[...keyPath, { type: NodeType.Object, key }]}\n dictionaryLocalId={dictionaryLocalId}\n />\n </li>\n ))}\n </ul>\n <Button\n label={addNodeButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.MD}\n color={ButtonColor.TEXT}\n Icon={Plus}\n className=\"flex-1\"\n onClick={() => {\n const newKey = 'newKey';\n const newKeyPath = [\n ...keyPath,\n { type: NodeType.Object, key: newKey },\n ] as KeyPath[];\n addEditedContent(dictionaryLocalId, '', newKeyPath);\n setFocusedContentKeyPath(newKeyPath);\n }}\n >\n {addNodeButton.text}\n </Button>\n </div>\n );\n};\n\ntype StructureViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n if (\n !section \|\|\n typeof section !== 'object' \|\|\n typeof section.nodeType === 'string'\n ) {\n return (\n <NodeView\n sectionKey={'content'}\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n }\n\n return (\n <ObjectView\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VersionSwitcher.mjs","names":["VersionSwitcher: FC<VersionSwitcherProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { ~~MoveVertical~~ } from '~~lucide-react~~';\nimport ~~type~~ { FC } from '~~react~~';\nimport { ~~useIntlayer~~ } from '~~react-intlayer~~';\nimport {~~\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n~~} from '~~../../Button~~';\nimport { ~~Container~~ } from '~~../../Container~~';\nimport { ~~DropDown,~~ ~~type PanelProps~~ } from '~~../../DropDown~~';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n const { switchTo, versionSwitcherLabel, versionListLabel } =\n useIntlayer('version-switcher');\n const { selectedVersion, versions, setSelectedVersion } =\n useVersionSwitcher();\n\n if (versions.length === 0) {\n return <></>;\n }\n\n return (\n <div\n className=\"rounded-xl border border-text text-text transition-colors\"\n aria-label={versionListLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n <MoveVertical className=\"w-5 self-center\" />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n className=\"right-0 left-auto\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"sm\"\n border\n roundedSize=\"2xl\"\n borderColor=\"text\"\n aria-label={versionSwitcherLabel.value}\n >\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {versions.reverse().map((version) => (\n <li className=\"px-1.5 py-1\" key={version}>\n <Button\n onClick={() => setSelectedVersion(version)}\n label={`${switchTo} v${version}`}\n isActive={selectedVersion === version}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n size={ButtonSize.SM}\n >\n <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm\">\n {version}\n </div>\n </Button>\n </li>\n ))}\n </ol>\n </Container>\n </DropDown.Panel>\n </DropDown>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,sBAAsB;AAE5B,MAAaA,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,mBAAmB;CACjC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,oBAAoB;AAEtB,KAAI,SAAS,WAAW,EACtB,QAAO,iCAAK;AAGd,QACE,oBAAC;EACC,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC;GAAS,YAAY;cACpB,oBAAC,SAAS;IAAQ,YAAY;cAC5B,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAI,WAAU;gBAAQ,mBAAmB;OAAY,EACtD,oBAAC,gBAAa,WAAU,oBAAoB;MACxC;KACW,EAEnB,oBAAC,SAAS;IACR,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC;KACC,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC;MAAG,WAAU;gBACX,SAAS,SAAS,CAAC,KAAK,YACvB,oBAAC;OAAG,WAAU;iBACZ,oBAAC;QACC,eAAe,mBAAmB,QAAQ;QAC1C,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB;QACA,WAAW,gBAAgB;QAC3B,MAAM,WAAW;kBAEjB,oBAAC;SAAI,WAAU;mBACZ;UACG;SACC;SAdsB,QAe5B,CACL;OACC;MACK;KACG;IACR;GACP"}
1	+ {"version":3,"file":"VersionSwitcher.mjs","names":["VersionSwitcher: FC<VersionSwitcherProps>"],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n const { switchTo, versionSwitcherLabel, versionListLabel } =\n useIntlayer('version-switcher');\n const { selectedVersion, versions, setSelectedVersion } =\n useVersionSwitcher();\n\n if (versions.length === 0) {\n return <></>;\n }\n\n return (\n <div\n className=\"rounded-xl border border-text text-text transition-colors\"\n aria-label={versionListLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n <MoveVertical className=\"w-5 self-center\" />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n className=\"right-0 left-auto\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"sm\"\n border\n roundedSize=\"2xl\"\n borderColor=\"text\"\n aria-label={versionSwitcherLabel.value}\n >\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {versions.reverse().map((version) => (\n <li className=\"px-1.5 py-1\" key={version}>\n <Button\n onClick={() => setSelectedVersion(version)}\n label={`${switchTo} v${version}`}\n isActive={selectedVersion === version}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n size={ButtonSize.SM}\n >\n <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm\">\n {version}\n </div>\n </Button>\n </li>\n ))}\n </ol>\n </Container>\n </DropDown.Panel>\n </DropDown>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,sBAAsB;AAE5B,MAAaA,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,mBAAmB;CACjC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,oBAAoB;AAEtB,KAAI,SAAS,WAAW,EACtB,QAAO,iCAAK;AAGd,QACE,oBAAC;EACC,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC;GAAS,YAAY;cACpB,oBAAC,SAAS;IAAQ,YAAY;cAC5B,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAI,WAAU;gBAAQ,mBAAmB;OAAY,EACtD,oBAAC,gBAAa,WAAU,oBAAoB;MACxC;KACW,EAEnB,oBAAC,SAAS;IACR,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC;KACC,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC;MAAG,WAAU;gBACX,SAAS,SAAS,CAAC,KAAK,YACvB,oBAAC;OAAG,WAAU;iBACZ,oBAAC;QACC,eAAe,mBAAmB,QAAQ;QAC1C,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB;QACA,WAAW,gBAAgB;QAC3B,MAAM,WAAW;kBAEjB,oBAAC;SAAI,WAAU;mBACZ;UACG;SACC;SAdsB,QAe5B,CACL;OACC;MACK;KACG;IACR;GACP"}

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VersionSwitcherContext.mjs","names":["VersionSwitcherProvider: FC<\n PropsWithChildren<VersionSwitcherProviderProps>\n>"],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n} from 'react';\~~nimport { usePersistedStore } from '../../../hooks';\~~n\ntype VersionSwitcherContextProps = {\n versions: string[];\n selectedVersion: string \| null;\n setSelectedVersion: Dispatch<SetStateAction<string \| null>>;\n};\n\nconst VersionSwitcherContext = createContext<VersionSwitcherContextProps>({\n versions: [],\n selectedVersion: null,\n setSelectedVersion: () => {},\n});\n\nexport const useVersionSwitcher = () => useContext(VersionSwitcherContext);\n\ntype VersionSwitcherProviderProps = {\n versions: string[];\n defaultSelectedVersion?: string;\n};\n\nexport const VersionSwitcherProvider: FC<\n PropsWithChildren<VersionSwitcherProviderProps>\n> = ({ versions, defaultSelectedVersion, children }) => {\n const [selectedVersion, setSelectedVersion] = usePersistedStore<\n string \| null\n >('version-selector', defaultSelectedVersion);\n\n return (\n <VersionSwitcherContext\n value={{\n versions,\n selectedVersion,\n setSelectedVersion,\n }}\n >\n {children}\n </VersionSwitcherContext>\n );\n};\n"],"mappings":";;;;;;;AAkBA,MAAM,yBAAyB,cAA2C;CACxE,UAAU,EAAE;CACZ,iBAAiB;CACjB,0BAA0B;CAC3B,CAAC;AAEF,MAAa,2BAA2B,WAAW,uBAAuB;AAO1E,MAAaA,2BAER,EAAE,UAAU,wBAAwB,eAAe;CACtD,MAAM,CAAC,iBAAiB,sBAAsB,kBAE5C,oBAAoB,uBAAuB;AAE7C,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACD;EAEA;GACsB"}
1	+ {"version":3,"file":"VersionSwitcherContext.mjs","names":["VersionSwitcherProvider: FC<\n PropsWithChildren<VersionSwitcherProviderProps>\n>"],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n} from 'react';\n\ntype VersionSwitcherContextProps = {\n versions: string[];\n selectedVersion: string \| null;\n setSelectedVersion: Dispatch<SetStateAction<string \| null>>;\n};\n\nconst VersionSwitcherContext = createContext<VersionSwitcherContextProps>({\n versions: [],\n selectedVersion: null,\n setSelectedVersion: () => {},\n});\n\nexport const useVersionSwitcher = () => useContext(VersionSwitcherContext);\n\ntype VersionSwitcherProviderProps = {\n versions: string[];\n defaultSelectedVersion?: string;\n};\n\nexport const VersionSwitcherProvider: FC<\n PropsWithChildren<VersionSwitcherProviderProps>\n> = ({ versions, defaultSelectedVersion, children }) => {\n const [selectedVersion, setSelectedVersion] = usePersistedStore<\n string \| null\n >('version-selector', defaultSelectedVersion);\n\n return (\n <VersionSwitcherContext\n value={{\n versions,\n selectedVersion,\n setSelectedVersion,\n }}\n >\n {children}\n </VersionSwitcherContext>\n );\n};\n"],"mappings":";;;;;;;AAkBA,MAAM,yBAAyB,cAA2C;CACxE,UAAU,EAAE;CACZ,iBAAiB;CACjB,0BAA0B;CAC3B,CAAC;AAEF,MAAa,2BAA2B,WAAW,uBAAuB;AAO1E,MAAaA,2BAER,EAAE,UAAU,wBAAwB,eAAe;CACtD,MAAM,CAAC,iBAAiB,sBAAsB,kBAE5C,oBAAoB,uBAAuB;AAE7C,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACD;EAEA;GACsB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["DropDown: DropDownType","Trigger: FC<TriggerProps>","Panel: FC<PanelProps>"],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import ~~type~~ { ~~FC,~~ ~~HTMLAttributes~~ } from '~~react~~';\nimport { cn } from '~~../../utils/cn~~';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the DropDown component\n /\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n /\n Unique identifier that links the trigger and panel for accessibility.\n * This is used to generate proper ARIA attributes.\n * @example \"user-menu\"\n * @example \"language-selector\"\n /\n identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n Trigger: FC<TriggerProps>;\n Panel: FC<PanelProps>;\n};\n\n/\n DropDown Component\n \n A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n \n @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n * <DropDown.Trigger identifier=\"menu\">\n * Open Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Menu content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n * <DropDown.Trigger identifier=\"accessible-menu\">\n * Keyboard Accessible Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n * <div>Accessible content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n * <DropDown.Trigger identifier=\"controlled\">\n * Controlled Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n * <div>Controlled content</div>\n * </DropDown.Panel>\n * </DropDown>\n * ```\n \n @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n /\nexport const DropDown: DropDownType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/dropdown relative flex`, className)}\n aria-label={`DropDown ${identifier}`}\n id={`dropdown-container-${identifier}`}\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the DropDown.Trigger component\n /\nexport interface TriggerProps extends Partial<ButtonProps> {\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n}\n\n/\n DropDown.Trigger Component\n \n The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n \n @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n * <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n \n @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n \n @note Don't nest Button components inside the Trigger - it's already a button\n /\nconst Trigger: FC<TriggerProps> = ({\n children,\n identifier,\n className,\n label,\n ...props\n}) => (\n <Button\n className={cn([\n 'w-full cursor-pointer',\n 'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n className,\n ])}\n label={label ?? `Open panel ${identifier}`}\n aria-haspopup=\"true\"\n aria-controls={`dropdown-panel-${identifier}`}\n id={`dropdown-trigger-${identifier}`}\n onClick={(e) => {\n // Ensure focus behavior is consistent across all mobile browsers\n (e.currentTarget as HTMLButtonElement).focus();\n }}\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n);\n\n/\n Horizontal alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownAlign {\n /* Align panel to the start (left in LTR, right in RTL) of the trigger /\n START = 'start',\n /* Align panel to the end (right in LTR, left in RTL) of the trigger /\n END = 'end',\n}\n\n/\n Vertical alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownYAlign {\n /* Position panel below the trigger (default) /\n BELOW = 'below',\n /* Position panel above the trigger /\n ABOVE = 'above',\n}\n\n/\n Props for the DropDown.Panel component\n /\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /\n Whether the panel should be visible when the trigger is focused.\n * Enables keyboard accessibility for the dropdown.\n * @default false\n /\n isFocusable?: boolean;\n\n /\n Controls panel visibility explicitly.\n * - `true`: Panel is hidden\n * - `false`: Panel is visible\n * - `undefined`: Panel visibility controlled by hover/focus states\n * @default undefined\n /\n isHidden?: boolean;\n\n /\n Whether the panel should be visible when hovering over the trigger.\n * Provides quick access via mouse interaction.\n * @default false\n /\n isOverable?: boolean;\n\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n\n /\n Horizontal alignment of the panel relative to the trigger\n * @default DropDownAlign.START\n /\n align?: DropDownAlign \| `${DropDownAlign}`;\n\n /\n Vertical alignment of the panel relative to the trigger\n * @default DropDownYAlign.BELOW\n /\n yAlign?: DropDownYAlign \| `${DropDownYAlign}`;\n}\n\n/\n DropDown.Panel Component\n \n The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n \n @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Content appears on hover</div>\n * </DropDown.Panel>\n \n // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n * <div>Content appears on focus</div>\n * </DropDown.Panel>\n \n // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n * <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n \n // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n * <div>Right-aligned content</div>\n * </DropDown.Panel>\n \n // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign={DropDownYAlign.ABOVE} isOverable>\n * <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n \n @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n /\nconst Panel: FC<PanelProps> = ({\n children,\n isHidden = undefined,\n isOverable = false,\n isFocusable = false,\n align = DropDownAlign.START,\n yAlign = DropDownYAlign.BELOW,\n identifier,\n className,\n ...props\n}) => (\n <div\n className={cn(\n 'absolute z-100 min-w-full',\n / Horizontal positioning /\n align === DropDownAlign.START && 'left-0',\n align === DropDownAlign.END && 'right-0',\n / Vertical positioning */\n yAlign === DropDownYAlign.BELOW && 'top-[calc(100%+0.5rem)]',\n yAlign === DropDownYAlign.ABOVE && 'bottom-[calc(100%+0.5rem)]',\n className\n )}\n aria-hidden={isHidden}\n role=\"region\"\n aria-labelledby={`dropdown-trigger-${identifier}`}\n id={`dropdown-panel-${identifier}`}\n >\n <MaxHeightSmoother\n isHidden={isHidden}\n className={cn(\n 'overflow-x-visible',\n isHidden === false && 'invisible',\n isHidden === true && 'visible',\n isOverable &&\n 'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n isFocusable &&\n 'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n )}\n {...props}\n >\n {children}\n </MaxHeightSmoother>\n </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAaA,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,gCAAgC,UAAU;CACxD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;AAoCR,MAAMC,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG;EACZ;EACA;EACA;EACD,CAAC;CACF,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;AAEd,EAAC,EAAE,cAAoC,OAAO;;CAEhD,SAAQ;CACR,GAAI;CAEH;EACM;;;;AAMX,IAAY,0DAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,4DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FF,MAAMC,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,QAAQ,cAAc,OACtB,SAAS,eAAe,OACxB,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BAEA,UAAU,cAAc,SAAS,UACjC,UAAU,cAAc,OAAO,WAE/B,WAAW,eAAe,SAAS,2BACnC,WAAW,eAAe,SAAS,8BACnC,UACD;CACD,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC;EACW;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,kFACH;EACD,GAAI;EAEH;GACiB;EAChB;AAGR,SAAS,UAAU;AACnB,SAAS,QAAQ"}
1	+ {"version":3,"file":"index.mjs","names":["DropDown: DropDownType","Trigger: FC<TriggerProps>","Panel: FC<PanelProps>"],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the DropDown component\n /\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n /\n Unique identifier that links the trigger and panel for accessibility.\n * This is used to generate proper ARIA attributes.\n * @example \"user-menu\"\n * @example \"language-selector\"\n /\n identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n Trigger: FC<TriggerProps>;\n Panel: FC<PanelProps>;\n};\n\n/\n DropDown Component\n \n A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n \n @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n * <DropDown.Trigger identifier=\"menu\">\n * Open Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Menu content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n * <DropDown.Trigger identifier=\"accessible-menu\">\n * Keyboard Accessible Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n * <div>Accessible content</div>\n * </DropDown.Panel>\n * </DropDown>\n \n // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n * <DropDown.Trigger identifier=\"controlled\">\n * Controlled Menu\n * </DropDown.Trigger>\n * <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n * <div>Controlled content</div>\n * </DropDown.Panel>\n * </DropDown>\n * ```\n \n @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n /\nexport const DropDown: DropDownType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/dropdown relative flex`, className)}\n aria-label={`DropDown ${identifier}`}\n id={`dropdown-container-${identifier}`}\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the DropDown.Trigger component\n /\nexport interface TriggerProps extends Partial<ButtonProps> {\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n}\n\n/\n DropDown.Trigger Component\n \n The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n \n @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n * <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n \n @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n \n @note Don't nest Button components inside the Trigger - it's already a button\n /\nconst Trigger: FC<TriggerProps> = ({\n children,\n identifier,\n className,\n label,\n ...props\n}) => (\n <Button\n className={cn([\n 'w-full cursor-pointer',\n 'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n className,\n ])}\n label={label ?? `Open panel ${identifier}`}\n aria-haspopup=\"true\"\n aria-controls={`dropdown-panel-${identifier}`}\n id={`dropdown-trigger-${identifier}`}\n onClick={(e) => {\n // Ensure focus behavior is consistent across all mobile browsers\n (e.currentTarget as HTMLButtonElement).focus();\n }}\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n);\n\n/\n Horizontal alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownAlign {\n /* Align panel to the start (left in LTR, right in RTL) of the trigger /\n START = 'start',\n /* Align panel to the end (right in LTR, left in RTL) of the trigger /\n END = 'end',\n}\n\n/\n Vertical alignment options for the dropdown panel relative to the trigger\n /\nexport enum DropDownYAlign {\n /* Position panel below the trigger (default) /\n BELOW = 'below',\n /* Position panel above the trigger /\n ABOVE = 'above',\n}\n\n/\n Props for the DropDown.Panel component\n /\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /\n Whether the panel should be visible when the trigger is focused.\n * Enables keyboard accessibility for the dropdown.\n * @default false\n /\n isFocusable?: boolean;\n\n /\n Controls panel visibility explicitly.\n * - `true`: Panel is hidden\n * - `false`: Panel is visible\n * - `undefined`: Panel visibility controlled by hover/focus states\n * @default undefined\n /\n isHidden?: boolean;\n\n /\n Whether the panel should be visible when hovering over the trigger.\n * Provides quick access via mouse interaction.\n * @default false\n /\n isOverable?: boolean;\n\n /\n Unique identifier that matches the parent DropDown identifier\n * @example \"user-menu\"\n /\n identifier: string;\n\n /\n Horizontal alignment of the panel relative to the trigger\n * @default DropDownAlign.START\n /\n align?: DropDownAlign \| `${DropDownAlign}`;\n\n /\n Vertical alignment of the panel relative to the trigger\n * @default DropDownYAlign.BELOW\n /\n yAlign?: DropDownYAlign \| `${DropDownYAlign}`;\n}\n\n/\n DropDown.Panel Component\n \n The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n \n @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n * <div>Content appears on hover</div>\n * </DropDown.Panel>\n \n // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n * <div>Content appears on focus</div>\n * </DropDown.Panel>\n \n // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n * <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n \n // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n * <div>Right-aligned content</div>\n * </DropDown.Panel>\n \n // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign={DropDownYAlign.ABOVE} isOverable>\n * <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n \n @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n /\nconst Panel: FC<PanelProps> = ({\n children,\n isHidden = undefined,\n isOverable = false,\n isFocusable = false,\n align = DropDownAlign.START,\n yAlign = DropDownYAlign.BELOW,\n identifier,\n className,\n ...props\n}) => (\n <div\n className={cn(\n 'absolute z-100 min-w-full',\n / Horizontal positioning /\n align === DropDownAlign.START && 'left-0',\n align === DropDownAlign.END && 'right-0',\n / Vertical positioning */\n yAlign === DropDownYAlign.BELOW && 'top-[calc(100%+0.5rem)]',\n yAlign === DropDownYAlign.ABOVE && 'bottom-[calc(100%+0.5rem)]',\n className\n )}\n aria-hidden={isHidden}\n role=\"region\"\n aria-labelledby={`dropdown-trigger-${identifier}`}\n id={`dropdown-panel-${identifier}`}\n >\n <MaxHeightSmoother\n isHidden={isHidden}\n className={cn(\n 'overflow-x-visible',\n isHidden === false && 'invisible',\n isHidden === true && 'visible',\n isOverable &&\n 'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n isFocusable &&\n 'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n )}\n {...props}\n >\n {children}\n </MaxHeightSmoother>\n </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAaA,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,gCAAgC,UAAU;CACxD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;AAoCR,MAAMC,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG;EACZ;EACA;EACA;EACD,CAAC;CACF,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;AAEd,EAAC,EAAE,cAAoC,OAAO;;CAEhD,SAAQ;CACR,GAAI;CAEH;EACM;;;;AAMX,IAAY,0DAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,4DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FF,MAAMC,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,QAAQ,cAAc,OACtB,SAAS,eAAe,OACxB,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BAEA,UAAU,cAAc,SAAS,UACjC,UAAU,cAAc,OAAO,WAE/B,WAAW,eAAe,SAAS,2BACnC,WAAW,eAAe,SAAS,8BACnC,UACD;CACD,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC;EACW;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,kFACH;EACD,GAAI;EAEH;GACiB;EAChB;AAGR,SAAS,UAAU;AACnB,SAAS,QAAQ"}

package/dist/esm/components/EditableField/EditableFieldLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldLayout.mjs","names":["EditableFieldLayout: FC<EditableFieldLayoutProps>"],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { ~~cn } from '../../utils/cn';\nimport {~~ Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n value?: string \| null \| undefined;\n onCancel: () => void;\n onSave: () => void;\n children: ReactNode;\n isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n value = '',\n onCancel,\n onSave,\n onClick,\n children,\n isDisabled,\n ...props\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onSave();\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onCancel();\n };\n\n const result = !value \|\| value === '' ? '-' : value;\n\n const handleClickOutside = useCallback(\n (e: MouseEvent) => {\n // Check if there's any text selected\n const selection = window.getSelection();\n if (selection && selection.toString().trim() !== '') {\n // If there is a selection, do not trigger the save and exit early.\n return;\n }\n\n // Proceed if the click is truly outside the component.\n if (\n editableFieldRef.current &&\n !editableFieldRef.current.contains(e.target as Node)\n ) {\n setIsEditing(false);\n onSave();\n }\n },\n [onSave]\n );\n\n useEffect(() => {\n if (isEditing) {\n document.addEventListener('click', handleClickOutside);\n } else {\n document.removeEventListener('click', handleClickOutside);\n }\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, [handleClickOutside, isEditing]);\n\n return (\n <span\n className=\"group/editable-field flex gap-2\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n setIsEditing(true);\n onClick?.(e);\n }}\n ref={editableFieldRef}\n {...props}\n >\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n key={String(isEditing)}\n >\n {children}\n <Button\n label=\"Save\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n Icon={Check}\n onClick={handleSave}\n disabled={isDisabled}\n className=\"!text-current\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes\"\n data-testid=\"editable-field-save-button\"\n />\n <Button\n label=\"Cancel\"\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n className=\"!text-current\"\n size={ButtonSize.ICON_SM}\n Icon={X}\n onClick={handleCancel}\n disabled={isDisabled}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes\"\n data-testid=\"editable-field-cancel-button\"\n />\n </div>\n\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n >\n <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n {result}\n </span>\n <Button\n label=\"Edit\"\n Icon={Pencil}\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n className=\"!text-current invisible group-hover/editable-field:visible\"\n disabled={isDisabled}\n onClick={(e) => {\n e.stopPropagation();\n setIsEditing(true);\n }}\n />\n </div>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAaA,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,mBAAmB,OAAwB,KAAK;CAEtD,MAAM,cAAc,MAA2C;AAC7D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,UAAQ;;CAGV,MAAM,gBAAgB,MAA2C;AAC/D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,YAAU;;CAGZ,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,cAAc;AACvC,MAAI,aAAa,UAAU,UAAU,CAAC,MAAM,KAAK,GAE/C;AAIF,MACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,OAAe,EACpD;AACA,gBAAa,MAAM;AACnB,WAAQ;;IAGZ,CAAC,OAAO,CACT;AAED,iBAAgB;AACd,MAAI,UACF,UAAS,iBAAiB,SAAS,mBAAmB;MAEtD,UAAS,oBAAoB,SAAS,mBAAmB;AAG3D,eAAa,SAAS,oBAAoB,SAAS,mBAAmB;IACrE,CAAC,oBAAoB,UAAU,CAAC;AAEnC,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;AACd,gBAAa,KAAK;AAClB,aAAU,EAAE;;EAEd,KAAK;EACL,GAAI;aAEJ,qBAAC;GACC,WAAW,GAAG,qBAAqB,YAAY,YAAY,SAAS;;IAGnE;IACD,oBAAC;KACC,OAAM;KACN,SAAS,cAAc;KACvB,MAAM,WAAW;KACjB,OAAO,YAAY;KACnB,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;MACZ;IACF,oBAAC;KACC,OAAM;KACN,OAAO,YAAY;KACnB,SAAS,cAAc;KACvB,WAAU;KACV,MAAM,WAAW;KACjB,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;MACZ;;KA9BG,OAAO,UAAU,CA+BlB,EAEN,qBAAC;GACC,WAAW,GAAG,qBAAqB,YAAY,WAAW,UAAU;cAEpE,oBAAC;IAAK,WAAU;cACb;KACI,EACP,oBAAC;IACC,OAAM;IACN,MAAM;IACN,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU;IACV,UAAU,MAAM;AACd,OAAE,iBAAiB;AACnB,kBAAa,KAAK;;KAEpB;IACE;GACD"}
1	+ {"version":3,"file":"EditableFieldLayout.mjs","names":["EditableFieldLayout: FC<EditableFieldLayoutProps>"],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n value?: string \| null \| undefined;\n onCancel: () => void;\n onSave: () => void;\n children: ReactNode;\n isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n value = '',\n onCancel,\n onSave,\n onClick,\n children,\n isDisabled,\n ...props\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onSave();\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onCancel();\n };\n\n const result = !value \|\| value === '' ? '-' : value;\n\n const handleClickOutside = useCallback(\n (e: MouseEvent) => {\n // Check if there's any text selected\n const selection = window.getSelection();\n if (selection && selection.toString().trim() !== '') {\n // If there is a selection, do not trigger the save and exit early.\n return;\n }\n\n // Proceed if the click is truly outside the component.\n if (\n editableFieldRef.current &&\n !editableFieldRef.current.contains(e.target as Node)\n ) {\n setIsEditing(false);\n onSave();\n }\n },\n [onSave]\n );\n\n useEffect(() => {\n if (isEditing) {\n document.addEventListener('click', handleClickOutside);\n } else {\n document.removeEventListener('click', handleClickOutside);\n }\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, [handleClickOutside, isEditing]);\n\n return (\n <span\n className=\"group/editable-field flex gap-2\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n setIsEditing(true);\n onClick?.(e);\n }}\n ref={editableFieldRef}\n {...props}\n >\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n key={String(isEditing)}\n >\n {children}\n <Button\n label=\"Save\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n Icon={Check}\n onClick={handleSave}\n disabled={isDisabled}\n className=\"!text-current\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes\"\n data-testid=\"editable-field-save-button\"\n />\n <Button\n label=\"Cancel\"\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n className=\"!text-current\"\n size={ButtonSize.ICON_SM}\n Icon={X}\n onClick={handleCancel}\n disabled={isDisabled}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes\"\n data-testid=\"editable-field-cancel-button\"\n />\n </div>\n\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n >\n <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n {result}\n </span>\n <Button\n label=\"Edit\"\n Icon={Pencil}\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n className=\"!text-current invisible group-hover/editable-field:visible\"\n disabled={isDisabled}\n onClick={(e) => {\n e.stopPropagation();\n setIsEditing(true);\n }}\n />\n </div>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAaA,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,mBAAmB,OAAwB,KAAK;CAEtD,MAAM,cAAc,MAA2C;AAC7D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,UAAQ;;CAGV,MAAM,gBAAgB,MAA2C;AAC/D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,YAAU;;CAGZ,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,cAAc;AACvC,MAAI,aAAa,UAAU,UAAU,CAAC,MAAM,KAAK,GAE/C;AAIF,MACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,OAAe,EACpD;AACA,gBAAa,MAAM;AACnB,WAAQ;;IAGZ,CAAC,OAAO,CACT;AAED,iBAAgB;AACd,MAAI,UACF,UAAS,iBAAiB,SAAS,mBAAmB;MAEtD,UAAS,oBAAoB,SAAS,mBAAmB;AAG3D,eAAa,SAAS,oBAAoB,SAAS,mBAAmB;IACrE,CAAC,oBAAoB,UAAU,CAAC;AAEnC,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;AACd,gBAAa,KAAK;AAClB,aAAU,EAAE;;EAEd,KAAK;EACL,GAAI;aAEJ,qBAAC;GACC,WAAW,GAAG,qBAAqB,YAAY,YAAY,SAAS;;IAGnE;IACD,oBAAC;KACC,OAAM;KACN,SAAS,cAAc;KACvB,MAAM,WAAW;KACjB,OAAO,YAAY;KACnB,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;MACZ;IACF,oBAAC;KACC,OAAM;KACN,OAAO,YAAY;KACnB,SAAS,cAAc;KACvB,WAAU;KACV,MAAM,WAAW;KACjB,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;MACZ;;KA9BG,OAAO,UAAU,CA+BlB,EAEN,qBAAC;GACC,WAAW,GAAG,qBAAqB,YAAY,WAAW,UAAU;cAEpE,oBAAC;IAAK,WAAU;cACb;KACI,EACP,oBAAC;IACC,OAAM;IACN,MAAM;IACN,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU;IACV,UAAU,MAAM;AACd,OAAE,iBAAiB;AACnB,kBAAa,KAAK;;KAEpB;IACE;GACD"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.mjs","names":["ExpandCollapse: FC<ExpandCollapseProps>"],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { ~~cn } from '../../utils/cn';\nimport {~~ MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the ExpandCollapse component\n /\nexport type ExpandCollapseProps = {\n /* Whether the component should provide expand/collapse functionality. If false, renders children directly /\n isRollable?: boolean;\n /* Minimum height in pixels before showing the expand/collapse toggle /\n minHeight?: number;\n /* Content that may overflow and trigger the expand/collapse behavior /\n children: ReactNode;\n /* Additional CSS classes for styling customization /\n className?: string;\n};\n\n/* Default minimum height threshold for triggering expand/collapse behavior /\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/\n ExpandCollapse Component\n \n A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n \n @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n * <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n \n ## Key Features\n * - Smart Detection: Automatically detects when content exceeds height threshold\n * - Smooth Animations: Uses CSS transitions for smooth expand/collapse effects\n * - Internationalization: Toggle text supports multiple languages via Intlayer\n * - Customizable Height: Configurable minimum height threshold\n * - Performance Optimized: Only applies collapse behavior when necessary\n * - Accessibility: Proper ARIA attributes and keyboard support\n \n ## Behavior Logic\n * 1. Measurement Phase: Measures actual content height on mount\n * 2. Comparison: Compares content height against minHeight threshold\n * 3. Conditional Rendering:\n * - If content ≤ minHeight: Renders normally without collapse functionality\n * - If content > minHeight: Enables expand/collapse with toggle button\n * 4. State Management: Manages collapsed/expanded state with smooth transitions\n \n ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n \n ## Accessibility Features\n * - Keyboard Navigation: Toggle button is focusable and keyboard accessible\n * - Screen Reader Support: Proper ARIA labels and state announcements\n * - Visual Indicators: Clear visual cues for collapsed/expanded states\n * - Smooth Animations: Respects user preferences for reduced motion\n \n ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n \n @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n isRollable = true,\n minHeight = DEFAULT_MIN_HEIGHT,\n children,\n className,\n}) => {\n const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n const [isCollapsed, setIsCollapsed] = useState(true);\n const codeContainerRef = useRef<HTMLDivElement>(null);\n const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n const isTooBig = codeContainerHeight > minHeight;\n\n useEffect(() => {\n if (codeContainerRef.current) {\n setCodeContainerHeight(codeContainerRef.current.clientHeight);\n }\n }, []);\n\n if (!isRollable) {\n return children;\n }\n\n if (!isTooBig) {\n return (\n <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n {children}\n </div>\n );\n }\n\n return (\n <MaxHeightSmoother\n isHidden={isCollapsed}\n minHeight={minHeight}\n className=\"w-full overflow-x-auto overflow-y-hidden\"\n >\n <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n {children}\n </div>\n <button\n className={cn(\n 'absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400',\n isCollapsed ? 'w-full' : 'w-32'\n )}\n type=\"button\"\n onClick={() => setIsCollapsed((prev) => !prev)}\n >\n {expandCollapseContent(isCollapsed)}\n </button>\n </MaxHeightSmoother>\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqD3B,MAAaA,kBAA2C,EACtD,aAAa,MACb,YAAY,oBACZ,UACA,gBACI;CACJ,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,EAAE;CACjE,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,EAAE,0BAA0B,YAAY,kBAAkB;CAEhE,MAAM,WAAW,sBAAsB;AAEvC,iBAAgB;AACd,MAAI,iBAAiB,QACnB,wBAAuB,iBAAiB,QAAQ,aAAa;IAE9D,EAAE,CAAC;AAEN,KAAI,CAAC,WACH,QAAO;AAGT,KAAI,CAAC,SACH,QACE,oBAAC;EAAI,WAAW,GAAG,eAAe,UAAU;EAAE,KAAK;EAChD;GACG;AAIV,QACE,qBAAC;EACC,UAAU;EACC;EACX,WAAU;aAEV,oBAAC;GAAI,WAAW,GAAG,eAAe,UAAU;GAAE,KAAK;GAChD;IACG,EACN,oBAAC;GACC,WAAW,GACT,uSACA,cAAc,WAAW,OAC1B;GACD,MAAK;GACL,eAAe,gBAAgB,SAAS,CAAC,KAAK;aAE7C,sBAAsB,YAAY;IAC5B;GACS"}
1	+ {"version":3,"file":"ExpandCollapse.mjs","names":["ExpandCollapse: FC<ExpandCollapseProps>"],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/*\n Props for the ExpandCollapse component\n /\nexport type ExpandCollapseProps = {\n /* Whether the component should provide expand/collapse functionality. If false, renders children directly /\n isRollable?: boolean;\n /* Minimum height in pixels before showing the expand/collapse toggle /\n minHeight?: number;\n /* Content that may overflow and trigger the expand/collapse behavior /\n children: ReactNode;\n /* Additional CSS classes for styling customization /\n className?: string;\n};\n\n/* Default minimum height threshold for triggering expand/collapse behavior /\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/\n ExpandCollapse Component\n \n A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n \n @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n * <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n \n ## Key Features\n * - Smart Detection: Automatically detects when content exceeds height threshold\n * - Smooth Animations: Uses CSS transitions for smooth expand/collapse effects\n * - Internationalization: Toggle text supports multiple languages via Intlayer\n * - Customizable Height: Configurable minimum height threshold\n * - Performance Optimized: Only applies collapse behavior when necessary\n * - Accessibility: Proper ARIA attributes and keyboard support\n \n ## Behavior Logic\n * 1. Measurement Phase: Measures actual content height on mount\n * 2. Comparison: Compares content height against minHeight threshold\n * 3. Conditional Rendering:\n * - If content ≤ minHeight: Renders normally without collapse functionality\n * - If content > minHeight: Enables expand/collapse with toggle button\n * 4. State Management: Manages collapsed/expanded state with smooth transitions\n \n ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n \n ## Accessibility Features\n * - Keyboard Navigation: Toggle button is focusable and keyboard accessible\n * - Screen Reader Support: Proper ARIA labels and state announcements\n * - Visual Indicators: Clear visual cues for collapsed/expanded states\n * - Smooth Animations: Respects user preferences for reduced motion\n \n ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n \n @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n isRollable = true,\n minHeight = DEFAULT_MIN_HEIGHT,\n children,\n className,\n}) => {\n const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n const [isCollapsed, setIsCollapsed] = useState(true);\n const codeContainerRef = useRef<HTMLDivElement>(null);\n const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n const isTooBig = codeContainerHeight > minHeight;\n\n useEffect(() => {\n if (codeContainerRef.current) {\n setCodeContainerHeight(codeContainerRef.current.clientHeight);\n }\n }, []);\n\n if (!isRollable) {\n return children;\n }\n\n if (!isTooBig) {\n return (\n <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n {children}\n </div>\n );\n }\n\n return (\n <MaxHeightSmoother\n isHidden={isCollapsed}\n minHeight={minHeight}\n className=\"w-full overflow-x-auto overflow-y-hidden\"\n >\n <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n {children}\n </div>\n <button\n className={cn(\n 'absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400',\n isCollapsed ? 'w-full' : 'w-32'\n )}\n type=\"button\"\n onClick={() => setIsCollapsed((prev) => !prev)}\n >\n {expandCollapseContent(isCollapsed)}\n </button>\n </MaxHeightSmoother>\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqD3B,MAAaA,kBAA2C,EACtD,aAAa,MACb,YAAY,oBACZ,UACA,gBACI;CACJ,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,EAAE;CACjE,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,EAAE,0BAA0B,YAAY,kBAAkB;CAEhE,MAAM,WAAW,sBAAsB;AAEvC,iBAAgB;AACd,MAAI,iBAAiB,QACnB,wBAAuB,iBAAiB,QAAQ,aAAa;IAE9D,EAAE,CAAC;AAEN,KAAI,CAAC,WACH,QAAO;AAGT,KAAI,CAAC,SACH,QACE,oBAAC;EAAI,WAAW,GAAG,eAAe,UAAU;EAAE,KAAK;EAChD;GACG;AAIV,QACE,qBAAC;EACC,UAAU;EACC;EACX,WAAU;aAEV,oBAAC;GAAI,WAAW,GAAG,eAAe,UAAU;GAAE,KAAK;GAChD;IACG,EACN,oBAAC;GACC,WAAW,GACT,uSACA,cAAc,WAAW,OAC1B;GACD,MAAK;GACL,eAAe,gBAAgB,SAAS,CAAC,KAAK;aAE7C,sBAAsB,YAAY;IAC5B;GACS"}

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

@@ -96,7 +96,7 @@ const Footer = ({ links }) => /* @__PURE__ */ jsxs("footer", {
 			/* @__PURE__ */ jsx(LogoWithTextBelow, { className: "size-full max-w-[120px]" }),
 			/* @__PURE__ */ jsx("span", {
 				className: "text-center text-neutral text-xs",
-				children: "© 2025 Intlayer, Inc."
+				children: "© 2026 Intlayer, Inc."
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-row gap-3",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["Footer: FC<FooterProps>","links"],"sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/*\n Represents a single footer link with all necessary attributes\n /\nexport type FooterLink = {\n /* URL or path for the link /\n href: string;\n /* Display text or JSX element for the link /\n text: ReactNode;\n /* Optional click handler for custom link behavior /\n onClick?: () => void;\n /* Accessible label for screen readers (required for accessibility) /\n label: string;\n};\n\n/\n Represents a group of related links with a title\n /\nexport type LinkGroup = {\n /* Title for the group of links /\n title: ReactNode;\n /* Array of footer links in this group /\n links: FooterLink[];\n};\n\n/\n Props for the Footer component\n /\ntype FooterProps = {\n /* Optional array of link groups to display in the footer /\n links?: LinkGroup[];\n};\n\n/\n Footer Component\n \n A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n \n @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n \n @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n * {\n * title: 'Product',\n * links: [\n * { href: '/features', text: 'Features', label: 'Product features' },\n * { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n * { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n * ]\n * },\n * {\n * title: 'Company',\n * links: [\n * { href: '/about', text: 'About Us', label: 'About the company' },\n * { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n * { href: '/contact', text: 'Contact', label: 'Contact information' }\n * ]\n * }\n * ];\n \n <Footer links={footerLinks} />\n * ```\n \n @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n * {\n * title: 'Actions',\n * links: [\n * {\n * href: '#',\n * text: 'Newsletter',\n * label: 'Subscribe to newsletter',\n * onClick: () => openNewsletterModal()\n * }\n * ]\n * }\n * ];\n \n <Footer links={footerLinks} />\n * ```\n \n Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n \n Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n \n Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n \n @param props - Component properties\n * @param props.links - Optional array of link groups to display\n \n @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n <span className=\"text-center text-neutral text-xs\">\n © ~~2025~~ Intlayer, Inc.\n </span>\n <div className=\"flex flex-row gap-3\">\n <SocialNetworks />\n </div>\n </aside>\n <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n {(links ?? []).map(({ title, links }) => (\n <div\n className=\"flex flex-col gap-2\"\n key={links.map((link) => link.href).join(',')}\n >\n <strong>{title}</strong>\n <div className=\"flex flex-col gap-3 text-sm\">\n {links.map((link) => (\n <a key={link.href} href={link.href} aria-label={link.label}>\n {link.text}\n </a>\n ))}\n </div>\n </div>\n ))}\n </div>\n </footer>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHA,MAAaA,UAA2B,EAAE,YACxC,qBAAC;CAAO,WAAU;YAChB,qBAAC;EAAM,WAAU;;GACf,oBAAC,qBAAkB,WAAU,4BAA4B;GACzD,oBAAC;IAAK,WAAU;cAAmC;KAE5C;GACP,oBAAC;IAAI,WAAU;cACb,oBAAC,mBAAiB;KACd;;GACA,EACR,oBAAC;EAAI,WAAU;aACX,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,qBAC3B,qBAAC;GACC,WAAU;cAGV,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAI,WAAU;cACZC,QAAM,KAAK,SACV,oBAAC;KAAkB,MAAM,KAAK;KAAM,cAAY,KAAK;eAClD,KAAK;OADA,KAAK,KAET,CACJ;KACE;KATDA,QAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAUzC,CACN;GACE;EACC"}
1	+ {"version":3,"file":"index.mjs","names":["Footer: FC<FooterProps>","links"],"sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/*\n Represents a single footer link with all necessary attributes\n /\nexport type FooterLink = {\n /* URL or path for the link /\n href: string;\n /* Display text or JSX element for the link /\n text: ReactNode;\n /* Optional click handler for custom link behavior /\n onClick?: () => void;\n /* Accessible label for screen readers (required for accessibility) /\n label: string;\n};\n\n/\n Represents a group of related links with a title\n /\nexport type LinkGroup = {\n /* Title for the group of links /\n title: ReactNode;\n /* Array of footer links in this group /\n links: FooterLink[];\n};\n\n/\n Props for the Footer component\n /\ntype FooterProps = {\n /* Optional array of link groups to display in the footer /\n links?: LinkGroup[];\n};\n\n/\n Footer Component\n \n A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n \n @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n \n @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n * {\n * title: 'Product',\n * links: [\n * { href: '/features', text: 'Features', label: 'Product features' },\n * { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n * { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n * ]\n * },\n * {\n * title: 'Company',\n * links: [\n * { href: '/about', text: 'About Us', label: 'About the company' },\n * { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n * { href: '/contact', text: 'Contact', label: 'Contact information' }\n * ]\n * }\n * ];\n \n <Footer links={footerLinks} />\n * ```\n \n @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n * {\n * title: 'Actions',\n * links: [\n * {\n * href: '#',\n * text: 'Newsletter',\n * label: 'Subscribe to newsletter',\n * onClick: () => openNewsletterModal()\n * }\n * ]\n * }\n * ];\n \n <Footer links={footerLinks} />\n * ```\n \n Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n \n Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n \n Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n \n @param props - Component properties\n * @param props.links - Optional array of link groups to display\n \n @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n <span className=\"text-center text-neutral text-xs\">\n © 2026 Intlayer, Inc.\n </span>\n <div className=\"flex flex-row gap-3\">\n <SocialNetworks />\n </div>\n </aside>\n <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n {(links ?? []).map(({ title, links }) => (\n <div\n className=\"flex flex-col gap-2\"\n key={links.map((link) => link.href).join(',')}\n >\n <strong>{title}</strong>\n <div className=\"flex flex-col gap-3 text-sm\">\n {links.map((link) => (\n <a key={link.href} href={link.href} aria-label={link.label}>\n {link.text}\n </a>\n ))}\n </div>\n </div>\n ))}\n </div>\n </footer>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHA,MAAaA,UAA2B,EAAE,YACxC,qBAAC;CAAO,WAAU;YAChB,qBAAC;EAAM,WAAU;;GACf,oBAAC,qBAAkB,WAAU,4BAA4B;GACzD,oBAAC;IAAK,WAAU;cAAmC;KAE5C;GACP,oBAAC;IAAI,WAAU;cACb,oBAAC,mBAAiB;KACd;;GACA,EACR,oBAAC;EAAI,WAAU;aACX,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,qBAC3B,qBAAC;GACC,WAAU;cAGV,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAI,WAAU;cACZC,QAAM,KAAK,SACV,oBAAC;KAAkB,MAAM,KAAK;KAAM,cAAY,KAAK;eAClD,KAAK;OADA,KAAK,KAET,CACJ;KACE;KATDA,QAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAUzC,CACN;GACE;EACC"}

package/dist/esm/components/Form/FormBase.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { HTMLAttributes } from 'react';\nimport {\n FormProvider,\n type FormProviderProps,\n type UseFormProps,\n useForm as useFormReactHookForm,\n useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\~~nimport { cn } from '../../utils/cn';\~~n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n FormProviderProps<z.infer<T>> & {\n schema?: T;\n onSubmit?: (data: z.infer<T>) => void \| Promise<void>;\n onSubmitSuccess?: (data: z.infer<T>) => void \| Promise<void>;\n onSubmitError?: (error: Error) => void \| Promise<void>;\n autoComplete?: boolean;\n };\n\nconst awaitFunction = async (fn: any) => {\n // Check if result is a Promise (Thenable)\n\n if (fn && typeof fn.then === 'function') {\n // It's a Promise, so wait for it to resolve\n return await fn;\n }\n // If not a Promise, it will just execute without awaiting\n return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n schema,\n onSubmit: onSubmitProp,\n onSubmitSuccess: onSubmitSuccessProp,\n onSubmitError: onSubmitErrorProp,\n className,\n children,\n autoComplete,\n ...props\n}: FormProps<T>) => {\n const onSubmit = async (values: z.infer<T>) => {\n const parsedValues = schema?.safeParse(values) ?? {\n success: true,\n data: undefined,\n };\n\n // onSubmitProp?.(values);\n await awaitFunction(onSubmitProp?.(values));\n\n if (parsedValues.success) {\n await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n } else {\n await awaitFunction(\n onSubmitErrorProp?.(\n new Error(\n parsedValues.error.issues.map((error) => error.message).join(', ')\n )\n )\n );\n }\n };\n\n return (\n <FormProvider {...props}>\n <form\n className={cn('flex flex-col gap-y-6', className)}\n onSubmit={props.handleSubmit(onSubmit)}\n autoComplete={autoComplete ? 'on' : 'off'}\n noValidate\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n\nexport const useForm = <T extends ZodObject>(\n schema: T,\n props?: UseFormProps<z.infer<T>>\n) => {\n const form = useFormReactHookForm<z.infer<T>>({\n resolver: zodResolver(schema as any),\n ...props,\n });\n\n const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n control: form.control,\n });\n\n return {\n form,\n isSubmitting,\n isSubmitted,\n isLoading,\n isValid,\n };\n};\n"],"mappings":";;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,KAAI,MAAM,OAAO,GAAG,SAAS,WAE3B,QAAO,MAAM;AAGf,QAAO;;AAGT,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,cACA,GAAG,YACe;CAClB,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,OAAO,IAAI;GAChD,SAAS;GACT,MAAM;GACP;AAGD,QAAM,cAAc,eAAe,OAAO,CAAC;AAE3C,MAAI,aAAa,QACf,OAAM,cAAc,sBAAsB,aAAa,KAAM,CAAC;MAE9D,OAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,QAAQ,CAAC,KAAK,KAAK,CACnE,CACF,CACF;;AAIL,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,WAAW,GAAG,yBAAyB,UAAU;GACjD,UAAU,MAAM,aAAa,SAAS;GACtC,cAAc,eAAe,OAAO;GACpC;GAEC;IACI;GACM;;AAInB,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,OAAc;EACpC,GAAG;EACJ,CAAC;CAEF,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,SACf,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}
1	+ {"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\nimport {\n FormProvider,\n type FormProviderProps,\n type UseFormProps,\n useForm as useFormReactHookForm,\n useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n FormProviderProps<z.infer<T>> & {\n schema?: T;\n onSubmit?: (data: z.infer<T>) => void \| Promise<void>;\n onSubmitSuccess?: (data: z.infer<T>) => void \| Promise<void>;\n onSubmitError?: (error: Error) => void \| Promise<void>;\n autoComplete?: boolean;\n };\n\nconst awaitFunction = async (fn: any) => {\n // Check if result is a Promise (Thenable)\n\n if (fn && typeof fn.then === 'function') {\n // It's a Promise, so wait for it to resolve\n return await fn;\n }\n // If not a Promise, it will just execute without awaiting\n return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n schema,\n onSubmit: onSubmitProp,\n onSubmitSuccess: onSubmitSuccessProp,\n onSubmitError: onSubmitErrorProp,\n className,\n children,\n autoComplete,\n ...props\n}: FormProps<T>) => {\n const onSubmit = async (values: z.infer<T>) => {\n const parsedValues = schema?.safeParse(values) ?? {\n success: true,\n data: undefined,\n };\n\n // onSubmitProp?.(values);\n await awaitFunction(onSubmitProp?.(values));\n\n if (parsedValues.success) {\n await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n } else {\n await awaitFunction(\n onSubmitErrorProp?.(\n new Error(\n parsedValues.error.issues.map((error) => error.message).join(', ')\n )\n )\n );\n }\n };\n\n return (\n <FormProvider {...props}>\n <form\n className={cn('flex flex-col gap-y-6', className)}\n onSubmit={props.handleSubmit(onSubmit)}\n autoComplete={autoComplete ? 'on' : 'off'}\n noValidate\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n\nexport const useForm = <T extends ZodObject>(\n schema: T,\n props?: UseFormProps<z.infer<T>>\n) => {\n const form = useFormReactHookForm<z.infer<T>>({\n resolver: zodResolver(schema as any),\n ...props,\n });\n\n const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n control: form.control,\n });\n\n return {\n form,\n isSubmitting,\n isSubmitted,\n isLoading,\n isValid,\n };\n};\n"],"mappings":";;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,KAAI,MAAM,OAAO,GAAG,SAAS,WAE3B,QAAO,MAAM;AAGf,QAAO;;AAGT,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,cACA,GAAG,YACe;CAClB,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,OAAO,IAAI;GAChD,SAAS;GACT,MAAM;GACP;AAGD,QAAM,cAAc,eAAe,OAAO,CAAC;AAE3C,MAAI,aAAa,QACf,OAAM,cAAc,sBAAsB,aAAa,KAAM,CAAC;MAE9D,OAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,QAAQ,CAAC,KAAK,KAAK,CACnE,CACF,CACF;;AAIL,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,WAAW,GAAG,yBAAyB,UAAU;GACjD,UAAU,MAAM,aAAa,SAAS;GACtC,cAAc,eAAe,OAAO;GACpC;GAEC;IACI;GACM;;AAInB,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,OAAc;EACpC,GAAG;EACJ,CAAC;CAEF,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,SACf,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}

package/dist/esm/components/Form/FormItem.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import { createContext, useId, useMemo } from "react";
+import { createContext, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Form/FormItem.tsx
@@ -8,10 +8,11 @@ const FormItem = ({ id: idProp, ...props }) => {
 	const generatedId = useId();
 	const stableId = idProp ?? generatedId;
 	return /* @__PURE__ */ jsx(FormItemContext, {
-		value: useMemo(() => ({ id: stableId }), [stableId]),
+		value: { id: stableId },
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-2 p-2",
 			id: stableId,
+			suppressHydrationWarning: true,
 			...props
 		})
 	});

package/dist/esm/components/Form/FormItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext~~,\n~~ type FC~~,\n~~ type HTMLAttributes~~,\n~~ useId~~,\n useMemo,\n~~} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n id: idProp,\n ...props\n}) => {\n const generatedId = useId();\n const stableId = idProp ?? generatedId;\n\n const memoValue = ~~useMemo(~~\n ~~() => ({\n~~ id: stableId,\n }~~),\n [stableId]\n )~~;\n\n return (\n <FormItemContext value={memoValue}>\n <div className=\"flex flex-col gap-2 p-2\" id={stableId} {...props} />\n </FormItemContext>\n );\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n"],"mappings":";;;;;;~~AAUA~~,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;~~AAS3B~~,QACE,oBAAC;EAAgB,~~OARD~~,~~eACT~~,~~EACL,~~IAAI,UACL~~,GACD,CAAC,SAAS,CACX~~;YAIG,oBAAC;~~GAAI~~,WAAU;~~GAA0B~~,IAAI;~~GAAU~~,GAAI;~~IAAS~~;~~GACpD~~;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}
1	+ {"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type FC, type HTMLAttributes, useId } from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n id: idProp,\n ...props\n}) => {\n const generatedId = useId();\n const stableId = idProp ?? generatedId;\n\n const memoValue = {\n id: stableId,\n };\n\n return (\n <FormItemContext value={memoValue}>\n <div\n className=\"flex flex-col gap-2 p-2\"\n id={stableId}\n suppressHydrationWarning\n {...props}\n />\n </FormItemContext>\n );\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n"],"mappings":";;;;;;AAIA,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAM3B,QACE,oBAAC;EAAgB,OALD,EAChB,IAAI,UACL;YAIG,oBAAC;GACC,WAAU;GACV,IAAI;GACJ;GACA,GAAI;IACJ;GACc;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}

package/dist/esm/components/Form/FormLabel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLabel.mjs","names":["FormLabel: FC<ComponentProps<typeof Label>>"],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport ~~type~~ { ~~ComponentProps,~~ FC } from '~~react~~';\nimport { cn } from '~~../../utils/cn~~';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n className,\n ...props\n}) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n className={cn('mb-2', error && 'text-error', className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,aAA+C,EAC1D,WACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC;EACC,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;GACJ"}
1	+ {"version":3,"file":"FormLabel.mjs","names":["FormLabel: FC<ComponentProps<typeof Label>>"],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, FC } from 'react';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n className,\n ...props\n}) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n className={cn('mb-2', error && 'text-error', className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,aAA+C,EAC1D,WACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC;EACC,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;GACJ"}

package/dist/esm/components/Form/elements/AutoSizeTextAreaElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutoSizeTextAreaElement.mjs","names":["AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/AutoSizeTextAreaElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ FC } from '~~react~~';\nimport { ~~AutoSizedTextArea~~ } from '~~../../TextArea/AutoSizeTextArea~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype AutoSizedTextAreaElementsProps = Omit<\n FormElementProps<typeof AutoSizedTextArea>,\n 'Element'\n> &\n ComponentProps<typeof AutoSizedTextArea> & {\n name: string;\n };\n\nexport const AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps> = (\n props\n) => (\n <FormElement\n Element={AutoSizedTextArea}\n id={props.name}\n data-testid={props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAYA,MAAaA,4BACX,UAEA,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,GAAI;EACJ"}
1	+ {"version":3,"file":"AutoSizeTextAreaElement.mjs","names":["AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/AutoSizeTextAreaElement.tsx"],"sourcesContent":["import { AutoSizedTextArea } from '@components/TextArea/AutoSizeTextArea';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype AutoSizedTextAreaElementsProps = Omit<\n FormElementProps<typeof AutoSizedTextArea>,\n 'Element'\n> &\n ComponentProps<typeof AutoSizedTextArea> & {\n name: string;\n };\n\nexport const AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps> = (\n props\n) => (\n <FormElement\n Element={AutoSizedTextArea}\n id={props.name}\n data-testid={props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAYA,MAAaA,4BACX,UAEA,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,GAAI;EACJ"}

package/dist/esm/components/Form/elements/CheckboxElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxElement.mjs","names":["CheckboxComponent: FC<CheckboxComponentProps>","CheckboxElement: FC<CheckboxElementProps>"],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import type { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';\nimport { ~~Checkbox } from '../../Input';\nimport {~~ FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n ComponentProps<typeof Checkbox> & {\n name: string;\n inputLabel?: ReactNode;\n };\n\ntype CheckboxComponentProps = Omit<\n ComponentProps<typeof Checkbox>,\n 'label' \| 'value' \| 'onChange'\n> & {\n name: string;\n inputLabel?: ComponentProps<typeof Checkbox>['label'];\n // FormElement passes value/onChange, but checkbox needs checked\n value?: boolean;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n};\n\n/*\n Wrapper component that converts FormElement's value/onChange pattern\n * to checkbox's checked/onChange pattern\n */\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n inputLabel,\n value,\n onChange,\n ...props\n}) => (\n <Checkbox\n {...props}\n label={inputLabel}\n // Convert value (boolean) to checked prop\n checked={Boolean(value)}\n // Pass through onChange - it receives the event with target.checked\n onChange={onChange}\n />\n);\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={CheckboxComponent}\n id={props.name}\n data-testid={props.name}\n autoComplete={autoComplete}\n {...props}\n />\n);\n"],"mappings":";;;;;;;;;AAyBA,MAAMA,qBAAiD,EACrD,YACA,OACA,UACA,GAAG,YAEH,oBAAC;CACC,GAAI;CACJ,OAAO;CAEP,SAAS,QAAQ,MAAM;CAEb;EACV;AAGJ,MAAaC,mBAA6C,EACxD,cACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACL;CACd,GAAI;EACJ"}
1	+ {"version":3,"file":"CheckboxElement.mjs","names":["CheckboxComponent: FC<CheckboxComponentProps>","CheckboxElement: FC<CheckboxElementProps>"],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import { Checkbox } from '@components/Input';\nimport type { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n ComponentProps<typeof Checkbox> & {\n name: string;\n inputLabel?: ReactNode;\n };\n\ntype CheckboxComponentProps = Omit<\n ComponentProps<typeof Checkbox>,\n 'label' \| 'value' \| 'onChange'\n> & {\n name: string;\n inputLabel?: ComponentProps<typeof Checkbox>['label'];\n // FormElement passes value/onChange, but checkbox needs checked\n value?: boolean;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n};\n\n/*\n Wrapper component that converts FormElement's value/onChange pattern\n * to checkbox's checked/onChange pattern\n */\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n inputLabel,\n value,\n onChange,\n ...props\n}) => (\n <Checkbox\n {...props}\n label={inputLabel}\n // Convert value (boolean) to checked prop\n checked={Boolean(value)}\n // Pass through onChange - it receives the event with target.checked\n onChange={onChange}\n />\n);\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={CheckboxComponent}\n id={props.name}\n data-testid={props.name}\n autoComplete={autoComplete}\n {...props}\n />\n);\n"],"mappings":";;;;;;;;;AAyBA,MAAMA,qBAAiD,EACrD,YACA,OACA,UACA,GAAG,YAEH,oBAAC;CACC,GAAI;CACJ,OAAO;CAEP,SAAS,QAAQ,MAAM;CAEb;EACV;AAGJ,MAAaC,mBAA6C,EACxD,cACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACL;CACd,GAAI;EACJ"}

package/dist/esm/components/Form/elements/EditableFieldInputElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ ~~ReactNode~~ } from '~~react~~';\nimport { ~~EditableFieldInput~~ } from '~~../../EditableField/EditableFieldInput~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n FormElementProps<typeof EditableFieldInput>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldInput> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldInputElement = (\n props: EditableFieldInputElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldInput}\n {...props}\n />\n);\n"],"mappings":";;;;;AAmBA,MAAa,6BACX,UAEA,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;EACJ"}
1	+ {"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import { EditableFieldInput } from '@components/EditableField/EditableFieldInput';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n FormElementProps<typeof EditableFieldInput>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldInput> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldInputElement = (\n props: EditableFieldInputElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldInput}\n {...props}\n />\n);\n"],"mappings":";;;;;AAmBA,MAAa,6BACX,UAEA,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;EACJ"}

package/dist/esm/components/Form/elements/EditableFieldTextAreaElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ ~~ReactNode~~ } from '~~react~~';\nimport { ~~EditableFieldTextArea~~ } from '~~../../EditableField/EditableFieldTextArea~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n FormElementProps<typeof EditableFieldTextArea>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldTextArea> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldTextAreaElement = (\n props: EditableFieldTextAreaElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldTextArea}\n {...props}\n />\n);\n"],"mappings":";;;;;AAmBA,MAAa,gCACX,UAEA,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;EACJ"}
1	+ {"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField/EditableFieldTextArea';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n FormElementProps<typeof EditableFieldTextArea>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof EditableFieldTextArea> & {\n name: string;\n description?: ReactNode;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const EditableFieldTextAreaElement = (\n props: EditableFieldTextAreaElementProps\n) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n Element={EditableFieldTextArea}\n {...props}\n />\n);\n"],"mappings":";;;;;AAmBA,MAAa,gCACX,UAEA,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;EACJ"}

package/dist/esm/components/Form/elements/InputElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputElement.mjs","names":["InputElement: FC<InputElementProps>"],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ FC } from '~~react~~';\nimport { ~~Input~~ } from '~~../../../components/Input~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n Omit<\n ComponentProps<typeof Input> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n Element={Input}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAYA,MAAaA,gBAAuC,UAClD,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;EACJ"}
1	+ {"version":3,"file":"InputElement.mjs","names":["InputElement: FC<InputElementProps>"],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import { Input } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n Omit<\n ComponentProps<typeof Input> & {\n name: string;\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n <FormElement\n id={props.name}\n data-testid={props.name}\n Element={Input}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n {...props}\n />\n);\n"],"mappings":";;;;;AAYA,MAAaA,gBAAuC,UAClD,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;EACJ"}

package/dist/esm/components/Form/elements/InputPasswordElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputPasswordElement.mjs","names":["InputPasswordElement: FC<InputPasswordElementProps>"],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentProps,~~ FC } from '~~react~~';\nimport { ~~InputPassword~~ } from '~~../../Input~~';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n FormElementProps<typeof InputPassword>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof InputPassword> & {\n name: string;\n autoComplete: 'current-password' \| 'new-password';\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={InputPassword}\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n autoComplete={autoComplete}\n minLength={6}\n maxLength={255}\n {...props}\n />\n);\n"],"mappings":";;;;;AAgBA,MAAaA,wBAAuD,EAClE,cACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC9B;CACd,WAAW;CACX,WAAW;CACX,GAAI;EACJ"}
1	+ {"version":3,"file":"InputPasswordElement.mjs","names":["InputPasswordElement: FC<InputPasswordElementProps>"],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import { InputPassword } from '@components/Input/InputPassword';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n FormElementProps<typeof InputPassword>,\n 'Element'\n> &\n Omit<\n ComponentProps<typeof InputPassword> & {\n name: string;\n autoComplete: 'current-password' \| 'new-password';\n },\n 'aria-label' \| 'aria-labelledby'\n >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n autoComplete,\n ...props\n}) => (\n <FormElement\n Element={InputPassword}\n id={props.name}\n data-testid={props.name}\n aria-labelledby={props.label ? `${props.name}-label` : undefined}\n aria-label={props.label ? undefined : props.name}\n autoComplete={autoComplete}\n minLength={6}\n maxLength={255}\n {...props}\n />\n);\n"],"mappings":";;;;;AAgBA,MAAaA,wBAAuD,EAClE,cACA,GAAG,YAEH,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC9B;CACd,WAAW;CACX,WAAW;CACX,GAAI;EACJ"}

package/dist/esm/components/Form/elements/MultiselectElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { ~~MultiSelect } from '../../Select/Multiselect';\nimport {~~ Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n FormElementProps<typeof MultiSelect>,\n 'Element'\n> &\n ComponentProps<typeof MultiSelect> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst MultiSelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <MultiSelect\n onValueChange={field.onChange}\n values={field.value}\n {...props}\n >\n {children}\n </MultiSelect>\n </FormItemLayout>\n );\n};\n\nexport const MultiSelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <MultiSelectFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n {...props}\n >\n {children}\n </MultiSelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,2BAA2B,EAC/B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,GAAI;GAEH;IACW;GACC;;AAIrB,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IACuB;GAE5B"}
1	+ {"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport { MultiSelect } from '@components/Select/Multiselect';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n FormElementProps<typeof MultiSelect>,\n 'Element'\n> &\n ComponentProps<typeof MultiSelect> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst MultiSelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <MultiSelect\n onValueChange={field.onChange}\n values={field.value}\n {...props}\n >\n {children}\n </MultiSelect>\n </FormItemLayout>\n );\n};\n\nexport const MultiSelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <MultiSelectFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n {...props}\n >\n {children}\n </MultiSelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,2BAA2B,EAC/B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,GAAI;GAEH;IACW;GACC;;AAIrB,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IACuB;GAE5B"}

package/dist/esm/components/Form/elements/OTPElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { ~~useItemSelector } from '../../../hooks';\nimport {\n InputIndicator,\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '../../Input/OTPInput';\nimport {~~ Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n /** Number of OTP slots (default: 6) */\n slots?: number;\n };\n\nconst selector = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\nconst OTPFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n const optionsRefs = useRef<HTMLElement[]>([]);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n calculatePosition();\n }, []);\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <InputOTP\n onChange={field.onChange}\n defaultValue={field.value}\n maxLength={maxLength}\n pattern=\"^[0-9]+$\"\n onActiveSlotChange={calculatePosition}\n {...(props as any)}\n >\n {children ?? (\n <>\n <InputOTPGroup>\n <InputOTPSlot\n index={0}\n ref={(el) => {\n optionsRefs.current[0] = el!;\n }}\n />\n <InputOTPSlot\n index={1}\n ref={(el) => {\n optionsRefs.current[1] = el!;\n }}\n />\n <InputOTPSlot\n index={2}\n ref={(el) => {\n optionsRefs.current[2] = el!;\n }}\n />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot\n index={3}\n ref={(el) => {\n optionsRefs.current[3] = el!;\n }}\n />\n <InputOTPSlot\n index={4}\n ref={(el) => {\n optionsRefs.current[4] = el!;\n }}\n />\n <InputOTPSlot\n index={5}\n ref={(el) => {\n optionsRefs.current[5] = el!;\n }}\n />\n </InputOTPGroup>\n {choiceIndicatorPosition && (\n <InputIndicator style={choiceIndicatorPosition} />\n )}\n </>\n )}\n </InputOTP>\n </FormItemLayout>\n );\n};\n\nexport const OTPElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: OTPElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <OTPFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n slots={slots}\n maxLength={maxLength}\n {...props}\n >\n {children}\n </OTPFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,YAAY,WAChB,QAAQ,aAAa,gBAAgB,KAAK;AAE5C,MAAM,mBAAmB,EACvB,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACqD;CACxD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;AAED,iBAAgB;AACd,qBAAmB;IAClB,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,UAAU,MAAM;GAChB,cAAc,MAAM;GACT;GACX,SAAQ;GACR,oBAAoB;GACpB,GAAK;aAEJ,YACC;IACE,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IAChB,oBAAC,sBAAoB;IACrB,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IACf,2BACC,oBAAC,kBAAe,OAAO,0BAA2B;OAEnD;IAEI;GACI;;AAIrB,MAAa,cAAc,EACzB,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GACX;GACI;GACX,GAAI;GAEH;IACe;GAEpB"}
1	+ {"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport {\n InputIndicator,\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '@components/Input/OTPInput';\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n /** Number of OTP slots (default: 6) */\n slots?: number;\n };\n\nconst selector = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\nconst OTPFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n const optionsRefs = useRef<HTMLElement[]>([]);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n calculatePosition();\n }, []);\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n >\n <InputOTP\n onChange={field.onChange}\n defaultValue={field.value}\n maxLength={maxLength}\n pattern=\"^[0-9]+$\"\n onActiveSlotChange={calculatePosition}\n {...(props as any)}\n >\n {children ?? (\n <>\n <InputOTPGroup>\n <InputOTPSlot\n index={0}\n ref={(el) => {\n optionsRefs.current[0] = el!;\n }}\n />\n <InputOTPSlot\n index={1}\n ref={(el) => {\n optionsRefs.current[1] = el!;\n }}\n />\n <InputOTPSlot\n index={2}\n ref={(el) => {\n optionsRefs.current[2] = el!;\n }}\n />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot\n index={3}\n ref={(el) => {\n optionsRefs.current[3] = el!;\n }}\n />\n <InputOTPSlot\n index={4}\n ref={(el) => {\n optionsRefs.current[4] = el!;\n }}\n />\n <InputOTPSlot\n index={5}\n ref={(el) => {\n optionsRefs.current[5] = el!;\n }}\n />\n </InputOTPGroup>\n {choiceIndicatorPosition && (\n <InputIndicator style={choiceIndicatorPosition} />\n )}\n </>\n )}\n </InputOTP>\n </FormItemLayout>\n );\n};\n\nexport const OTPElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: OTPElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <OTPFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n slots={slots}\n maxLength={maxLength}\n {...props}\n >\n {children}\n </OTPFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,YAAY,WAChB,QAAQ,aAAa,gBAAgB,KAAK;AAE5C,MAAM,mBAAmB,EACvB,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACqD;CACxD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;AAED,iBAAgB;AACd,qBAAmB;IAClB,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,UAAU,MAAM;GAChB,cAAc,MAAM;GACT;GACX,SAAQ;GACR,oBAAoB;GACpB,GAAK;aAEJ,YACC;IACE,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IAChB,oBAAC,sBAAoB;IACrB,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IACf,2BACC,oBAAC,kBAAe,OAAO,0BAA2B;OAEnD;IAEI;GACI;;AAIrB,MAAa,cAAc,EACzB,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GACX;GACI;GACX,GAAI;GAEH;IACe;GAEpB"}