@quadrats/react 1.1.8 → 1.1.9

package/card/jsx-serializer/createJsxSerializeCard.js

@@ -0,0 +1,48 @@
+import { CARD_TYPES } from '@quadrats/common/card';
+import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderCardElements } from './defaultRenderCardElements.js';
+
+function createJsxSerializeCard(options = {}) {
+    const { card = {}, card_image = {}, card_contents = {} } = options;
+    const cardType = card.type || CARD_TYPES.card;
+    const imageType = card_image.type || CARD_TYPES.card_image;
+    const contentsType = card_contents.type || CARD_TYPES.card_contents;
+    const renderCard = card.render || defaultRenderCardElements.card;
+    const renderCardImage = card_image.render || defaultRenderCardElements.card_image;
+    const renderCardContents = card_contents.render || defaultRenderCardElements.card_contents;
+    return createJsxSerializeElements([
+        {
+            type: cardType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderCard({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: imageType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardImage({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: contentsType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardContents({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+export { createJsxSerializeCard };

package/card/jsx-serializer/defaultRenderCardElements.d.ts

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

package/card/jsx-serializer/defaultRenderCardElements.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CardContents, CardImage, CardWithoutToolbar } from '@quadrats/react/card';
+
+const defaultRenderCardElements = {
+    card: (props) => React.createElement(CardWithoutToolbar, Object.assign({}, props)),
+    card_image: (props) => React.createElement(CardImage, Object.assign({}, props)),
+    card_contents: (props) => React.createElement(CardContents, Object.assign({}, props)),
+};
+
+export { defaultRenderCardElements };

package/card/jsx-serializer/index.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+var card = require('@quadrats/react/card');
+var card$1 = require('@quadrats/common/card');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+const defaultRenderCardElements = {
+    card: (props) => React.createElement(card.CardWithoutToolbar, Object.assign({}, props)),
+    card_image: (props) => React.createElement(card.CardImage, Object.assign({}, props)),
+    card_contents: (props) => React.createElement(card.CardContents, Object.assign({}, props)),
+};
+
+function createJsxSerializeCard(options = {}) {
+    const { card = {}, card_image = {}, card_contents = {} } = options;
+    const cardType = card.type || card$1.CARD_TYPES.card;
+    const imageType = card_image.type || card$1.CARD_TYPES.card_image;
+    const contentsType = card_contents.type || card$1.CARD_TYPES.card_contents;
+    const renderCard = card.render || defaultRenderCardElements.card;
+    const renderCardImage = card_image.render || defaultRenderCardElements.card_image;
+    const renderCardContents = card_contents.render || defaultRenderCardElements.card_contents;
+    return jsxSerializer.createJsxSerializeElements([
+        {
+            type: cardType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderCard({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: imageType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardImage({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: contentsType,
+            render: (props) => {
+                const { children, element } = props;
+                return renderCardContents({
+                    children,
+                    element,
+                });
+            },
+        },
+    ]);
+}
+
+exports.createJsxSerializeCard = createJsxSerializeCard;
+exports.defaultRenderCardElements = defaultRenderCardElements;

package/card/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderCardElements } from './defaultRenderCardElements.js';
+export { createJsxSerializeCard } from './createJsxSerializeCard.js';

package/card/jsx-serializer/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/card/jsx-serializer",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "jsx-serializer",
-      "card"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/card/jsx-serializer/typings.d.ts

@@ -0,0 +1,9 @@
+import { CardElement, CardImageElement, CardContentsElement, CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export interface JsxSerializeCardElementProps extends JsxSerializeElementProps<CardElement> {
+}
+export interface JsxSerializeCardImageElementProps extends JsxSerializeElementProps<CardImageElement> {
+}
+export interface JsxSerializeCardContentsElementProps extends JsxSerializeElementProps<CardContentsElement> {
+}
+export type CardJsxSerializeElements = Record<CardTypeKey, (props: JsxSerializeCardElementProps) => JSX.Element | null | undefined> & Record<CardImageTypeKey, (props: JsxSerializeCardImageElementProps) => JSX.Element | null | undefined> & Record<CardContentsTypeKey, (props: JsxSerializeCardContentsElementProps) => JSX.Element | null | undefined>;

package/card/package.json

@@ -4,15 +4,7 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "quadratsConfig": {
-    "deps": [
-      "__ROOT__",
-      "components",
-      "toolbar",
-      "utils"
-    ],
-    "styles": {
-      "card": "card"
-    }
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/card/toolbar/CardToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactCard } from '@quadrats/react/card';
+export interface CardToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactCard;
+}
+declare function CardToolbarIcon(props: CardToolbarIconProps): React.JSX.Element;
+export default CardToolbarIcon;

package/card/toolbar/CardToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useCardTool } from './useCardTool.js';
+
+function CardToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { onClick } = useCardTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+export { CardToolbarIcon as default };

package/card/toolbar/index.cjs.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useCardTool(controller) {
+    const editor = react.useSlateStatic();
+    const { setCardModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
+    React.useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCardPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCardPlaceholder(editor);
+            setCardModalConfig({
+                controller,
+                onConfirm: ({ values, imageItem, haveLink }) => {
+                    controller.insertCard({
+                        editor,
+                        cardValues: {
+                            alignment: values.alignment,
+                            imageItem,
+                            title: values.title,
+                            description: values.description,
+                            remark: values.remark,
+                            haveLink,
+                            linkText: values.linkText,
+                            linkUrl: values.linkUrl,
+                        },
+                    });
+                    controller.removeCardPlaceholder(editor);
+                },
+            });
+        },
+    };
+}
+
+function CardToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { onClick } = useCardTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
+}
+
+exports.CardToolbarIcon = CardToolbarIcon;
+exports.useCardTool = useCardTool;

package/card/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useCardTool } from './useCardTool.js';
+export { default as CardToolbarIcon } from './CardToolbarIcon.js';

package/card/toolbar/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/card/toolbar",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "toolbar",
-      "card"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/card/toolbar/useCardTool.d.ts

@@ -0,0 +1,4 @@
+import { ReactCard } from '@quadrats/react/card';
+export declare function useCardTool(controller: ReactCard): {
+    onClick: () => void;
+};

package/card/toolbar/useCardTool.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useSlateStatic, useModal } from '@quadrats/react';
+
+function useCardTool(controller) {
+    const editor = useSlateStatic();
+    const { setCardModalConfig, isModalClosed, setIsModalClosed } = useModal();
+    useEffect(() => {
+        if (isModalClosed) {
+            setTimeout(() => {
+                controller.removeCardPlaceholder(editor);
+                setIsModalClosed(false);
+            }, 250);
+        }
+    }, [controller, editor, isModalClosed, setIsModalClosed]);
+    return {
+        onClick: () => {
+            controller.insertCardPlaceholder(editor);
+            setCardModalConfig({
+                controller,
+                onConfirm: ({ values, imageItem, haveLink }) => {
+                    controller.insertCard({
+                        editor,
+                        cardValues: {
+                            alignment: values.alignment,
+                            imageItem,
+                            title: values.title,
+                            description: values.description,
+                            remark: values.remark,
+                            haveLink,
+                            linkText: values.linkText,
+                            linkUrl: values.linkUrl,
+                        },
+                    });
+                    controller.removeCardPlaceholder(editor);
+                },
+            });
+        },
+    };
+}
+
+export { useCardTool };

package/card/typings.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Card, CardElement, CardImageElement, CardContentsElement, CardPlaceholderElement, CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
+import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
+import { LocaleDefinition } from '@quadrats/locales';
+export interface RenderCardElementProps extends RenderElementProps<CardElement> {
+    controller: Card<Editor>;
+}
+export interface RenderCardImageElementProps extends RenderElementProps<CardImageElement> {
+}
+export interface RenderCardContentsElementProps extends RenderElementProps<CardContentsElement> {
+}
+export interface RenderCardPlaceholderElementProps extends RenderElementProps<CardPlaceholderElement> {
+}
+export type RenderCardPlaceholderElement = (props: RenderCardPlaceholderElementProps) => JSX.Element | null | undefined;
+export type CardRenderElements = Record<CardTypeKey, (props: RenderCardElementProps) => JSX.Element | null | undefined> & Record<CardImageTypeKey, (props: RenderCardImageElementProps) => JSX.Element | null | undefined> & Record<CardContentsTypeKey, (props: RenderCardContentsElementProps) => JSX.Element | null | undefined>;
+export type ReactCardCreateRenderElementOptions = {
+    [K in CardTypeKey | CardImageTypeKey | CardContentsTypeKey]?: CardRenderElements[K];
+};
+export interface ReactCard extends Card<Editor>, WithCreateRenderElement<[ReactCardCreateRenderElementOptions?]> {
+    createHandlers: (setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>, locale?: LocaleDefinition) => Handlers;
+    createRenderPlaceholderElement: (params_0?: {
+        render?: RenderCardPlaceholderElement;
+    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
+}

package/carousel/carousel.css

@@ -0,0 +1 @@
+.qdr-carousel{position:relative;margin:var(--qdr-spacing-14) 0}.qdr-carousel__image-wrapper{flex:0 0 100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--qdr-radius-1)}.qdr-carousel__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel--with-inline-toolbar:hover .qdr-carousel__image-wrapper::after{background-color:var(--qdr-overlay-dark)}.qdr-carousel:hover .qdr-carousel__inline-toolbar{opacity:1;pointer-events:auto}.qdr-carousel-modal__side{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:var(--qdr-spacing-9)}.qdr-carousel-modal__side__hints-wrapper{width:100%}.qdr-carousel-modal__side__hints-title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight);margin-bottom:var(--qdr-spacing-4)}.qdr-carousel-modal__side__upload{width:100%}.qdr-carousel-modal__main{display:flex;flex-direction:column;position:relative;background-color:var(--qdr-bg);overflow-y:unset;padding:unset}.qdr-carousel-modal__counter{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight)}.qdr-carousel-modal__placeholder{display:flex;align-items:center;justify-content:center;pointer-events:none;height:100%}.qdr-carousel-modal__placeholder__block{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:360px;padding-bottom:var(--qdr-spacing-14)}.qdr-carousel-modal__placeholder__icon{display:flex;align-items:center;justify-content:center;color:var(--qdr-action-inactive);padding:var(--qdr-spacing-4);border:1px solid var(--qdr-divider);background-color:var(--qdr-surface);border-radius:var(--qdr-radius-5)}.qdr-carousel-modal__placeholder__title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h5-font-size);line-height:var(--qdr-typography-basic-h5-line-height);letter-spacing:var(--qdr-typography-basic-h5-letter-spacing);font-weight:var(--qdr-typography-basic-h5-font-weight);text-align:center;margin-top:var(--qdr-spacing-9)}.qdr-carousel-modal__placeholder__hint{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight);text-align:center;margin-top:var(--qdr-spacing-2)}.qdr-carousel-modal__zone{flex:1;align-self:stretch;overflow-y:auto;padding:var(--qdr-spacing-9)}.qdr-carousel-modal__zone__wrapper{position:absolute;inset:0;width:100%;height:100%;z-index:101;display:flex;align-items:flex-end;justify-content:center;background-color:var(--qdr-primary-hover-bg);pointer-events:none}.qdr-carousel-modal__zone__block{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);background-color:var(--qdr-primary);color:var(--qdr-on-primary);padding:var(--qdr-spacing-7) var(--qdr-spacing-14);box-shadow:var(--qdr-shadow-xl);margin-bottom:var(--qdr-spacing-7);border-radius:9999px}.qdr-carousel-modal__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--qdr-spacing-6)}.qdr-carousel-modal__grid--isDragging{opacity:0;pointer-events:none}.qdr-carousel-modal__image-wrapper{display:flex;align-items:center;justify-content:center;position:relative}.qdr-carousel-modal__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel-modal__error-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qdr-spacing-4);background-color:var(--qdr-error-hover-bg)}.qdr-carousel-modal__error-icon{color:var(--qdr-error)}.qdr-carousel-modal__error-text{color:var(--qdr-error);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight);margin:0}.qdr-carousel-modal__item{display:flex;flex-direction:column;position:relative;border:1px solid var(--qdr-divider);border-radius:var(--qdr-radius-2);overflow:hidden;transition:box-shadow var(--qdr-duration-short) var(--qdr-easing-standard);z-index:100}.qdr-carousel-modal__item:hover{box-shadow:0 0 0 2px var(--qdr-surface),0 0 0 4px var(--qdr-primary-light)}.qdr-carousel-modal__item:hover .qdr-carousel-modal__image-wrapper::after{background-color:var(--qdr-overlay-dark)}.qdr-carousel-modal__item:hover .qdr-carousel-modal__inline-toolbar{opacity:1;pointer-events:auto}.qdr-carousel-modal__item--isDragging{border-style:dashed;border-color:var(--qdr-primary);box-shadow:var(--qdr-shadow-xl);cursor:grabbing}.qdr-carousel-modal__item--isDragging>*{display:none}.qdr-carousel-modal__item--isOver{box-shadow:0 0 0 2px var(--qdr-surface),0 0 0 4px var(--qdr-primary-light)}.qdr-carousel-modal__image{width:100%}.qdr-carousel-modal__input-wrapper{border-top:1px solid var(--qdr-divider);background-color:var(--qdr-surface);padding:var(--qdr-spacing-6)}.qdr-carousel__placeholder{margin:var(--qdr-spacing-14) 0}.qdr-carousel__placeholder__icon-wrapper{display:flex;align-items:center;justify-content:center;width:100%;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);background-color:var(--qdr-block)}.qdr-carousel__placeholder__icon{color:var(--qdr-action-inactive)}.qdr-carousel__dots{display:flex;align-items:center;justify-content:center;margin-top:var(--qdr-spacing-4)}.qdr-carousel__dot{width:5px;height:5px;border-radius:50%;background-color:var(--qdr-action-disabled-bg);margin:2.5px}.qdr-carousel__dot:hover{cursor:pointer}.qdr-carousel__dot--active{background-color:var(--qdr-primary)}.qdr-carousel__images-wrapper{display:flex;flex-direction:column}.qdr-carousel__slider-wrapper{width:100%;overflow-x:hidden;border-radius:var(--qdr-radius-1)}.qdr-carousel__slider-wrapper:hover{cursor:grab}.qdr-carousel__slider-wrapper--isDragging:hover{cursor:grabbing}.qdr-carousel__slider{width:100%;display:flex;align-items:flex-start;justify-content:flex-start;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel__slider--isDragging{transition:none}.qdr-carousel__image{width:100%;border-radius:var(--qdr-radius-1)}.qdr-carousel__caption{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight);margin-top:var(--qdr-spacing-6)}

package/carousel/components/Carousel.d.ts

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

package/carousel/components/Carousel.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Transforms } from '@quadrats/core';
+import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { Edit, Trash } from '@quadrats/icons';
+import { CarouselContext } from '../contexts/CarouselContext.js';
+
+function Carousel({ attributes, children, element, controller, }) {
+    const { setCarouselModalConfig, setConfirmModalConfig } = useModal();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            activeIndex,
+            setActiveIndex,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
+            React.createElement(InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
+                    {
+                        icons: [
+                            {
+                                icon: Edit,
+                                onClick: () => {
+                                    setCarouselModalConfig({
+                                        controller,
+                                        initialValue: element.items,
+                                        onConfirm: (items) => {
+                                            controller.updateCarouselElement({ editor, items, path });
+                                        },
+                                    });
+                                },
+                            },
+                            {
+                                icon: Trash,
+                                onClick: () => {
+                                    if (controller.confirmModal) {
+                                        // TODO: i18n
+                                        setConfirmModalConfig({
+                                            title: '刪除輪播',
+                                            content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                            confirmText: '刪除輪播',
+                                            onConfirm: () => {
+                                                Transforms.removeNodes(editor, { at: path });
+                                            },
+                                        });
+                                    }
+                                    else {
+                                        Transforms.removeNodes(editor, { at: path });
+                                    }
+                                },
+                            },
+                        ],
+                    },
+                ] }),
+            children)));
+}
+function CarouselWithoutToolbar({ attributes, children, }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            activeIndex,
+            setActiveIndex,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel" }), children)));
+}
+
+export { Carousel, CarouselWithoutToolbar, Carousel as default };

package/carousel/components/CarouselCaption.d.ts

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

package/carousel/components/CarouselCaption.js

@@ -0,0 +1,12 @@
+import React, { useMemo } from 'react';
+import { useCarousel } from '../hooks/useCarousel.js';
+
+function CarouselCaption({ attributes, element, }) {
+    const { activeIndex } = useCarousel();
+    const currentCaption = useMemo(() => element.captions[activeIndex], [activeIndex, element.captions]);
+    if (!currentCaption)
+        return null;
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel__caption" }), currentCaption));
+}
+
+export { CarouselCaption, CarouselCaption as default };

package/carousel/components/CarouselImages.d.ts

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

package/carousel/components/CarouselImages.js

@@ -0,0 +1,52 @@
+import React, { useRef, useState, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import { useCarousel } from '../hooks/useCarousel.js';
+
+const deltaLimit = 100;
+function CarouselImages({ attributes, element, }) {
+    var _a, _b;
+    const imageRef = useRef(null);
+    const { activeIndex, setActiveIndex } = useCarousel();
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [delta, setDelta] = useState(0);
+    const images = useMemo(() => element.images, [element.images]);
+    const onMouseUp = useCallback(() => {
+        setIsDragging(false);
+        if (delta < -100 && activeIndex < images.length - 1) {
+            setActiveIndex((prev) => prev + 1);
+        }
+        else if (delta > deltaLimit && activeIndex > 0) {
+            setActiveIndex((prev) => prev - 1);
+        }
+        setDelta(0);
+    }, [activeIndex, delta, images.length, setActiveIndex]);
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel__images-wrapper" }),
+        React.createElement("div", { className: clsx('qdr-carousel__slider-wrapper', {
+                'qdr-carousel__slider-wrapper--isDragging': isDragging,
+            }), onMouseDown: (e) => {
+                setIsDragging(true);
+                setStartX(e.clientX);
+            }, onMouseMove: (e) => {
+                if (isDragging) {
+                    const delta = e.clientX - startX;
+                    setDelta(delta);
+                }
+            }, onMouseUp: onMouseUp },
+            React.createElement("div", { className: clsx('qdr-carousel__slider', {
+                    'qdr-carousel__slider--isDragging': isDragging,
+                }), style: {
+                    transform: `translateX(${delta - activeIndex * ((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`,
+                } }, images.map((image) => (React.createElement("div", { key: image, className: "qdr-carousel__image-wrapper" },
+                React.createElement("img", { ref: imageRef, draggable: false, className: "qdr-carousel__image", src: image, style: {
+                        objectFit: element.ratio ? 'cover' : 'contain',
+                        aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2',
+                    } })))))),
+        React.createElement("div", { className: "qdr-carousel__dots" }, images.map((_, index) => (React.createElement("div", { key: index, onClick: () => {
+                setActiveIndex(index);
+            }, className: clsx('qdr-carousel__dot', {
+                'qdr-carousel__dot--active': index === activeIndex,
+            }) }))))));
+}
+
+export { CarouselImages, CarouselImages as default };

package/carousel/components/CarouselPlaceholder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderCarouselPlaceholderElementProps } from '../typings';
+export declare function CarouselPlaceholder({ attributes, element }: RenderCarouselPlaceholderElementProps): React.JSX.Element;
+export default CarouselPlaceholder;

package/carousel/components/CarouselPlaceholder.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '@quadrats/react/components';
+import { Image } from '@quadrats/icons';
+
+function CarouselPlaceholder({ attributes, element }) {
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-carousel__placeholder", contentEditable: false }),
+        React.createElement("div", { className: "qdr-carousel__placeholder__icon-wrapper", style: { aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2' } },
+            React.createElement(Icon, { className: "qdr-carousel__placeholder__icon", icon: Image, width: 48, height: 48 })),
+        React.createElement("div", { className: "qdr-carousel__dots" },
+            React.createElement("div", { className: "qdr-carousel__dot qdr-carousel__dot--active" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }))));
+}
+
+export { CarouselPlaceholder, CarouselPlaceholder as default };

package/carousel/contexts/CarouselContext.d.ts

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

package/carousel/contexts/CarouselContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CarouselContext = createContext({ activeIndex: 0, setActiveIndex: () => { } });
+
+export { CarouselContext };

package/carousel/createReactCarousel.d.ts

@@ -0,0 +1,4 @@
+import { CreateCarouselOptions } from '@quadrats/common/carousel';
+import { ReactCarousel } from './typings';
+export type CreateReactCarouselOptions = CreateCarouselOptions;
+export declare function createReactCarousel(options: CreateReactCarouselOptions): ReactCarousel;