@quadrats/react 0.7.8 → 1.0.0

package/accordion/accordion.css

@@ -0,0 +1 @@
+.qdr-accordion{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2);margin:var(--qdr-spacing-9) 0 var(--qdr-spacing-8)}.qdr-accordion__icon-wrapper{display:flex;align-items:center;justify-content:center;color:var(--qdr-action-inactive);border-radius:var(--qdr-radius-2);cursor:pointer;transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-accordion__icon-wrapper:hover{background-color:var(--qdr-divider)}.qdr-accordion__icon-wrapper:active{background-color:var(--qdr-border)}.qdr-accordion__icon{transform:rotate(-90deg);transition:transform var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-accordion__icon--expanded{transform:rotate(0)}.qdr-accordion__wrapper{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-accordion__title,.qdr-accordion__content{position:relative;align-self:stretch;color:var(--qdr-text-primary);margin:0}.qdr-accordion__title{font-size:var(--qdr-typography-article-h4-font-size);line-height:var(--qdr-typography-article-h4-line-height);letter-spacing:var(--qdr-typography-article-h4-letter-spacing);font-weight:var(--qdr-typography-article-h4-font-weight)}.qdr-accordion__title__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}.qdr-accordion__content{font-size:var(--qdr-typography-article-body1-font-size);line-height:var(--qdr-typography-article-body1-line-height);letter-spacing:var(--qdr-typography-article-body1-letter-spacing);font-weight:var(--qdr-typography-article-body1-font-weight)}.qdr-accordion__content__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}

package/accordion/accordion.scss

@@ -0,0 +1,81 @@
+.qdr-accordion {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--qdr-spacing-2);
+  margin: var(--qdr-spacing-9) 0 var(--qdr-spacing-8);
+
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--qdr-action-inactive);
+    border-radius: var(--qdr-radius-2);
+    cursor: pointer;
+    transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &:hover {
+      background-color: var(--qdr-divider);
+    }
+
+    &:active {
+      background-color: var(--qdr-border);
+    }
+  }
+
+  &__icon {
+    transform: rotate(-90deg);
+    transition: transform var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &--expanded {
+      transform: rotate(0);
+    }
+  }
+
+  &__wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-4);
+  }
+
+  &__title,
+  &__content {
+    position: relative;
+    align-self: stretch;
+    color: var(--qdr-text-primary);
+    margin: 0;
+  }
+
+  &__title {
+    font-size: var(--qdr-typography-article-h4-font-size);
+    line-height: var(--qdr-typography-article-h4-line-height);
+    letter-spacing: var(--qdr-typography-article-h4-letter-spacing);
+    font-weight: var(--qdr-typography-article-h4-font-weight);
+
+    &__placeholder {
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: var(--qdr-text-secondary);
+      pointer-events: none;
+    }
+  }
+
+  &__content {
+    font-size: var(--qdr-typography-article-body1-font-size);
+    line-height: var(--qdr-typography-article-body1-line-height);
+    letter-spacing: var(--qdr-typography-article-body1-letter-spacing);
+    font-weight: var(--qdr-typography-article-body1-font-weight);
+
+    &__placeholder {
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: var(--qdr-text-secondary);
+      pointer-events: none;
+    }
+  }
+}

package/accordion/components/Accordion.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderAccordionElementProps } from '../typings';
+declare function Accordion({ attributes, children, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderAccordionElementProps['element'];
+}): React.JSX.Element;
+export default Accordion;

package/accordion/components/Accordion.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { AccordionDown } from '@quadrats/icons';
+import { AccordionContext } from '../contexts/AccordionContext.js';
+
+function Accordion({ attributes, children, }) {
+    const [expanded, setExpanded] = useState(true);
+    return (React.createElement(AccordionContext.Provider, { value: {
+            expanded,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { className: "qdr-accordion" }),
+            React.createElement("div", { className: "qdr-accordion__icon-wrapper", contentEditable: false, onClick: () => {
+                    setExpanded(status => !status);
+                } },
+                React.createElement(Icon, { className: clsx('qdr-accordion__icon', {
+                        'qdr-accordion__icon--expanded': expanded,
+                    }), icon: AccordionDown, width: 24, height: 24 })),
+            React.createElement("div", { className: "qdr-accordion__wrapper" }, children))));
+}
+
+export { Accordion as default };

package/accordion/components/AccordionContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+declare function AccordionContent(props: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderElementProps['element'];
+}): React.JSX.Element | null;
+export default AccordionContent;

package/accordion/components/AccordionContent.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import { Editor, Path } from '@quadrats/core';
+import { useComposition, useQuadrats, ReactEditor, useLocale } from '@quadrats/react';
+import { useAccordion } from '../hooks/useAccordion.js';
+
+function AccordionContent(props) {
+    const { compositionPath } = useComposition();
+    const { attributes, children, element } = props;
+    const editor = useQuadrats();
+    const path = ReactEditor.findPath(editor, element);
+    const text = Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = useLocale();
+    const placeholder = locale.editor.accordion.contentPlaceholder;
+    const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
+    const { expanded } = useAccordion();
+    if (!expanded)
+        return null;
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-accordion__content" }),
+        children,
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-accordion__content__placeholder", contentEditable: false }, placeholder))));
+}
+
+export { AccordionContent as default };

package/accordion/components/AccordionTitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+declare function AccordionTitle(props: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderElementProps['element'];
+}): React.JSX.Element;
+export default AccordionTitle;

package/accordion/components/AccordionTitle.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { Editor, Path } from '@quadrats/core';
+import { useComposition, useQuadrats, ReactEditor, useLocale } from '@quadrats/react';
+
+function AccordionTitle(props) {
+    const { compositionPath } = useComposition();
+    const { attributes, children, element } = props;
+    const editor = useQuadrats();
+    const path = ReactEditor.findPath(editor, element);
+    const text = Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = useLocale();
+    const placeholder = locale.editor.accordion.titlePlaceholder;
+    const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-accordion__title" }),
+        children,
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-accordion__title__placeholder", contentEditable: false }, placeholder))));
+}
+
+export { AccordionTitle as default };

package/accordion/contexts/AccordionContext.d.ts

@@ -0,0 +1,2 @@
+import { AccordionContextType } from '../typings';
+export declare const AccordionContext: import("react").Context<AccordionContextType>;

package/accordion/contexts/AccordionContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AccordionContext = createContext({ expanded: true });
+
+export { AccordionContext };

package/accordion/createReactAccordion.d.ts

@@ -0,0 +1,4 @@
+import { CreateAccordionOptions } from '@quadrats/common/accordion';
+import { ReactAccordion } from './typings';
+export type CreateReactAccordionOptions = CreateAccordionOptions;
+export declare function createReactAccordion(options?: CreateReactAccordionOptions): ReactAccordion;

package/accordion/createReactAccordion.js

@@ -0,0 +1,144 @@
+import { createAccordion } from '@quadrats/common/accordion';
+import { createRenderElements } from '@quadrats/react';
+import { getParent, Path, Editor, Transforms, Element, Node, PARAGRAPH_TYPE } from '@quadrats/core';
+import { defaultRenderAccordionElements } from './defaultRenderAccordionElements.js';
+
+function createReactAccordion(options = {}) {
+    const core = createAccordion(options);
+    const { types } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: () => ({
+            onKeyDown(event, editor, next) {
+                if (event.nativeEvent.isComposing) {
+                    return;
+                }
+                if (core.isSelectionInAccordionTitle(editor)) {
+                    const blockEntry = editor.above({
+                        match: (node) => node.type === types.accordion_title,
+                    });
+                    if (!blockEntry)
+                        return;
+                    const [, currentPath] = blockEntry;
+                    const parentEntry = getParent(editor, currentPath);
+                    if (!parentEntry)
+                        return;
+                    const [, parentPath] = parentEntry;
+                    const isFirst = Path.equals(currentPath, parentPath.concat(0));
+                    if (isFirst) {
+                        if (event.key === 'Backspace') {
+                            const text = Editor.string(editor, currentPath);
+                            if (!text) {
+                                event.preventDefault();
+                                Transforms.removeNodes(editor, { at: parentPath });
+                                return;
+                            }
+                            if (editor.selection && editor.selection.anchor.offset === 0) {
+                                event.preventDefault();
+                                return;
+                            }
+                        }
+                        if (editor.selection && event.key === 'Enter') {
+                            event.preventDefault();
+                            Transforms.select(editor, Editor.end(editor, Path.next(currentPath)));
+                            return;
+                        }
+                    }
+                    return;
+                }
+                if (core.isSelectionInAccordionContent(editor)) {
+                    const blockEntry = editor.above({
+                        match: (node) => node.type === types.accordion_content,
+                    });
+                    if (!blockEntry)
+                        return;
+                    const [, blockPath] = blockEntry;
+                    const prePath = Path.previous(blockPath);
+                    const [preNode] = Editor.node(editor, prePath);
+                    const text = Editor.string(editor, blockPath);
+                    if (event.key === 'Backspace') {
+                        if (Element.isElement(preNode)) {
+                            const preType = preNode.type;
+                            if (preType === types.accordion_title) {
+                                const firstTextEntry = Node.first(editor, blockPath);
+                                const [, firstTextPath] = firstTextEntry;
+                                if (editor.selection &&
+                                    Path.equals(editor.selection.anchor.path, firstTextPath) &&
+                                    editor.selection.anchor.offset === 0) {
+                                    event.preventDefault();
+                                    Transforms.select(editor, Editor.end(editor, prePath));
+                                    return;
+                                }
+                            }
+                            return;
+                        }
+                        return;
+                    }
+                    if (!text && editor.selection && event.key === 'Enter') {
+                        const parentEntry = getParent(editor, blockPath);
+                        if (!parentEntry)
+                            return;
+                        const [, parentPath] = parentEntry;
+                        event.preventDefault();
+                        const moveto = parentPath.slice();
+                        if (Element.isElement(preNode)) {
+                            const preType = preNode.type;
+                            if (preType === types.accordion_content) {
+                                Transforms.removeNodes(editor, { at: editor.selection });
+                            }
+                        }
+                        Transforms.insertNodes(editor, { type: PARAGRAPH_TYPE, children: [{ text: '' }] }, {
+                            at: editor.selection,
+                            select: true,
+                        });
+                        moveto[parentPath.length - 1] += 1;
+                        Transforms.moveNodes(editor, {
+                            at: editor.selection,
+                            to: moveto,
+                        });
+                        return;
+                    }
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderAccordion = options.accordion || defaultRenderAccordionElements.accordion;
+            const renderAccordionTitle = options.accordion_title || defaultRenderAccordionElements.accordion_title;
+            const renderAccordionContent = options.accordion_content || defaultRenderAccordionElements.accordion_content;
+            return createRenderElements([
+                {
+                    type: types.accordion,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderAccordion({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.accordion_title,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderAccordionTitle({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.accordion_content,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderAccordionContent({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+            ]);
+        } });
+}
+
+export { createReactAccordion };

package/accordion/defaultRenderAccordionElements.d.ts

@@ -0,0 +1,2 @@
+import { AccordionRenderElements } from './typings';
+export declare const defaultRenderAccordionElements: AccordionRenderElements;

package/accordion/defaultRenderAccordionElements.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Accordion from './components/Accordion.js';
+import AccordionTitle from './components/AccordionTitle.js';
+import AccordionContent from './components/AccordionContent.js';
+
+const defaultRenderAccordionElements = {
+    accordion: props => React.createElement(Accordion, Object.assign({}, props)),
+    accordion_title: props => React.createElement(AccordionTitle, Object.assign({}, props)),
+    accordion_content: props => React.createElement(AccordionContent, Object.assign({}, props)),
+};
+
+export { defaultRenderAccordionElements };

package/accordion/hooks/useAccordion.d.ts

@@ -0,0 +1 @@
+export declare function useAccordion(): import("..").AccordionContextType;

package/accordion/hooks/useAccordion.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { AccordionContext } from '../contexts/AccordionContext.js';
+
+function useAccordion() {
+    return useContext(AccordionContext);
+}
+
+export { useAccordion };

package/accordion/index.cjs.js

@@ -0,0 +1,212 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+var accordion = require('@quadrats/common/accordion');
+
+const AccordionContext = React.createContext({ expanded: true });
+
+function useAccordion() {
+    return React.useContext(AccordionContext);
+}
+
+function Accordion({ attributes, children, }) {
+    const [expanded, setExpanded] = React.useState(true);
+    return (React.createElement(AccordionContext.Provider, { value: {
+            expanded,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { className: "qdr-accordion" }),
+            React.createElement("div", { className: "qdr-accordion__icon-wrapper", contentEditable: false, onClick: () => {
+                    setExpanded(status => !status);
+                } },
+                React.createElement(components.Icon, { className: clsx('qdr-accordion__icon', {
+                        'qdr-accordion__icon--expanded': expanded,
+                    }), icon: icons.AccordionDown, width: 24, height: 24 })),
+            React.createElement("div", { className: "qdr-accordion__wrapper" }, children))));
+}
+
+function AccordionTitle(props) {
+    const { compositionPath } = react.useComposition();
+    const { attributes, children, element } = props;
+    const editor = react.useQuadrats();
+    const path = react.ReactEditor.findPath(editor, element);
+    const text = core.Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = react.useLocale();
+    const placeholder = locale.editor.accordion.titlePlaceholder;
+    const composing = React.useMemo(() => core.Path.equals(compositionPath, path), [compositionPath, path]);
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-accordion__title" }),
+        children,
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-accordion__title__placeholder", contentEditable: false }, placeholder))));
+}
+
+function AccordionContent(props) {
+    const { compositionPath } = react.useComposition();
+    const { attributes, children, element } = props;
+    const editor = react.useQuadrats();
+    const path = react.ReactEditor.findPath(editor, element);
+    const text = core.Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = react.useLocale();
+    const placeholder = locale.editor.accordion.contentPlaceholder;
+    const composing = React.useMemo(() => core.Path.equals(compositionPath, path), [compositionPath, path]);
+    const { expanded } = useAccordion();
+    if (!expanded)
+        return null;
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-accordion__content" }),
+        children,
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-accordion__content__placeholder", contentEditable: false }, placeholder))));
+}
+
+const defaultRenderAccordionElements = {
+    accordion: props => React.createElement(Accordion, Object.assign({}, props)),
+    accordion_title: props => React.createElement(AccordionTitle, Object.assign({}, props)),
+    accordion_content: props => React.createElement(AccordionContent, Object.assign({}, props)),
+};
+
+function createReactAccordion(options = {}) {
+    const core$1 = accordion.createAccordion(options);
+    const { types } = core$1;
+    return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
+            onKeyDown(event, editor, next) {
+                if (event.nativeEvent.isComposing) {
+                    return;
+                }
+                if (core$1.isSelectionInAccordionTitle(editor)) {
+                    const blockEntry = editor.above({
+                        match: (node) => node.type === types.accordion_title,
+                    });
+                    if (!blockEntry)
+                        return;
+                    const [, currentPath] = blockEntry;
+                    const parentEntry = core.getParent(editor, currentPath);
+                    if (!parentEntry)
+                        return;
+                    const [, parentPath] = parentEntry;
+                    const isFirst = core.Path.equals(currentPath, parentPath.concat(0));
+                    if (isFirst) {
+                        if (event.key === 'Backspace') {
+                            const text = core.Editor.string(editor, currentPath);
+                            if (!text) {
+                                event.preventDefault();
+                                core.Transforms.removeNodes(editor, { at: parentPath });
+                                return;
+                            }
+                            if (editor.selection && editor.selection.anchor.offset === 0) {
+                                event.preventDefault();
+                                return;
+                            }
+                        }
+                        if (editor.selection && event.key === 'Enter') {
+                            event.preventDefault();
+                            core.Transforms.select(editor, core.Editor.end(editor, core.Path.next(currentPath)));
+                            return;
+                        }
+                    }
+                    return;
+                }
+                if (core$1.isSelectionInAccordionContent(editor)) {
+                    const blockEntry = editor.above({
+                        match: (node) => node.type === types.accordion_content,
+                    });
+                    if (!blockEntry)
+                        return;
+                    const [, blockPath] = blockEntry;
+                    const prePath = core.Path.previous(blockPath);
+                    const [preNode] = core.Editor.node(editor, prePath);
+                    const text = core.Editor.string(editor, blockPath);
+                    if (event.key === 'Backspace') {
+                        if (core.Element.isElement(preNode)) {
+                            const preType = preNode.type;
+                            if (preType === types.accordion_title) {
+                                const firstTextEntry = core.Node.first(editor, blockPath);
+                                const [, firstTextPath] = firstTextEntry;
+                                if (editor.selection &&
+                                    core.Path.equals(editor.selection.anchor.path, firstTextPath) &&
+                                    editor.selection.anchor.offset === 0) {
+                                    event.preventDefault();
+                                    core.Transforms.select(editor, core.Editor.end(editor, prePath));
+                                    return;
+                                }
+                            }
+                            return;
+                        }
+                        return;
+                    }
+                    if (!text && editor.selection && event.key === 'Enter') {
+                        const parentEntry = core.getParent(editor, blockPath);
+                        if (!parentEntry)
+                            return;
+                        const [, parentPath] = parentEntry;
+                        event.preventDefault();
+                        const moveto = parentPath.slice();
+                        if (core.Element.isElement(preNode)) {
+                            const preType = preNode.type;
+                            if (preType === types.accordion_content) {
+                                core.Transforms.removeNodes(editor, { at: editor.selection });
+                            }
+                        }
+                        core.Transforms.insertNodes(editor, { type: core.PARAGRAPH_TYPE, children: [{ text: '' }] }, {
+                            at: editor.selection,
+                            select: true,
+                        });
+                        moveto[parentPath.length - 1] += 1;
+                        core.Transforms.moveNodes(editor, {
+                            at: editor.selection,
+                            to: moveto,
+                        });
+                        return;
+                    }
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderAccordion = options.accordion || defaultRenderAccordionElements.accordion;
+            const renderAccordionTitle = options.accordion_title || defaultRenderAccordionElements.accordion_title;
+            const renderAccordionContent = options.accordion_content || defaultRenderAccordionElements.accordion_content;
+            return react.createRenderElements([
+                {
+                    type: types.accordion,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderAccordion({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.accordion_title,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderAccordionTitle({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.accordion_content,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderAccordionContent({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+            ]);
+        } });
+}
+
+exports.AccordionContext = AccordionContext;
+exports.createReactAccordion = createReactAccordion;
+exports.defaultRenderAccordionElements = defaultRenderAccordionElements;
+exports.useAccordion = useAccordion;

package/accordion/index.d.ts

@@ -0,0 +1,8 @@
+export * from './contexts/AccordionContext';
+export * from './hooks/useAccordion';
+export * from './typings';
+export * from './components/Accordion';
+export * from './components/AccordionTitle';
+export * from './components/AccordionContent';
+export { defaultRenderAccordionElements } from './defaultRenderAccordionElements';
+export { CreateReactAccordionOptions, createReactAccordion } from './createReactAccordion';

package/accordion/index.js

@@ -0,0 +1,10 @@
+export { AccordionContext } from './contexts/AccordionContext.js';
+export { useAccordion } from './hooks/useAccordion.js';
+import 'react';
+import 'clsx';
+import '@quadrats/react/components';
+import '@quadrats/icons';
+import '@quadrats/core';
+import '@quadrats/react';
+export { defaultRenderAccordionElements } from './defaultRenderAccordionElements.js';
+export { createReactAccordion } from './createReactAccordion.js';

package/accordion/jsx-serializer/createJsxSerializeAccordion.d.ts

@@ -0,0 +1,5 @@
+import { AccordionTypeKey, AccordionTitleTypeKey, AccordionContentTypeKey } from '@quadrats/common/accordion';
+import { CreateJsxSerializeElementOptions, JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { JsxSerializeAccordionElementProps } from './typings';
+export type CreateJsxSerializeAccordionOptions = Partial<Record<AccordionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeAccordionElementProps>>> & Record<AccordionTitleTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> & Record<AccordionContentTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>>>;
+export declare function createJsxSerializeAccordion(options?: CreateJsxSerializeAccordionOptions): (props: JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;