@intlayer/design-system 8.11.3 → 8.12.0

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

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { NodeView } from "./StructureView/StructureView.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useEditedContent } from "@intlayer/editor-react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/DictionaryFieldEditor/StructureEditor.tsx
 const StructureEditor = ({ dictionary }) => {

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

@@ -1,14 +1,13 @@
 'use client';
 
+import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
-import { InputVariant } from "../../Input/Input.mjs";
 import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
+import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { Plus, Trash } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
-import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

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

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

@@ -1,7 +1,7 @@
 'use client';
 
+import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { DropDown } from "../../DropDown/index.mjs";
 import { useVersionSwitcher } from "./VersionSwitcherContext.mjs";
 import { MoveVertical } from "lucide-react";

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

@@ -1 +1 @@
-{"version":3,"file":"VersionSwitcher.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n  const { switchTo, versionSwitcherLabel, versionListLabel } =\n    useIntlayer('version-switcher');\n  const { selectedVersion, versions, setSelectedVersion } =\n    useVersionSwitcher();\n\n  if (versions.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={versionListLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\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,MAAa,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,kBAAkB;CAChC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,mBAAmB;CAErB,IAAI,SAAS,WAAW,GACtB,OAAO,+BAAI;CAGb,OACE,oBAAC,OAAD;EACE,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;cAC5B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAQ,mBAAmB;KAAW,IACrD,oBAAC,cAAD,EAAc,WAAU,kBAAmB,EACxC;;GACW,IAElB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC,MAAD;MAAI,WAAU;gBACX,SAAS,QAAQ,EAAE,KAAK,YACvB,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,mBAAmB,OAAO;QACzC,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B;QACA;QACA;QACA;QACA;kBAEA,oBAAC,OAAD;SAAK,WAAU;mBACZ;QACE;OACC;MACN,GAf6B,OAe7B,CACL;KACC;IACK;GACG,EACR;;CACP;AAET"}
+{"version":3,"file":"VersionSwitcher.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n  const { switchTo, versionSwitcherLabel, versionListLabel } =\n    useIntlayer('version-switcher');\n  const { selectedVersion, versions, setSelectedVersion } =\n    useVersionSwitcher();\n\n  if (versions.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={versionListLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\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=\"hoverable\"\n                    color=\"text\"\n                    isFullWidth\n                    textAlign=\"left\"\n                    size=\"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":";;;;;;;;;;;AAcA,MAAM,sBAAsB;AAE5B,MAAa,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,kBAAkB;CAChC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,mBAAmB;CAErB,IAAI,SAAS,WAAW,GACtB,OAAO,+BAAI;CAGb,OACE,oBAAC,OAAD;EACE,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;cAC5B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAQ,mBAAmB;KAAW,IACrD,oBAAC,cAAD,EAAc,WAAU,kBAAmB,EACxC;;GACW,IAElB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC,MAAD;MAAI,WAAU;gBACX,SAAS,QAAQ,EAAE,KAAK,YACvB,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,mBAAmB,OAAO;QACzC,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B,SAAQ;QACR,OAAM;QACN;QACA,WAAU;QACV,MAAK;kBAEL,oBAAC,OAAD;SAAK,WAAU;mBACZ;QACE;OACC;MACN,GAf6B,OAe7B,CACL;KACC;IACK;GACG,EACR;;CACP;AAET"}

package/dist/esm/components/DropDown/index.mjs

@@ -97,26 +97,6 @@ const Trigger = ({ children, identifier, className, label, ...props }) => /* @__
 	children
 });
 /**
-* Horizontal alignment options for the dropdown panel relative to the trigger
-*/
-let DropDownAlign = /* @__PURE__ */ function(DropDownAlign) {
-	/** Align panel to the start (left in LTR, right in RTL) of the trigger */
-	DropDownAlign["START"] = "start";
-	/** Align panel to the end (right in LTR, left in RTL) of the trigger */
-	DropDownAlign["END"] = "end";
-	return DropDownAlign;
-}({});
-/**
-* Vertical alignment options for the dropdown panel relative to the trigger
-*/
-let DropDownYAlign = /* @__PURE__ */ function(DropDownYAlign) {
-	/** Position panel below the trigger (default) */
-	DropDownYAlign["BELOW"] = "below";
-	/** Position panel above the trigger */
-	DropDownYAlign["ABOVE"] = "above";
-	return DropDownYAlign;
-}({});
-/**
 * DropDown.Panel Component
 *
 * The content area that appears when the dropdown is triggered.
@@ -140,12 +120,12 @@ let DropDownYAlign = /* @__PURE__ */ function(DropDownYAlign) {
 * </DropDown.Panel>
 *
 * // Right-aligned panel
-* <DropDown.Panel identifier="menu" align={DropDownAlign.END} isOverable>
+* <DropDown.Panel identifier="menu" align="end" isOverable>
 *   <div>Right-aligned content</div>
 * </DropDown.Panel>
 *
 * // Panel opening above the trigger
-* <DropDown.Panel identifier="menu" yAlign={DropDownYAlign.ABOVE} isOverable>
+* <DropDown.Panel identifier="menu" yAlign="above" isOverable>
 *   <div>Content appears above</div>
 * </DropDown.Panel>
 * ```
@@ -174,5 +154,5 @@ DropDown.Trigger = Trigger;
 DropDown.Panel = Panel;
 
 //#endregion
-export { DropDown, DropDownAlign, DropDownYAlign };
+export { DropDown };
 //# sourceMappingURL=index.mjs.map

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Button } from "../Button/Button.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Check, Pencil, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"!text-current invisible group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,mBAAmB,OAAwB,IAAI;CAErD,MAAM,cAAc,MAA2C;EAC7D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,OAAO;CACT;CAEA,MAAM,gBAAgB,MAA2C;EAC/D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,SAAS;CACX;CAEA,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,aAAa;EACtC,IAAI,aAAa,UAAU,SAAS,EAAE,KAAK,MAAM,IAE/C;EAIF,IACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,MAAc,GACnD;GACA,aAAa,KAAK;GAClB,OAAO;EACT;CACF,GACA,CAAC,MAAM,CACT;CAEA,gBAAgB;EACd,IAAI,WACF,SAAS,iBAAiB,SAAS,kBAAkB;OAErD,SAAS,oBAAoB,SAAS,kBAAkB;EAG1D,aAAa,SAAS,oBAAoB,SAAS,kBAAkB;CACvE,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;GACd,aAAa,IAAI;GACjB,UAAU,CAAC;EACb;EACA,KAAK;EACL,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,YAAY,QAAQ;aADrE;IAIG;IACD,oBAAC,QAAD;KACE,OAAM;KACN;KACA;KACA;KACA,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;IACD,oBAAC,QAAD;KACE,OAAM;KACN;KACA;KACA,WAAU;KACV;KACA,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;GACE;KA/BE,OAAO,SAAS,CA+BlB,GAEL,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,WAAW,SAAS;aADrE,CAGE,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,IACN,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN;IACA;IACA;IACA,WAAU;IACV,UAAU;IACV,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,aAAa,IAAI;IACnB;GACD,EACE;IACD;;AAEV"}
+{"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button } 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=\"hoverable\"\n          size=\"icon-sm\"\n          color=\"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=\"text\"\n          variant=\"hoverable\"\n          className=\"!text-current\"\n          size=\"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=\"text\"\n          variant=\"hoverable\"\n          size=\"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,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,mBAAmB,OAAwB,IAAI;CAErD,MAAM,cAAc,MAA2C;EAC7D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,OAAO;CACT;CAEA,MAAM,gBAAgB,MAA2C;EAC/D,EAAE,gBAAgB;EAClB,aAAa,KAAK;EAClB,SAAS;CACX;CAEA,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,aAAa;EACtC,IAAI,aAAa,UAAU,SAAS,EAAE,KAAK,MAAM,IAE/C;EAIF,IACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,MAAc,GACnD;GACA,aAAa,KAAK;GAClB,OAAO;EACT;CACF,GACA,CAAC,MAAM,CACT;CAEA,gBAAgB;EACd,IAAI,WACF,SAAS,iBAAiB,SAAS,kBAAkB;OAErD,SAAS,oBAAoB,SAAS,kBAAkB;EAG1D,aAAa,SAAS,oBAAoB,SAAS,kBAAkB;CACvE,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,OACE,qBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;GACd,aAAa,IAAI;GACjB,UAAU,CAAC;EACb;EACA,KAAK;EACL,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,YAAY,QAAQ;aADrE;IAIG;IACD,oBAAC,QAAD;KACE,OAAM;KACN,SAAQ;KACR,MAAK;KACL,OAAM;KACN,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;IACD,oBAAC,QAAD;KACE,OAAM;KACN,OAAM;KACN,SAAQ;KACR,WAAU;KACV,MAAK;KACL,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;IACb;GACE;KA/BE,OAAO,SAAS,CA+BlB,GAEL,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,WAAW,SAAS;aADrE,CAGE,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,IACN,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,OAAM;IACN,SAAQ;IACR,MAAK;IACL,WAAU;IACV,UAAU;IACV,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,aAAa,IAAI;IACnB;GACD,EACE;IACD;;AAEV"}

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

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

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

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

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { PopoverXAlign } from "../Popover/static.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
 import { CopyButton } from "../CopyButton/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} {...props} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,MAAM;CAEjD,OACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;EAAQ,IAEvC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV;aAHF,CAKE,oBAAC,UAAD,YAAS,MAAc,IACvB,oBAAC,KAAD;IAAG,WAAU;cAAgB;GAAe,EAC9B;IACT;;AAEb"}
+{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} {...props} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign=\"end\"\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,MAAM;CAEjD,OACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;EAAQ,IAEvC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAO;aAHT,CAKE,oBAAC,UAAD,YAAS,MAAc,IACvB,oBAAC,KAAD;IAAG,WAAU;cAAgB;GAAe,EAC9B;IACT;;AAEb"}

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

@@ -32,7 +32,7 @@ const checkboxVariants = cva([
 			neutral: "border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral",
 			light: "border-white/30 text-white ring-white/20 checked:border-white checked:bg-white",
 			text: "border-text/30 text-text ring-text/20 checked:border-text checked:bg-text",
-			["text-inverse"]: "border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse",
+			"text-inverse": "border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse",
 			dark: "border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800",
 			error: "border-error/30 text-error ring-error/20 checked:border-error checked:bg-error",
 			success: "border-success/30 text-success ring-success/20 checked:border-success checked:bg-success",
@@ -50,26 +50,6 @@ const checkboxVariants = cva([
 		size: "md"
 	}
 });
-let CheckboxSize = /* @__PURE__ */ function(CheckboxSize) {
-	CheckboxSize["XS"] = "xs";
-	CheckboxSize["SM"] = "sm";
-	CheckboxSize["MD"] = "md";
-	CheckboxSize["LG"] = "lg";
-	return CheckboxSize;
-}({});
-let CheckboxColor = /* @__PURE__ */ function(CheckboxColor) {
-	CheckboxColor["PRIMARY"] = "primary";
-	CheckboxColor["SECONDARY"] = "secondary";
-	CheckboxColor["NEUTRAL"] = "neutral";
-	CheckboxColor["LIGHT"] = "light";
-	CheckboxColor["TEXT"] = "text";
-	CheckboxColor["TEXT_INVERSE"] = "text-inverse";
-	CheckboxColor["DARK"] = "dark";
-	CheckboxColor["ERROR"] = "error";
-	CheckboxColor["SUCCESS"] = "success";
-	CheckboxColor["CUSTOM"] = "custom";
-	return CheckboxColor;
-}({});
 const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsx("input", {
 	type: "checkbox",
 	className: cn(checkboxVariants({
@@ -96,5 +76,5 @@ const Checkbox = (props) => {
 };
 
 //#endregion
-export { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants };
+export { Checkbox, checkboxVariants };
 //# sourceMappingURL=Checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer border-2',\n    'focus:outline-0',\n    'checked:hover:opacity-80',\n    'ring-offset-background',\n    'hover:bg-neutral-500/10',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3 rounded-sm',\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary:\n          'border-primary/30 text-primary ring-primary/20 checked:border-primary checked:bg-primary',\n        secondary:\n          'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',\n        neutral:\n          'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',\n        light:\n          'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',\n        text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',\n        ['text-inverse']:\n          'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n        dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n        error:\n          'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',\n        success:\n          'border-success/30 text-success ring-success/20 checked:border-success checked:bg-success',\n        custom:\n          'border-custom/30 text-custom ring-custom/20 checked:border-custom checked:bg-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'text',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport enum CheckboxSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.size === 'xs' && 'text-xs',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MAAM;IACL,iBACC;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;AAEA,IAAY,eAAL;CACL;CACA;CACA;CACA;;AACF;AAEA,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAkBA,MAAM,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,OAAD;GAAO,IAAI,MAAM;GAAM,GAAI;EAAQ,IAClC,KACI;MAEP,oBAAC,OAAD;EAAO,IAAI,MAAM;EAAM,GAAI;CAAQ;AAEvC"}
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer border-2',\n    'focus:outline-0',\n    'checked:hover:opacity-80',\n    'ring-offset-background',\n    'hover:bg-neutral-500/10',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3 rounded-sm',\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary:\n          'border-primary/30 text-primary ring-primary/20 checked:border-primary checked:bg-primary',\n        secondary:\n          'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',\n        neutral:\n          'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',\n        light:\n          'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',\n        text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',\n        'text-inverse':\n          'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n        dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n        error:\n          'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',\n        success:\n          'border-success/30 text-success ring-success/20 checked:border-success checked:bg-success',\n        custom:\n          'border-custom/30 text-custom ring-custom/20 checked:border-custom checked:bg-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'text',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type CheckboxColor =\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'light'\n  | 'text'\n  | 'text-inverse'\n  | 'dark'\n  | 'error'\n  | 'success'\n  | 'custom';\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.size === 'xs' && 'text-xs',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,gBACE;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;AAgCA,MAAM,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,OAAD;GAAO,IAAI,MAAM;GAAM,GAAI;EAAQ,IAClC,KACI;MAEP,oBAAC,OAAD;EAAO,IAAI,MAAM;EAAM,GAAI;CAAQ;AAEvC"}

package/dist/esm/components/Input/Input.mjs

@@ -41,16 +41,6 @@ const inputVariants = cva([
 		validationStyleEnabled: "disabled"
 	}
 });
-let InputVariant = /* @__PURE__ */ function(InputVariant) {
-	InputVariant["DEFAULT"] = "default";
-	InputVariant["INVISIBLE"] = "invisible";
-	return InputVariant;
-}({});
-let InputSize = /* @__PURE__ */ function(InputSize) {
-	InputSize["MD"] = "md";
-	InputSize["LG"] = "lg";
-	return InputSize;
-}({});
 const Input = ({ validationStyleEnabled = false, variant, size, className, ...props }) => /* @__PURE__ */ jsx("input", {
 	className: cn(inputVariants({
 		variant,
@@ -62,5 +52,5 @@ const Input = ({ validationStyleEnabled = false, variant, size, className, ...pr
 });
 
 //#endregion
-export { Input, InputSize, InputVariant, inputVariants };
+export { Input, inputVariants };
 //# sourceMappingURL=Input.mjs.map

package/dist/esm/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-all duration-300 md:text-sm',\n    'ring-0',\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-text/20',\n\n          // Focus ring\n          'disabled:ring-0',\n          'hover:ring-3',\n          'focus-within:ring-4',\n          'focus-visible:outline-none focus-visible:ring-4',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: 'border-none text-inherit outline-none ring-0',\n      },\n      size: {\n        sm: 'px-2 py-2 text-sm md:py-1.5 md:text-xs',\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    suppressHydrationWarning\n    {...props}\n  />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAElC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;GACF,EAAE,KAAK,GAAG;GACV,WAAW;EACb;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;CAC1B;AACF,CACF;AAEA,IAAY,eAAL;CACL;CACA;;AACF;AAEA,IAAY,YAAL;CACL;CACA;;AACF;AASA,MAAa,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC,SAAD;CACE,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA;CACA,GAAI;AACL"}
+{"version":3,"file":"Input.mjs","names":[],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-all duration-300 md:text-sm',\n    'ring-0',\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-text/20',\n\n          // Focus ring\n          'disabled:ring-0',\n          'hover:ring-3',\n          'focus-within:ring-4',\n          'focus-visible:outline-none focus-visible:ring-4',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: 'border-none text-inherit outline-none ring-0',\n      },\n      size: {\n        sm: 'px-2 py-2 text-sm md:py-1.5 md:text-xs',\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport type InputVariant = \n  | 'default' |\n  'invisible';\n\nexport type InputSize = \n  | 'md' |\n  'lg';\n\nexport type InputProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    suppressHydrationWarning\n    {...props}\n  />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAElC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;GACF,EAAE,KAAK,GAAG;GACV,WAAW;EACb;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;CAC1B;AACF,CACF;AAiBA,MAAa,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC,SAAD;CACE,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA;CACA,GAAI;AACL"}

package/dist/esm/components/Input/Radio.mjs

@@ -0,0 +1,82 @@
+import { cn } from "../../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Input/Radio.tsx
+const radioVariants = cva([
+	"appearance-none",
+	"relative cursor-pointer rounded-full border-2",
+	"focus:outline-0",
+	"checked:hover:opacity-80",
+	"ring-offset-background",
+	"hover:bg-neutral-500/10",
+	"disabled:opacity-50",
+	"ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6",
+	"checked:before:absolute checked:before:inset-0 checked:before:flex",
+	"checked:before:items-center checked:before:justify-center",
+	"checked:before:content-['']",
+	"checked:before:m-auto checked:before:size-[45%]",
+	"checked:before:rounded-full checked:before:bg-text-opposite/80",
+	"after:absolute after:-inset-2 after:content-['']"
+].join(" "), {
+	variants: {
+		variant: { default: "" },
+		size: {
+			xs: "size-3",
+			sm: "size-4",
+			md: "size-5",
+			lg: "size-6"
+		},
+		color: {
+			primary: "border-primary/30 ring-primary/20 checked:border-primary checked:bg-primary",
+			secondary: "border-secondary/30 ring-secondary/20 checked:border-secondary checked:bg-secondary",
+			neutral: "border-neutral/30 ring-neutral/20 checked:border-neutral checked:bg-neutral",
+			light: "border-white/30 ring-white/20 checked:border-white checked:bg-white",
+			text: "border-text/30 ring-text/20 checked:border-text checked:bg-text",
+			"text-inverse": "border-text-inverse/30 ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse",
+			dark: "border-neutral-800/30 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800",
+			error: "border-error/30 ring-error/20 checked:border-error checked:bg-error",
+			success: "border-success/30 ring-success/20 checked:border-success checked:bg-success",
+			custom: "border-custom/30 ring-custom/20 checked:border-custom checked:bg-custom"
+		},
+		validationStyleEnabled: {
+			disabled: "",
+			enabled: "valid:border-success invalid:border-error"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		color: "text",
+		validationStyleEnabled: "disabled",
+		size: "md"
+	}
+});
+const RadioInput = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsx("input", {
+	type: "radio",
+	name,
+	className: cn(radioVariants({
+		variant,
+		size,
+		color,
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+	}), className),
+	...props
+});
+const Radio = (props) => {
+	const { label, name, id } = props;
+	return label ? /* @__PURE__ */ jsxs("label", {
+		htmlFor: id ?? name,
+		className: cn("flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm", props.size === "xs" && "text-xs", props.labelClassName),
+		children: [/* @__PURE__ */ jsx(RadioInput, {
+			id: id ?? name,
+			...props
+		}), label]
+	}) : /* @__PURE__ */ jsx(RadioInput, {
+		id: id ?? name,
+		...props
+	});
+};
+
+//#endregion
+export { Radio, radioVariants };
+//# sourceMappingURL=Radio.mjs.map

package/dist/esm/components/Input/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","names":[],"sources":["../../../../src/components/Input/Radio.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\n\nexport const radioVariants = cva(\n  [\n    'appearance-none',\n    'relative cursor-pointer rounded-full border-2',\n    'focus:outline-0',\n    'checked:hover:opacity-80',\n    'ring-offset-background',\n    'hover:bg-neutral-500/10',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // Centered dot when checked\n    'checked:before:absolute checked:before:inset-0 checked:before:flex',\n    'checked:before:items-center checked:before:justify-center',\n    \"checked:before:content-['']\",\n    'checked:before:m-auto checked:before:size-[45%]',\n    'checked:before:rounded-full checked:before:bg-text-opposite/80',\n\n    \"after:absolute after:-inset-2 after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        xs: 'size-3',\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n      color: {\n        primary:\n          'border-primary/30 ring-primary/20 checked:border-primary checked:bg-primary',\n        secondary:\n          'border-secondary/30 ring-secondary/20 checked:border-secondary checked:bg-secondary',\n        neutral:\n          'border-neutral/30 ring-neutral/20 checked:border-neutral checked:bg-neutral',\n        light:\n          'border-white/30 ring-white/20 checked:border-white checked:bg-white',\n        text: 'border-text/30 ring-text/20 checked:border-text checked:bg-text',\n        'text-inverse':\n          'border-text-inverse/30 ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',\n        dark: 'border-neutral-800/30 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',\n        error:\n          'border-error/30 ring-error/20 checked:border-error checked:bg-error',\n        success:\n          'border-success/30 ring-success/20 checked:border-success checked:bg-success',\n        custom:\n          'border-custom/30 ring-custom/20 checked:border-custom checked:bg-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'text',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type RadioColor =\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'light'\n  | 'text'\n  | 'text-inverse'\n  | 'dark'\n  | 'error'\n  | 'success'\n  | 'custom';\n\nexport type RadioProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size' | 'type'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof radioVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: RadioSize | `${RadioSize}`;\n    color?: RadioColor | `${RadioColor}`;\n    labelClassName?: string;\n  };\n\nconst RadioInput: FC<RadioProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"radio\"\n    name={name}\n    className={cn(\n      radioVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Radio: FC<RadioProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.size === 'xs' && 'text-xs',\n        props.labelClassName\n      )}\n    >\n      <RadioInput id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <RadioInput id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;;AASA,MAAa,gBAAgB,IAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;CACA;CAEA;AACF,EAAE,KAAK,GAAG,GACV;CACE,UAAU;EACR,SAAS,EACP,SAAS,GACX;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,gBACE;GACF,MAAM;GACN,OACE;GACF,SACE;GACF,QACE;EACJ;EACA,wBAAwB;GACtB,UAAU;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;CACR;AACF,CACF;AAgCA,MAAM,cAA8B,EAClC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC,SAAD;CACE,MAAK;CACC;CACN,WAAW,GACT,cAAc;EACZ;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;CAC/D,CAAC,GACD,SACF;CACA,GAAI;AACL;AAGH,MAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,OAAO,MAAM,OAAO;CAE5B,OAAO,QACL,qBAAC,SAAD;EACE,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,SAAS,QAAQ,WACvB,MAAM,cACR;YANF,CAQE,oBAAC,YAAD;GAAY,IAAI,MAAM;GAAM,GAAI;EAAQ,IACvC,KACI;MAEP,oBAAC,YAAD;EAAY,IAAI,MAAM;EAAM,GAAI;CAAQ;AAE5C"}

package/dist/esm/components/Input/index.mjs

@@ -1,7 +1,8 @@
-import { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants } from "./Checkbox.mjs";
-import { Input, InputSize, InputVariant, inputVariants } from "./Input.mjs";
+import { Checkbox, checkboxVariants } from "./Checkbox.mjs";
+import { Input, inputVariants } from "./Input.mjs";
 import { InputPassword } from "./InputPassword.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, OTPInput, OTPInputContext, inputSlotVariants, usePasswordManagerBadge, usePrevious } from "./OTPInput.mjs";
+import { Radio, radioVariants } from "./Radio.mjs";
 import { SearchInput } from "./SearchInput.mjs";
 
-export { Checkbox, CheckboxColor, CheckboxSize, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, OTPInput, OTPInputContext, SearchInput, checkboxVariants, inputSlotVariants, inputVariants, usePasswordManagerBadge, usePrevious };
+export { Checkbox, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, OTPInput, OTPInputContext, Radio, SearchInput, checkboxVariants, inputSlotVariants, inputVariants, radioVariants, usePasswordManagerBadge, usePrevious };