@quadrats/react 1.1.8 → 1.1.9

package/components/index.d.ts

@@ -0,0 +1,16 @@
+export { BaseFieldProps, default as BaseField } from './BaseField';
+export { ButtonProps, default as Button } from './Button';
+export { HintProps, default as Hint, HintsProps, Hints } from './Hint';
+export { ImageUploaderItem, ImageUploaderProps, default as ImageUploader } from './ImageUploader';
+export { InputProps, default as Input } from './Input';
+export { TextareaProps, default as Textarea } from './Textarea';
+export { IconProps, default as Icon } from './Icon';
+export { ModalProps, default as Modal } from './Modal';
+export { MessageSeverity, default as Message } from './Message';
+export { PortalProps, default as Portal } from './Portal';
+export { ProgressProps, default as Progress } from './Progress';
+export { SegmentedControlProps, default as SegmentedControl } from './SegmentedControl';
+export { ToggleProps, default as Toggle } from './Toggle';
+export { TooltipProps, default as Tooltip } from './Tooltip';
+export * from './Notifier/typings';
+export * from './Notifier/createNotifier';

package/components/index.js

@@ -0,0 +1,15 @@
+export { default as BaseField } from './BaseField/index.js';
+export { default as Button } from './Button/index.js';
+export { default as Hint, Hints } from './Hint/index.js';
+export { default as ImageUploader } from './ImageUploader/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Textarea } from './Textarea/index.js';
+export { default as Icon } from './Icon/index.js';
+export { default as Modal } from './Modal/index.js';
+export { default as Message } from './Message/index.js';
+export { default as Portal } from './Portal/index.js';
+export { default as Progress } from './Progress/index.js';
+export { default as SegmentedControl } from './SegmentedControl/index.js';
+export { default as Toggle } from './Toggle/index.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { createNotifier } from './Notifier/createNotifier.js';

package/components/input.css

@@ -0,0 +1 @@
+.qdr-input{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2);align-self:stretch;position:relative}.qdr-input__input{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);outline:none;padding:0 var(--qdr-spacing-12) 0 var(--qdr-spacing-6);margin:0;align-self:stretch;color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-input2-font-size);line-height:var(--qdr-typography-basic-input2-line-height);letter-spacing:var(--qdr-typography-basic-input2-letter-spacing);font-weight:var(--qdr-typography-basic-input2-font-weight);transition:border var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-input__input:hover,.qdr-input__input:focus{border-color:var(--qdr-primary)}.qdr-input__input::placeholder{color:var(--qdr-text-secondary)}.qdr-input__input--error{border-color:var(--qdr-error)}.qdr-input__input--error:hover,.qdr-input__input--error:focus{border-color:var(--qdr-error)}.qdr-input__input:disabled{border-color:var(--qdr-border);background-color:var(--qdr-action-disabled-bg);color:var(--qdr-text-disabled)}.qdr-input__input:disabled::placeholder{color:var(--qdr-text-disabled)}.qdr-input__hint-wrapper{display:flex;align-items:flex-start;justify-content:space-between;align-self:stretch}.qdr-input__hint{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-input__counter{position:absolute;right:0;bottom:calc(-1*(var(--qdr-typography-basic-caption-font-size)*var(--qdr-typography-basic-caption-line-height) + var(--qdr-spacing-2)));color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-input__counter--have-hint{bottom:0}.qdr-input__counter--limited{color:var(--qdr-primary)}.qdr-input__counter--error{color:var(--qdr-error)}.qdr-input__counter--disabled{color:var(--qdr-text-disabled)}

package/components/message.css

@@ -0,0 +1 @@
+.qdr-message{display:flex;align-items:center;max-width:100%;margin-top:var(--qdr-spacing-6);padding:var(--qdr-spacing-4) var(--qdr-spacing-9) var(--qdr-spacing-4) var(--qdr-spacing-6);gap:var(--qdr-spacing-4);background-color:var(--qdr-surface);border:1px solid var(--qdr-divider);color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight);flex-shrink:0;box-sizing:border-box;box-shadow:var(--qdr-shadow-s)}.qdr-message:first-child{margin-top:var(--qdr-spacing-7)}.qdr-message--success .qdr-message__icon{color:var(--qdr-success)}.qdr-message--warning .qdr-message__icon{color:var(--qdr-warning)}.qdr-message--error .qdr-message__icon{color:var(--qdr-error)}.qdr-message--info .qdr-message__icon{color:var(--qdr-primary)}.qdr-message__root{display:flex;flex-direction:column;align-items:center;position:fixed;z-index:9999;inset:0;pointer-events:none;overflow:hidden}

package/components/modal.css

@@ -0,0 +1 @@
+.qdr-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity var(--qdr-duration-short) var(--qdr-easing-standard);z-index:9999}.qdr-modal--mask{background-color:var(--qdr-overlay-dark)}.qdr-modal--opened{opacity:1;pointer-events:auto}.qdr-modal__transition-enter{transform:translateY(-200px);opacity:0}.qdr-modal__transition-enter-active{transform:translateY(0);opacity:1;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard),opacity var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-modal__transition-exit{transform:translateY(0);opacity:1}.qdr-modal__transition-exit-active{transform:translateY(-200px);opacity:0;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard),opacity var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-modal__container{background-color:#fff;box-shadow:var(--qdr-shadow-xl);margin:var(--qdr-spacing-8)}.qdr-modal__container--small{width:var(--qdr-modal-size-s)}.qdr-modal__container--medium{width:var(--qdr-modal-size-m)}.qdr-modal__container--large{width:var(--qdr-modal-size-l)}.qdr-modal__container--extraLarge{width:var(--qdr-modal-size-xl)}.qdr-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--qdr-spacing-4);padding:var(--qdr-spacing-5) var(--qdr-spacing-9);background-color:var(--qdr-surface);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);border-bottom:1px solid var(--qdr-divider)}.qdr-modal__header__cancel{color:var(--qdr-action-inactive);transition:color var(--qdr-duration-short) var(--qdr-easing-standard);cursor:pointer}.qdr-modal__header__cancel:hover{color:var(--qdr-action-active)}.qdr-modal__body{max-height:calc(100svh - 2*var(--qdr-spacing-8) - 2*var(--qdr-spacing-5) - var(--qdr-typography-basic-h5-font-size)*var(--qdr-typography-basic-h5-line-height));display:flex;align-items:flex-start;justify-content:flex-start}.qdr-modal__body--have-footer-height{max-height:calc(100svh - 2*var(--qdr-spacing-8) - 2*var(--qdr-spacing-5) - var(--qdr-typography-basic-h5-font-size)*var(--qdr-typography-basic-h5-line-height) - 2*var(--qdr-spacing-6) - var(--qdr-typography-basic-button2-font-size)*var(--qdr-typography-basic-button2-line-height))}.qdr-modal__side-body{display:flex;flex-direction:column;width:280px;border-right:1px solid var(--qdr-divider);align-self:stretch}.qdr-modal__main,.qdr-modal__side{flex:1;padding:var(--qdr-spacing-9);background-color:var(--qdr-surface);box-sizing:border-box;align-self:stretch}.qdr-modal__main{overflow-y:auto}.qdr-modal__footer{display:flex;align-items:center;justify-content:space-between;padding:var(--qdr-spacing-6) var(--qdr-spacing-9);background-color:var(--qdr-surface);border-top:1px solid var(--qdr-divider)}.qdr-modal__footer__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--qdr-spacing-4)}.qdr-confirm-modal__container{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-confirm-modal__icon{display:flex;align-items:center;justify-content:center;color:var(--qdr-warning)}.qdr-confirm-modal__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-confirm-modal__title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h4-font-size);line-height:var(--qdr-typography-basic-h4-line-height);letter-spacing:var(--qdr-typography-basic-h4-letter-spacing);font-weight:var(--qdr-typography-basic-h4-font-weight)}.qdr-confirm-modal__content{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight)}.qdr-confirm-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--qdr-spacing-4);margin-top:var(--qdr-spacing-9)}

package/components/package.json

@@ -4,25 +4,7 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "quadratsConfig": {
-    "deps": [
-      "utils",
-      "configs"
-    ],
-    "styles": {
-      "BaseField/baseField": "baseField",
-      "Progress/progress": "progress",
-      "Tooltip/tooltip": "tooltip",
-      "Button/button": "button",
-      "Input/input": "input",
-      "Textarea/textarea": "textarea",
-      "Hint/hint": "hint",
-      "Modal/modal": "modal",
-      "Message/message": "message",
-      "SegmentedControl/segmentedControl": "segmentedControl",
-      "ImageUploader/imageUploader": "imageUploader",
-      "Toggle/toggle": "toggle",
-      "components": "components"
-    }
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/components/progress.css

@@ -0,0 +1 @@
+.qdr-progress{display:flex;justify-content:center;align-items:center;position:absolute;inset:0;background-color:var(--qdr-overlay-light);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard);will-change:background-color;z-index:1}.qdr-progress__wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);padding:var(--qdr-spacing-2) var(--qdr-spacing-3);background-color:var(--qdr-overlay-dark);border-radius:var(--qdr-radius-3)}.qdr-progress__spinner-wrapper{display:flex;align-items:center;justify-content:center;position:relative;transform:rotate(-90deg)}.qdr-progress__backdrop{stroke:var(--qdr-action-disabled)}.qdr-progress__track{stroke:var(--qdr-on-primary)}.qdr-progress__percentage{margin:0;color:var(--qdr-on-primary)}

package/components/segmentedControl.css

@@ -0,0 +1 @@
+.qdr-segmented-control{display:flex;align-items:center;justify-content:flex-start;border:1px solid var(--qdr-primary)}.qdr-segmented-control--disabled{border-color:var(--qdr-action-disabled)}.qdr-segmented-control__button{display:flex;align-items:center;justify-content:center;border:none;background-color:rgba(0,0,0,0);cursor:pointer;transition:all var(--qdr-duration-short) var(--qdr-easing-standard);padding:var(--qdr-spacing-1) var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button2-font-size);line-height:var(--qdr-typography-basic-button2-line-height);letter-spacing:var(--qdr-typography-basic-button2-letter-spacing);font-weight:var(--qdr-typography-basic-button2-font-weight);color:var(--qdr-primary);border-left:1px solid var(--qdr-primary)}.qdr-segmented-control__button:first-child{border-left:none}.qdr-segmented-control__button:hover{color:var(--qdr-on-primary);background-color:var(--qdr-primary-light);border-color:var(--qdr-primary)}.qdr-segmented-control__button:active{color:var(--qdr-on-primary);background-color:var(--qdr-primary-dark);border-color:var(--qdr-primary)}.qdr-segmented-control__button:disabled{color:var(--qdr-text-disabled);background-color:rgba(0,0,0,0);border-color:var(--qdr-action-disabled);cursor:not-allowed}.qdr-segmented-control__button--active{color:var(--qdr-on-primary);background-color:var(--qdr-primary);border-color:var(--qdr-primary)}.qdr-segmented-control__button--active:disabled{color:var(--qdr-text-disabled);background-color:var(--qdr-action-disabled-bg);border-color:var(--qdr-action-disabled);cursor:not-allowed}

package/components/textarea.css

@@ -0,0 +1 @@
+.qdr-textarea{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2);align-self:stretch;position:relative}.qdr-textarea__textarea{background-color:var(--qdr-surface);font-family:unset;border:1px solid var(--qdr-border);outline:none;padding:var(--qdr-spacing-2) var(--qdr-spacing-13) var(--qdr-spacing-2) var(--qdr-spacing-6);margin:0;align-self:stretch;resize:none;color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight);transition:border var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-textarea__textarea:hover,.qdr-textarea__textarea:focus{border-color:var(--qdr-primary)}.qdr-textarea__textarea::placeholder{color:var(--qdr-text-secondary)}.qdr-textarea__textarea--error{border-color:var(--qdr-error)}.qdr-textarea__textarea--error:hover,.qdr-textarea__textarea--error:focus{border-color:var(--qdr-error)}.qdr-textarea__textarea:disabled{border-color:var(--qdr-border);background-color:var(--qdr-action-disabled-bg);color:var(--qdr-text-disabled)}.qdr-textarea__textarea:disabled::placeholder{color:var(--qdr-text-disabled)}.qdr-textarea__hint-wrapper{display:flex;align-items:flex-start;justify-content:space-between;align-self:stretch}.qdr-textarea__hint{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-textarea__counter{position:absolute;right:0;bottom:calc(-1*(var(--qdr-typography-basic-caption-font-size)*var(--qdr-typography-basic-caption-line-height) + var(--qdr-spacing-2)));color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-textarea__counter--have-hint{bottom:0}.qdr-textarea__counter--limited{color:var(--qdr-primary)}.qdr-textarea__counter--error{color:var(--qdr-error)}.qdr-textarea__counter--disabled{color:var(--qdr-text-disabled)}

package/components/toggle.css

@@ -0,0 +1 @@
+.qdr-toggle{display:inline-block;position:relative;width:48px;height:24px;background-color:var(--qdr-text-disabled);border-radius:999px;transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard);will-change:background-color;box-sizing:border-box}.qdr-toggle__input{width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.qdr-toggle__control{position:absolute;content:"";top:2px;left:2px;width:20px;height:20px;border-radius:50%;background-color:var(--qdr-on-primary);transition:left var(--qdr-duration-short) var(--qdr-easing-standard);will-change:left}.qdr-toggle--checked{background-color:var(--qdr-primary)}.qdr-toggle--checked.qdr-toggle--disabled{background-color:var(--qdr-primary-light);cursor:not-allowed}.qdr-toggle--checked .qdr-toggle__control{left:calc(100% - 22px)}.qdr-toggle--disabled{background-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-toggle--disabled .qdr-toggle__input{cursor:default;pointer-events:none}

package/components/tooltip.css

@@ -0,0 +1 @@
+.qdr-tooltip__mask{position:absolute;width:100%;top:0;left:0;z-index:20}.qdr-tooltip__popup{position:absolute;max-width:250px;overflow:hidden;overflow-wrap:break-word;box-sizing:border-box}.qdr-tooltip__popup--top{padding-bottom:10px}.qdr-tooltip__popup--right{padding-left:10px}.qdr-tooltip__popup--bottom{padding-top:10px}.qdr-tooltip__popup--left{padding-right:10px}.qdr-tooltip__content{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);color:var(--qdr-text-primary);border-radius:4px;padding:16px;font-size:13px;white-space:pre-wrap}.qdr-tooltip__arrow{position:absolute;content:"";width:10px;height:10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-tooltip__arrow--top{top:calc(100% - 10px);left:50%;border-top:none;border-left:none}.qdr-tooltip__arrow--bottom{left:50%;top:10px;border-bottom:none;border-right:none}.qdr-tooltip__arrow--right{left:10px;top:50%;border-top:none;border-right:none}.qdr-tooltip__arrow--left{left:calc(100% - 10px);top:50%;border-bottom:none;border-left:none}.qdr-tooltip__arrow--top-left,.qdr-tooltip__arrow--bottom-left{left:20px}.qdr-tooltip__arrow--top-right,.qdr-tooltip__arrow--bottom-right{left:calc(100% - 20px)}.qdr-tooltip__fade--enter{opacity:.01}.qdr-tooltip__fade--enter-active{opacity:1;transition:all 200ms ease-out}.qdr-tooltip__fade--exit{opacity:1}.qdr-tooltip__fade--exit-active{opacity:0;transition:all 200ms ease-in}

package/configs/ConfigsProvider.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '@quadrats/theme';
+import { LocaleDefinition } from '@quadrats/locales';
+import { ThemeContextValue } from './theme';
+export interface ConfigsProviderRenderProps {
+    theme: ThemeContextValue;
+    locale: LocaleDefinition;
+}
+export interface ConfigsProviderProps {
+    theme?: Theme;
+    locale?: LocaleDefinition;
+    /**
+     * Can pass any react elements or a render props which provide the resolved result.
+     */
+    children: ReactNode | ((props: ConfigsProviderRenderProps) => ReactNode);
+}
+declare function ConfigsProvider({ theme, locale, children }: ConfigsProviderProps): React.JSX.Element;
+export default ConfigsProvider;

package/configs/ConfigsProvider.js

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { enUS } from '@quadrats/locales';
+import { LocaleContext } from './locale.js';
+import { resolveThemeToProps, ThemeContext } from './theme.js';
+
+function ConfigsProvider({ theme, locale = enUS, children }) {
+    const themeContext = useMemo(() => ({
+        props: theme ? resolveThemeToProps(theme) : {},
+        theme,
+    }), [theme]);
+    return (React.createElement(ThemeContext.Provider, { value: themeContext },
+        React.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
+}
+
+export { ConfigsProvider as default };

package/configs/index.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+var locales = require('@quadrats/locales');
+var utils = require('@quadrats/utils');
+
+const LocaleContext = React.createContext(locales.enUS);
+function useLocale() {
+    return React.useContext(LocaleContext);
+}
+
+const ThemeContext = React.createContext({
+    props: {},
+});
+/**
+ * Add prefix to theme name.
+ */
+function addThemeNamePrefix(theme) {
+    return `qdr-theme-${theme || 'qdr'}`;
+}
+function resolveThemeObjectToStyle(theme) {
+    const cssProps = {};
+    for (const name in theme) {
+        cssProps[`--qdr-${utils.convertCamelToKebab(name)}`] = theme[name];
+    }
+    return cssProps;
+}
+function resolveThemeToProps(theme) {
+    const props = {};
+    if (typeof theme === 'string') {
+        props.className = addThemeNamePrefix(theme);
+    }
+    else {
+        props.style = resolveThemeObjectToStyle(theme);
+    }
+    return props;
+}
+function useTheme() {
+    return React.useContext(ThemeContext);
+}
+
+function ConfigsProvider({ theme, locale = locales.enUS, children }) {
+    const themeContext = React.useMemo(() => ({
+        props: theme ? resolveThemeToProps(theme) : {},
+        theme,
+    }), [theme]);
+    return (React.createElement(ThemeContext.Provider, { value: themeContext },
+        React.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
+}
+
+exports.ConfigsProvider = ConfigsProvider;
+exports.LocaleContext = LocaleContext;
+exports.ThemeContext = ThemeContext;
+exports.addThemeNamePrefix = addThemeNamePrefix;
+exports.resolveThemeObjectToStyle = resolveThemeObjectToStyle;
+exports.resolveThemeToProps = resolveThemeToProps;
+exports.useLocale = useLocale;
+exports.useTheme = useTheme;

package/configs/index.js

@@ -0,0 +1,3 @@
+export { LocaleContext, useLocale } from './locale.js';
+export { ThemeContext, addThemeNamePrefix, resolveThemeObjectToStyle, resolveThemeToProps, useTheme } from './theme.js';
+export { default as ConfigsProvider } from './ConfigsProvider.js';

package/configs/locale.d.ts

@@ -0,0 +1,3 @@
+import { LocaleDefinition } from '@quadrats/locales';
+export declare const LocaleContext: import("react").Context<LocaleDefinition>;
+export declare function useLocale(): LocaleDefinition;

package/configs/locale.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+import { enUS } from '@quadrats/locales';
+
+const LocaleContext = createContext(enUS);
+function useLocale() {
+    return useContext(LocaleContext);
+}
+
+export { LocaleContext, useLocale };

package/configs/package.json

@@ -1,4 +1,7 @@
 {
   "name": "@quadrats/react/configs",
-  "sideEffects": false
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/configs/theme.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { Theme, ThemeObject } from '@quadrats/theme';
+export interface ThemeProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export interface ThemeContextValue {
+    props: ThemeProps;
+    theme?: Theme;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextValue>;
+/**
+ * Add prefix to theme name.
+ */
+export declare function addThemeNamePrefix(theme?: string): string;
+export declare function resolveThemeObjectToStyle(theme: ThemeObject): CSSProperties;
+export declare function resolveThemeToProps(theme: Theme): ThemeProps;
+export declare function useTheme(): ThemeContextValue;

package/configs/theme.js

@@ -0,0 +1,34 @@
+import { createContext, useContext } from 'react';
+import { convertCamelToKebab } from '@quadrats/utils';
+
+const ThemeContext = createContext({
+    props: {},
+});
+/**
+ * Add prefix to theme name.
+ */
+function addThemeNamePrefix(theme) {
+    return `qdr-theme-${theme || 'qdr'}`;
+}
+function resolveThemeObjectToStyle(theme) {
+    const cssProps = {};
+    for (const name in theme) {
+        cssProps[`--qdr-${convertCamelToKebab(name)}`] = theme[name];
+    }
+    return cssProps;
+}
+function resolveThemeToProps(theme) {
+    const props = {};
+    if (typeof theme === 'string') {
+        props.className = addThemeNamePrefix(theme);
+    }
+    else {
+        props.style = resolveThemeObjectToStyle(theme);
+    }
+    return props;
+}
+function useTheme() {
+    return useContext(ThemeContext);
+}
+
+export { ThemeContext, addThemeNamePrefix, resolveThemeObjectToStyle, resolveThemeToProps, useTheme };

package/core/components/DefaultElement.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderElementProps } from '../typings/renderer';
+declare const DefaultElement: ({ attributes, children }: RenderElementProps) => React.JSX.Element;
+export default DefaultElement;

package/core/components/DefaultElement.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DefaultElement = ({ attributes, children }) => React.createElement("div", Object.assign({}, attributes), children);
+
+export { DefaultElement as default };

package/core/components/DefaultLeaf.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderLeafProps } from '../typings/renderer';
+declare const DefaultLeaf: ({ attributes, children }: RenderLeafProps) => React.JSX.Element;
+export default DefaultLeaf;

package/core/components/DefaultLeaf.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DefaultLeaf = ({ attributes, children }) => React.createElement("span", Object.assign({}, attributes), children);
+
+export { DefaultLeaf as default };

package/core/components/Editable.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'react';
+import { EditableProps as SlateEditableProps } from 'slate-react/dist/components/editable';
+import { RenderElementProps, RenderLeafProps } from '../typings/renderer';
+export type EditableProps = Omit<SlateEditableProps, 'renderLeaf' | 'renderElement'> & {
+    renderLeaf?: (props: RenderLeafProps) => JSX.Element;
+    renderElement?: (props: RenderElementProps) => JSX.Element;
+};
+declare function Editable(props: EditableProps): JSX.Element;
+export default Editable;

package/core/components/Editable.js

@@ -0,0 +1,71 @@
+import { __rest } from 'tslib';
+import React, { useState, useCallback } from 'react';
+import { useSlate, Editable as Editable$1 } from 'slate-react';
+import { Element } from 'slate';
+import clsx from 'clsx';
+import { isAncestorEmpty, Editor } from '@quadrats/core';
+import { useLocale, useTheme } from '@quadrats/react/configs';
+import DefaultLeaf from './DefaultLeaf.js';
+import { CompositionProvider } from '../contexts/composition/CompositionProvider.js';
+import { PLACEHOLDER_KEY } from '../constants.js';
+
+function Editable(props) {
+    const locale = useLocale();
+    const { className, decorate: decorateProp, onCompositionEnd: onCompositionEndProp, onCompositionStart: onCompositionStartProp, placeholder = locale.editor.placeholder, renderLeaf: renderLeafProp, style } = props, slateEditableProps = __rest(props, ["className", "decorate", "onCompositionEnd", "onCompositionStart", "placeholder", "renderLeaf", "style"]);
+    const { props: themeProps } = useTheme();
+    const editor = useSlate();
+    const isEditorEmpty = isAncestorEmpty(editor);
+    const [placeholderShowable, setPlaceholderShowable] = useState(isEditorEmpty);
+    const [compositionType, setCompositionType] = useState('');
+    const [compositionPath, setCompositionPath] = useState([]);
+    const decorate = useCallback((entry) => {
+        const result = decorateProp ? decorateProp(entry) : [];
+        const [node] = entry;
+        if (isEditorEmpty && Editor.isEditor(node)) {
+            const start = Editor.start(node, []);
+            result.push({
+                [PLACEHOLDER_KEY]: true,
+                anchor: start,
+                focus: start,
+            });
+        }
+        return result;
+    }, [decorateProp, isEditorEmpty]);
+    const onCompositionEnd = useCallback((event) => {
+        setCompositionType('');
+        setCompositionPath([]);
+        onCompositionEndProp === null || onCompositionEndProp === void 0 ? void 0 : onCompositionEndProp(event);
+        setPlaceholderShowable(true);
+    }, [onCompositionEndProp]);
+    const onCompositionStart = useCallback((event) => {
+        if (editor.selection) {
+            const [, path] = Editor.node(editor, editor.selection);
+            const match = Editor.above(editor, {
+                at: path,
+                match: (n) => Element.isElement(n),
+                mode: 'lowest',
+            });
+            if (match) {
+                setCompositionPath(match[1]);
+                setCompositionType(match[0].type);
+            }
+        }
+        onCompositionStartProp === null || onCompositionStartProp === void 0 ? void 0 : onCompositionStartProp(event);
+        if (isEditorEmpty) {
+            setPlaceholderShowable(false);
+        }
+    }, [editor, onCompositionStartProp, isEditorEmpty]);
+    const renderLeaf = useCallback((props) => {
+        const children = renderLeafProp ? renderLeafProp(props) : React.createElement(DefaultLeaf, Object.assign({}, props));
+        if (placeholderShowable && props.leaf[PLACEHOLDER_KEY]) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "qdr-editable__placeholder", contentEditable: false }, placeholder),
+                children));
+        }
+        return children;
+    }, [renderLeafProp, placeholder, placeholderShowable]);
+    return (React.createElement(CompositionProvider, { compositionType: compositionType, compositionPath: compositionPath },
+        React.createElement(Editable$1, Object.assign({}, slateEditableProps, { className: clsx('qdr-editable', themeProps.className, className), decorate: decorate, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, renderLeaf: renderLeaf, style: Object.assign(Object.assign({}, themeProps.style), style) }))));
+}
+
+export { Editable as default };

package/core/components/Quadrats.d.ts

@@ -0,0 +1,16 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Slate } from 'slate-react';
+import { ConfigsProviderProps } from '@quadrats/react/configs';
+import { ConfirmModalConfig } from '../contexts/modal/modal';
+import { Descendant } from '..';
+export type QuadratsProps = Pick<Parameters<typeof Slate>[0], 'children' | 'editor'> & Omit<ConfigsProviderProps, 'children'> & {
+    onChange: (value: Descendant[]) => void;
+    value: Descendant[];
+    needConfirmModal?: ConfirmModalConfig | null;
+    setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
+};
+/**
+ * Provide configs of quadrats and control the value.
+ */
+declare function Quadrats(props: QuadratsProps): React.JSX.Element;
+export default Quadrats;

package/core/components/Quadrats.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Slate } from 'slate-react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { ConfigsProvider } from '@quadrats/react/configs';
+import { ModalProvider } from '../contexts/modal/ModalProvider.js';
+import { MessageProvider } from '../contexts/message/MessageProvider.js';
+
+/**
+ * Provide configs of quadrats and control the value.
+ */
+function Quadrats(props) {
+    const { children, editor, locale, onChange, theme, value, needConfirmModal, setNeedConfirmModal } = props;
+    return (React.createElement(ConfigsProvider, { theme: theme, locale: locale },
+        React.createElement(DndProvider, { backend: HTML5Backend },
+            React.createElement(MessageProvider, null,
+                React.createElement(ModalProvider, { needConfirmModal: needConfirmModal, setNeedConfirmModal: setNeedConfirmModal },
+                    React.createElement(Slate, { editor: editor, onChange: onChange, initialValue: value }, children))))));
+}
+
+export { Quadrats as default };

package/core/composeHandlers.d.ts

@@ -0,0 +1,8 @@
+import { QuadratsReactEditor } from '..';
+import { EventHandlerName, EventHandlers, Handler } from './typings/handler';
+/**
+ * To compose sequential `event handlers` to single for each event types.
+ */
+export declare function composeHandlers<H extends EventHandlerName>(handlersList: {
+    [HH in H]?: Handler<HH>;
+}[]): (editor: QuadratsReactEditor) => EventHandlers;

package/core/composeHandlers.js

@@ -0,0 +1,33 @@
+function createEventHandler(editor, handlers) {
+    const [handler, ...restHandlers] = handlers;
+    return event => handler(event, editor, () => {
+        const next = restHandlers.length > 0 ? createEventHandler(editor, restHandlers) : () => { };
+        next(event);
+    });
+}
+/**
+ * To compose sequential `event handlers` to single for each event types.
+ */
+function composeHandlers(handlersList) {
+    const handlersListRecord = handlersList.reduce((acc, handlers) => {
+        Object.entries(handlers).forEach(([key, value]) => {
+            const name = key;
+            const handler = value;
+            const origin = acc[name];
+            if (origin) {
+                origin.push(handler);
+            }
+            else {
+                acc[name] = [handler];
+            }
+        });
+        return acc;
+    }, {});
+    const handlersEntries = Object.entries(handlersListRecord);
+    return editor => handlersEntries.reduce((acc, [name, handlers]) => {
+        acc[name] = createEventHandler(editor, handlers);
+        return acc;
+    }, {});
+}
+
+export { composeHandlers };

package/core/composeRenderElements.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { RenderElementProps } from './typings/renderer';
+/**
+ * To compose sequential `renderElement`s to single.
+ */
+export declare function composeRenderElements(renderElements: ((props: RenderElementProps) => JSX.Element | null | undefined)[]): (props: RenderElementProps) => JSX.Element;

package/core/composeRenderElements.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { composeRenderElementsBase } from '@quadrats/react/_internal';
+import DefaultElement from './components/DefaultElement.js';
+
+/**
+ * To compose sequential `renderElement`s to single.
+ */
+function composeRenderElements(renderElements) {
+    return composeRenderElementsBase(props => React.createElement(DefaultElement, Object.assign({}, props)), renderElements);
+}
+
+export { composeRenderElements };

package/core/composeRenderLeafs.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { RenderLeafProps } from './typings/renderer';
+/**
+ * To compose sequential `renderLeaf`s or `renderMark`s to single.
+ */
+export declare function composeRenderLeafs(renderLeafs: ((props: RenderLeafProps) => JSX.Element)[]): (props: RenderLeafProps) => JSX.Element;

package/core/composeRenderLeafs.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { composeRenderLeafsBase } from '@quadrats/react/_internal';
+import DefaultLeaf from './components/DefaultLeaf.js';
+
+/**
+ * To compose sequential `renderLeaf`s or `renderMark`s to single.
+ */
+function composeRenderLeafs(renderLeafs) {
+    return composeRenderLeafsBase(props => React.createElement(DefaultLeaf, Object.assign({}, props)), renderLeafs);
+}
+
+export { composeRenderLeafs };

package/core/constants.d.ts

@@ -0,0 +1 @@
+export declare const PLACEHOLDER_KEY = "__quadrats-placeholder__";

package/core/constants.js

@@ -0,0 +1,3 @@
+const PLACEHOLDER_KEY = '__quadrats-placeholder__';
+
+export { PLACEHOLDER_KEY };

package/core/contexts/composition/CompositionProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { Path } from '@quadrats/core';
+export interface CompositionProviderProps {
+    compositionType: string;
+    compositionPath: Path;
+    children: ReactNode;
+}
+export declare const CompositionProvider: ({ compositionType, compositionPath, children }: CompositionProviderProps) => React.JSX.Element;

package/core/contexts/composition/CompositionProvider.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CompositionContext } from './composition.js';
+
+const CompositionProvider = ({ compositionType, compositionPath, children }) => {
+    return (React.createElement(CompositionContext.Provider, { value: { compositionType, compositionPath } }, children));
+};
+
+export { CompositionProvider };

package/core/contexts/composition/composition.d.ts

@@ -0,0 +1,7 @@
+import { Path } from '@quadrats/core';
+export interface CompositionContextValue {
+    compositionType: string;
+    compositionPath: Path;
+}
+export declare const CompositionContext: import("react").Context<CompositionContextValue>;
+export declare function useComposition(): CompositionContextValue;

package/core/contexts/composition/composition.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const CompositionContext = createContext({
+    compositionType: '',
+    compositionPath: [],
+});
+function useComposition() {
+    return useContext(CompositionContext);
+}
+
+export { CompositionContext, useComposition };

package/core/contexts/message/MessageProvider.d.ts

@@ -0,0 +1,5 @@
+import React, { ReactNode } from 'react';
+export interface MessageProviderProps {
+    children: ReactNode;
+}
+export declare const MessageProvider: ({ children }: MessageProviderProps) => React.JSX.Element;

package/core/contexts/message/MessageProvider.js

@@ -0,0 +1,35 @@
+import React, { useContext, useCallback } from 'react';
+import { Message } from '@quadrats/react/components';
+import { ThemeContext } from '@quadrats/react/configs';
+import { MessageContext } from './message.js';
+
+const MessageProvider = ({ children }) => {
+    const { props: themeProps } = useContext(ThemeContext);
+    const message = useCallback(({ type, content, duration }) => {
+        switch (type) {
+            case 'info': {
+                Message.info(content, themeProps, { duration });
+                break;
+            }
+            case 'error': {
+                Message.error(content, themeProps, { duration });
+                break;
+            }
+            case 'warning': {
+                Message.warning(content, themeProps, { duration });
+                break;
+            }
+            case 'success': {
+                Message.success(content, themeProps, { duration });
+                break;
+            }
+            default: {
+                Message.info(content, themeProps, { duration });
+                break;
+            }
+        }
+    }, [themeProps]);
+    return React.createElement(MessageContext.Provider, { value: { message } }, children);
+};
+
+export { MessageProvider };