@quadrats/react 1.1.6 → 1.1.8

package/carousel/index.cjs.js

@@ -1,236 +0,0 @@
-'use strict';
-
-var React = require('react');
-var core = require('@quadrats/core');
-var react = require('@quadrats/react');
-var toolbar = require('@quadrats/react/toolbar');
-var icons = require('@quadrats/icons');
-var clsx = require('clsx');
-var components = require('@quadrats/react/components');
-var carousel = require('@quadrats/common/carousel');
-var utils = require('@quadrats/react/utils');
-
-const CarouselContext = React.createContext({ activeIndex: 0, setActiveIndex: () => { } });
-
-function useCarousel() {
-    return React.useContext(CarouselContext);
-}
-
-function Carousel({ attributes, children, element, controller, }) {
-    const { setCarouselModalConfig, setConfirmModalConfig } = react.useModal();
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    const editor = react.useSlateStatic();
-    const path = react.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(toolbar.InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
-                    {
-                        icons: [
-                            {
-                                icon: icons.Edit,
-                                onClick: () => {
-                                    setCarouselModalConfig({
-                                        controller,
-                                        initialValue: element.items,
-                                        onConfirm: (items) => {
-                                            controller.updateCarouselElement({ editor, items, path });
-                                        },
-                                    });
-                                },
-                            },
-                            {
-                                icon: icons.Trash,
-                                onClick: () => {
-                                    if (controller.confirmModal) {
-                                        // TODO: i18n
-                                        setConfirmModalConfig({
-                                            title: '刪除輪播',
-                                            content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
-                                            confirmText: '刪除輪播',
-                                            onConfirm: () => {
-                                                core.Transforms.removeNodes(editor, { at: path });
-                                            },
-                                        });
-                                    }
-                                    else {
-                                        core.Transforms.removeNodes(editor, { at: path });
-                                    }
-                                },
-                            },
-                        ],
-                    },
-                ] }),
-            children)));
-}
-function CarouselWithoutToolbar({ attributes, children, }) {
-    const [activeIndex, setActiveIndex] = React.useState(0);
-    return (React.createElement(CarouselContext.Provider, { value: {
-            activeIndex,
-            setActiveIndex,
-        } },
-        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel" }), children)));
-}
-
-const deltaLimit = 100;
-function CarouselImages({ attributes, element, }) {
-    var _a, _b;
-    const imageRef = React.useRef(null);
-    const { activeIndex, setActiveIndex } = useCarousel();
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [startX, setStartX] = React.useState(0);
-    const [delta, setDelta] = React.useState(0);
-    const images = React.useMemo(() => element.images, [element.images]);
-    const onMouseUp = React.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,
-            }) }))))));
-}
-
-function CarouselCaption({ attributes, element, }) {
-    const { activeIndex } = useCarousel();
-    const currentCaption = React.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));
-}
-
-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(components.Icon, { className: "qdr-carousel__placeholder__icon", icon: icons.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" }))));
-}
-
-const defaultRenderCarouselElements = {
-    carousel: (props) => React.createElement(Carousel, Object.assign({}, props)),
-    carousel_images: (props) => React.createElement(CarouselImages, Object.assign({}, props)),
-    carousel_caption: (props) => React.createElement(CarouselCaption, Object.assign({}, props)),
-};
-const defaultRenderCarouselPlaceholderElement = (props) => (React.createElement(CarouselPlaceholder, Object.assign({}, props)));
-
-function createReactCarousel(options) {
-    const core = carousel.createCarousel(options);
-    const { types, confirmModal } = core;
-    return Object.assign(Object.assign({}, core), { createHandlers: (setNeedConfirmModal, locale) => ({
-            onKeyDown(event, editor, next) {
-                if (event.key === 'Backspace') {
-                    utils.removePreviousElement({
-                        event,
-                        editor,
-                        type: types.carousel,
-                        confirmModal,
-                        doConfirm: (remove) => {
-                            if (setNeedConfirmModal) {
-                                // TODO: i18n
-                                console.log('locale', locale);
-                                setNeedConfirmModal({
-                                    title: '刪除輪播',
-                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
-                                    confirmText: '刪除輪播',
-                                    onConfirm: () => {
-                                        remove();
-                                        setNeedConfirmModal(null);
-                                    },
-                                });
-                            }
-                        },
-                    });
-                }
-                next();
-            },
-        }), createRenderElement: (options = {}) => {
-            const renderCarousel = options.carousel || defaultRenderCarouselElements.carousel;
-            const renderCarouselImages = options.carousel_images || defaultRenderCarouselElements.carousel_images;
-            const renderCarouselCaption = options.carousel_caption || defaultRenderCarouselElements.carousel_caption;
-            return react.createRenderElements([
-                {
-                    type: types.carousel,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderCarousel({
-                            attributes,
-                            element,
-                            children,
-                            controller: core,
-                        });
-                    },
-                },
-                {
-                    type: types.carousel_images,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderCarouselImages({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-                {
-                    type: types.carousel_caption,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderCarouselCaption({
-                            attributes,
-                            element,
-                            children,
-                        });
-                    },
-                },
-            ]);
-        }, createRenderPlaceholderElement: ({ render = defaultRenderCarouselPlaceholderElement } = {}) => react.createRenderElement({
-            type: carousel.CAROUSEL_PLACEHOLDER_TYPE,
-            render,
-        }) });
-}
-
-exports.Carousel = Carousel;
-exports.CarouselCaption = CarouselCaption;
-exports.CarouselContext = CarouselContext;
-exports.CarouselImages = CarouselImages;
-exports.CarouselPlaceholder = CarouselPlaceholder;
-exports.CarouselWithoutToolbar = CarouselWithoutToolbar;
-exports.createReactCarousel = createReactCarousel;
-exports.defaultRenderCarouselElements = defaultRenderCarouselElements;
-exports.defaultRenderCarouselPlaceholderElement = defaultRenderCarouselPlaceholderElement;
-exports.useCarousel = useCarousel;

package/carousel/index.js

@@ -1,8 +0,0 @@
-export { CarouselContext } from './contexts/CarouselContext.js';
-export { useCarousel } from './hooks/useCarousel.js';
-export { Carousel, CarouselWithoutToolbar } from './components/Carousel.js';
-export { CarouselImages } from './components/CarouselImages.js';
-export { CarouselCaption } from './components/CarouselCaption.js';
-export { CarouselPlaceholder } from './components/CarouselPlaceholder.js';
-export { createReactCarousel } from './createReactCarousel.js';
-export { defaultRenderCarouselElements, defaultRenderCarouselPlaceholderElement } from './defaultRenderCarouselElements.js';

package/carousel/jsx-serializer/createJsxSerializeCarousel.d.ts

@@ -1,5 +0,0 @@
-import { CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
-import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeCarouselElementProps, JsxSerializeCarouselImagesElementProps, JsxSerializeCarouselCaptionElementProps } from './typings';
-export type CreateJsxSerializeCarouselOptions = Partial<Record<CarouselTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCarouselElementProps>>> & Record<CarouselImagesTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCarouselImagesElementProps>>> & Record<CarouselCaptionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeCarouselCaptionElementProps>>>>;
-export declare function createJsxSerializeCarousel(options?: CreateJsxSerializeCarouselOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/carousel/jsx-serializer/createJsxSerializeCarousel.js

@@ -1,48 +0,0 @@
-import { CAROUSEL_TYPES } from '@quadrats/common/carousel';
-import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
-import { defaultRenderCarouselElements } from './defaultRenderCarouselElements.js';
-
-function createJsxSerializeCarousel(options = {}) {
-    const { carousel = {}, carousel_images = {}, carousel_caption = {} } = options;
-    const carouselType = carousel.type || CAROUSEL_TYPES.carousel;
-    const imagesType = carousel_images.type || CAROUSEL_TYPES.carousel_images;
-    const captionType = carousel_caption.type || CAROUSEL_TYPES.carousel_caption;
-    const renderCarousel = carousel.render || defaultRenderCarouselElements.carousel;
-    const renderCarouselImages = carousel_images.render || defaultRenderCarouselElements.carousel_images;
-    const renderCarouselCaption = carousel_caption.render || defaultRenderCarouselElements.carousel_caption;
-    return createJsxSerializeElements([
-        {
-            type: carouselType,
-            render: (props) => {
-                const { children } = props;
-                const element = props.element;
-                return renderCarousel({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: imagesType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCarouselImages({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: captionType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCarouselCaption({
-                    children,
-                    element,
-                });
-            },
-        },
-    ]);
-}
-
-export { createJsxSerializeCarousel };

package/carousel/jsx-serializer/defaultRenderCarouselElements.d.ts

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

package/carousel/jsx-serializer/defaultRenderCarouselElements.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { CarouselCaption, CarouselImages, CarouselWithoutToolbar } from '@quadrats/react/carousel';
-
-const defaultRenderCarouselElements = {
-    carousel: (props) => React.createElement(CarouselWithoutToolbar, Object.assign({}, props)),
-    carousel_images: (props) => React.createElement(CarouselImages, Object.assign({}, props)),
-    carousel_caption: (props) => React.createElement(CarouselCaption, Object.assign({}, props)),
-};
-
-export { defaultRenderCarouselElements };

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

@@ -1,58 +0,0 @@
-'use strict';
-
-var React = require('react');
-var carousel = require('@quadrats/react/carousel');
-var carousel$1 = require('@quadrats/common/carousel');
-var jsxSerializer = require('@quadrats/react/jsx-serializer');
-
-const defaultRenderCarouselElements = {
-    carousel: (props) => React.createElement(carousel.CarouselWithoutToolbar, Object.assign({}, props)),
-    carousel_images: (props) => React.createElement(carousel.CarouselImages, Object.assign({}, props)),
-    carousel_caption: (props) => React.createElement(carousel.CarouselCaption, Object.assign({}, props)),
-};
-
-function createJsxSerializeCarousel(options = {}) {
-    const { carousel = {}, carousel_images = {}, carousel_caption = {} } = options;
-    const carouselType = carousel.type || carousel$1.CAROUSEL_TYPES.carousel;
-    const imagesType = carousel_images.type || carousel$1.CAROUSEL_TYPES.carousel_images;
-    const captionType = carousel_caption.type || carousel$1.CAROUSEL_TYPES.carousel_caption;
-    const renderCarousel = carousel.render || defaultRenderCarouselElements.carousel;
-    const renderCarouselImages = carousel_images.render || defaultRenderCarouselElements.carousel_images;
-    const renderCarouselCaption = carousel_caption.render || defaultRenderCarouselElements.carousel_caption;
-    return jsxSerializer.createJsxSerializeElements([
-        {
-            type: carouselType,
-            render: (props) => {
-                const { children } = props;
-                const element = props.element;
-                return renderCarousel({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: imagesType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCarouselImages({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: captionType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCarouselCaption({
-                    children,
-                    element,
-                });
-            },
-        },
-    ]);
-}
-
-exports.createJsxSerializeCarousel = createJsxSerializeCarousel;
-exports.defaultRenderCarouselElements = defaultRenderCarouselElements;

package/carousel/jsx-serializer/index.js

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

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

@@ -1,9 +0,0 @@
-import { CarouselElement, CarouselImagesElement, CarouselCaptionElement, CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-export interface JsxSerializeCarouselElementProps extends JsxSerializeElementProps<CarouselElement> {
-}
-export interface JsxSerializeCarouselImagesElementProps extends JsxSerializeElementProps<CarouselImagesElement> {
-}
-export interface JsxSerializeCarouselCaptionElementProps extends JsxSerializeElementProps<CarouselCaptionElement> {
-}
-export type CarouselJsxSerializeElements = Record<CarouselTypeKey, (props: JsxSerializeCarouselElementProps) => JSX.Element | null | undefined> & Record<CarouselImagesTypeKey, (props: JsxSerializeCarouselImagesElementProps) => JSX.Element | null | undefined> & Record<CarouselCaptionTypeKey, (props: JsxSerializeCarouselCaptionElementProps) => JSX.Element | null | undefined>;

package/carousel/toolbar/CarouselToolbarIcon.d.ts

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

package/carousel/toolbar/CarouselToolbarIcon.js

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

package/carousel/toolbar/index.cjs.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var React = require('react');
-var react = require('@quadrats/react');
-var tslib = require('tslib');
-var toolbar = require('@quadrats/react/toolbar');
-
-function useCarouselTool(controller) {
-    const editor = react.useSlateStatic();
-    const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
-    React.useEffect(() => {
-        if (isModalClosed) {
-            setTimeout(() => {
-                controller.removeCarouselPlaceholder(editor);
-                setIsModalClosed(false);
-            }, 250);
-        }
-    }, [controller, editor, isModalClosed, setIsModalClosed]);
-    return {
-        onClick: () => {
-            controller.insertCarouselPlaceholder(editor);
-            setCarouselModalConfig({
-                controller,
-                onConfirm: (items) => {
-                    controller.insertCarousel({
-                        editor,
-                        items,
-                    });
-                    controller.removeCarouselPlaceholder(editor);
-                },
-            });
-        },
-    };
-}
-
-function CarouselToolbarIcon(props) {
-    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
-    const { onClick } = useCarouselTool(controller);
-    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
-}
-
-exports.CarouselToolbarIcon = CarouselToolbarIcon;
-exports.useCarouselTool = useCarouselTool;

package/carousel/toolbar/index.js

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

package/carousel/toolbar/useCarouselTool.d.ts

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

package/carousel/toolbar/useCarouselTool.js

@@ -1,32 +0,0 @@
-import { useEffect } from 'react';
-import { useSlateStatic, useModal } from '@quadrats/react';
-
-function useCarouselTool(controller) {
-    const editor = useSlateStatic();
-    const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = useModal();
-    useEffect(() => {
-        if (isModalClosed) {
-            setTimeout(() => {
-                controller.removeCarouselPlaceholder(editor);
-                setIsModalClosed(false);
-            }, 250);
-        }
-    }, [controller, editor, isModalClosed, setIsModalClosed]);
-    return {
-        onClick: () => {
-            controller.insertCarouselPlaceholder(editor);
-            setCarouselModalConfig({
-                controller,
-                onConfirm: (items) => {
-                    controller.insertCarousel({
-                        editor,
-                        items,
-                    });
-                    controller.removeCarouselPlaceholder(editor);
-                },
-            });
-        },
-    };
-}
-
-export { useCarouselTool };

package/carousel/typings.d.ts

@@ -1,27 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Carousel, CarouselElement, CarouselImagesElement, CarouselCaptionElement, CarouselPlaceholderElement, CarouselTypeKey, CarouselImagesTypeKey, CarouselCaptionTypeKey } from '@quadrats/common/carousel';
-import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
-import { LocaleDefinition } from '@quadrats/locales';
-export type CarouselContextType = {
-    activeIndex: number;
-    setActiveIndex: Dispatch<SetStateAction<number>>;
-};
-export interface RenderCarouselElementProps extends RenderElementProps<CarouselElement> {
-    controller: Carousel<Editor>;
-}
-export interface RenderCarouselImagesElementProps extends RenderElementProps<CarouselImagesElement> {
-}
-export type RenderCarouselCaptionElementProps = RenderElementProps<CarouselCaptionElement>;
-export interface RenderCarouselPlaceholderElementProps extends RenderElementProps<CarouselPlaceholderElement> {
-}
-export type RenderCarouselPlaceholderElement = (props: RenderCarouselPlaceholderElementProps) => JSX.Element | null | undefined;
-export type CarouselRenderElements = Record<CarouselTypeKey, (props: RenderCarouselElementProps) => JSX.Element | null | undefined> & Record<CarouselImagesTypeKey, (props: RenderCarouselImagesElementProps) => JSX.Element | null | undefined> & Record<CarouselCaptionTypeKey, (props: RenderCarouselCaptionElementProps) => JSX.Element | null | undefined>;
-export type ReactCarouselCreateRenderElementOptions = {
-    [K in CarouselTypeKey | CarouselImagesTypeKey | CarouselCaptionTypeKey]?: CarouselRenderElements[K];
-};
-export interface ReactCarousel extends Carousel<Editor>, WithCreateRenderElement<[ReactCarouselCreateRenderElementOptions?]> {
-    createHandlers: (setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>, locale?: LocaleDefinition) => Handlers;
-    createRenderPlaceholderElement: (params_0?: {
-        render?: RenderCarouselPlaceholderElement;
-    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
-}

package/components/BaseField/index.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface BaseFieldProps {
-    label?: string;
-    className?: string;
-    width?: number;
-    children: ReactNode;
-    required?: boolean;
-    errorMessage?: string;
-}
-declare const BaseField: ({ label, className, width, children, required, errorMessage }: BaseFieldProps) => React.JSX.Element;
-export default BaseField;

package/components/BaseField/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Error } from '@quadrats/icons';
-import clsx from 'clsx';
-import Icon from '../Icon/index.js';
-
-const BaseField = ({ label, className, width, children, required = false, errorMessage }) => {
-    return (React.createElement("div", { className: clsx('qdr-base-field', className), style: { width } },
-        label && (React.createElement("p", { className: "qdr-base-field__label" },
-            label,
-            required && React.createElement("span", { className: "qdr-base-field__required-mark" }, "*"))),
-        children,
-        errorMessage && (React.createElement("div", { className: "qdr-base-field__error-message" },
-            React.createElement(Icon, { icon: Error, width: 16, height: 16 }),
-            React.createElement("span", null, errorMessage)))));
-};
-
-export { BaseField as default };

package/components/Button/index.d.ts

@@ -1,14 +0,0 @@
-import React, { ReactNode, MouseEventHandler } from 'react';
-export interface ButtonProps {
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    className?: string;
-    type?: 'submit' | 'reset' | 'button';
-    variant?: 'primary' | 'secondary' | 'outlined' | 'dashed' | 'tertiary';
-    size?: 'small' | 'medium' | 'large';
-    prefix?: ReactNode;
-    danger?: boolean;
-    disabled?: boolean;
-    children: ReactNode;
-}
-declare const Button: ({ onClick, className, type, variant, size, prefix, danger, disabled, children, }: ButtonProps) => React.JSX.Element;
-export default Button;

package/components/Button/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-const Button = ({ onClick, className, type = 'button', variant = 'primary', size = 'small', prefix, danger = false, disabled, children, }) => {
-    return (React.createElement("button", { className: clsx('qdr-button', `qdr-button--${variant}`, `qdr-button--${size}`, {
-            'qdr-button--danger': danger,
-        }, className), type: type, disabled: disabled, onClick: onClick },
-        prefix,
-        children));
-};
-
-export { Button as default };

package/components/Hint/index.d.ts

@@ -1,15 +0,0 @@
-import React, { CSSProperties } from 'react';
-export interface HintProps {
-    children: string;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-}
-declare const Hint: ({ children, variant }: HintProps) => React.JSX.Element;
-export interface HintsProps {
-    hints: {
-        text: string;
-        variant?: 'info' | 'success' | 'warning' | 'error';
-    }[];
-    style?: CSSProperties;
-}
-export declare const Hints: ({ hints, style }: HintsProps) => React.JSX.Element;
-export default Hint;

package/components/Hint/index.js

@@ -1,30 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import { Info, Error, Warning, Success } from '@quadrats/icons';
-import Icon from '../Icon/index.js';
-
-const Hint = ({ children, variant = 'info' }) => {
-    const icon = useMemo(() => {
-        switch (variant) {
-            case 'info':
-                return Info;
-            case 'success':
-                return Success;
-            case 'warning':
-                return Warning;
-            case 'error':
-                return Error;
-            default:
-                return Info;
-        }
-    }, [variant]);
-    return (React.createElement("div", { className: "qdr-hint" },
-        React.createElement("div", { className: clsx('qdr-hint__icon', `qdr-hint__icon--${variant}`) },
-            React.createElement(Icon, { icon: icon, width: 16, height: 16 })),
-        React.createElement("div", { className: clsx('qdr-hint__children', `qdr-hint__children--${variant}`) }, children)));
-};
-const Hints = ({ hints, style }) => {
-    return (React.createElement("div", { className: "qdr-hints", style: style }, hints.map((hint, index) => (React.createElement(Hint, { key: index, variant: hint.variant }, hint.text)))));
-};
-
-export { Hints, Hint as default };

package/components/Icon/index.d.ts

@@ -1,15 +0,0 @@
-import React, { SVGProps } from 'react';
-import { IconDefinition } from '@quadrats/icons';
-export interface IconProps extends SVGProps<SVGSVGElement> {
-    /**
-     * The `IconDefinition` will be rendered.
-     */
-    icon: IconDefinition;
-    /**
-     * Provide `fontSize` by `em` to control size of icon.
-     * @default 1
-     */
-    size?: number;
-}
-declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default Icon;