@intlayer/design-system 8.3.3 → 8.4.0-canary.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/DictionaryEditor.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/DictionaryEditor.mjs.map +1 -1
- package/dist/esm/components/DictionaryEditor/NodeWrapper/BooleanWrapper.mjs +2 -0
- package/dist/esm/components/DictionaryEditor/NodeWrapper/BooleanWrapper.mjs.map +1 -0
- package/dist/esm/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/NodeWrapper/NumberWrapper.mjs +2 -0
- package/dist/esm/components/DictionaryEditor/NodeWrapper/NumberWrapper.mjs.map +1 -0
- package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs +1 -1
- package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs +1 -1
- package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs.map +1 -1
- package/dist/esm/components/Form/elements/OTPElement.mjs +1 -1
- package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs +1 -1
- package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs.map +1 -1
- package/dist/esm/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs +1 -1
- package/dist/esm/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs.map +1 -1
- package/dist/esm/components/MaxHeightSmoother/index.mjs +1 -1
- package/dist/esm/components/MaxHeightSmoother/index.mjs.map +1 -1
- package/dist/esm/components/Modal/Modal.mjs +1 -1
- package/dist/esm/components/Navbar/MobileNavbar.mjs +1 -1
- package/dist/esm/components/Pagination/Pagination.mjs +1 -1
- package/dist/esm/components/RightDrawer/RightDrawer.mjs +1 -1
- package/dist/esm/components/index.mjs +1 -1
- package/dist/esm/hooks/index.mjs +1 -1
- package/dist/esm/hooks/useAuth/useOAuth2.mjs +1 -1
- package/dist/esm/hooks/useAuth/useSession.mjs +1 -1
- package/dist/types/components/Badge/index.d.ts +2 -2
- package/dist/types/components/Button/Button.d.ts +3 -3
- package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts +1 -1
- package/dist/types/components/Command/index.d.ts +2 -2
- package/dist/types/components/Container/index.d.ts +7 -7
- package/dist/types/components/DictionaryEditor/DictionaryEditor.d.ts +0 -2
- package/dist/types/components/DictionaryEditor/DictionaryEditor.d.ts.map +1 -1
- package/dist/types/components/DictionaryEditor/NodeWrapper/BooleanWrapper.d.ts +11 -0
- package/dist/types/components/DictionaryEditor/NodeWrapper/BooleanWrapper.d.ts.map +1 -0
- package/dist/types/components/DictionaryEditor/NodeWrapper/NumberWrapper.d.ts +11 -0
- package/dist/types/components/DictionaryEditor/NodeWrapper/NumberWrapper.d.ts.map +1 -0
- package/dist/types/components/DictionaryEditor/NodeWrapper/index.d.ts.map +1 -1
- package/dist/types/components/Input/Checkbox.d.ts +1 -1
- package/dist/types/components/Link/Link.d.ts +3 -3
- package/dist/types/components/Pagination/Pagination.d.ts +2 -2
- package/dist/types/components/SwitchSelector/index.d.ts +1 -1
- package/dist/types/components/Tab/Tab.d.ts +2 -2
- package/dist/types/components/TabSelector/TabSelector.d.ts +1 -1
- package/dist/types/components/Tag/index.d.ts +2 -2
- package/package.json +16 -16
|
@@ -1 +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 { KeyPath } from '@intlayer/types/keyPath';\nimport type { LocalDictionaryId, TypedNode } from '@intlayer/types/dictionary';;\nimport { NodeType } 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 === NodeType.Translation ||\n nodeType === NodeType.Condition ||\n nodeType === NodeType.Gender ||\n nodeType === NodeType.Enumeration\n ) {\n const firstKey = Object.keys(\n (section as unknown as TypedNode)[nodeType as keyof typeof section]\n )[0];\n const childrenKeyPath = [\n ...keyPath,\n { type: nodeType, key: firstKey },\n ] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Array) {\n const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Object) {\n return (\n <>\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n <div className=\"mt-6 ml-10\">\n <StructureView\n keyPath={keyPath}\n section={section}\n dictionaryLocalId={dictionaryLocalId}\n />\n </div>\n </>\n );\n }\n\n return (\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n }\n />\n );\n};\n\ntype NodeWrapperProps = {\n sectionKey?: string;\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n sectionKey,\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n const handleRenameNodeKey = (keyName: string) => {\n renameEditedContent(dictionaryLocalId, keyName, keyPath);\n const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n const newKeyPath: KeyPath[] = [\n ...prevKeyPath,\n { ...lastKeyPath, key: keyName } as KeyPath,\n ];\n setFocusedContentKeyPath(newKeyPath);\n };\n\n return (\n <Container\n transparency=\"xl\"\n roundedSize=\"xl\"\n className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n border\n borderColor=\"text\"\n background=\"none\"\n aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n onClick={() => setFocusedContentKeyPath(keyPath)}\n >\n <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n {typeof sectionKey === 'string' && (\n <div className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-10\">\n <EditableFieldInput\n name=\"key\"\n aria-label=\"Key\"\n placeholder={titleInput.placeholder.value}\n defaultValue={sectionKey}\n onSave={(value) => handleRenameNodeKey(value)}\n variant={InputVariant.INVISIBLE}\n />\n <Button\n label={deleteButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"translate-x-2\"\n Icon={Trash}\n onClick={() => {\n addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n setFocusedContentKeyPath(parentKeyPath);\n }}\n />\n </div>\n\n <span className=\"ml-3 text-neutral text-sm\">\n ( {camelCaseToSentence(sectionKey)} )\n </span>\n </div>\n )}\n <NodeTypeView\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n section={section}\n onNodeTypeChange={(content) => {\n addEditedContent(dictionaryLocalId, content, keyPath);\n }}\n />\n </div>\n </Container>\n );\n};\n\ntype ObjectViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { addNodeButton } = useIntlayer('structure-view');\n const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n const { addEditedContent } = useEditedContentActions();\n\n if (!section || typeof section !== 'object') {\n return <div>Not an object</div>;\n }\n\n return (\n <div className=\"flex flex-col gap-2 overflow-y-auto\">\n <ul className=\"mr-auto flex flex-col gap-4\">\n {Object.keys(section).map((key) => (\n <li\n key={`${JSON.stringify(keyPath)}-object-${key}`}\n className=\"flex w-full\"\n >\n <NodeView\n sectionKey={key}\n section={section?.[key as keyof typeof section]}\n keyPath={[...keyPath, { type: NodeType.Object, key }]}\n dictionaryLocalId={dictionaryLocalId}\n />\n </li>\n ))}\n </ul>\n <Button\n label={addNodeButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.MD}\n color={ButtonColor.TEXT}\n Icon={Plus}\n className=\"flex-1\"\n onClick={() => {\n const newKey = 'newKey';\n const newKeyPath = [\n ...keyPath,\n { type: NodeType.Object, key: newKey },\n ] as KeyPath[];\n addEditedContent(dictionaryLocalId, '', newKeyPath);\n setFocusedContentKeyPath(newKeyPath);\n }}\n >\n {addNodeButton.text}\n </Button>\n </div>\n );\n};\n\ntype StructureViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n if (\n !section ||\n typeof section !== 'object' ||\n typeof section.nodeType === 'string'\n ) {\n return (\n <NodeView\n sectionKey={'content'}\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n }\n\n return (\n <ObjectView\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n};\n"],"mappings":"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"}
|
|
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 { NodeType } 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 === NodeType.Translation ||\n nodeType === NodeType.Condition ||\n nodeType === NodeType.Gender ||\n nodeType === NodeType.Enumeration\n ) {\n const firstKey = Object.keys(\n (section as unknown as TypedNode)[nodeType as keyof typeof section]\n )[0];\n const childrenKeyPath = [\n ...keyPath,\n { type: nodeType, key: firstKey },\n ] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Array) {\n const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeType.Object) {\n return (\n <>\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n <div className=\"mt-6 ml-10\">\n <StructureView\n keyPath={keyPath}\n section={section}\n dictionaryLocalId={dictionaryLocalId}\n />\n </div>\n </>\n );\n }\n\n return (\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n }\n />\n );\n};\n\ntype NodeWrapperProps = {\n sectionKey?: string;\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n sectionKey,\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n const handleRenameNodeKey = (keyName: string) => {\n renameEditedContent(dictionaryLocalId, keyName, keyPath);\n const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n const newKeyPath: KeyPath[] = [\n ...prevKeyPath,\n { ...lastKeyPath, key: keyName } as KeyPath,\n ];\n setFocusedContentKeyPath(newKeyPath);\n };\n\n return (\n <Container\n transparency=\"xl\"\n roundedSize=\"xl\"\n className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n border\n borderColor=\"text\"\n background=\"none\"\n aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n onClick={() => setFocusedContentKeyPath(keyPath)}\n >\n <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n {typeof sectionKey === 'string' && (\n <div className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-10\">\n <EditableFieldInput\n name=\"key\"\n aria-label=\"Key\"\n placeholder={titleInput.placeholder.value}\n defaultValue={sectionKey}\n onSave={(value) => handleRenameNodeKey(value)}\n variant={InputVariant.INVISIBLE}\n />\n <Button\n label={deleteButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n className=\"translate-x-2\"\n Icon={Trash}\n onClick={() => {\n addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n setFocusedContentKeyPath(parentKeyPath);\n }}\n />\n </div>\n\n <span className=\"ml-3 text-neutral text-sm\">\n ( {camelCaseToSentence(sectionKey)} )\n </span>\n </div>\n )}\n <NodeTypeView\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n section={section}\n onNodeTypeChange={(content) => {\n addEditedContent(dictionaryLocalId, content, keyPath);\n }}\n />\n </div>\n </Container>\n );\n};\n\ntype ObjectViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { addNodeButton } = useIntlayer('structure-view');\n const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n const { addEditedContent } = useEditedContentActions();\n\n if (!section || typeof section !== 'object') {\n return <div>Not an object</div>;\n }\n\n return (\n <div className=\"flex flex-col gap-2 overflow-y-auto\">\n <ul className=\"mr-auto flex flex-col gap-4\">\n {Object.keys(section).map((key) => (\n <li\n key={`${JSON.stringify(keyPath)}-object-${key}`}\n className=\"flex w-full\"\n >\n <NodeView\n sectionKey={key}\n section={section?.[key as keyof typeof section]}\n keyPath={[...keyPath, { type: NodeType.Object, key }]}\n dictionaryLocalId={dictionaryLocalId}\n />\n </li>\n ))}\n </ul>\n <Button\n label={addNodeButton.label.value}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.MD}\n color={ButtonColor.TEXT}\n Icon={Plus}\n className=\"flex-1\"\n onClick={() => {\n const newKey = 'newKey';\n const newKeyPath = [\n ...keyPath,\n { type: NodeType.Object, key: newKey },\n ] as KeyPath[];\n addEditedContent(dictionaryLocalId, '', newKeyPath);\n setFocusedContentKeyPath(newKeyPath);\n }}\n >\n {addNodeButton.text}\n </Button>\n </div>\n );\n};\n\ntype StructureViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n if (\n !section ||\n typeof section !== 'object' ||\n typeof section.nodeType === 'string'\n ) {\n return (\n <NodeView\n sectionKey={'content'}\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n }\n\n return (\n <ObjectView\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{InputIndicator as
|
|
1
|
+
"use client";import{useItemSelector as e}from"../../../hooks/useItemSelector.mjs";import{InputIndicator as t,InputOTP as n,InputOTPGroup as r,InputOTPSeparator as i,InputOTPSlot as a}from"../../Input/OTPInput.mjs";import{useFormField as o}from"../FormField.mjs";import{FormItemLayout as s}from"../layout/FormItemLayout.mjs";import{Form as c}from"../Form.mjs";import{useEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useFormContext as m}from"react-hook-form";const h=e=>e?.getAttribute(`aria-selected`)===`true`,g=({field:c,name:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,children:x,slots:S=6,maxLength:C=6,...w})=>{let{error:T}=o(),E=u([]),{choiceIndicatorPosition:D,calculatePosition:O}=e(E,{selector:h,isHoverable:!0});return l(()=>{O()},[]),f(s,{htmlFor:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,"aria-invalid":!!T,children:f(n,{onChange:c.onChange,defaultValue:c.value,maxLength:C,pattern:`^[0-9]+$`,onActiveSlotChange:O,...w,children:x??p(d,{children:[p(r,{children:[f(a,{index:0,ref:e=>{E.current[0]=e}}),f(a,{index:1,ref:e=>{E.current[1]=e}}),f(a,{index:2,ref:e=>{E.current[2]=e}})]}),f(i,{}),p(r,{children:[f(a,{index:3,ref:e=>{E.current[3]=e}}),f(a,{index:4,ref:e=>{E.current[4]=e}}),f(a,{index:5,ref:e=>{E.current[5]=e}})]}),D&&f(t,{style:D})]})})})},_=({name:e,description:t,label:n,isRequired:r,info:i,showErrorMessage:a,children:o,slots:s=6,maxLength:l=6,...u})=>{let{control:d}=m();return f(c.Field,{control:d,name:e,render:({field:c})=>f(g,{field:c,name:e,label:n,description:t,isRequired:r,info:i,showErrorMessage:a,slots:s,maxLength:l,...u,children:o})})};export{_ as OTPElement};
|
|
2
2
|
//# sourceMappingURL=OTPElement.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{
|
|
1
|
+
"use client";import{usePersistedStore as e}from"../../hooks/usePersistedStore.mjs";import{Container as t}from"../Container/index.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonTextAlign as a,ButtonVariant as o}from"../Button/Button.mjs";import{Input as s}from"../Input/Input.mjs";import{SwitchSelector as c,SwitchSelectorColor as l,SwitchSelectorSize as u}from"../SwitchSelector/index.mjs";import{DropDown as d}from"../DropDown/index.mjs";import{useLocaleSwitcherContent as f}from"./LocaleSwitcherContentContext.mjs";import{useMemo as p,useRef as m,useState as h}from"react";import{Check as g,Globe as _,MoveVertical as v}from"lucide-react";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";import{useIntlayer as S,useLocale as C}from"react-intlayer";import{getHTMLTextDir as w,getLocaleName as T}from"@intlayer/core/localization";import*as E from"@intlayer/types/locales";import D from"fuse.js";const O=`locale-switcher-content`,k=({panelProps:k,isMultilingual:A=!0})=>{let{switchTo:j,searchInput:M,localeSwitcherLabel:N,languageListLabel:P,seeAllLocalesSwitch:F}=S(`locale-switcher-content`),I=m(null),{locale:L}=C(),{availableLocales:R,selectedLocales:z,setSelectedLocales:B}=f(),V=p(()=>R.map(e=>({locale:e,englishName:T(e,E.ENGLISH),currentLocaleName:T(e,L),ownLocaleName:T(e)})),[R,L]),[H,U]=h(``),[W,G]=e(`locale-content-selector-see-all-locales`,!1),K=p(()=>new D(V,{keys:[{name:`ownLocaleName`,weight:.4},{name:`englishName`,weight:.2},{name:`currentLocaleName`,weight:.2},{name:`locale`,weight:.2}],threshold:.02}),[V]),q=p(()=>H?K.search(H).map(e=>e.item):V,[H,V,K]),J=e=>{A?z.includes(e)?z.length>1&&B(t=>t.filter(t=>t!==e)):B(t=>[...t,e]):B([e])},Y=e=>{G(e),B(e?R:[L])};return b(`div`,{className:`rounded-xl border border-text text-text transition-colors`,children:x(d,{identifier:O,children:[b(d.Trigger,{identifier:O,label:N.value,className:`p-0!`,roundedSize:`3xl`,color:`text`,children:x(`div`,{className:`flex w-full items-center justify-between text-text`,children:[b(`div`,{className:`px-2 py-1`,children:b(_,{size:16})}),b(v,{className:`self-center`,size:16})]})}),b(d.Panel,{identifier:O,isOverable:!0,isFocusable:!0,align:`end`,...k,children:x(t,{className:`max-h-[60vh] min-w-28`,separator:`y`,role:`listbox`,transparency:`xs`,border:!0,roundedSize:`3xl`,borderColor:`text`,"aria-label":P.value,children:[A&&b(`div`,{className:`m-auto p-2`,children:b(c,{defaultValue:W,onChange:Y,color:l.TEXT,size:u.SM,className:`!w-60`,choices:[{content:F.true.value,value:!0},{content:F.false.value,value:!1}]})}),!(A&&W)&&x(y,{children:[b(`div`,{className:`p-3`,children:b(s,{type:`search`,"aria-label":M.ariaLabel.value,placeholder:M.placeholder.value,onChange:e=>U(e.target.value),ref:I})}),b(`ol`,{className:`divide-y divide-dashed divide-text/20 overflow-y-auto p-1`,children:q.map(({locale:e,currentLocaleName:t,ownLocaleName:s})=>b(`li`,{className:`px-1.5 py-1`,children:b(n,{onClick:()=>J(e),label:`${j} ${t}`,disabled:!(R??R).includes(e),isActive:z.includes(e),variant:o.HOVERABLE,color:r.TEXT,isFullWidth:!0,textAlign:a.LEFT,size:i.SM,children:x(`div`,{className:`flex flex-row items-center justify-between gap-3 px-2 py-1`,children:[A&&b(`div`,{className:`w-4`,children:z.includes(e)&&b(g,{className:`size-full`})}),x(`div`,{className:`flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1`,children:[x(`div`,{className:`flex flex-col text-nowrap`,children:[b(`span`,{dir:w(e),lang:e,children:s}),b(`span`,{className:`text-neutral text-xs`,children:t})]}),b(`span`,{className:`text-neutral text-sm`,children:e.toUpperCase()})]})]})})},e))})]})]})})]})})};export{k as LocaleSwitcherContent};
|
|
2
2
|
//# sourceMappingURL=LocaleSwitcherContent.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocaleSwitcherContent.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport * as Locales from '@intlayer/types/locales';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { useLocaleSwitcherContent } from './LocaleSwitcherContentContext';\n\nexport type LocaleSwitcherContentProps = {\n panelProps?: Omit<PanelProps, 'identifier'>;\n isMultilingual?: boolean;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher-content';\n\ntype MultilingualAvailableLocales = {\n locale: LocalesValues;\n englishName: string;\n currentLocaleName: string;\n ownLocaleName: string;\n};\n\nexport const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({\n panelProps,\n isMultilingual = true,\n}) => {\n const {\n switchTo,\n searchInput,\n localeSwitcherLabel,\n languageListLabel,\n seeAllLocalesSwitch,\n } = useIntlayer('locale-switcher-content');\n const inputRef = useRef<HTMLInputElement>(null);\n const { locale } = useLocale();\n const { availableLocales, selectedLocales, setSelectedLocales } =\n useLocaleSwitcherContent();\n\n // 1. Memoize the list construction so it doesn't rebuild every render\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n availableLocales.map((localeEl) => {\n const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [availableLocales, locale]\n );\n\n // 2. State for Search Query only (Source of Truth)\n const [searchQuery, setSearchQuery] = useState('');\n\n const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n 'locale-content-selector-see-all-locales',\n false\n );\n\n // 3. Memoize Fuse instance\n const fuse = useMemo(() => {\n const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n keys: [\n { name: 'ownLocaleName', weight: 0.4 },\n { name: 'englishName', weight: 0.2 },\n { name: 'currentLocaleName', weight: 0.2 },\n { name: 'locale', weight: 0.2 },\n ],\n threshold: 0.02,\n };\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n // 4. Derive results from Search Query\n const results = useMemo(() => {\n if (!searchQuery) {\n return multilingualAvailableLocales;\n }\n return fuse.search(searchQuery).map((result) => result.item);\n }, [searchQuery, multilingualAvailableLocales, fuse]);\n\n const handleClickLocale = (localeItem: LocalesValues) => {\n if (isMultilingual) {\n if (selectedLocales.includes(localeItem)) {\n if (selectedLocales.length > 1) {\n setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));\n }\n } else {\n setSelectedLocales((prev) => [...prev, localeItem]);\n }\n } else {\n setSelectedLocales([localeItem]);\n }\n };\n\n const handleSeeAllLocales = (value: boolean) => {\n setSeeAllLocales(value);\n\n if (value) {\n setSelectedLocales(availableLocales);\n } else {\n setSelectedLocales([locale]);\n }\n };\n\n return (\n <div className=\"rounded-xl border border-text text-text transition-colors\">\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger\n identifier={DROPDOWN_IDENTIFIER}\n label={localeSwitcherLabel.value}\n className=\"p-0!\"\n roundedSize=\"3xl\"\n >\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"px-2 py-1\">\n <Globe size={16} />\n </div>\n <MoveVertical className=\"self-center\" size={16} />\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-[60vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n border\n roundedSize=\"2xl\"\n borderColor=\"text\"\n aria-label={languageListLabel.value}\n >\n {isMultilingual && (\n <div className=\"m-auto p-2\">\n <SwitchSelector\n defaultValue={seeAllLocales} // Ensure this uses the persisted state\n onChange={handleSeeAllLocales}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"!w-60\"\n choices={[\n {\n content: seeAllLocalesSwitch.true.value,\n value: true,\n },\n {\n content: seeAllLocalesSwitch.false.value,\n value: false,\n },\n ]}\n />\n </div>\n )}\n\n {!(isMultilingual && seeAllLocales) && (\n <>\n <div className=\"p-3\">\n <Input\n type=\"search\"\n aria-label={searchInput.ariaLabel.value}\n placeholder={searchInput.placeholder.value}\n // Update search query state directly\n onChange={(e) => setSearchQuery(e.target.value)}\n ref={inputRef}\n />\n </div>\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {results.map(\n ({\n locale: localeItem,\n currentLocaleName,\n ownLocaleName,\n }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => handleClickLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? availableLocales).includes(\n localeItem\n )\n }\n isActive={selectedLocales.includes(localeItem)}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n size={ButtonSize.SM}\n >\n <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n {isMultilingual && (\n <div className=\"w-4\">\n {selectedLocales.includes(localeItem) && (\n <Check className=\"size-full\" />\n )}\n </div>\n )}\n <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1\">\n <div className=\"flex flex-col text-nowrap\">\n <span\n dir={getHTMLTextDir(localeItem)}\n lang={localeItem}\n >\n {ownLocaleName}\n </span>\n <span className=\"text-neutral text-xs\">\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </>\n )}\n </Container>\n </DropDown.Panel>\n </DropDown>\n </div>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LocaleSwitcherContent.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport * as Locales from '@intlayer/types/locales';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { useLocaleSwitcherContent } from './LocaleSwitcherContentContext';\n\nexport type LocaleSwitcherContentProps = {\n panelProps?: Omit<PanelProps, 'identifier'>;\n isMultilingual?: boolean;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher-content';\n\ntype MultilingualAvailableLocales = {\n locale: LocalesValues;\n englishName: string;\n currentLocaleName: string;\n ownLocaleName: string;\n};\n\nexport const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({\n panelProps,\n isMultilingual = true,\n}) => {\n const {\n switchTo,\n searchInput,\n localeSwitcherLabel,\n languageListLabel,\n seeAllLocalesSwitch,\n } = useIntlayer('locale-switcher-content');\n const inputRef = useRef<HTMLInputElement>(null);\n const { locale } = useLocale();\n const { availableLocales, selectedLocales, setSelectedLocales } =\n useLocaleSwitcherContent();\n\n // 1. Memoize the list construction so it doesn't rebuild every render\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n availableLocales.map((localeEl) => {\n const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [availableLocales, locale]\n );\n\n // 2. State for Search Query only (Source of Truth)\n const [searchQuery, setSearchQuery] = useState('');\n\n const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n 'locale-content-selector-see-all-locales',\n false\n );\n\n // 3. Memoize Fuse instance\n const fuse = useMemo(() => {\n const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n keys: [\n { name: 'ownLocaleName', weight: 0.4 },\n { name: 'englishName', weight: 0.2 },\n { name: 'currentLocaleName', weight: 0.2 },\n { name: 'locale', weight: 0.2 },\n ],\n threshold: 0.02,\n };\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n // 4. Derive results from Search Query\n const results = useMemo(() => {\n if (!searchQuery) {\n return multilingualAvailableLocales;\n }\n return fuse.search(searchQuery).map((result) => result.item);\n }, [searchQuery, multilingualAvailableLocales, fuse]);\n\n const handleClickLocale = (localeItem: LocalesValues) => {\n if (isMultilingual) {\n if (selectedLocales.includes(localeItem)) {\n if (selectedLocales.length > 1) {\n setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));\n }\n } else {\n setSelectedLocales((prev) => [...prev, localeItem]);\n }\n } else {\n setSelectedLocales([localeItem]);\n }\n };\n\n const handleSeeAllLocales = (value: boolean) => {\n setSeeAllLocales(value);\n\n if (value) {\n setSelectedLocales(availableLocales);\n } else {\n setSelectedLocales([locale]);\n }\n };\n\n return (\n <div className=\"rounded-xl border border-text text-text transition-colors\">\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger\n identifier={DROPDOWN_IDENTIFIER}\n label={localeSwitcherLabel.value}\n className=\"p-0!\"\n roundedSize=\"3xl\"\n color=\"text\"\n >\n <div className=\"flex w-full items-center justify-between text-text\">\n <div className=\"px-2 py-1\">\n <Globe size={16} />\n </div>\n <MoveVertical className=\"self-center\" size={16} />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n align=\"end\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[60vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n border\n roundedSize=\"3xl\"\n borderColor=\"text\"\n aria-label={languageListLabel.value}\n >\n {isMultilingual && (\n <div className=\"m-auto p-2\">\n <SwitchSelector\n defaultValue={seeAllLocales} // Ensure this uses the persisted state\n onChange={handleSeeAllLocales}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"!w-60\"\n choices={[\n {\n content: seeAllLocalesSwitch.true.value,\n value: true,\n },\n {\n content: seeAllLocalesSwitch.false.value,\n value: false,\n },\n ]}\n />\n </div>\n )}\n\n {!(isMultilingual && seeAllLocales) && (\n <>\n <div className=\"p-3\">\n <Input\n type=\"search\"\n aria-label={searchInput.ariaLabel.value}\n placeholder={searchInput.placeholder.value}\n // Update search query state directly\n onChange={(e) => setSearchQuery(e.target.value)}\n ref={inputRef}\n />\n </div>\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {results.map(\n ({\n locale: localeItem,\n currentLocaleName,\n ownLocaleName,\n }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => handleClickLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? availableLocales).includes(\n localeItem\n )\n }\n isActive={selectedLocales.includes(localeItem)}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n size={ButtonSize.SM}\n >\n <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n {isMultilingual && (\n <div className=\"w-4\">\n {selectedLocales.includes(localeItem) && (\n <Check className=\"size-full\" />\n )}\n </div>\n )}\n <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1\">\n <div className=\"flex flex-col text-nowrap\">\n <span\n dir={getHTMLTextDir(localeItem)}\n lang={localeItem}\n >\n {ownLocaleName}\n </span>\n <span className=\"text-neutral text-xs\">\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </>\n )}\n </Container>\n </DropDown.Panel>\n </DropDown>\n </div>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Container as e}from"../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonTextAlign as r,ButtonVariant as i}from"../Button/Button.mjs";import{Input as a}from"../Input/Input.mjs";import{DropDown as o}from"../DropDown/index.mjs";import{useCallback as s,useMemo as c,useRef as l,useState as u}from"react";import{MoveVertical as d}from"lucide-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{useIntlayer as m}from"react-intlayer";import{getHTMLTextDir as h,getLocaleName as g}from"@intlayer/core/localization";import*as _ from"@intlayer/types/locales";import v from"fuse.js";const y=`locale-switcher`,b=({locale:b,localeList:x,availableLocales:S,fullLocaleName:C=!0,setLocale:w,panelProps:T})=>{let E=`Select a locale`,{switchTo:D,searchInput:O,languageListLabel:k,localeSwitcherLabel:A}=m(`locale-switcher`),j=l(null),M=c(()=>x.map(e=>({locale:e,englishName:g(e,_.ENGLISH),currentLocaleName:g(e,b),ownLocaleName:g(e)})),[x,b]),[N,P]=u(M),F=c(()=>new v(M,{keys:[{name:`ownLocaleName`,weight:.4},{name:`englishName`,weight:.2},{name:`currentLocaleName`,weight:.2},{name:`locale`,weight:.2}],threshold:.02}),[M]),I=s(e=>{P(e?F.search(e).map(e=>e.item):M)},[F,M]);return b&&(E=C?g(b):b.toUpperCase()),f(`nav`,{className:`rounded-xl border border-text
|
|
1
|
+
"use client";import{Container as e}from"../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonTextAlign as r,ButtonVariant as i}from"../Button/Button.mjs";import{Input as a}from"../Input/Input.mjs";import{DropDown as o}from"../DropDown/index.mjs";import{useCallback as s,useMemo as c,useRef as l,useState as u}from"react";import{MoveVertical as d}from"lucide-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{useIntlayer as m}from"react-intlayer";import{getHTMLTextDir as h,getLocaleName as g}from"@intlayer/core/localization";import*as _ from"@intlayer/types/locales";import v from"fuse.js";const y=`locale-switcher`,b=({locale:b,localeList:x,availableLocales:S,fullLocaleName:C=!0,setLocale:w,panelProps:T})=>{let E=`Select a locale`,{switchTo:D,searchInput:O,languageListLabel:k,localeSwitcherLabel:A}=m(`locale-switcher`),j=l(null),M=c(()=>x.map(e=>({locale:e,englishName:g(e,_.ENGLISH),currentLocaleName:g(e,b),ownLocaleName:g(e)})),[x,b]),[N,P]=u(M),F=c(()=>new v(M,{keys:[{name:`ownLocaleName`,weight:.4},{name:`englishName`,weight:.2},{name:`currentLocaleName`,weight:.2},{name:`locale`,weight:.2}],threshold:.02}),[M]),I=s(e=>{P(e?F.search(e).map(e=>e.item):M)},[F,M]);return b&&(E=C?g(b):b.toUpperCase()),f(`nav`,{className:`rounded-xl border border-text`,"aria-label":A.value,children:p(o,{identifier:y,children:[f(o.Trigger,{identifier:y,color:`text`,children:p(`div`,{className:`flex w-full items-center justify-between`,children:[f(`div`,{className:`text-nowrap px-2`,children:E}),f(d,{className:`w-5 self-center`})]})}),f(o.Panel,{identifier:y,isOverable:!0,isFocusable:!0,align:`end`,...T,children:p(e,{className:`max-h-[80vh] min-w-28`,separator:`y`,role:`listbox`,transparency:`xs`,"aria-label":k.value,children:[f(`div`,{className:`p-3`,children:f(a,{type:`search`,"aria-label":O.ariaLabel.value,placeholder:O.placeholder.value,onChange:e=>I(e.target.value),ref:j})}),f(`ol`,{className:`divide-y divide-dashed divide-text/20 overflow-y-auto p-1`,children:N.map(({locale:e,currentLocaleName:a,ownLocaleName:o})=>f(`li`,{className:`px-1.5 py-1`,children:f(t,{onClick:()=>w(e),label:`${D} ${a}`,disabled:!(S??x).includes(e),isActive:b===e,variant:i.HOVERABLE,color:n.TEXT,isFullWidth:!0,textAlign:r.LEFT,children:p(`div`,{className:`flex flex-row items-center justify-between gap-3 px-2 py-1`,children:[p(`div`,{className:`flex flex-col text-nowrap`,children:[f(`span`,{dir:h(e),lang:e,suppressHydrationWarning:!0,children:o}),f(`span`,{className:`text-neutral text-xs`,suppressHydrationWarning:!0,children:a})]}),f(`span`,{className:`text-neutral text-sm`,children:e.toUpperCase()})]})})},e))})]})})]})})};export{b as LocaleSwitcher};
|
|
2
2
|
//# sourceMappingURL=LocaleSwitcher.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocaleSwitcher.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport * as Locales from '@intlayer/types/locales';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\n\nexport type LocaleSwitcherProps = {\n locale?: Locale;\n localeList: Locale[];\n availableLocales?: Locale[];\n fullLocaleName?: boolean;\n setLocale: (locale: Locale) => void;\n panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n locale: Locale;\n englishName: string;\n currentLocaleName: string;\n ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n locale,\n localeList,\n availableLocales,\n fullLocaleName = true,\n setLocale,\n panelProps,\n}) => {\n let localeName = 'Select a locale';\n const { switchTo, searchInput, languageListLabel, localeSwitcherLabel } =\n useIntlayer('locale-switcher');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n localeList.map((localeEl) => {\n const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [localeList, locale]\n );\n\n const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n multilingualAvailableLocales\n );\n\n // Create a new Fuse instance with the options and documentation data\n const fuse = useMemo(() => {\n const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n keys: [\n { name: 'ownLocaleName', weight: 0.4 },\n { name: 'englishName', weight: 0.2 },\n { name: 'currentLocaleName', weight: 0.2 },\n { name: 'locale', weight: 0.2 },\n ],\n threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n };\n\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n const handleSearch = useCallback(\n (searchQuery: string) => {\n if (searchQuery) {\n // Perform search on every input change\n const searchResults = fuse\n .search(searchQuery)\n .map((result) => result.item);\n setResults(searchResults);\n } else {\n setResults(multilingualAvailableLocales);\n }\n },\n [fuse, multilingualAvailableLocales]\n );\n\n if (locale) {\n localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n }\n\n return (\n <nav\n className=\"rounded-xl border border-text
|
|
1
|
+
{"version":3,"file":"LocaleSwitcher.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport * as Locales from '@intlayer/types/locales';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\n\nexport type LocaleSwitcherProps = {\n locale?: Locale;\n localeList: Locale[];\n availableLocales?: Locale[];\n fullLocaleName?: boolean;\n setLocale: (locale: Locale) => void;\n panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n locale: Locale;\n englishName: string;\n currentLocaleName: string;\n ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n locale,\n localeList,\n availableLocales,\n fullLocaleName = true,\n setLocale,\n panelProps,\n}) => {\n let localeName = 'Select a locale';\n const { switchTo, searchInput, languageListLabel, localeSwitcherLabel } =\n useIntlayer('locale-switcher');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n localeList.map((localeEl) => {\n const englishName = getLocaleName(localeEl, Locales.ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [localeList, locale]\n );\n\n const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n multilingualAvailableLocales\n );\n\n // Create a new Fuse instance with the options and documentation data\n const fuse = useMemo(() => {\n const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n keys: [\n { name: 'ownLocaleName', weight: 0.4 },\n { name: 'englishName', weight: 0.2 },\n { name: 'currentLocaleName', weight: 0.2 },\n { name: 'locale', weight: 0.2 },\n ],\n threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n };\n\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n const handleSearch = useCallback(\n (searchQuery: string) => {\n if (searchQuery) {\n // Perform search on every input change\n const searchResults = fuse\n .search(searchQuery)\n .map((result) => result.item);\n setResults(searchResults);\n } else {\n setResults(multilingualAvailableLocales);\n }\n },\n [fuse, multilingualAvailableLocales]\n );\n\n if (locale) {\n localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n }\n\n return (\n <nav\n className=\"rounded-xl border border-text\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER} color=\"text\">\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"text-nowrap px-2\">{localeName}</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 align=\"end\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n aria-label={languageListLabel.value}\n >\n <div className=\"p-3\">\n <Input\n type=\"search\"\n aria-label={searchInput.ariaLabel.value}\n placeholder={searchInput.placeholder.value}\n onChange={(e) => handleSearch(e.target.value)}\n ref={inputRef}\n />\n </div>\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {results.map(\n ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => setLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? localeList).includes(localeItem)\n }\n isActive={locale === localeItem}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n >\n <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n <div className=\"flex flex-col text-nowrap\">\n <span\n dir={getHTMLTextDir(localeItem)}\n lang={localeItem}\n suppressHydrationWarning\n >\n {ownLocaleName}\n </span>\n <span\n className=\"text-neutral text-xs\"\n suppressHydrationWarning\n >\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </Container>\n </DropDown.Panel>\n </DropDown>\n </nav>\n );\n};\n"],"mappings":"0mBAuBA,MAAM,EAAsB,kBASf,GAA2C,CACtD,SACA,aACA,mBACA,iBAAiB,GACjB,YACA,gBACI,CACJ,IAAI,EAAa,kBACX,CAAE,WAAU,cAAa,oBAAmB,uBAChD,EAAY,kBAAkB,CAC1B,EAAW,EAAyB,KAAK,CAEzC,EAA+D,MAEjE,EAAW,IAAK,IAIP,CACL,OAAQ,EACR,YALkB,EAAc,EAAU,EAAQ,QAAQ,CAM1D,kBALwB,EAAc,EAAU,EAAO,CAMvD,cALoB,EAAc,EAAS,CAM5C,EACD,CACJ,CAAC,EAAY,EAAO,CACrB,CAEK,CAAC,EAAS,GAAc,EAC5B,EACD,CAGK,EAAO,MAWJ,IAAI,EAAK,EAVgD,CAC9D,KAAM,CACJ,CAAE,KAAM,gBAAiB,OAAQ,GAAK,CACtC,CAAE,KAAM,cAAe,OAAQ,GAAK,CACpC,CAAE,KAAM,oBAAqB,OAAQ,GAAK,CAC1C,CAAE,KAAM,SAAU,OAAQ,GAAK,CAChC,CACD,UAAW,IACZ,CAEyD,CACzD,CAAC,EAA6B,CAAC,CAE5B,EAAe,EAClB,GAAwB,CAMrB,EALE,EAEoB,EACnB,OAAO,EAAY,CACnB,IAAK,GAAW,EAAO,KAAK,CAGpB,EAA6B,EAG5C,CAAC,EAAM,EAA6B,CACrC,CAMD,OAJI,IACF,EAAa,EAAiB,EAAc,EAAO,CAAG,EAAO,aAAa,EAI1E,EAAC,MAAD,CACE,UAAU,gCACV,aAAY,EAAoB,eAEhC,EAAC,EAAD,CAAU,WAAY,WAAtB,CACE,EAAC,EAAS,QAAV,CAAkB,WAAY,EAAqB,MAAM,gBACvD,EAAC,MAAD,CAAK,UAAU,oDAAf,CACE,EAAC,MAAD,CAAK,UAAU,4BAAoB,EAAiB,CAAA,CACpD,EAAC,EAAD,CAAc,UAAU,kBAAoB,CAAA,CACxC,GACW,CAAA,CAEnB,EAAC,EAAS,MAAV,CACE,WAAY,EACZ,WAAA,GACA,YAAA,GACA,MAAM,MACN,GAAI,WAEJ,EAAC,EAAD,CACE,UAAU,wBACV,UAAU,IACV,KAAK,UACL,aAAa,KACb,aAAY,EAAkB,eALhC,CAOE,EAAC,MAAD,CAAK,UAAU,eACb,EAAC,EAAD,CACE,KAAK,SACL,aAAY,EAAY,UAAU,MAClC,YAAa,EAAY,YAAY,MACrC,SAAW,GAAM,EAAa,EAAE,OAAO,MAAM,CAC7C,IAAK,EACL,CAAA,CACE,CAAA,CACN,EAAC,KAAD,CAAI,UAAU,qEACX,EAAQ,KACN,CAAE,OAAQ,EAAY,oBAAmB,mBACxC,EAAC,KAAD,CAAI,UAAU,uBACZ,EAAC,EAAD,CACE,YAAe,EAAU,EAAW,CACpC,MAAO,GAAG,EAAS,GAAG,IACtB,SACE,EAAE,GAAoB,GAAY,SAAS,EAAW,CAExD,SAAU,IAAW,EACrB,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,YAAA,GACA,UAAW,EAAgB,cAE3B,EAAC,MAAD,CAAK,UAAU,sEAAf,CACE,EAAC,MAAD,CAAK,UAAU,qCAAf,CACE,EAAC,OAAD,CACE,IAAK,EAAe,EAAW,CAC/B,KAAM,EACN,yBAAA,YAEC,EACI,CAAA,CACP,EAAC,OAAD,CACE,UAAU,uBACV,yBAAA,YAEC,EACI,CAAA,CACH,GACN,EAAC,OAAD,CAAM,UAAU,gCACb,EAAW,aAAa,CACpB,CAAA,CACH,GACC,CAAA,CACN,CAlC4B,EAkC5B,CAER,CACE,CAAA,CACK,GACG,CAAA,CACR,GACP,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,className:i=``,isOverable:a=!1,isFocusable:o=!1,minHeight:s=0
|
|
1
|
+
import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,className:i=``,isOverable:a=!1,isFocusable:o=!1,minHeight:s=0,...c})=>t(`div`,{"aria-hidden":o?r:void 0,tabIndex:o?0:void 0,role:o?`button`:`none`,className:e(`group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out`,r!==void 0&&!r&&`grid-rows-[1fr] overflow-x-auto`,a&&`hover:grid-rows-[1fr] hover:overflow-x-auto`,o&&`focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto`,i),...c,children:t(`div`,{style:{minHeight:`${s}px`},className:e(a&&`group-hover/height-smoother:visible`,o&&`group-focus/height-smoother:visible`,i),children:n})});export{n as MaxHeightSmoother};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n /** Content to render within the smoother container */\n children: ReactNode;\n /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n isHidden?: boolean;\n /** Enable expand-on-hover behavior */\n isOverable?: boolean;\n /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n isFocusable?: boolean;\n /** Minimum height in pixels for the collapsed state */\n minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n * <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable>\n * <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n * <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n * <h3>Article Preview</h3>\n * <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n * <h4>Interactive Card</h4>\n * <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * ## Animation Strategies\n *\n * ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n *\n * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n *\n * `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n *\n * The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n *\n * Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n * --mhs-collapsed: 80px;\n * --mhs-expanded: 1200px;\n * }\n * ```\n *\n * Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n *\n * ## Interaction Modes\n *\n * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)\n * 2. **Hover** — Set `isOverable` for mouse hover expansion\n * 3. **Focus** — Set `isFocusable` for keyboard focus expansion\n * 4. **Combined** — Use `isOverable` and `isFocusable` together\n *\n * ## Accessibility\n *\n * - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n *\n * Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n *\n * ## Performance\n *\n * - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (`true` = collapsed, `false` = expanded)\n * @param props.isOverable - Enable hover-to-expand behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n children,\n isHidden,\n className = '',\n isOverable = false,\n isFocusable = false,\n minHeight = 0,\n
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n /** Content to render within the smoother container */\n children: ReactNode;\n /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n isHidden?: boolean;\n /** Enable expand-on-hover behavior */\n isOverable?: boolean;\n /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n isFocusable?: boolean;\n /** Minimum height in pixels for the collapsed state */\n minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n * <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable>\n * <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n * <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n * <h3>Article Preview</h3>\n * <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n * <h4>Interactive Card</h4>\n * <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * ## Animation Strategies\n *\n * ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n *\n * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n *\n * `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n *\n * The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n *\n * Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n * --mhs-collapsed: 80px;\n * --mhs-expanded: 1200px;\n * }\n * ```\n *\n * Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n *\n * ## Interaction Modes\n *\n * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)\n * 2. **Hover** — Set `isOverable` for mouse hover expansion\n * 3. **Focus** — Set `isFocusable` for keyboard focus expansion\n * 4. **Combined** — Use `isOverable` and `isFocusable` together\n *\n * ## Accessibility\n *\n * - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n *\n * Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n *\n * ## Performance\n *\n * - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (`true` = collapsed, `false` = expanded)\n * @param props.isOverable - Enable hover-to-expand behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n children,\n isHidden,\n className = '',\n isOverable = false,\n isFocusable = false,\n minHeight = 0,\n ...props\n}) => (\n <div\n aria-hidden={isFocusable ? isHidden : undefined}\n tabIndex={isFocusable ? 0 : undefined}\n role={isFocusable ? 'button' : 'none'}\n className={cn(\n 'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n typeof isHidden !== 'undefined' &&\n !isHidden &&\n 'grid-rows-[1fr] overflow-x-auto',\n isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n isFocusable &&\n 'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n className\n )}\n {...props}\n >\n <div\n style={{\n minHeight: `${minHeight}px`,\n }}\n className={cn(\n isOverable && 'group-hover/height-smoother:visible',\n isFocusable && 'group-focus/height-smoother:visible',\n className\n )}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":"gFA+IA,MAAa,GAAiD,CAC5D,WACA,WACA,YAAY,GACZ,aAAa,GACb,cAAc,GACd,YAAY,EACZ,GAAG,KAEH,EAAC,MAAD,CACE,cAAa,EAAc,EAAW,IAAA,GACtC,SAAU,EAAc,EAAI,IAAA,GAC5B,KAAM,EAAc,SAAW,OAC/B,UAAW,EACT,qHACO,IAAa,QAClB,CAAC,GACD,kCACF,GAAc,8CACd,GACE,wGACF,EACD,CACD,GAAI,WAEJ,EAAC,MAAD,CACE,MAAO,CACL,UAAW,GAAG,EAAU,IACzB,CACD,UAAW,EACT,GAAc,sCACd,GAAe,sCACf,EACD,CAEA,WACG,CAAA,CACF,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{cn as e}from"../../utils/cn.mjs";import{
|
|
1
|
+
"use client";import{cn as e}from"../../utils/cn.mjs";import{useGetElementOrWindow as t}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{Container as r}from"../Container/index.mjs";import{Button as i,ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../Button/Button.mjs";import{H3 as c}from"../Headers/index.mjs";import{useEffect as l}from"react";import{cva as u}from"class-variance-authority";import{X as d}from"lucide-react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{motion as h}from"framer-motion";import{createPortal as g}from"react-dom";let _=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.UNSET=`unset`,e}({});const v=u(`flex cursor-default flex-col overflow-hidden shadow-sm`,{variants:{size:{sm:`h-auto max-h-[30vh] w-[95vw] max-w-xl`,md:`h-auto max-h-[50vh] w-[95vw] max-w-xl`,lg:`h-auto max-h-[70vh] w-[95vw] max-w-4xl`,xl:`h-auto max-h-[95vh] w-[95vw] max-w-6xl`,unset:`h-auto max-h-[95vh] w-[95vw]`}},defaultVariants:{size:`unset`}}),y={none:`p-0`,sm:`px-2 py-4`,md:`px-4 py-6`,lg:`px-6 py-8`,xl:`px-8 py-10`,"2xl":`px-10 py-12`},b=h.create(r),x=({children:r,isOpen:u,container:x,onClose:S,hasCloseButton:C=!1,title:w,size:T=_.MD,className:E,isScrollable:D=!1,disableScroll:O=!0,padding:k=`none`,...A})=>{let j=t(x);if(n({key:`modal`,disableScroll:u&&O}),l(()=>{let e=e=>{e.key===`Escape`&&u&&S&&S()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[u,S]),!j)return p(f,{});let M=!!w,N=y[k||`none`];return g(p(h.div,{className:`invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur`,animate:u?`visible`:`invisible`,variants:{visible:{opacity:1,visibility:`visible`,transition:{duration:.1,when:`beforeChildren`}},invisible:{opacity:0,visibility:`hidden`,transition:{duration:.1,when:`afterChildren`}}},onClick:e=>{e.stopPropagation(),S?.()},"aria-hidden":!u,children:m(b,{onClick:e=>e.stopPropagation(),initial:{scale:u?.5:1},animate:{scale:u?1:.5},transition:{duration:.3},className:v({size:T,className:E}),role:`dialog`,"aria-modal":!0,roundedSize:`4xl`,padding:`none`,...A,children:[m(`div`,{className:e(`relative flex-none px-4 pt-4`,C&&M?`flex items-start`:C?`flex justify-end`:M?`items-center`:`hidden`),children:[M&&p(c,{className:`mb-2 ml-1 flex items-center justify-center font-bold text-lg`,children:w}),C&&p(i,{variant:s.HOVERABLE,color:a.TEXT,label:`Close modal`,className:`ml-auto`,onClick:e=>{e.stopPropagation(),S?.()},Icon:d,size:o.ICON_MD})]}),p(`div`,{className:e(`flex min-h-0 w-full flex-1 flex-col`,D===!0&&`overflow-auto`,D===`y`&&`overflow-y-auto overflow-x-hidden`,D===`x`&&`overflow-x-auto overflow-y-hidden`,!D&&`overflow-visible`),children:p(`div`,{className:e(`flex h-full w-full flex-1 flex-col`,N),children:r})})]})}),j)};export{x as Modal,_ as ModalSize};
|
|
2
2
|
//# sourceMappingURL=Modal.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{cn as e}from"../../utils/cn.mjs";import{
|
|
1
|
+
"use client";import{cn as e}from"../../utils/cn.mjs";import{useScrollBlockage as t}from"../../hooks/useScrollBlockage/index.mjs";import{useScrollDetection as n}from"../../hooks/useScrollDetection.mjs";import{MaxHeightSmoother as r}from"../MaxHeightSmoother/index.mjs";import{Burger as i}from"./Burger.mjs";import{useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{m as l}from"framer-motion";const u={open:{transition:{staggerChildren:.07,delayChildren:.2}},closed:{transition:{staggerChildren:.05,staggerDirection:-1}}},d=`bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,f=({logo:f,topChildren:p,topSections:m=[],bottomChildren:h,bottomSections:g=[],rightItems:_,rollable:v=!0})=>{let[y,b]=o(!1),[x,S]=o(!1),C=a(null);t({disableScroll:v,key:`mobile_nav`}),n({onScrollUp:()=>b(!1),onScrollDown:()=>b(!0),isEnabled:!x&&v});let w=y?0:C.current?.clientHeight??0,T=m.length+g.length>0;return c(`nav`,{className:e(d,`sticky top-0 z-50 flex w-screen flex-col transition`,y?`-translate-y-full`:`translate-y-0`),id:`mobile-menu`,children:[c(`div`,{className:`flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]`,ref:C,children:[f,c(`div`,{className:`flex w-full flex-1 items-center justify-end gap-6`,children:[s(`div`,{className:`flex w-full items-center justify-end gap-1`,children:_}),T&&s(i,{isActive:x,onClick:()=>S(e=>!e)})]})]}),s(`div`,{className:e(d,`absolute bottom-0 left-0 w-full translate-y-full`),children:s(r,{isHidden:!x,children:c(l.div,{className:`flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide`,onClick:()=>S(!1),animate:x?`open`:`closed`,variants:u,style:{height:`calc(100vh - ${w}px)`},children:[p,c(`div`,{className:`flex h-full flex-col justify-center`,children:[m,g]}),s(`div`,{className:`m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3`,children:h})]})})})]})};export{f as MobileNavbar};
|
|
2
2
|
//# sourceMappingURL=MobileNavbar.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as
|
|
1
|
+
"use client";import{cn as e}from"../../utils/cn.mjs";import{useItemSelector as t}from"../../hooks/useItemSelector.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonVariant as a}from"../Button/Button.mjs";import{useEffect as o,useRef as s}from"react";import{cva as c}from"class-variance-authority";import{ChevronLeft as l,ChevronRight as u,MoreHorizontal as d}from"lucide-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=c(`flex items-center justify-center gap-1`,{variants:{size:{sm:`gap-1`,md:`gap-2`,lg:`gap-3`},color:{text:`background-text`,primary:`background-primary`,secondary:`background-secondary`,neutral:`background-neutral`,destructive:`background-destructive`},variant:{default:``,bordered:`rounded-lg border border-border p-2`,ghost:`bg-transparent`}},defaultVariants:{size:`md`,variant:`default`}});let h=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({}),g=function(e){return e.DEFAULT=`default`,e.BORDERED=`bordered`,e.GHOST=`ghost`,e}({});const _=(e,t,n)=>{if(t<=n)return Array.from({length:t},(e,t)=>t+1);let r=[],i=Math.floor(n/2);if(r.push(1),e<=i+2){for(let e=2;e<=Math.min(n-1,t-1);e++)r.push(e);t>n&&r.push(`ellipsis`),t>1&&r.push(t)}else if(e>=t-i-1){t>n&&r.push(`ellipsis`);for(let e=Math.max(2,t-n+2);e<=t;e++)r.push(e)}else{r.push(`ellipsis`);let n=e-i,a=e+i;for(let e=n;e<=a;e++)r.push(e);r.push(`ellipsis`),r.push(t)}return r},v=e=>e?.getAttribute(`aria-current`)===`true`,y=e=>e===h.SM?i.ICON_SM:e===h.LG?i.ICON_LG:i.ICON_MD,b=e=>f(`div`,{className:`absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none`,...e}),x=({currentPage:i,totalPages:c,onPageChange:x,showFirstLast:S=!1,showPrevNext:C=!0,maxVisiblePages:w=5,disabled:T=!1,size:E=h.MD,variant:D=g.DEFAULT,color:O=r.TEXT,className:k,...A})=>{let j=_(i,c,w),M=y(E),N=i===1,P=i===c,F=s([]),I=s(null),{choiceIndicatorPosition:L,calculatePosition:R}=t(F,{selector:v,isHoverable:!0});if(o(()=>{let e=setTimeout(()=>{R()},300);return()=>clearTimeout(e)},[i,R]),c<=1)return null;let z=e=>{!T&&e>=1&&e<=c&&e!==i&&x(e)};return f(`div`,{className:e(m({size:E,variant:D}),k),...A,children:p(`div`,{className:`relative flex items-center gap-1`,children:[L&&f(b,{style:L,ref:I}),C&&f(n,{variant:a.OUTLINE,size:M,color:r.TEXT,onClick:()=>z(i-1),disabled:T||N,label:`Go to previous page`,Icon:l,ref:e=>{e&&(F.current[0]=e)},className:`min-w-0 px-2`}),f(`div`,{className:`flex items-center gap-1 max-md:gap-0.5`,children:j.map((t,o)=>{if(t===`ellipsis`)return f(`div`,{className:`flex h-8 min-w-8 items-center justify-center px-1`,children:f(d,{className:`h-4 w-4 text-muted-foreground`})},`ellipsis-${t}-${o}`);let s=t===i,c=(C?1:0)+j.slice(0,o).filter(e=>e!==`ellipsis`).length;return f(n,{variant:s?a.DEFAULT:a.OUTLINE,size:M,color:r.TEXT,onClick:()=>z(t),disabled:T,label:`Go to page ${t}`,"aria-current":s?`true`:`false`,ref:e=>{e&&(F.current[c]=e)},className:e(`flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm`,E===`sm`&&`h-6 w-6 text-xs`,E===`lg`&&`h-10 w-10 text-base`,s&&`font-semibold`),children:t},t)})}),C&&f(n,{variant:a.OUTLINE,size:M,color:r.TEXT,onClick:()=>z(i+1),disabled:T||P,label:`Go to next page`,Icon:u,ref:e=>{let t=(C?1:0)+j.filter(e=>e!==`ellipsis`).length;e&&(F.current[t]=e)},className:`min-w-0 px-2`})]})})};export{x as Pagination,h as PaginationSize,g as PaginationVariant,m as paginationVariants};
|
|
2
2
|
//# sourceMappingURL=Pagination.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{
|
|
1
|
+
"use client";import{useGetElementOrWindow as e}from"../../hooks/useGetElementOrWindow.mjs";import{useDevice as t}from"../../hooks/useDevice.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{Container as r}from"../Container/index.mjs";import{Button as i,ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../Button/Button.mjs";import{KeyboardShortcut as c}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as l}from"../Popover/dynamic.mjs";import{MaxWidthSmoother as u}from"../MaxWidthSmoother/index.mjs";import{isElementAtTopAndNotCovered as d}from"./isElementAtTopAndNotCovered.mjs";import{useRightDrawer as f}from"./useRightDrawer.mjs";import{useEffect as p,useRef as m}from"react";import{ChevronLeft as h,X as g}from"lucide-react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{useIntlayer as b}from"react-intlayer";import{createPortal as x}from"react-dom";const S=({title:S,identifier:C,children:w,header:T,footer:E,closeOnOutsideClick:D=!0,backButton:O,isOpen:k,onClose:A,container:j})=>{let M=b(`right-drawer`),{isMobile:N}=t(`md`),P=m(null),F=m(null),I=e(j),{open:L,close:R,isOpen:z}=f(),B=z(C),V=B;n({disableScroll:V,key:C?`right_drawer_${C}`:`right_drawer`}),p(()=>{let e=e=>{try{if(!P.current)return;let t=V&&D,n=e.target&&!P.current.contains(e.target),r=d(P.current);(t&&n&&r||!e.target)&&(R(C),A?.())}catch{R(C),A?.()}};return window.addEventListener(`mousedown`,e),()=>window.removeEventListener(`mousedown`,e)},[V,R,A,D,C]);let H=m(A);return p(()=>{H.current=A},[A]),p(()=>{k!==void 0&&k!==B&&(k?L(C):(R(C),H.current?.()))},[k,B,C,L,R]),I?x(v(`div`,{className:`fixed top-0 right-0 z-50 flex h-full justify-end`,children:v(u,{isHidden:!V,align:`right`,children:y(r,{className:`relative flex h-screen w-screen flex-col text-text md:w-[400px]`,ref:P,roundedSize:`none`,children:[y(`div`,{className:`flex shrink-0 flex-col gap-3 px-6 pt-6`,children:[y(`div`,{className:`flex justify-between gap-3`,children:[v(`div`,{children:O&&v(i,{variant:s.HOVERABLE,color:a.TEXT,label:O.text??M.goBack.value,onClick:O.onBack,Icon:h,children:O?.text})}),v(`div`,{children:y(l,{identifier:`close-drawer`,children:[v(i,{variant:s.HOVERABLE,color:a.TEXT,label:`Close`,className:`ml-auto`,onClick:()=>{R(C),A?.()},Icon:g,size:o.ICON_MD}),v(l.Detail,{identifier:`close-drawer`,children:y(`div`,{className:`flex items-center gap-2 p-2`,children:[v(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:M.closeDrawer}),v(c,{shortcut:`Escape`,size:`sm`,onTriggered:()=>{R(C),A?.()}})]})})]})})]}),S&&v(`h2`,{className:`flex items-center justify-center font-bold text-lg`,children:S}),T]}),v(`div`,{className:`flex min-h-0 flex-1 flex-col overflow-y-auto p-2`,children:v(`div`,{className:`flex flex-1 flex-col outline-none`,onClick:e=>{e.target===e.currentTarget&&N&&(R(C),A?.())},onKeyDown:e=>{e.target===e.currentTarget&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),N&&(R(C),A?.()))},ref:F,role:`button`,tabIndex:0,children:w})}),E&&v(`div`,{className:`shrink-0`,children:E})]})})}),I):v(_,{})};export{S as RightDrawer};
|
|
2
2
|
//# sourceMappingURL=RightDrawer.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Toast as e,ToastAction as t,ToastClose as n,ToastDescription as r,ToastProvider as i,ToastTitle as a,ToastViewport as o}from"./Toaster/Toast.mjs";import{reducer as s,toast as c,useToast as l}from"./Toaster/useToast.mjs";import{Toaster as u}from"./Toaster/Toaster.mjs";import{Container as d,ContainerBackground as f,ContainerBorderColor as p,ContainerGap as m,ContainerPadding as h,ContainerRoundedSize as g,ContainerSeparator as _,ContainerTransparency as v,containerVariants as y}from"./Container/index.mjs";import{Loader as b}from"./Loader/index.mjs";import{Button as x,ButtonColor as S,ButtonSize as C,ButtonTextAlign as w,ButtonVariant as T,buttonVariants as E}from"./Button/Button.mjs";import{MaxHeightSmoother as D}from"./MaxHeightSmoother/index.mjs";import{Accordion as O}from"./Accordion/Accordion.mjs";import{Avatar as k,getCapitals as A}from"./Avatar/index.mjs";import{Badge as j,BadgeColor as M,BadgeSize as N,BadgeVariant as P,badgeVariants as F}from"./Badge/index.mjs";import{Link as I,LinkColor as L,LinkRoundedSize as R,LinkSize as z,LinkUnderlined as B,LinkVariant as V,checkIsExternalLink as H,isTextChildren as U,linkVariants as W}from"./Link/Link.mjs";import{Breadcrumb as G}from"./Breadcrumb/index.mjs";import{Checkbox as K,CheckboxColor as q,CheckboxSize as J,checkboxVariants as Y}from"./Input/Checkbox.mjs";import{Input as X,InputSize as Z,InputVariant as Q,inputVariants as $}from"./Input/Input.mjs";import{InputPassword as ee}from"./Input/InputPassword.mjs";import{InputIndicator as te,InputOTP as ne,InputOTPGroup as re,InputOTPSeparator as ie,InputOTPSlot as ae,OTPInput as oe,OTPInputContext as se,inputSlotVariants as ce,usePasswordManagerBadge as le,usePrevious as ue}from"./Input/OTPInput.mjs";import{SearchInput as de}from"./Input/SearchInput.mjs";import{Browser as fe}from"./Browser/Browser.mjs";import{KeyList as pe,KeyboardShortcut as me}from"./KeyboardShortcut/KeyboardShortcut.mjs";import{Detail as he,PopoverStatic as ge,PopoverXAlign as _e,PopoverYAlign as ve}from"./Popover/static.mjs";import{Popover as ye}from"./Popover/dynamic.mjs";import{Carousel as be}from"./Carousel/index.mjs";import{ClickOutsideDiv as xe}from"./ClickOutsideDiv/index.mjs";import{CollapsibleTable as Se}from"./CollapsibleTable/CollapsibleTable.mjs";import{Command as Ce,CommandRoot as we}from"./Command/index.mjs";import{PressableSpan as Te}from"./PressableSpan/PressableSpan.mjs";import{ContentSelector as Ee}from"./ContentSelector/ContentSelector.mjs";import{CopyButton as De}from"./CopyButton/index.mjs";import{CopyToClipboard as Oe,useCopyToClipboard as ke}from"./CopyToClipboard/index.mjs";import{EditableFieldInput as Ae}from"./EditableField/EditableFieldInput.mjs";import{TextArea as je}from"./TextArea/TextArea.mjs";import{AutoSizedTextArea as Me}from"./TextArea/AutoSizeTextArea.mjs";import{AutoCompleteTextarea as Ne,useDebounce as Pe}from"./TextArea/AutocompleteTextArea.mjs";import{EditableFieldTextArea as Fe}from"./EditableField/EditableFieldTextArea.mjs";import{DictionaryEditor as Ie}from"./DictionaryEditor/DictionaryEditor.mjs";import{DropDown as Le,DropDownAlign as Re,DropDownYAlign as ze}from"./DropDown/index.mjs";import{SwitchSelector as Be,SwitchSelectorColor as Ve,SwitchSelectorSize as He}from"./SwitchSelector/index.mjs";import{LocaleSwitcherContentProvider as Ue,useLocaleSwitcherContent as We}from"./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{LocaleSwitcherContent as Ge}from"./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";import{Label as Ke}from"./Label/index.mjs";import{H1 as qe,H2 as Je,H3 as Ye,H4 as Xe,H5 as Ze,H6 as Qe}from"./Headers/index.mjs";import{ExpandCollapse as $e}from"./ExpandCollapse/ExpandCollapse.mjs";import{CodeBlock as et,CodeDefault as tt}from"./IDE/CodeBlockClient.mjs";import{MultiSelect as nt}from"./Select/Multiselect.mjs";import{Select as rt,SelectContent as it,SelectContentPosition as at,SelectLabel as ot,SelectSeparator as st}from"./Select/Select.mjs";import{Code as ct}from"./IDE/Code.mjs";import{TabSelector as lt,TabSelectorColor as ut}from"./TabSelector/TabSelector.mjs";import{Tab as dt}from"./Tab/Tab.mjs";import{Modal as ft,ModalSize as pt}from"./Modal/Modal.mjs";import{Table as mt}from"./Table/Table.mjs";import{MarkdownRenderer as ht,baseMarkdownComponents as gt,getIntlayerMarkdownOptions as _t}from"./MarkDownRender/MarkDownRender.mjs";import{TextEditor as vt,TextEditorContainer as yt,traceKeys as bt}from"./DictionaryFieldEditor/ContentEditorView/TextEditor.mjs";import{KeyPathBreadcrumb as xt}from"./DictionaryFieldEditor/KeyPathBreadcrumb.mjs";import{ContentEditor as St}from"./DictionaryFieldEditor/ContentEditor.mjs";import{useFormField as Ct}from"./Form/FormField.mjs";import{InformationTag as wt}from"./InformationTag/index.mjs";import{useForm as Tt}from"./Form/FormBase.mjs";import{Form as Et}from"./Form/Form.mjs";import{DictionaryCreationForm as Dt}from"./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";import{SaveForm as Ot}from"./DictionaryFieldEditor/SaveForm/SaveForm.mjs";import{DictionaryFieldEditor as kt}from"./DictionaryFieldEditor/DictionaryFieldEditor.mjs";import{VersionSwitcherProvider as At,useVersionSwitcher as jt}from"./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";import{VersionSwitcher as Mt}from"./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs";import{Flag as Nt}from"./Flags/Flag.mjs";import{flags_exports as Pt}from"./Flags/flags.mjs";import{Logo as Ft}from"./Logo/Logo.mjs";import{LogoTextOnly as It}from"./Logo/LogoTextOnly.mjs";import{LogoWithText as Lt}from"./Logo/LogoWithText.mjs";import{LogoWithTextBelow as Rt}from"./Logo/LogoWithTextBelow.mjs";import{DiscordLogo as zt}from"./SocialNetworks/DiscordLogo.mjs";import{InstagramLogo as Bt}from"./SocialNetworks/InstagramLogo.mjs";import{LinkedInLogo as Vt}from"./SocialNetworks/LinkedInLogo.mjs";import{ProductHuntLogo as Ht}from"./SocialNetworks/ProductHuntLogo.mjs";import{TiktokLogo as Ut}from"./SocialNetworks/TiktokLogo.mjs";import{XLogo as Wt}from"./SocialNetworks/XLogo.mjs";import{YoutubeLogo as Gt}from"./SocialNetworks/YoutubeLogo.mjs";import{FacebookLogo as Kt}from"./SocialNetworks/FacebookLogo.mjs";import{SocialNetworks as qt}from"./SocialNetworks/index.mjs";import{Footer as Jt}from"./Footer/index.mjs";import{HeightResizer as Yt}from"./HeightResizer/index.mjs";import{HideShow as Xt}from"./HideShow/index.mjs";import{HTMLRenderer as Zt,getIntlayerHTMLOptions as Qt}from"./HTMLRender/HTMLRender.mjs";import{FileList as $t}from"./IDE/FileList.mjs";import{WithResizer as en}from"./WithResizer/index.mjs";import{IDE as tn}from"./IDE/IDE.mjs";import{KeyboardScreenAdapter as nn}from"./KeyboardScreenAdapter/index.mjs";import{LanguageBackground as rn,LanguageSection as an}from"./LanguageBackground/index.mjs";import{LocaleSwitcher as on}from"./LocaleSwitcherDropDown/LocaleSwitcher.mjs";import{MaxWidthSmoother as sn}from"./MaxWidthSmoother/index.mjs";import{Navbar as cn}from"./Navbar/index.mjs";import{NumberItemsSelector as ln}from"./Pagination/NumberItemsSelector.mjs";import{Pagination as un,PaginationSize as dn,PaginationVariant as fn,paginationVariants as pn}from"./Pagination/Pagination.mjs";import{ShowingResultsNumberItems as mn}from"./Pagination/ShowingResultsNumberItems.mjs";import{DotPattern as hn}from"./Pattern/DotPattern.mjs";import{GridPattern as gn}from"./Pattern/GridPattern.mjs";import{Spotlight as _n}from"./Pattern/SpotLight.mjs";import{drawerManager as vn,useRightDrawer as yn}from"./RightDrawer/useRightDrawer.mjs";import{RightDrawer as bn}from"./RightDrawer/RightDrawer.mjs";import{Tag as xn,TagBackground as Sn,TagBorder as Cn,TagColor as wn,TagRoundedSize as Tn,TagSize as En}from"./Tag/index.mjs";import{Terminal as Dn}from"./Terminal/Terminal.mjs";import{Modes as On}from"./ThemeSwitcherDropDown/types.mjs";import{DesktopThemeSwitcher as kn}from"./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";import{MobileThemeSwitcher as An}from"./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";export{O as Accordion,Ne as AutoCompleteTextarea,Me as AutoSizedTextArea,k as Avatar,j as Badge,M as BadgeColor,N as BadgeSize,P as BadgeVariant,G as Breadcrumb,fe as Browser,x as Button,S as ButtonColor,C as ButtonSize,w as ButtonTextAlign,T as ButtonVariant,be as Carousel,K as Checkbox,q as CheckboxColor,J as CheckboxSize,xe as ClickOutsideDiv,ct as Code,et as CodeBlock,tt as CodeDefault,Se as CollapsibleTable,Ce as Command,we as CommandRoot,d as Container,f as ContainerBackground,p as ContainerBorderColor,m as ContainerGap,h as ContainerPadding,g as ContainerRoundedSize,_ as ContainerSeparator,v as ContainerTransparency,St as ContentEditor,Ee as ContentSelector,De as CopyButton,Oe as CopyToClipboard,kn as DesktopThemeSwitcher,he as Detail,Dt as DictionaryCreationForm,Ie as DictionaryEditor,kt as DictionaryFieldEditor,zt as DiscordLogo,hn as DotPattern,Le as DropDown,Re as DropDownAlign,ze as DropDownYAlign,Ae as EditableFieldInput,Fe as EditableFieldTextArea,$e as ExpandCollapse,Kt as FacebookLogo,$t as FileList,Nt as Flag,Pt as Flags,Jt as Footer,Et as Form,gn as GridPattern,qe as H1,Je as H2,Ye as H3,Xe as H4,Ze as H5,Qe as H6,Zt as HTMLRenderer,Yt as HeightResizer,Xt as HideShow,tn as IDE,wt as InformationTag,X as Input,te as InputIndicator,ne as InputOTP,re as InputOTPGroup,ie as InputOTPSeparator,ae as InputOTPSlot,ee as InputPassword,Z as InputSize,Q as InputVariant,Bt as InstagramLogo,pe as KeyList,xt as KeyPathBreadcrumb,nn as KeyboardScreenAdapter,me as KeyboardShortcut,Ke as Label,rn as LanguageBackground,an as LanguageSection,I as Link,L as LinkColor,R as LinkRoundedSize,z as LinkSize,B as LinkUnderlined,V as LinkVariant,Vt as LinkedInLogo,b as Loader,on as LocaleSwitcher,Ge as LocaleSwitcherContent,Ue as LocaleSwitcherContentProvider,Ft as Logo,It as LogoTextOnly,Lt as LogoWithText,Rt as LogoWithTextBelow,ht as MarkdownRenderer,D as MaxHeightSmoother,sn as MaxWidthSmoother,An as MobileThemeSwitcher,ft as Modal,pt as ModalSize,On as Modes,nt as MultiSelect,cn as Navbar,ln as NumberItemsSelector,oe as OTPInput,se as OTPInputContext,un as Pagination,dn as PaginationSize,fn as PaginationVariant,ye as Popover,ge as PopoverStatic,_e as PopoverXAlign,ve as PopoverYAlign,Te as PressableSpan,Ht as ProductHuntLogo,bn as RightDrawer,Ot as SaveForm,de as SearchInput,rt as Select,it as SelectContent,at as SelectContentPosition,ot as SelectLabel,st as SelectSeparator,mn as ShowingResultsNumberItems,qt as SocialNetworks,_n as Spotlight,Be as SwitchSelector,Ve as SwitchSelectorColor,He as SwitchSelectorSize,dt as Tab,lt as TabSelector,ut as TabSelectorColor,mt as Table,xn as Tag,Sn as TagBackground,Cn as TagBorder,wn as TagColor,Tn as TagRoundedSize,En as TagSize,Dn as Terminal,je as TextArea,vt as TextEditor,yt as TextEditorContainer,Ut as TiktokLogo,e as Toast,t as ToastAction,n as ToastClose,r as ToastDescription,i as ToastProvider,a as ToastTitle,o as ToastViewport,u as Toaster,Mt as VersionSwitcher,At as VersionSwitcherProvider,en as WithResizer,Wt as XLogo,Gt as YoutubeLogo,F as badgeVariants,gt as baseMarkdownComponents,E as buttonVariants,H as checkIsExternalLink,Y as checkboxVariants,y as containerVariants,vn as drawerManager,A as getCapitals,Qt as getIntlayerHTMLOptions,_t as getIntlayerMarkdownOptions,ce as inputSlotVariants,$ as inputVariants,U as isTextChildren,W as linkVariants,pn as paginationVariants,s as reducer,c as toast,bt as traceKeys,ke as useCopyToClipboard,Pe as useDebounce,Tt as useForm,Ct as useFormField,We as useLocaleSwitcherContent,le as usePasswordManagerBadge,ue as usePrevious,yn as useRightDrawer,l as useToast,jt as useVersionSwitcher};
|
|
1
|
+
import{Toast as e,ToastAction as t,ToastClose as n,ToastDescription as r,ToastProvider as i,ToastTitle as a,ToastViewport as o}from"./Toaster/Toast.mjs";import{reducer as s,toast as c,useToast as l}from"./Toaster/useToast.mjs";import{Toaster as u}from"./Toaster/Toaster.mjs";import{Container as d,ContainerBackground as f,ContainerBorderColor as p,ContainerGap as m,ContainerPadding as h,ContainerRoundedSize as g,ContainerSeparator as _,ContainerTransparency as v,containerVariants as y}from"./Container/index.mjs";import{Loader as b}from"./Loader/index.mjs";import{Button as x,ButtonColor as S,ButtonSize as C,ButtonTextAlign as w,ButtonVariant as T,buttonVariants as E}from"./Button/Button.mjs";import{MaxHeightSmoother as D}from"./MaxHeightSmoother/index.mjs";import{Accordion as O}from"./Accordion/Accordion.mjs";import{Avatar as k,getCapitals as A}from"./Avatar/index.mjs";import{Badge as j,BadgeColor as M,BadgeSize as N,BadgeVariant as P,badgeVariants as F}from"./Badge/index.mjs";import{Link as I,LinkColor as L,LinkRoundedSize as R,LinkSize as z,LinkUnderlined as B,LinkVariant as V,checkIsExternalLink as H,isTextChildren as U,linkVariants as W}from"./Link/Link.mjs";import{Breadcrumb as G}from"./Breadcrumb/index.mjs";import{Checkbox as K,CheckboxColor as q,CheckboxSize as J,checkboxVariants as Y}from"./Input/Checkbox.mjs";import{Input as X,InputSize as Z,InputVariant as Q,inputVariants as $}from"./Input/Input.mjs";import{InputPassword as ee}from"./Input/InputPassword.mjs";import{InputIndicator as te,InputOTP as ne,InputOTPGroup as re,InputOTPSeparator as ie,InputOTPSlot as ae,OTPInput as oe,OTPInputContext as se,inputSlotVariants as ce,usePasswordManagerBadge as le,usePrevious as ue}from"./Input/OTPInput.mjs";import{SearchInput as de}from"./Input/SearchInput.mjs";import{Browser as fe}from"./Browser/Browser.mjs";import{KeyList as pe,KeyboardShortcut as me}from"./KeyboardShortcut/KeyboardShortcut.mjs";import{Detail as he,PopoverStatic as ge,PopoverXAlign as _e,PopoverYAlign as ve}from"./Popover/static.mjs";import{Popover as ye}from"./Popover/dynamic.mjs";import{Carousel as be}from"./Carousel/index.mjs";import{ClickOutsideDiv as xe}from"./ClickOutsideDiv/index.mjs";import{CollapsibleTable as Se}from"./CollapsibleTable/CollapsibleTable.mjs";import{Command as Ce,CommandRoot as we}from"./Command/index.mjs";import{PressableSpan as Te}from"./PressableSpan/PressableSpan.mjs";import{ContentSelector as Ee}from"./ContentSelector/ContentSelector.mjs";import{CopyButton as De}from"./CopyButton/index.mjs";import{CopyToClipboard as Oe,useCopyToClipboard as ke}from"./CopyToClipboard/index.mjs";import{SwitchSelector as Ae,SwitchSelectorColor as je,SwitchSelectorSize as Me}from"./SwitchSelector/index.mjs";import{EditableFieldInput as Ne}from"./EditableField/EditableFieldInput.mjs";import{TextArea as Pe}from"./TextArea/TextArea.mjs";import{AutoSizedTextArea as Fe}from"./TextArea/AutoSizeTextArea.mjs";import{AutoCompleteTextarea as Ie,useDebounce as Le}from"./TextArea/AutocompleteTextArea.mjs";import{EditableFieldTextArea as Re}from"./EditableField/EditableFieldTextArea.mjs";import{DictionaryEditor as ze}from"./DictionaryEditor/DictionaryEditor.mjs";import{DropDown as Be,DropDownAlign as Ve,DropDownYAlign as He}from"./DropDown/index.mjs";import{LocaleSwitcherContentProvider as Ue,useLocaleSwitcherContent as We}from"./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{LocaleSwitcherContent as Ge}from"./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";import{Label as Ke}from"./Label/index.mjs";import{H1 as qe,H2 as Je,H3 as Ye,H4 as Xe,H5 as Ze,H6 as Qe}from"./Headers/index.mjs";import{ExpandCollapse as $e}from"./ExpandCollapse/ExpandCollapse.mjs";import{CodeBlock as et,CodeDefault as tt}from"./IDE/CodeBlockClient.mjs";import{MultiSelect as nt}from"./Select/Multiselect.mjs";import{Select as rt,SelectContent as it,SelectContentPosition as at,SelectLabel as ot,SelectSeparator as st}from"./Select/Select.mjs";import{Code as ct}from"./IDE/Code.mjs";import{TabSelector as lt,TabSelectorColor as ut}from"./TabSelector/TabSelector.mjs";import{Tab as dt}from"./Tab/Tab.mjs";import{Modal as ft,ModalSize as pt}from"./Modal/Modal.mjs";import{Table as mt}from"./Table/Table.mjs";import{MarkdownRenderer as ht,baseMarkdownComponents as gt,getIntlayerMarkdownOptions as _t}from"./MarkDownRender/MarkDownRender.mjs";import{TextEditor as vt,TextEditorContainer as yt,traceKeys as bt}from"./DictionaryFieldEditor/ContentEditorView/TextEditor.mjs";import{KeyPathBreadcrumb as xt}from"./DictionaryFieldEditor/KeyPathBreadcrumb.mjs";import{ContentEditor as St}from"./DictionaryFieldEditor/ContentEditor.mjs";import{useFormField as Ct}from"./Form/FormField.mjs";import{InformationTag as wt}from"./InformationTag/index.mjs";import{useForm as Tt}from"./Form/FormBase.mjs";import{Form as Et}from"./Form/Form.mjs";import{DictionaryCreationForm as Dt}from"./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";import{SaveForm as Ot}from"./DictionaryFieldEditor/SaveForm/SaveForm.mjs";import{DictionaryFieldEditor as kt}from"./DictionaryFieldEditor/DictionaryFieldEditor.mjs";import{VersionSwitcherProvider as At,useVersionSwitcher as jt}from"./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";import{VersionSwitcher as Mt}from"./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs";import{Flag as Nt}from"./Flags/Flag.mjs";import{flags_exports as Pt}from"./Flags/flags.mjs";import{Logo as Ft}from"./Logo/Logo.mjs";import{LogoTextOnly as It}from"./Logo/LogoTextOnly.mjs";import{LogoWithText as Lt}from"./Logo/LogoWithText.mjs";import{LogoWithTextBelow as Rt}from"./Logo/LogoWithTextBelow.mjs";import{DiscordLogo as zt}from"./SocialNetworks/DiscordLogo.mjs";import{InstagramLogo as Bt}from"./SocialNetworks/InstagramLogo.mjs";import{LinkedInLogo as Vt}from"./SocialNetworks/LinkedInLogo.mjs";import{ProductHuntLogo as Ht}from"./SocialNetworks/ProductHuntLogo.mjs";import{TiktokLogo as Ut}from"./SocialNetworks/TiktokLogo.mjs";import{XLogo as Wt}from"./SocialNetworks/XLogo.mjs";import{YoutubeLogo as Gt}from"./SocialNetworks/YoutubeLogo.mjs";import{FacebookLogo as Kt}from"./SocialNetworks/FacebookLogo.mjs";import{SocialNetworks as qt}from"./SocialNetworks/index.mjs";import{Footer as Jt}from"./Footer/index.mjs";import{HeightResizer as Yt}from"./HeightResizer/index.mjs";import{HideShow as Xt}from"./HideShow/index.mjs";import{HTMLRenderer as Zt,getIntlayerHTMLOptions as Qt}from"./HTMLRender/HTMLRender.mjs";import{FileList as $t}from"./IDE/FileList.mjs";import{WithResizer as en}from"./WithResizer/index.mjs";import{IDE as tn}from"./IDE/IDE.mjs";import{KeyboardScreenAdapter as nn}from"./KeyboardScreenAdapter/index.mjs";import{LanguageBackground as rn,LanguageSection as an}from"./LanguageBackground/index.mjs";import{LocaleSwitcher as on}from"./LocaleSwitcherDropDown/LocaleSwitcher.mjs";import{MaxWidthSmoother as sn}from"./MaxWidthSmoother/index.mjs";import{Navbar as cn}from"./Navbar/index.mjs";import{NumberItemsSelector as ln}from"./Pagination/NumberItemsSelector.mjs";import{Pagination as un,PaginationSize as dn,PaginationVariant as fn,paginationVariants as pn}from"./Pagination/Pagination.mjs";import{ShowingResultsNumberItems as mn}from"./Pagination/ShowingResultsNumberItems.mjs";import{DotPattern as hn}from"./Pattern/DotPattern.mjs";import{GridPattern as gn}from"./Pattern/GridPattern.mjs";import{Spotlight as _n}from"./Pattern/SpotLight.mjs";import{drawerManager as vn,useRightDrawer as yn}from"./RightDrawer/useRightDrawer.mjs";import{RightDrawer as bn}from"./RightDrawer/RightDrawer.mjs";import{Tag as xn,TagBackground as Sn,TagBorder as Cn,TagColor as wn,TagRoundedSize as Tn,TagSize as En}from"./Tag/index.mjs";import{Terminal as Dn}from"./Terminal/Terminal.mjs";import{Modes as On}from"./ThemeSwitcherDropDown/types.mjs";import{DesktopThemeSwitcher as kn}from"./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";import{MobileThemeSwitcher as An}from"./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";export{O as Accordion,Ie as AutoCompleteTextarea,Fe as AutoSizedTextArea,k as Avatar,j as Badge,M as BadgeColor,N as BadgeSize,P as BadgeVariant,G as Breadcrumb,fe as Browser,x as Button,S as ButtonColor,C as ButtonSize,w as ButtonTextAlign,T as ButtonVariant,be as Carousel,K as Checkbox,q as CheckboxColor,J as CheckboxSize,xe as ClickOutsideDiv,ct as Code,et as CodeBlock,tt as CodeDefault,Se as CollapsibleTable,Ce as Command,we as CommandRoot,d as Container,f as ContainerBackground,p as ContainerBorderColor,m as ContainerGap,h as ContainerPadding,g as ContainerRoundedSize,_ as ContainerSeparator,v as ContainerTransparency,St as ContentEditor,Ee as ContentSelector,De as CopyButton,Oe as CopyToClipboard,kn as DesktopThemeSwitcher,he as Detail,Dt as DictionaryCreationForm,ze as DictionaryEditor,kt as DictionaryFieldEditor,zt as DiscordLogo,hn as DotPattern,Be as DropDown,Ve as DropDownAlign,He as DropDownYAlign,Ne as EditableFieldInput,Re as EditableFieldTextArea,$e as ExpandCollapse,Kt as FacebookLogo,$t as FileList,Nt as Flag,Pt as Flags,Jt as Footer,Et as Form,gn as GridPattern,qe as H1,Je as H2,Ye as H3,Xe as H4,Ze as H5,Qe as H6,Zt as HTMLRenderer,Yt as HeightResizer,Xt as HideShow,tn as IDE,wt as InformationTag,X as Input,te as InputIndicator,ne as InputOTP,re as InputOTPGroup,ie as InputOTPSeparator,ae as InputOTPSlot,ee as InputPassword,Z as InputSize,Q as InputVariant,Bt as InstagramLogo,pe as KeyList,xt as KeyPathBreadcrumb,nn as KeyboardScreenAdapter,me as KeyboardShortcut,Ke as Label,rn as LanguageBackground,an as LanguageSection,I as Link,L as LinkColor,R as LinkRoundedSize,z as LinkSize,B as LinkUnderlined,V as LinkVariant,Vt as LinkedInLogo,b as Loader,on as LocaleSwitcher,Ge as LocaleSwitcherContent,Ue as LocaleSwitcherContentProvider,Ft as Logo,It as LogoTextOnly,Lt as LogoWithText,Rt as LogoWithTextBelow,ht as MarkdownRenderer,D as MaxHeightSmoother,sn as MaxWidthSmoother,An as MobileThemeSwitcher,ft as Modal,pt as ModalSize,On as Modes,nt as MultiSelect,cn as Navbar,ln as NumberItemsSelector,oe as OTPInput,se as OTPInputContext,un as Pagination,dn as PaginationSize,fn as PaginationVariant,ye as Popover,ge as PopoverStatic,_e as PopoverXAlign,ve as PopoverYAlign,Te as PressableSpan,Ht as ProductHuntLogo,bn as RightDrawer,Ot as SaveForm,de as SearchInput,rt as Select,it as SelectContent,at as SelectContentPosition,ot as SelectLabel,st as SelectSeparator,mn as ShowingResultsNumberItems,qt as SocialNetworks,_n as Spotlight,Ae as SwitchSelector,je as SwitchSelectorColor,Me as SwitchSelectorSize,dt as Tab,lt as TabSelector,ut as TabSelectorColor,mt as Table,xn as Tag,Sn as TagBackground,Cn as TagBorder,wn as TagColor,Tn as TagRoundedSize,En as TagSize,Dn as Terminal,Pe as TextArea,vt as TextEditor,yt as TextEditorContainer,Ut as TiktokLogo,e as Toast,t as ToastAction,n as ToastClose,r as ToastDescription,i as ToastProvider,a as ToastTitle,o as ToastViewport,u as Toaster,Mt as VersionSwitcher,At as VersionSwitcherProvider,en as WithResizer,Wt as XLogo,Gt as YoutubeLogo,F as badgeVariants,gt as baseMarkdownComponents,E as buttonVariants,H as checkIsExternalLink,Y as checkboxVariants,y as containerVariants,vn as drawerManager,A as getCapitals,Qt as getIntlayerHTMLOptions,_t as getIntlayerMarkdownOptions,ce as inputSlotVariants,$ as inputVariants,U as isTextChildren,W as linkVariants,pn as paginationVariants,s as reducer,c as toast,bt as traceKeys,ke as useCopyToClipboard,Le as useDebounce,Tt as useForm,Ct as useFormField,We as useLocaleSwitcherContent,le as usePasswordManagerBadge,ue as usePrevious,yn as useRightDrawer,l as useToast,jt as useVersionSwitcher};
|
package/dist/esm/hooks/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{calculateIsMobile as
|
|
1
|
+
import{useKeyboardDetector as e}from"./useKeyboardDetector.mjs";import{useGetElementOrWindow as t}from"./useGetElementOrWindow.mjs";import{useScrollY as n}from"./useScrollY.mjs";import{usePersistedStore as r}from"./usePersistedStore.mjs";import{useHorizontalSwipe as i}from"./useHorizontalSwipe.mjs";import{useItemSelector as a}from"./useItemSelector.mjs";import{calculateIsMobile as o,checkIsIOS as s,checkIsIphoneOrSafariDevice as c,checkIsMac as l,checkIsMobileScreen as u,checkIsMobileUserAgent as d,getBreakpointFromSize as f,useDevice as p}from"./useDevice.mjs";import{useOAuth2 as m}from"./useAuth/useOAuth2.mjs";import{useSession as h}from"./useAuth/useSession.mjs";import{useAuth as g}from"./useAuth/useAuth.mjs";import{useIntlayerAuth as _,useIntlayerOAuth as v}from"./useIntlayerAPI.mjs";import{useAddDictionary as y,useAddNewAccessKey as b,useAddOrganization as x,useAddOrganizationMember as S,useAddPasskey as C,useAddProject as w,useAddTag as T,useAppQuery as E,useAskDocQuestion as D,useAskResetPassword as O,useAuditContentDeclaration as k,useAuditContentDeclarationField as A,useAuditContentDeclarationMetadata as j,useAuditScan as M,useAuditTag as N,useAutocomplete as P,useBitbucketAuth as F,useBitbucketCheckConfig as I,useBitbucketGetConfigFile as L,useBitbucketRepos as R,useCancelSubscription as z,useChangePassword as B,useCreateUser as V,useDeleteAccessKey as H,useDeleteDictionary as U,useDeleteOrganization as W,useDeletePasskey as G,useDeleteProject as K,useDeleteSSOProvider as q,useDeleteShowcaseProject as J,useDeleteTag as Y,useDeleteUser as X,useDisableTwoFactor as Z,useEnableTwoFactor as Q,useGetCIConfig as $,useGetDictionaries as ee,useGetDictionariesKeys as te,useGetDictionary as ne,useGetDiscussions as re,useGetDiscussionsData as ie,useGetEditorDictionaries as ae,useGetNewsletterStatus as oe,useGetOrganizations as se,useGetOtherShowcaseProjects as ce,useGetPricing as le,useGetProjects as ue,useGetRecursiveAuditStatus as de,useGetShowcaseProjectById as fe,useGetShowcaseProjects as pe,useGetSubscription as me,useGetTags as he,useGetUserByAccount as ge,useGetUserById as _e,useGetUsers as ve,useGetVerifyEmailStatus as ye,useGithubAuth as be,useGithubCheckConfig as xe,useGithubGetAuthUrl as Se,useGithubGetConfigFile as Ce,useGithubRepos as we,useGitlabAuth as Te,useGitlabCheckConfig as Ee,useGitlabGetConfigFile as De,useGitlabProjects as Oe,useInfiniteGetDictionaries as ke,useListPasskeys as Ae,useListSSOProviders as je,useLogin as Me,useLogout as Ne,usePushCIConfig as Pe,usePushDictionaries as Fe,useQueryClient as Ie,useRefreshAccessKey as Le,useRegister as Re,useRegisterSSO as ze,useResetPassword as Be,useSearchDoc as Ve,useSelectOrganization as He,useSelectProject as Ue,useSignInMagicLink as We,useSignInPasskey as Ge,useSignInSSO as Ke,useStartRecursiveAudit as qe,useSubmitShowcaseProject as Je,useSubscribeToNewsletter as Ye,useToggleShowcaseDownvote as Xe,useToggleShowcaseUpvote as Ze,useTranslateJSONDeclaration as Qe,useTriggerBuild as $e,useTriggerWebhook as et,useUnselectOrganization as tt,useUnselectProject as nt,useUnsubscribeFromNewsletter as rt,useUpdateDictionary as it,useUpdateOrganization as at,useUpdateOrganizationMembers as ot,useUpdateOrganizationMembersById as st,useUpdateProject as ct,useUpdateProjectMembers as lt,useUpdateShowcaseProject as ut,useUpdateTag as dt,useUpdateUser as ft,useVerifyBackupCode as pt,useVerifyEmail as mt,useVerifyTotp as ht,useWriteDictionary as gt}from"./reactQuery.mjs";import{useSearch as _t}from"./useSearch.mjs";import{useIsMounted as vt}from"./useIsMounted.mjs";import{useGetElementById as yt}from"./useGetElementById.mjs";import{useIsDarkMode as bt}from"./useIsDarkMode.mjs";import{useScreenWidth as xt}from"./useScreenWidth.mjs";import{useScrollBlockage as St}from"./useScrollBlockage/index.mjs";import{useScrollDetection as Ct}from"./useScrollDetection.mjs";import{useUser as wt}from"./useUser/index.mjs";export{o as calculateIsMobile,s as checkIsIOS,c as checkIsIphoneOrSafariDevice,l as checkIsMac,u as checkIsMobileScreen,d as checkIsMobileUserAgent,f as getBreakpointFromSize,y as useAddDictionary,b as useAddNewAccessKey,x as useAddOrganization,S as useAddOrganizationMember,C as useAddPasskey,w as useAddProject,T as useAddTag,E as useAppQuery,D as useAskDocQuestion,O as useAskResetPassword,k as useAuditContentDeclaration,A as useAuditContentDeclarationField,j as useAuditContentDeclarationMetadata,M as useAuditScan,N as useAuditTag,g as useAuth,P as useAutocomplete,F as useBitbucketAuth,I as useBitbucketCheckConfig,L as useBitbucketGetConfigFile,R as useBitbucketRepos,z as useCancelSubscription,B as useChangePassword,V as useCreateUser,H as useDeleteAccessKey,U as useDeleteDictionary,W as useDeleteOrganization,G as useDeletePasskey,K as useDeleteProject,q as useDeleteSSOProvider,J as useDeleteShowcaseProject,Y as useDeleteTag,X as useDeleteUser,p as useDevice,Z as useDisableTwoFactor,Q as useEnableTwoFactor,$ as useGetCIConfig,ee as useGetDictionaries,te as useGetDictionariesKeys,ne as useGetDictionary,re as useGetDiscussions,ie as useGetDiscussionsData,ae as useGetEditorDictionaries,yt as useGetElementById,t as useGetElementOrWindow,oe as useGetNewsletterStatus,se as useGetOrganizations,ce as useGetOtherShowcaseProjects,le as useGetPricing,ue as useGetProjects,de as useGetRecursiveAuditStatus,fe as useGetShowcaseProjectById,pe as useGetShowcaseProjects,me as useGetSubscription,he as useGetTags,ge as useGetUserByAccount,_e as useGetUserById,ve as useGetUsers,ye as useGetVerifyEmailStatus,be as useGithubAuth,xe as useGithubCheckConfig,Se as useGithubGetAuthUrl,Ce as useGithubGetConfigFile,we as useGithubRepos,Te as useGitlabAuth,Ee as useGitlabCheckConfig,De as useGitlabGetConfigFile,Oe as useGitlabProjects,i as useHorizontalSwipe,ke as useInfiniteGetDictionaries,_ as useIntlayerAuth,v as useIntlayerOAuth,bt as useIsDarkMode,vt as useIsMounted,a as useItemSelector,e as useKeyboardDetector,Ae as useListPasskeys,je as useListSSOProviders,Me as useLogin,Ne as useLogout,m as useOAuth2,r as usePersistedStore,Pe as usePushCIConfig,Fe as usePushDictionaries,Ie as useQueryClient,Le as useRefreshAccessKey,Re as useRegister,ze as useRegisterSSO,Be as useResetPassword,xt as useScreenWidth,St as useScrollBlockage,Ct as useScrollDetection,n as useScrollY,_t as useSearch,Ve as useSearchDoc,He as useSelectOrganization,Ue as useSelectProject,h as useSession,We as useSignInMagicLink,Ge as useSignInPasskey,Ke as useSignInSSO,qe as useStartRecursiveAudit,Je as useSubmitShowcaseProject,Ye as useSubscribeToNewsletter,Xe as useToggleShowcaseDownvote,Ze as useToggleShowcaseUpvote,Qe as useTranslateJSONDeclaration,$e as useTriggerBuild,et as useTriggerWebhook,tt as useUnselectOrganization,nt as useUnselectProject,rt as useUnsubscribeFromNewsletter,it as useUpdateDictionary,at as useUpdateOrganization,ot as useUpdateOrganizationMembers,st as useUpdateOrganizationMembersById,ct as useUpdateProject,lt as useUpdateProjectMembers,ut as useUpdateShowcaseProject,dt as useUpdateTag,ft as useUpdateUser,wt as useUser,pt as useVerifyBackupCode,mt as useVerifyEmail,ht as useVerifyTotp,gt as useWriteDictionary};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import e
|
|
1
|
+
"use client";import{useQuery as e}from"@tanstack/react-query";import t from"@intlayer/config/built";import{useConfiguration as n}from"@intlayer/editor-react";import{getOAuthAPI as r}from"@intlayer/api";const i=i=>{let a=n(),o=i??a??t,{data:s}=e({queryKey:[`oAuth2AccessToken`],queryFn:r(o).getOAuth2AccessToken,enabled:!!(o.editor.clientId&&o.editor.clientSecret),staleTime:0,gcTime:0,refetchOnWindowFocus:!1,refetchOnMount:!1,refetchOnReconnect:!1,refetchInterval:!1,refetchIntervalInBackground:!1});return{oAuth2AccessToken:s?.data}};export{i as useOAuth2};
|
|
2
2
|
//# sourceMappingURL=useOAuth2.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{getAuthAPI as e}from"../../libs/auth.mjs";import{useQueryClient as t}from"../reactQuery.mjs";import n
|
|
1
|
+
"use client";import{getAuthAPI as e}from"../../libs/auth.mjs";import{useQueryClient as t}from"../reactQuery.mjs";import{useQuery as n}from"@tanstack/react-query";import r from"@intlayer/config/built";import{useConfiguration as i}from"@intlayer/editor-react";const a=(a,o)=>{let s=i(),c=o??s??r,l=t(),{data:u,isFetched:d,refetch:f}=n({queryKey:[`session`],queryFn:async()=>(await e(c).getSession()).data,staleTime:60*1e3,gcTime:300*1e3,refetchOnMount:!0,refetchOnWindowFocus:!1,refetchOnReconnect:!1,enabled:!a}),p=u??(d?null:void 0),m=e=>{l.setQueryData([`session`],e)},h=async()=>(await f()).data;return{session:p,fetchSession:h,revalidateSession:h,setSession:m}};export{a as useSession};
|
|
2
2
|
//# sourceMappingURL=useSession.mjs.map
|
|
@@ -43,8 +43,8 @@ declare enum BadgeSize {
|
|
|
43
43
|
* @description Defines the styling variants for different badge combinations
|
|
44
44
|
*/
|
|
45
45
|
declare const badgeVariants: (props?: {
|
|
46
|
-
color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "
|
|
47
|
-
variant?: "none" | "default" | "
|
|
46
|
+
color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
|
|
47
|
+
variant?: "none" | "default" | "outline" | "hoverable";
|
|
48
48
|
size?: "sm" | "md" | "lg";
|
|
49
49
|
} & class_variance_authority_types0.ClassProp) => string;
|
|
50
50
|
/**
|
|
@@ -61,9 +61,9 @@ declare enum ButtonTextAlign {
|
|
|
61
61
|
*/
|
|
62
62
|
declare const buttonVariants: (props?: {
|
|
63
63
|
size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
|
|
64
|
-
color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "
|
|
65
|
-
roundedSize?: "
|
|
66
|
-
variant?: "input" | "none" | "default" | "
|
|
64
|
+
color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse" | "error" | "success" | "custom";
|
|
65
|
+
roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
|
|
66
|
+
variant?: "input" | "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
|
|
67
67
|
textAlign?: "left" | "center" | "right";
|
|
68
68
|
isFullWidth?: boolean;
|
|
69
69
|
} & class_variance_authority_types0.ClassProp) => string;
|
|
@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
6
6
|
declare const collapsibleTableVariants: (props?: {
|
|
7
7
|
size?: "sm" | "md" | "lg" | "xl" | "full";
|
|
8
8
|
variant?: "default" | "dark" | "ghost" | "outlined";
|
|
9
|
-
spacing?: "
|
|
9
|
+
spacing?: "sm" | "md" | "lg" | "none" | "auto";
|
|
10
10
|
} & class_variance_authority_types0.ClassProp) => string;
|
|
11
11
|
interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
|
|
12
12
|
/** Table title displayed in the header */
|
|
@@ -29,7 +29,7 @@ declare const Command: {
|
|
|
29
29
|
ref?: React.Ref<HTMLInputElement>;
|
|
30
30
|
} & {
|
|
31
31
|
asChild?: boolean;
|
|
32
|
-
}, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "
|
|
32
|
+
}, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "value" | "type"> & {
|
|
33
33
|
value?: string;
|
|
34
34
|
onValueChange?: (search: string) => void;
|
|
35
35
|
} & react.RefAttributes<HTMLInputElement>>;
|
|
@@ -73,7 +73,7 @@ declare const Command: {
|
|
|
73
73
|
ref?: React.Ref<HTMLDivElement>;
|
|
74
74
|
} & {
|
|
75
75
|
asChild?: boolean;
|
|
76
|
-
}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "
|
|
76
|
+
}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
|
|
77
77
|
disabled?: boolean;
|
|
78
78
|
onSelect?: (value: string) => void;
|
|
79
79
|
value?: string;
|