npm - @intlayer/design-system - Versions diffs - 7.2.1-canary.0 → 7.2.2 - Mend

@intlayer/design-system 7.2.1-canary.0 → 7.2.2

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

Files changed (306) hide show

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

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

@@ -1,6 +1,5 @@
 'use client';
 import { NodeView } from "./StructureView/StructureView.mjs";
 import { jsx } from "react/jsx-runtime";
 import { useEditedContent } from "@intlayer/editor-react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StructureEditor.mjs","names":["StructureEditor: FC<NodeEditorProps>"],"sources":["../../../../src/components/DictionaryFieldEditor/StructureEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeView } from './StructureView/StructureView';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n};\n\nexport const StructureEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n const { content, localId } = dictionary;\n\n const { editedContent } = useEditedContent();\n const initialSection =\n typeof editedContent?.[localId!]?.content === 'undefined'\n ? content\n : editedContent?.[localId!]?.content;\n\n return (\n <NodeView\n section={initialSection}\n keyPath={[]}\n dictionaryLocalId={localId!}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;~~AAWA,MAAaA,mBAAwC,EAAE,iBAAiB;CACtE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAM,EAAE,kBAAkB,kBAAkB;AAM5C,QACE,oBAAC;EACC,SANF,OAAO,gBAAgB,UAAW,YAAY,cAC1C,UACA,gBAAgB,UAAW;EAK7B,SAAS,EAAE;EACX,mBAAmB;GACnB"}
1	+ {"version":3,"file":"StructureEditor.mjs","names":["StructureEditor: FC<NodeEditorProps>"],"sources":["../../../../src/components/DictionaryFieldEditor/StructureEditor.tsx"],"sourcesContent":["'use client';\n\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types';\nimport type { FC } from 'react';\nimport { NodeView } from './StructureView/StructureView';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n};\n\nexport const StructureEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n const { content, localId } = dictionary;\n\n const { editedContent } = useEditedContent();\n const initialSection =\n typeof editedContent?.[localId!]?.content === 'undefined'\n ? content\n : editedContent?.[localId!]?.content;\n\n return (\n <NodeView\n section={initialSection}\n keyPath={[]}\n dictionaryLocalId={localId!}\n />\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAaA,mBAAwC,EAAE,iBAAiB;CACtE,MAAM,EAAE,SAAS,YAAY;CAE7B,MAAM,EAAE,kBAAkB,kBAAkB;AAM5C,QACE,oBAAC;EACC,SANF,OAAO,gBAAgB,UAAW,YAAY,cAC1C,UACA,gBAAgB,UAAW;EAK7B,SAAS,EAAE;EACX,mBAAmB;GACnB"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { Container } from "../../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
 import { InputVariant } from "../../Input/Input.mjs";

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 { 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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"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { Container } from "../../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { DropDown } from "../../DropDown/index.mjs";

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 { 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"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { usePersistedStore } from "../../../hooks/usePersistedStore.mjs";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

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 {\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"}

package/dist/esm/components/EditableField/EditableFieldInput.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { Input } from "../Input/Input.mjs";
 import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
 import { useImperativeHandle, useMemo, useRef } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldInput.mjs","names":["EditableFieldInput: FC<EditableFieldInputProps>"],"sources":["../../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldInput component, extending standard Input props\n /\ntype EditableFieldInputProps = InputProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldInput Component\n \n An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n \n @example\n * ```tsx\n * <EditableFieldInput\n * defaultValue=\"Edit me\"\n * placeholder=\"Click to edit...\"\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as text when not editing\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Keyboard Support: Accessible keyboard navigation\n * - Input Variants: Supports all Input component variants and sizes\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying input element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n \n @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(inputRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (inputRef.current) {\n inputRef.current.value = inputRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n // Expose the input ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n const value = useMemo(\n () =>\n (props.value as string) ??\n inputRef.current?.value ??\n (props.defaultValue as string),\n\n [props.value, props.defaultValue, inputRef.current?.value]\n );\n\n return (\n <EditableFieldLayout\n value={value}\n onCancel={handleCancel}\n onSave={handleSave}\n >\n <Input ref={inputRef} {...props} />\n </EditableFieldLayout>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiDA,MAAaA,sBAAmD,EAC9D,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,mBAAmB;AAEvB,WAAS,SAAS,SAAS,SAAS,GAAG;;CAGzC,MAAM,qBAAqB;AACzB,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAE5D,cAAY;;AAId,qBAAoB,WAA+B,SAAS,QAAS;AAWrE,QACE,oBAAC;EACC,OAXU,cAET,MAAM,SACP,SAAS,SAAS,SACjB,MAAM,cAET;GAAC,MAAM;GAAO,MAAM;GAAc,SAAS,SAAS;GAAM,CAC3D;EAKG,UAAU;EACV,QAAQ;YAER,oBAAC;GAAM,KAAK;GAAU,GAAI;IAAS;GACf"}
1	+ {"version":3,"file":"EditableFieldInput.mjs","names":["EditableFieldInput: FC<EditableFieldInputProps>"],"sources":["../../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldInput component, extending standard Input props\n /\ntype EditableFieldInputProps = InputProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldInput Component\n \n An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n \n @example\n * ```tsx\n * <EditableFieldInput\n * defaultValue=\"Edit me\"\n * placeholder=\"Click to edit...\"\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as text when not editing\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Keyboard Support: Accessible keyboard navigation\n * - Input Variants: Supports all Input component variants and sizes\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying input element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n \n @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(inputRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (inputRef.current) {\n inputRef.current.value = inputRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n // Expose the input ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n const value = useMemo(\n () =>\n (props.value as string) ??\n inputRef.current?.value ??\n (props.defaultValue as string),\n\n [props.value, props.defaultValue, inputRef.current?.value]\n );\n\n return (\n <EditableFieldLayout\n value={value}\n onCancel={handleCancel}\n onSave={handleSave}\n >\n <Input ref={inputRef} {...props} />\n </EditableFieldLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAaA,sBAAmD,EAC9D,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,mBAAmB;AAEvB,WAAS,SAAS,SAAS,SAAS,GAAG;;CAGzC,MAAM,qBAAqB;AACzB,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAE5D,cAAY;;AAId,qBAAoB,WAA+B,SAAS,QAAS;AAWrE,QACE,oBAAC;EACC,OAXU,cAET,MAAM,SACP,SAAS,SAAS,SACjB,MAAM,cAET;GAAC,MAAM;GAAO,MAAM;GAAc,SAAS,SAAS;GAAM,CAC3D;EAKG,UAAU;EACV,QAAQ;YAER,oBAAC;GAAM,KAAK;GAAU,GAAI;IAAS;GACf"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { Check, Pencil, X } from "lucide-react";

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 { 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"}

package/dist/esm/components/EditableField/EditableFieldTextArea.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
 import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
 import { useImperativeHandle, useRef } from "react";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldTextArea.mjs","names":["EditableFieldTextArea: FC<EditableFieldTextAreaProps>"],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useRef } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n /\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldTextArea Component\n \n An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n \n @example\n * ```tsx\n * <EditableFieldTextArea\n * defaultValue=\"Multiline text content\"\n * placeholder=\"Click to edit...\"\n * maxRows={10}\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as formatted text when not editing\n * - Auto-Sizing: Automatically adjusts height to fit content\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Multiline Support: Preserves line breaks and formatting\n * - Max Rows Control: Configurable maximum height with scroll\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying textarea element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n \n @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n // Expose the text area ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(textAreaRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (textAreaRef.current) {\n textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n const memoValue =\n (props.value as string) ??\n textAreaRef.current?.value ??\n (props.defaultValue as string) ??\n '';\n\n return (\n <EditableFieldLayout\n value={memoValue}\n onCancel={handleCancel}\n onSave={handleSave}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n <AutoSizedTextArea\n className=\"leading-6\"\n ref={textAreaRef}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n {...props}\n />\n </EditableFieldLayout>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAqDA,MAAaA,yBAAyD,EACpE,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAA4B,KAAK;AAGrD,qBAAoB,WAA+B,YAAY,QAAS;CAExE,MAAM,mBAAmB;AAEvB,WAAS,YAAY,SAAS,SAAS,GAAG;;CAG5C,MAAM,qBAAqB;AACzB,MAAI,YAAY,QACd,aAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAElE,cAAY;;AASd,QACE,oBAAC;EACC,OAPD,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;EAKE,UAAU;EACV,QAAQ;EACR,UAAU,MAAM;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;YAGrB,oBAAC;GACC,WAAU;GACV,KAAK;GACL,UAAU,MAAM;AACd,MAAE,gBAAgB;AAClB,MAAE,iBAAiB;;GAErB,GAAI;IACJ;GACkB"}
1	+ {"version":3,"file":"EditableFieldTextArea.mjs","names":["EditableFieldTextArea: FC<EditableFieldTextAreaProps>"],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useRef } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/*\n Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n /\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n /* Callback function called when the user saves the edited value /\n onSave?: (value: string) => void;\n /* Callback function called when the user cancels the edit operation /\n onCancel?: () => void;\n};\n\n/\n EditableFieldTextArea Component\n \n An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n \n @example\n * ```tsx\n * <EditableFieldTextArea\n * defaultValue=\"Multiline text content\"\n * placeholder=\"Click to edit...\"\n * maxRows={10}\n * onSave={(value) => console.log('Saved:', value)}\n * onCancel={() => console.log('Cancelled')}\n * />\n * ```\n \n ## Features\n * - Inline Editing: Click to edit, displays as formatted text when not editing\n * - Auto-Sizing: Automatically adjusts height to fit content\n * - Save/Cancel Actions: Built-in save and cancel buttons with callbacks\n * - Multiline Support: Preserves line breaks and formatting\n * - Max Rows Control: Configurable maximum height with scroll\n * - Auto-save on Click Away: Saves automatically when clicking outside\n * - Ref Forwarding: Exposes the underlying textarea element reference\n \n ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n \n @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n onSave,\n onCancel,\n ref,\n ...props\n}) => {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n // Expose the text area ref to parent components\n useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n const handleSave = () => {\n // Your save logic here\n onSave?.(textAreaRef.current?.value ?? '');\n };\n\n const handleCancel = () => {\n if (textAreaRef.current) {\n textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n }\n onCancel?.();\n };\n\n const memoValue =\n (props.value as string) ??\n textAreaRef.current?.value ??\n (props.defaultValue as string) ??\n '';\n\n return (\n <EditableFieldLayout\n value={memoValue}\n onCancel={handleCancel}\n onSave={handleSave}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n <AutoSizedTextArea\n className=\"leading-6\"\n ref={textAreaRef}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n {...props}\n />\n </EditableFieldLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAaA,yBAAyD,EACpE,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAA4B,KAAK;AAGrD,qBAAoB,WAA+B,YAAY,QAAS;CAExE,MAAM,mBAAmB;AAEvB,WAAS,YAAY,SAAS,SAAS,GAAG;;CAG5C,MAAM,qBAAqB;AACzB,MAAI,YAAY,QACd,aAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAElE,cAAY;;AASd,QACE,oBAAC;EACC,OAPD,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;EAKE,UAAU;EACV,QAAQ;EACR,UAAU,MAAM;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;YAGrB,oBAAC;GACC,WAAU;GACV,KAAK;GACL,UAAU,MAAM;AACd,MAAE,gBAAgB;AAClB,MAAE,iBAAiB;;GAErB,GAAI;IACJ;GACkB"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useEffect, useRef, useState } from "react";

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 { 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"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 import { FormProvider, useForm as useForm$1, useFormState } from "react-hook-form";

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 size-full 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,mCAAmC,UAAU;GAC3D,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 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 size-full 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,mCAAmC,UAAU;GAC3D,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/FormControl.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "./FormField.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.mjs","names":["FormControl: FC<ComponentProps<typeof Slot>>"],"sources":["../../../../src/components/Form/FormControl.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps, FC } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormControl: FC<ComponentProps<typeof Slot>> = (props) => {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;~~AAMA,MAAaA,eAAgD,UAAU;CACrE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAC5C,cAAc;AAEhB,QACE,oBAAC;EACC,IAAI;EACJ,oBACE,CAAC,QACG,GAAG,sBACH,GAAG,kBAAkB,GAAG;EAE9B,gBAAc,CAAC,CAAC;EAChB,GAAI;GACJ"}
1	+ {"version":3,"file":"FormControl.mjs","names":["FormControl: FC<ComponentProps<typeof Slot>>"],"sources":["../../../../src/components/Form/FormControl.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps, FC } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormControl: FC<ComponentProps<typeof Slot>> = (props) => {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;AAMA,MAAaA,eAAgD,UAAU;CACrE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAC5C,cAAc;AAEhB,QACE,oBAAC;EACC,IAAI;EACJ,oBACE,CAAC,QACG,GAAG,sBACH,GAAG,kBAAkB,GAAG;EAE9B,gBAAc,CAAC,CAAC;EAChB,GAAI;GACJ"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "./FormField.mjs";
 import { jsx } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormDescription.mjs","names":["FormDescription: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n props\n) => {\n const { formDescriptionId } = useFormField();\n\n return (\n <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n );\n};\n"],"mappings":"~~;;;;;;;~~AAKA,MAAaA,mBACX,UACG;CACH,MAAM,EAAE,sBAAsB,cAAc;AAE5C,QACE,oBAAC;EAAE,WAAU;EAAuB,IAAI;EAAmB,GAAI;GAAS"}
1	+ {"version":3,"file":"FormDescription.mjs","names":["FormDescription: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n props\n) => {\n const { formDescriptionId } = useFormField();\n\n return (\n <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n );\n};\n"],"mappings":";;;;;;AAKA,MAAaA,mBACX,UACG;CACH,MAAM,EAAE,sBAAsB,cAAc;AAE5C,QACE,oBAAC;EAAE,WAAU;EAAuB,IAAI;EAAmB,GAAI;GAAS"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { FormItemContext } from "./FormItem.mjs";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nexport const FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n const memoValue = useMemo(\n () => ({\n name: props.name,\n }),\n [props.name]\n );\n\n return (\n <FormFieldContext value={memoValue}>\n <Controller {...props} />\n </FormFieldContext>\n );\n};\n\nexport const useFormField = () => {\n const fieldContext = useContext(FormFieldContext);\n const itemContext = useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n"],"mappings":"~~;;;;;;;;;~~AAmBA,MAAM,mBAAmB,cACvB,EAAE,CACH;AAED,MAAa,aAGX,EACA,GAAG,YACuC;AAQ1C,QACE,oBAAC;EAAiB,OARF,eACT,EACL,MAAM,MAAM,MACb,GACD,CAAC,MAAM,KAAK,CACb;YAIG,oBAAC,cAAW,GAAI,QAAS;GACR;;AAIvB,MAAa,qBAAqB;CAChC,MAAM,eAAe,WAAW,iBAAiB;CACjD,MAAM,cAAc,WAAW,gBAAgB;CAC/C,MAAM,EAAE,eAAe,cAAc,gBAAgB;CAErD,MAAM,aAAa,cAAc,aAAa,MAAM,UAAU;AAE9D,KAAI,CAAC,aACH,OAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,EAAE,OAAO;AAEf,QAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;EACJ"}
1	+ {"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nexport const FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n const memoValue = useMemo(\n () => ({\n name: props.name,\n }),\n [props.name]\n );\n\n return (\n <FormFieldContext value={memoValue}>\n <Controller {...props} />\n </FormFieldContext>\n );\n};\n\nexport const useFormField = () => {\n const fieldContext = useContext(FormFieldContext);\n const itemContext = useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n"],"mappings":";;;;;;;;AAmBA,MAAM,mBAAmB,cACvB,EAAE,CACH;AAED,MAAa,aAGX,EACA,GAAG,YACuC;AAQ1C,QACE,oBAAC;EAAiB,OARF,eACT,EACL,MAAM,MAAM,MACb,GACD,CAAC,MAAM,KAAK,CACb;YAIG,oBAAC,cAAW,GAAI,QAAS;GACR;;AAIvB,MAAa,qBAAqB;CAChC,MAAM,eAAe,WAAW,iBAAiB;CACjD,MAAM,cAAc,WAAW,gBAAgB;CAC/C,MAAM,EAAE,eAAe,cAAc,gBAAgB;CAErD,MAAM,aAAa,cAAc,aAAa,MAAM,UAAU;AAE9D,KAAI,CAAC,aACH,OAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,EAAE,OAAO;AAEf,QAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;EACJ"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { createContext, useId, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

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 {\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"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { useFormField } from "./FormField.mjs";
 import { Label } from "../Label/index.mjs";

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 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"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "./FormField.mjs";
 import { jsx } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormMessage.mjs","names":["FormMessage: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n children,\n ...props\n}) => {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n className=\"font-medium text-error text-xs\"\n role=\"alert\"\n id={formMessageId}\n {...props}\n >\n {body}\n </p>\n );\n};\n"],"mappings":"~~;;;;;;;~~AAKA,MAAaA,eAAyD,EACpE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC;EACC,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;GACC"}
1	+ {"version":3,"file":"FormMessage.mjs","names":["FormMessage: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n children,\n ...props\n}) => {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n className=\"font-medium text-error text-xs\"\n role=\"alert\"\n id={formMessageId}\n {...props}\n >\n {body}\n </p>\n );\n};\n"],"mappings":";;;;;;AAKA,MAAaA,eAAyD,EACpE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC;EACC,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;GACC"}

package/dist/esm/components/Form/elements/FormElement.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { Form } from "../Form.mjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\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 <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;IACC;GACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC;GAAiB,GAAI;GAAc;IAAS;GACpE"}
1	+ {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\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 <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;IACC;GACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC;GAAiB,GAAI;GAAc;IAAS;GACpE"}

package/dist/esm/components/Form/elements/FormElementWrapper.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { jsx } from "react/jsx-runtime";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n schema?: z.ZodObject;\n values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n const objectFormSchema = props.schema ?? Schema;\n\n const form = useForm<z.infer<typeof objectFormSchema>>({\n resolver: zodResolver(objectFormSchema as any),\n values: props.values,\n });\n\n const { children, onSubmit, ...rest } = props;\n\n const onSubmitForm = (\n values: z.infer<typeof objectFormSchema>,\n event: FormEvent<HTMLFormElement>\n ) => {\n const parsedValues = objectFormSchema.safeParse(values);\n if (parsedValues.success) {\n onSubmit?.(event);\n }\n };\n\n return (\n <FormProvider {...form}>\n <form\n {...rest}\n onSubmit={(e) => {\n e.preventDefault();\n form.handleSubmit((values) => onSubmitForm(values, e));\n }}\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,UAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}
1	+ {"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n schema?: z.ZodObject;\n values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n const objectFormSchema = props.schema ?? Schema;\n\n const form = useForm<z.infer<typeof objectFormSchema>>({\n resolver: zodResolver(objectFormSchema as any),\n values: props.values,\n });\n\n const { children, onSubmit, ...rest } = props;\n\n const onSubmitForm = (\n values: z.infer<typeof objectFormSchema>,\n event: FormEvent<HTMLFormElement>\n ) => {\n const parsedValues = objectFormSchema.safeParse(values);\n if (parsedValues.success) {\n onSubmit?.(event);\n }\n };\n\n return (\n <FormProvider {...form}>\n <form\n {...rest}\n onSubmit={(e) => {\n e.preventDefault();\n form.handleSubmit((values) => onSubmitForm(values, e));\n }}\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,UAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";

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 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"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useFormField } from "../FormField.mjs";