@vinyasa/form 1.0.22

package/dist/cjs/rich-text-editor.cjs

@@ -0,0 +1,570 @@
+"use strict";
+var __webpack_modules__ = {
+    400 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        function toPrimitive(t, r) {
+            if ("object" != typeof t || !t) return t;
+            var e = t[Symbol.toPrimitive];
+            if (void 0 !== e) {
+                var i = e.call(t, r || "default");
+                if ("object" != typeof i) return i;
+                throw new TypeError("@@toPrimitive must return a primitive value.");
+            }
+            return ("string" === r ? String : Number)(t);
+        }
+        function toPropertyKey(t) {
+            var i = toPrimitive(t, "string");
+            return "symbol" == typeof i ? i : String(i);
+        }
+        function _defineProperty(obj, key, value) {
+            key = toPropertyKey(key);
+            if (key in obj) Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+            else obj[key] = value;
+            return obj;
+        }
+        function ownKeys(e, r) {
+            var t = Object.keys(e);
+            if (Object.getOwnPropertySymbols) {
+                var o = Object.getOwnPropertySymbols(e);
+                r && (o = o.filter(function(r) {
+                    return Object.getOwnPropertyDescriptor(e, r).enumerable;
+                })), t.push.apply(t, o);
+            }
+            return t;
+        }
+        function _objectSpread2(e) {
+            for(var r = 1; r < arguments.length; r++){
+                var t = null != arguments[r] ? arguments[r] : {};
+                r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+                    _defineProperty(e, r, t[r]);
+                }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+                });
+            }
+            return e;
+        }
+        function mapValues(input, fn) {
+            var result = {};
+            for(var _key in input)result[_key] = fn(input[_key], _key);
+            return result;
+        }
+        var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
+            for (var key of Object.keys(compoundCheck)){
+                var _selections$key;
+                if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
+            }
+            return true;
+        };
+        var createRuntimeFn = (config)=>{
+            var runtimeFn = (options)=>{
+                var className = config.defaultClassName;
+                var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+                for(var variantName in selections){
+                    var _selections$variantNa;
+                    var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
+                    if (null != variantSelection) {
+                        var selection = variantSelection;
+                        if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
+                        var selectionClassName = config.variantClassNames[variantName][selection];
+                        if (selectionClassName) className += ' ' + selectionClassName;
+                    }
+                }
+                for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
+                return className;
+            };
+            runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
+            runtimeFn.classNames = {
+                get base () {
+                    return config.defaultClassName.split(' ')[0];
+                },
+                get variants () {
+                    return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
+                }
+            };
+            return runtimeFn;
+        };
+        __webpack_require__.d(__webpack_exports__, {
+            c: ()=>createRuntimeFn
+        });
+    },
+    891 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            ij: ()=>descriptionText,
+            kc: ()=>errorText,
+            Pf: ()=>label,
+            Zy: ()=>requiredMark
+        });
+        var createRuntimeFn_62c9670f_esm = __webpack_require__(400);
+        var descriptionText = 'sbqkrxd';
+        var errorText = 'sbqkrxe';
+        (0, createRuntimeFn_62c9670f_esm.c)({
+            defaultClassName: 'sbqkrx0',
+            variantClassNames: {
+                size: {
+                    sm: 'sbqkrx1',
+                    md: 'sbqkrx2',
+                    lg: 'sbqkrx3'
+                },
+                invalid: {
+                    true: 'sbqkrx4'
+                }
+            },
+            defaultVariants: {
+                size: 'md'
+            },
+            compoundVariants: []
+        });
+        var label = 'sbqkrxb';
+        var requiredMark = 'sbqkrxc';
+    },
+    570 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            A: ()=>toggle_button_ToggleButton
+        });
+        var jsx_runtime_ = __webpack_require__(732);
+        const react_toggle_namespaceObject = require("@radix-ui/react-toggle");
+        var button_ = __webpack_require__(60);
+        var button_default = /*#__PURE__*/ __webpack_require__.n(button_);
+        var external_react_ = __webpack_require__(15);
+        function _define_property(obj, key, value) {
+            if (key in obj) Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+            else obj[key] = value;
+            return obj;
+        }
+        function _object_spread(target) {
+            for(var i = 1; i < arguments.length; i++){
+                var source = null != arguments[i] ? arguments[i] : {};
+                var ownKeys = Object.keys(source);
+                if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                    return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                }));
+                ownKeys.forEach(function(key) {
+                    _define_property(target, key, source[key]);
+                });
+            }
+            return target;
+        }
+        function _object_without_properties(source, excluded) {
+            if (null == source) return {};
+            var target = {}, sourceKeys, key, i;
+            if ("u" > typeof Reflect && Reflect.ownKeys) {
+                sourceKeys = Reflect.ownKeys(Object(source));
+                for(i = 0; i < sourceKeys.length; i++){
+                    key = sourceKeys[i];
+                    if (!(excluded.indexOf(key) >= 0)) {
+                        if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                    }
+                }
+                return target;
+            }
+            target = _object_without_properties_loose(source, excluded);
+            if (Object.getOwnPropertySymbols) {
+                sourceKeys = Object.getOwnPropertySymbols(source);
+                for(i = 0; i < sourceKeys.length; i++){
+                    key = sourceKeys[i];
+                    if (!(excluded.indexOf(key) >= 0)) {
+                        if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                    }
+                }
+            }
+            return target;
+        }
+        function _object_without_properties_loose(source, excluded) {
+            if (null == source) return {};
+            var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+            for(i = 0; i < sourceKeys.length; i++){
+                key = sourceKeys[i];
+                if (!(excluded.indexOf(key) >= 0)) {
+                    if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                }
+            }
+            return target;
+        }
+        const ToggleButton = /*#__PURE__*/ (0, external_react_.forwardRef)((_0, _1)=>{
+            let _ref = [
+                _0,
+                _1
+            ], [_ref1, ..._rest] = _ref, { pressed, defaultPressed = false, onPressedChange, pressedVariant = 'primary', unpressedVariant = 'outline' } = _ref1, buttonProps = _object_without_properties(_ref1, [
+                "pressed",
+                "defaultPressed",
+                "onPressedChange",
+                "pressedVariant",
+                "unpressedVariant"
+            ]), [ref] = _rest;
+            const [uncontrolledPressed, setUncontrolledPressed] = (0, external_react_.useState)(defaultPressed);
+            const isControlled = void 0 !== pressed;
+            const currentPressed = isControlled ? pressed : uncontrolledPressed;
+            const handlePressedChange = (next)=>{
+                if (!isControlled) setUncontrolledPressed(next);
+                null == onPressedChange || onPressedChange(next);
+            };
+            return /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_toggle_namespaceObject.Root, {
+                pressed: pressed,
+                defaultPressed: defaultPressed,
+                onPressedChange: handlePressedChange,
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(button_default(), _object_spread({
+                    ref: ref,
+                    variant: currentPressed ? pressedVariant : unpressedVariant
+                }, buttonProps))
+            });
+        });
+        ToggleButton.displayName = 'ToggleButton';
+        const toggle_button_ToggleButton = ToggleButton;
+    },
+    140 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        var react_jsx_runtime__rspack_import_0 = __webpack_require__(732);
+        var _field_css__rspack_import_1 = __webpack_require__(891);
+        const describedByIds = (id, { description, error })=>{
+            const ids = [];
+            if (description) ids.push(`${id}-description`);
+            if (error) ids.push(`${id}-error`);
+            return ids.length > 0 ? ids.join(' ') : void 0;
+        };
+        const FieldChrome = ({ id, label, description, error, required, children, disableLabelFor = false })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("div", {
+                children: [
+                    label ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("label", {
+                        htmlFor: disableLabelFor ? void 0 : id,
+                        id: `${id}-label`,
+                        className: _field_css__rspack_import_1.Pf,
+                        children: [
+                            label,
+                            required ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("span", {
+                                className: _field_css__rspack_import_1.Zy,
+                                "aria-hidden": "true",
+                                children: "*"
+                            }) : null
+                        ]
+                    }) : null,
+                    children,
+                    description ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("p", {
+                        id: `${id}-description`,
+                        className: _field_css__rspack_import_1.ij,
+                        children: description
+                    }) : null,
+                    error ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("p", {
+                        id: `${id}-error`,
+                        className: _field_css__rspack_import_1.kc,
+                        role: "alert",
+                        children: error
+                    }) : null
+                ]
+            });
+        const __rspack_default_export = FieldChrome;
+        __webpack_require__.d(__webpack_exports__, {}, {
+            A: __rspack_default_export,
+            z: describedByIds
+        });
+    },
+    60 (module) {
+        module.exports = require("@vinyasa/button");
+    },
+    586 (module) {
+        module.exports = require("@vinyasa/icons");
+    },
+    15 (module) {
+        module.exports = require("react");
+    },
+    732 (module) {
+        module.exports = require("react/jsx-runtime");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        default: ()=>rich_text_editor
+    });
+    var jsx_runtime_ = __webpack_require__(732);
+    const react_namespaceObject = require("@tiptap/react");
+    const starter_kit_namespaceObject = require("@tiptap/starter-kit");
+    var starter_kit_default = /*#__PURE__*/ __webpack_require__.n(starter_kit_namespaceObject);
+    var icons_ = __webpack_require__(586);
+    var external_react_ = __webpack_require__(15);
+    var field = __webpack_require__(140);
+    var ToggleButton = __webpack_require__(570);
+    var content = '_1lw5bep4';
+    var divider = '_1lw5bep3';
+    var toolbar = '_1lw5bep2';
+    var wrapper = '_1lw5bep0';
+    var wrapperInvalid = '_1lw5bep1';
+    function _define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    function _object_spread(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = null != arguments[i] ? arguments[i] : {};
+            var ownKeys = Object.keys(source);
+            if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+            ownKeys.forEach(function(key) {
+                _define_property(target, key, source[key]);
+            });
+        }
+        return target;
+    }
+    const selectToolbarState = (editor)=>{
+        if (!editor) return {
+            bold: false,
+            italic: false,
+            strike: false,
+            bulletList: false,
+            orderedList: false,
+            blockquote: false,
+            canUndo: false,
+            canRedo: false
+        };
+        return {
+            bold: editor.isActive('bold'),
+            italic: editor.isActive('italic'),
+            strike: editor.isActive('strike'),
+            bulletList: editor.isActive('bulletList'),
+            orderedList: editor.isActive('orderedList'),
+            blockquote: editor.isActive('blockquote'),
+            canUndo: editor.can().undo(),
+            canRedo: editor.can().redo()
+        };
+    };
+    const RichTextEditor = ({ value, defaultValue = '', onValueChange, label, description, error, required, disabled, id: idProp })=>{
+        const generatedId = (0, external_react_.useId)();
+        const id = null != idProp ? idProp : generatedId;
+        const describedBy = (0, field.z)(id, {
+            description,
+            error
+        });
+        const editor = (0, react_namespaceObject.useEditor)({
+            extensions: [
+                starter_kit_default()
+            ],
+            content: null != value ? value : defaultValue,
+            editable: !disabled,
+            immediatelyRender: false,
+            onUpdate: ({ editor: currentEditor })=>{
+                null == onValueChange || onValueChange(currentEditor.getHTML());
+            },
+            editorProps: {
+                attributes: _object_spread({
+                    id,
+                    class: content
+                }, describedBy ? {
+                    'aria-describedby': describedBy
+                } : {})
+            }
+        });
+        (0, external_react_.useEffect)(()=>{
+            if (void 0 === value || !editor || value === editor.getHTML()) return;
+            editor.commands.setContent(value, {
+                emitUpdate: false
+            });
+        }, [
+            value,
+            editor
+        ]);
+        (0, external_react_.useEffect)(()=>{
+            null == editor || editor.setEditable(!disabled);
+        }, [
+            disabled,
+            editor
+        ]);
+        const toolbarState = (0, react_namespaceObject.useEditorState)({
+            editor,
+            selector: ({ editor: snapshotEditor })=>selectToolbarState(snapshotEditor)
+        });
+        if (!editor || !toolbarState) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(field.A, {
+            id: id,
+            label: label,
+            description: description,
+            error: error,
+            required: required,
+            children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)("div", {
+                className: error ? `${wrapper} ${wrapperInvalid}` : wrapper,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_.jsxs)("div", {
+                        className: toolbar,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: toolbarState.bold,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().toggleBold().run();
+                                },
+                                disabled: disabled,
+                                "aria-label": "Bold",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.BoldIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: toolbarState.italic,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().toggleItalic().run();
+                                },
+                                disabled: disabled,
+                                "aria-label": "Italic",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.ItalicIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: toolbarState.strike,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().toggleStrike().run();
+                                },
+                                disabled: disabled,
+                                "aria-label": "Strikethrough",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.StrikethroughIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)("span", {
+                                className: divider,
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: toolbarState.bulletList,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().toggleBulletList().run();
+                                },
+                                disabled: disabled,
+                                "aria-label": "Bullet list",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.ListIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: toolbarState.orderedList,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().toggleOrderedList().run();
+                                },
+                                disabled: disabled,
+                                "aria-label": "Ordered list",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.ListOrderedIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: toolbarState.blockquote,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().toggleBlockquote().run();
+                                },
+                                disabled: disabled,
+                                "aria-label": "Blockquote",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.QuoteIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)("span", {
+                                className: divider,
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: false,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().undo().run();
+                                },
+                                disabled: null != disabled ? disabled : !toolbarState.canUndo,
+                                "aria-label": "Undo",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.UndoIcon, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_.jsx)(ToggleButton.A, {
+                                size: "sm",
+                                unpressedVariant: "ghost",
+                                pressedVariant: "secondary",
+                                pressed: false,
+                                onPressedChange: ()=>{
+                                    editor.chain().focus().redo().run();
+                                },
+                                disabled: null != disabled ? disabled : !toolbarState.canRedo,
+                                "aria-label": "Redo",
+                                children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.RedoIcon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_namespaceObject.EditorContent, {
+                        editor: editor
+                    })
+                ]
+            })
+        });
+    };
+    RichTextEditor.displayName = 'RichTextEditor';
+    const rich_text_editor_RichTextEditor = RichTextEditor;
+    const rich_text_editor = rich_text_editor_RichTextEditor;
+})();
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});