@ultraviolet/ui 3.16.0 → 3.18.0

package/dist/compositions/RichTextInput/Toolbar.js

@@ -0,0 +1,142 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../components/Stack/index.js";
+import { Button, init_Button } from "../../components/Button/index.js";
+import { init_helpers, isSelectionInNodeType } from "./helpers.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorEventCallback, useEditorState } from "@handlewithcare/react-prosemirror";
+import { BoldIcon, ItalicIcon, ListBulletIcon, ListNumberIcon, UnderlineIcon } from "@ultraviolet/icons";
+import { toggleMark } from "prosemirror-commands";
+import { liftListItem, wrapInList } from "prosemirror-schema-list";
+
+//#region src/compositions/RichTextInput/Toolbar.tsx
+var isMarkActive, Toolbar;
+var init_Toolbar = __esmMin(() => {
+	init_Button();
+	init_Stack();
+	init_helpers();
+	isMarkActive = (state, markType) => {
+		if (!markType) return false;
+		const { from, $from, to, empty } = state.selection;
+		if (empty) {
+			var _state$storedMarks;
+			const marks = (_state$storedMarks = state.storedMarks) !== null && _state$storedMarks !== void 0 ? _state$storedMarks : $from.marks();
+			return Boolean(markType.isInSet(marks));
+		}
+		return state.doc.rangeHasMark(from, to, markType);
+	};
+	Toolbar = ({ disabled, showList, showMarks, size }) => {
+		const editorState = useEditorState();
+		const runCommand = useEditorEventCallback((view, command) => {
+			command(view.state, view.dispatch);
+		});
+		const runCommandOnEnter = (event, command) => {
+			if (event.key !== "Enter") return;
+			event.preventDefault();
+			runCommand(command);
+		};
+		const strongMark = editorState.schema.marks["strong"];
+		const emMark = editorState.schema.marks["em"];
+		const underlineMark = editorState.schema.marks["underline"];
+		const bulletList = editorState.schema.nodes["bullet_list"];
+		const orderedList = editorState.schema.nodes["ordered_list"];
+		const listItem = editorState.schema.nodes["list_item"];
+		const isInBulletList = isSelectionInNodeType(editorState, bulletList);
+		const isInOrderedList = isSelectionInNodeType(editorState, orderedList);
+		const buttonSize = size === "small" ? "xsmall" : "small";
+		return /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			gap: 1,
+			role: "toolbar",
+			children: [showMarks ? /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: 1,
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						"aria-label": "Bold",
+						disabled,
+						size: buttonSize,
+						variant: isMarkActive(editorState, strongMark) ? "filled" : "ghost",
+						sentiment: "neutral",
+						onMouseDown: (event) => {
+							event.preventDefault();
+							if (strongMark) runCommand(toggleMark(strongMark));
+						},
+						onKeyDown: (event) => {
+							if (strongMark) runCommandOnEnter(event, toggleMark(strongMark));
+						},
+						children: /* @__PURE__ */ jsx(BoldIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						"aria-label": "Italic",
+						disabled,
+						size: buttonSize,
+						variant: isMarkActive(editorState, emMark) ? "filled" : "ghost",
+						sentiment: "neutral",
+						onMouseDown: (event) => {
+							event.preventDefault();
+							if (emMark) runCommand(toggleMark(emMark));
+						},
+						onKeyDown: (event) => {
+							if (emMark) runCommandOnEnter(event, toggleMark(emMark));
+						},
+						children: /* @__PURE__ */ jsx(ItalicIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						"aria-label": "Underline",
+						disabled,
+						size: buttonSize,
+						variant: isMarkActive(editorState, underlineMark) ? "filled" : "ghost",
+						sentiment: "neutral",
+						onMouseDown: (event) => {
+							event.preventDefault();
+							if (underlineMark) runCommand(toggleMark(underlineMark));
+						},
+						onKeyDown: (event) => {
+							if (underlineMark) runCommandOnEnter(event, toggleMark(underlineMark));
+						},
+						children: /* @__PURE__ */ jsx(UnderlineIcon, {})
+					})
+				]
+			}) : null, showList ? /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: 1,
+				children: [/* @__PURE__ */ jsx(Button, {
+					"aria-label": "Bullet List",
+					disabled: disabled || isInOrderedList,
+					size: buttonSize,
+					variant: isInBulletList ? "filled" : "ghost",
+					sentiment: "neutral",
+					onMouseDown: (event) => {
+						event.preventDefault();
+						runCommand(isInBulletList ? liftListItem(listItem) : wrapInList(bulletList));
+					},
+					onKeyDown: (event) => {
+						runCommandOnEnter(event, isInBulletList ? liftListItem(listItem) : wrapInList(bulletList));
+					},
+					children: /* @__PURE__ */ jsx(ListBulletIcon, {})
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Ordered List",
+					disabled: disabled || isInBulletList,
+					size: buttonSize,
+					variant: isInOrderedList ? "filled" : "ghost",
+					sentiment: "neutral",
+					onMouseDown: (event) => {
+						event.preventDefault();
+						runCommand(isInOrderedList ? liftListItem(listItem) : wrapInList(orderedList));
+					},
+					onKeyDown: (event) => {
+						runCommandOnEnter(event, isInOrderedList ? liftListItem(listItem) : wrapInList(orderedList));
+					},
+					children: /* @__PURE__ */ jsx(ListNumberIcon, {})
+				})]
+			}) : null]
+		});
+	};
+});
+
+//#endregion
+init_Toolbar();
+export { Toolbar, init_Toolbar };

package/dist/compositions/RichTextInput/editorCore.d.ts

@@ -0,0 +1,11 @@
+import { Schema } from 'prosemirror-model';
+import type { Node } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import type { Plugin } from 'prosemirror-state';
+export declare const editorSchema: Schema;
+export declare const listItemNode: import("prosemirror-model").NodeType;
+export declare const createPlugins: () => Plugin<any>[];
+export declare const createEditorState: (doc: Node) => EditorState;
+export declare const docFromHtml: (html: string | undefined, schema?: Schema) => Node;
+export declare const editorDocToHtml: (doc: Node, schema?: Schema) => string;
+//# sourceMappingURL=editorCore.d.ts.map

package/dist/compositions/RichTextInput/editorCore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorCore.d.ts","sourceRoot":"","sources":["../../../src/compositions/RichTextInput/editorCore.ts"],"names":[],"mappings":"AAGA,OAAO,EAA4B,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAG7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAK/C,eAAO,MAAM,YAAY,EAAE,MAYzB,CAAA;AAEF,eAAO,MAAM,YAAY,sCAAkC,CAAA;AAI3D,eAAO,MAAM,aAAa,qBAgCzB,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAS,IAAI,gBAKvC,CAAA;AAEJ,eAAO,MAAM,WAAW,SAAU,MAAM,GAAG,SAAS,WAAU,MAAM,KAAkB,IAerF,CAAA;AAED,eAAO,MAAM,eAAe,QAAS,IAAI,WAAU,MAAM,KAAkB,MAU1E,CAAA"}

package/dist/compositions/RichTextInput/editorCore.js

@@ -0,0 +1,64 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { createToggleListCommand, escapeHtml, init_helpers } from "./helpers.js";
+import { reactKeys } from "@handlewithcare/react-prosemirror";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
+import { keymap } from "prosemirror-keymap";
+import { DOMParser, DOMSerializer, Schema } from "prosemirror-model";
+import { schema } from "prosemirror-schema-basic";
+import { addListNodes, splitListItem } from "prosemirror-schema-list";
+import { EditorState } from "prosemirror-state";
+
+//#region src/compositions/RichTextInput/editorCore.ts
+var nodesWithLists, editorSchema, listItemNode, bulletListNode, orderedListNode, createPlugins, createEditorState, docFromHtml, editorDocToHtml;
+var init_editorCore = __esmMin(() => {
+	init_helpers();
+	nodesWithLists = addListNodes(schema.spec.nodes.remove("image"), "paragraph block*", "block");
+	editorSchema = new Schema({
+		nodes: nodesWithLists,
+		marks: schema.spec.marks.addToEnd("underline", {
+			parseDOM: [{ tag: "u" }, {
+				style: "text-decoration",
+				getAttrs: (value) => value === "underline" ? null : false
+			}],
+			toDOM: () => ["u", 0]
+		})
+	});
+	listItemNode = editorSchema.nodes["list_item"];
+	bulletListNode = editorSchema.nodes["bullet_list"];
+	orderedListNode = editorSchema.nodes["ordered_list"];
+	createPlugins = () => {
+		const plugins = [reactKeys()];
+		if (editorSchema.marks["strong"]) plugins.push(keymap({ "Mod-b": toggleMark(editorSchema.marks["strong"]) }));
+		if (editorSchema.marks["em"]) plugins.push(keymap({ "Mod-i": toggleMark(editorSchema.marks["em"]) }));
+		if (editorSchema.marks["underline"]) plugins.push(keymap({ "Mod-u": toggleMark(editorSchema.marks["underline"]) }));
+		if (bulletListNode) plugins.push(keymap({ "Mod-Shift-8": createToggleListCommand(listItemNode, bulletListNode) }));
+		if (orderedListNode) plugins.push(keymap({ "Mod-Shift-9": createToggleListCommand(listItemNode, orderedListNode) }));
+		if (listItemNode) plugins.push(keymap({ Enter: splitListItem(listItemNode) }));
+		plugins.push(keymap(baseKeymap));
+		return plugins;
+	};
+	createEditorState = (doc) => EditorState.create({
+		schema: editorSchema,
+		doc,
+		plugins: createPlugins()
+	});
+	docFromHtml = (html, schema = editorSchema) => {
+		const normalizedHtml = html !== null && html !== void 0 ? html : "";
+		if (normalizedHtml.trim() === "") return schema.nodes["doc"].createAndFill();
+		if (typeof document === "undefined") return schema.nodes["doc"].createAndFill();
+		const container = document.createElement("div");
+		container.innerHTML = normalizedHtml.includes("<") ? normalizedHtml : `<p>${escapeHtml(normalizedHtml)}</p>`;
+		return DOMParser.fromSchema(schema).parse(container);
+	};
+	editorDocToHtml = (doc, schema = editorSchema) => {
+		if (typeof document === "undefined") return "";
+		const serializer = DOMSerializer.fromSchema(schema);
+		const wrap = document.createElement("div");
+		wrap.appendChild(serializer.serializeFragment(doc.content));
+		return wrap.innerHTML;
+	};
+});
+
+//#endregion
+init_editorCore();
+export { createEditorState, docFromHtml, editorDocToHtml, editorSchema, init_editorCore };

package/dist/compositions/RichTextInput/helpers.d.ts

@@ -0,0 +1,6 @@
+import type { NodeType } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
+export declare const escapeHtml: (text: string) => string;
+export declare const isSelectionInNodeType: (state: EditorState, nodeType: NodeType) => boolean;
+export declare const createToggleListCommand: (listItemType: NodeType, listType: NodeType) => (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/compositions/RichTextInput/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/compositions/RichTextInput/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEjE,eAAO,MAAM,UAAU,SAAU,MAAM,WAMT,CAAA;AAE9B,eAAO,MAAM,qBAAqB,UAAW,WAAW,YAAY,QAAQ,YAU3E,CAAA;AAED,eAAO,MAAM,uBAAuB,iBACnB,QAAQ,YAAY,QAAQ,aAAa,WAAW,aAAa,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,YAKxG,CAAA"}

package/dist/compositions/RichTextInput/helpers.js

@@ -0,0 +1,21 @@
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { liftListItem, wrapInList } from "prosemirror-schema-list";
+
+//#region src/compositions/RichTextInput/helpers.ts
+var escapeHtml, isSelectionInNodeType, createToggleListCommand;
+var init_helpers = __esmMin(() => {
+	escapeHtml = (text) => text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#039;");
+	isSelectionInNodeType = (state, nodeType) => {
+		const { $from } = state.selection;
+		for (let d = $from.depth; d > 0; d -= 1) if ($from.node(d).type === nodeType) return true;
+		return false;
+	};
+	createToggleListCommand = (listItemType, listType) => (state, dispatch) => {
+		const isInListItem = isSelectionInNodeType(state, listItemType);
+		return (isSelectionInNodeType(state, listType) && isInListItem ? liftListItem(listItemType) : wrapInList(listType))(state, dispatch);
+	};
+});
+
+//#endregion
+init_helpers();
+export { createToggleListCommand, escapeHtml, init_helpers, isSelectionInNodeType };

package/dist/compositions/RichTextInput/index.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, DOMAttributes, ReactNode } from 'react';
+export type RichTextInputProps = {
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    className?: string;
+    'data-testid'?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    helper?: ReactNode;
+    label?: string;
+    labelDescription?: ReactNode;
+    id?: string;
+    rows?: number;
+    size?: 'large' | 'medium' | 'small';
+    maxRows?: number;
+    required?: boolean;
+    onBlur?: DOMAttributes<HTMLElement>['onBlur'];
+    onChange?: (value: string) => void;
+    onFocus?: DOMAttributes<HTMLElement>['onFocus'];
+    style?: CSSProperties;
+    success?: string;
+    value?: string;
+    showList?: boolean;
+    showMarks?: boolean;
+};
+export declare const RichTextInput: ({ value, onChange, onBlur, onFocus, disabled, readOnly, error, helper, success, className, style, size, label, labelDescription, rows, maxRows, id, 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, showMarks, showList, required, }: RichTextInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/compositions/RichTextInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/compositions/RichTextInput/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,CAAA;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,aAAa,kRAwBvB,kBAAkB,4CAoFpB,CAAA"}

package/dist/compositions/RichTextInput/index.js

@@ -0,0 +1,129 @@
+'use client';
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { Stack, init_Stack } from "../../components/Stack/index.js";
+import { hasHelperText, init_hasHelperText } from "../../helpers/hasHelperText.js";
+import { Description, init_Description } from "../../components/Description/index.js";
+import { Label, init_Label } from "../../components/Label/index.js";
+import { createEditorState, docFromHtml, editorDocToHtml, editorSchema, init_editorCore } from "./editorCore.js";
+import { Toolbar, init_Toolbar } from "./Toolbar.js";
+import { docRegionMaxHeightVar, docRegionMinHeightVar, init_styles_css, richTextInputStyle } from "./styles.css.js";
+import { useId, useState } from "react";
+import { theme } from "@ultraviolet/themes";
+import { cn } from "@ultraviolet/utils";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ProseMirror, ProseMirrorDoc } from "@handlewithcare/react-prosemirror";
+import { AlertCircleIcon, CheckCircleIcon } from "@ultraviolet/icons";
+
+//#region src/compositions/RichTextInput/index.tsx
+var RICH_TEXT_EDITOR_LINE_HEIGHT_EM, RichTextInput;
+var init_RichTextInput = __esmMin(() => {
+	init_Description();
+	init_Label();
+	init_Stack();
+	init_hasHelperText();
+	init_editorCore();
+	init_Toolbar();
+	init_styles_css();
+	init_objectSpread2();
+	RICH_TEXT_EDITOR_LINE_HEIGHT_EM = 1.5;
+	RichTextInput = ({ value = "", onChange, onBlur, onFocus, disabled = false, readOnly = false, error, helper, success, className, style, size = "large", label, labelDescription, rows = 5, maxRows = 10, id, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, showMarks = true, showList = true, required = false }) => {
+		const localId = useId();
+		const inputId = id !== null && id !== void 0 ? id : `rich-text-input-${localId}`;
+		const descriptionId = `${inputId}-description`;
+		const labelId = `${inputId}-label`;
+		const isEditable = !disabled && !readOnly;
+		const lineHeightEm = RICH_TEXT_EDITOR_LINE_HEIGHT_EM;
+		const padding = theme.space[1];
+		const minHeight = `calc(${lineHeightEm}em * ${rows} + 2 * ${padding})`;
+		const maxHeight = typeof maxRows === "number" ? `calc(${lineHeightEm}em * ${maxRows} + 2 * ${padding})` : "none";
+		const [editorState, setEditorState] = useState(() => createEditorState(docFromHtml(value, editorSchema)));
+		return /* @__PURE__ */ jsxs(Stack, {
+			gap: "0.5",
+			children: [
+				label ? /* @__PURE__ */ jsx(Label, {
+					htmlFor: inputId,
+					id: labelId,
+					required,
+					labelDescription,
+					children: label
+				}) : null,
+				/* @__PURE__ */ jsx(Stack, {
+					className: cn(richTextInputStyle.editorSurface({
+						disabled,
+						readonly: readOnly,
+						error: !!error && !disabled,
+						success: !!success && !error && !disabled
+					}), className),
+					style,
+					children: /* @__PURE__ */ jsxs(ProseMirror, {
+						dispatchTransaction: (transaction) => {
+							if (!isEditable) return;
+							setEditorState((prev) => {
+								const next = prev.apply(transaction);
+								if (!prev.doc.eq(next.doc)) {
+									const isEmpty = next.doc.textContent.trim() === "";
+									onChange === null || onChange === void 0 || onChange(isEmpty ? "" : editorDocToHtml(next.doc, editorSchema));
+								}
+								return next;
+							});
+						},
+						state: editorState,
+						static: !isEditable,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: richTextInputStyle.toolbarRow,
+							children: /* @__PURE__ */ jsx(Toolbar, {
+								showList,
+								showMarks,
+								disabled: disabled || readOnly,
+								size
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							className: richTextInputStyle.wrapper,
+							children: [
+								/* @__PURE__ */ jsx(ProseMirrorDoc, {
+									"aria-labelledby": labelId,
+									"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? descriptionId : void 0),
+									"aria-invalid": error ? "true" : void 0,
+									"aria-disabled": disabled ? "true" : void 0,
+									"aria-readonly": readOnly ? "true" : void 0,
+									"aria-label": ariaLabel,
+									className: richTextInputStyle.docRegion,
+									"data-testid": dataTestId,
+									id: inputId,
+									role: "textbox",
+									style: _objectSpread2({}, assignInlineVars({
+										[docRegionMaxHeightVar]: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "none",
+										[docRegionMinHeightVar]: minHeight
+									})),
+									onBlur,
+									onFocus
+								}),
+								error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
+									className: richTextInputStyle.statusIcon,
+									sentiment: "danger"
+								}) : null,
+								success ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+									className: richTextInputStyle.statusIcon,
+									sentiment: "success"
+								}) : null
+							]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx(Description, {
+					id: descriptionId,
+					error,
+					success,
+					disabled,
+					helper
+				})
+			]
+		});
+	};
+});
+
+//#endregion
+init_RichTextInput();
+export { RichTextInput, init_RichTextInput };

package/dist/compositions/RichTextInput/styles.css.d.ts

@@ -0,0 +1,69 @@
+export declare const docRegionMaxHeightVar: `var(--${string})`;
+export declare const docRegionMinHeightVar: `var(--${string})`;
+export declare const wrapper: string;
+export declare const statusIcon: string;
+export declare const toolbarRow: string;
+export declare const docRegion: string;
+export declare const editorSurface: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            background: `var(--${string})`;
+            borderColor: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        false: {};
+    };
+    readonly: {
+        true: {
+            vars: {
+                [x: string]: `var(--${string})`;
+            };
+        };
+        false: {};
+    };
+    error: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+    success: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const richTextInputStyle: {
+    docRegion: string;
+    editorSurface: import("@vanilla-extract/recipes").RuntimeFn<{
+        disabled: {
+            true: {
+                background: `var(--${string})`;
+                borderColor: `var(--${string})`;
+                color: `var(--${string})`;
+            };
+            false: {};
+        };
+        readonly: {
+            true: {
+                vars: {
+                    [x: string]: `var(--${string})`;
+                };
+            };
+            false: {};
+        };
+        error: {
+            true: {
+                borderColor: `var(--${string})`;
+            };
+        };
+        success: {
+            true: {
+                borderColor: `var(--${string})`;
+            };
+        };
+    }>;
+    statusIcon: string;
+    wrapper: string;
+    toolbarRow: string;
+};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/compositions/RichTextInput/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/compositions/RichTextInput/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,oBAAc,CAAA;AAChD,eAAO,MAAM,qBAAqB,oBAAc,CAAA;AAGhD,eAAO,MAAM,OAAO,QAGlB,CAAA;AAEF,eAAO,MAAM,UAAU,QAIrB,CAAA;AAEF,eAAO,MAAM,UAAU,QAIrB,CAAA;AAEF,eAAO,MAAM,SAAS,QAepB,CAAA;AAEF,eAAO,MAAM,aAAa;;QAepB,IAAI;YACF,UAAU;YACV,WAAW;YACX,KAAK;;QAEP,KAAK;;;;;;;;;;;QAWL,IAAI;YACF,WAAW;;;;QAIb,IAAI;YACF,WAAW;;;EAwBjB,CAAA;AAEF,eAAO,MAAM,kBAAkB;;;;YAhDzB,IAAI;gBACF,UAAU;gBACV,WAAW;gBACX,KAAK;;YAEP,KAAK;;;;;;;;;;;YAWL,IAAI;gBACF,WAAW;;;;YAIb,IAAI;gBACF,WAAW;;;;;;;CAgClB,CAAA"}

package/dist/compositions/RichTextInput/styles.css.js

@@ -0,0 +1,67 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/compositions/RichTextInput/styles.css.ts
+var docRegionMaxHeightVar, docRegionMinHeightVar, editorSurface, richTextInputStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	docRegionMaxHeightVar = "var(--uv_nb9uyi0)";
+	docRegionMinHeightVar = "var(--uv_nb9uyi1)";
+	editorSurface = createRuntimeFn({
+		defaultClassName: "uv_nb9uyi7",
+		variantClassNames: {
+			disabled: {
+				true: "uv_nb9uyi8",
+				false: "uv_nb9uyi9"
+			},
+			readonly: {
+				true: "uv_nb9uyia",
+				false: "uv_nb9uyib"
+			},
+			error: { true: "uv_nb9uyic" },
+			success: { true: "uv_nb9uyid" }
+		},
+		defaultVariants: {
+			error: false,
+			success: false
+		},
+		compoundVariants: [[{
+			disabled: false,
+			readonly: false
+		}, "uv_nb9uyie"]]
+	});
+	richTextInputStyle = {
+		docRegion: "uv_nb9uyi6",
+		editorSurface: createRuntimeFn({
+			defaultClassName: "uv_nb9uyi7",
+			variantClassNames: {
+				disabled: {
+					true: "uv_nb9uyi8",
+					false: "uv_nb9uyi9"
+				},
+				readonly: {
+					true: "uv_nb9uyia",
+					false: "uv_nb9uyib"
+				},
+				error: { true: "uv_nb9uyic" },
+				success: { true: "uv_nb9uyid" }
+			},
+			defaultVariants: {
+				error: false,
+				success: false
+			},
+			compoundVariants: [[{
+				disabled: false,
+				readonly: false
+			}, "uv_nb9uyie"]]
+		}),
+		statusIcon: "uv_nb9uyi4",
+		wrapper: "uv_nb9uyi3",
+		toolbarRow: "uv_nb9uyi5"
+	};
+});
+
+//#endregion
+init_styles_css();
+export { docRegionMaxHeightVar, docRegionMinHeightVar, init_styles_css, richTextInputStyle };

package/dist/compositions/RichTextInput/styles.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/compositions/RichTextInput/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/compositions/SteppedListCard/styles.css.js

@@ -1,11 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
-import { init_themes_css_js_vanilla } from "../../themes/dist/vanilla/themes.css.js.vanilla.js";
 import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 
 //#region src/compositions/SteppedListCard/styles.css.ts
 var steppedListCardStyle;
 var init_styles_css = __esmMin(() => {
-	init_themes_css_js_vanilla();
 	init_styles_css_ts_vanilla();
 	steppedListCardStyle = {
 		steppedListCard: "uv_1q0npw30",

package/dist/compositions/index.d.ts

@@ -9,6 +9,7 @@ export { InfoTable } from './InfoTable';
 export { Navigation, NavigationProvider, useNavigation } from './Navigation';
 export { OfferList } from './OfferList';
 export { OptionSelector } from './OptionSelector';
+export { RichTextInput } from './RichTextInput';
 export { OrderSummary } from './OrderSummary';
 export { Plans } from './Plans';
 export { SteppedListCard } from './SteppedListCard';

package/dist/compositions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compositions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAA;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/compositions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAA;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/compositions/index.js

@@ -12,6 +12,7 @@ import { FAQ, init_FAQ } from "./FAQ/index.js";
 import { InfoTable, init_InfoTable } from "./InfoTable/index.js";
 import { OfferList, init_OfferList } from "./OfferList/index.js";
 import { OptionSelector, init_OptionSelector } from "./OptionSelector/index.js";
+import { RichTextInput, init_RichTextInput } from "./RichTextInput/index.js";
 import { OrderSummary, init_OrderSummary } from "./OrderSummary/index.js";
 import { Plans, init_Plans } from "./Plans/index.js";
 import { SteppedListCard, init_SteppedListCard } from "./SteppedListCard/index.js";
@@ -29,6 +30,7 @@ var init_compositions = __esmMin(() => {
 	init_Navigation();
 	init_OfferList();
 	init_OptionSelector();
+	init_RichTextInput();
 	init_OrderSummary();
 	init_Plans();
 	init_SteppedListCard();

package/dist/index.js

@@ -96,6 +96,7 @@ import { GlobalAlert } from "./components/GlobalAlert/index.js";
 import { InfiniteScroll } from "./components/InfiniteScroll/index.js";
 import { lineChartStyle } from "./components/LineChart/styles.css.js";
 import { LineChart } from "./components/LineChart/index.js";
+import { PhoneInput } from "./components/PhoneInput/PhoneInput.js";
 import { meterStyle } from "./components/Meter/styles.css.js";
 import { Meter } from "./components/Meter/index.js";
 import { noticeStyle } from "./components/Notice/styles.css.js";
@@ -147,6 +148,7 @@ import { TimeInput } from "./components/TimeInput/index.js";
 import { toasterStyle } from "./components/Toaster/styles.css.js";
 import { toast } from "./components/Toaster/Toaster.js";
 import { ToastContainer } from "./components/Toaster/ToasterContainer.js";
+import { Toast } from "./components/Toaster/index.js";
 import { toggleGroupStyle } from "./components/ToggleGroup/styles.css.js";
 import { ToggleGroup } from "./components/ToggleGroup/index.js";
 import { treeMapChartStyle } from "./components/TreeMapChart/styles.css.js";
@@ -174,4 +176,4 @@ var init_src = __esmMin(() => {
 
 //#endregion
 init_src();
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, Chip, CopyButton, DateInput, Dialog, Drawer, EmptyState, Expandable, ExpandableCard, FileInput, GlobalAlert, InfiniteScroll, Key, Label, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NotificationContainer, NumberInput, Pagination, PasswordCheck, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, SearchInput, SelectInput, SelectableCard, SelectableCardGroup, SelectableCardOptionGroup, Separator, Skeleton, Slider, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, ThemeProvider, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, TreeMapChart, UnitInput, VerificationCode, actionBarStyle, alertStyle, avatarStyle, badgeStyle, bannerStyle, barChartStyle, barStackStyle, bounce, bounce$1 as bounceDefault, breadcrumbsStyle, bulletStyle, buttonStyle, cardStyle, carouselStyle, checkboxGroupStyle, checkboxStyle, chipStyle, consoleDarkTheme as darkTheme, dateInputStyle, dialogStyle, down, drawerStyle, emptyStateStyle, expandableCardStyle, expandableStyle, extendTheme, fadeIn, fadeIn$1 as fadeInDefault, fadeOut, fadeOut$1 as fadeOutDefault, fileInputStyle, flash, flash$1 as flashDefault, getUUID, globalAlertStyle, keyStyle, labelStyle, lineChartStyle, linkStyle, listStyle, loaderStyle, menuStyle, meterStyle, modalStyle, normalize, noticeStyle, notification, notificationStyle, numberInputStyle, paginationStyle, passwordCheckStyle, pieChartStyle, ping, ping$1 as pingDefault, popoverStyle, popupStyle, progressBarStyle, pulse, pulse$1 as pulseDefault, quickScaleDown, quickScaleDown$1 as quickScaleDownDefault, radioGRoupStyle, radioStyle, rowStyle, scaleBack, scaleBack$1 as scaleBackDefault, scaleDown, scaleDown$1 as scaleDownDefault, scaleForward, scaleForward$1 as scaleForwardDefault, scaleUp, scaleUp$1 as scaleUpDefault, searchInputStyle, selectInputStyle, selectableCardGroupStyle, selectableCardOptionGroupStyle, selectableCardStyle, separatorStyle, skeletonStyle, sketchIn, sketchIn$1 as sketchInDefault, sketchOut, sketchOut$1 as sketchOutDefault, slideDownLarge, slideDownLarge$1 as slideDownLargeDefault, slideFromBottom, slideFromBottom$1 as slideFromBottomDefault, slideFromLeft, slideFromLeft$1 as slideFromLeftDefault, slideFromRight, slideFromRight$1 as slideFromRightDefault, slideFromTop, slideFromTop$1 as slideFromTopDefault, slideToBottom, slideToBottom$1 as slideToBottomDefault, slideToLeft, slideToLeft$1 as slideToLeftDefault, slideToRight, slideToRight$1 as slideToRightDefault, slideToTop, slideToTop$1 as slideToTopDefault, slideUpLarge, slideUpLarge$1 as slideUpLargeDefault, sliderStyle, snippetStyle, stackStyle, statusStyle, stepListStyle, stepperStyle, switchButtonStyle, tableStyle, tabsStyle, tagInputStyle, tagListStyle, tagStyle, textAreaStyle, textInputStyle, textStyle, theme_default as theme, timeInputStyle, toast, toasterStyle, toggleGroupStyle, toggleStyle, tooltipStyle, treeMapChartStyle, unfoldIn, unfoldIn$1 as unfoldInDefault, unfoldOut, unfoldOut$1 as unfoldOutDefault, unitInputStyle, up, useTheme, verificationCodeStyle, zoomIn, zoomIn$1 as zoomInDefault, zoomOut, zoomOut$1 as zoomOutDefault };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, Chip, CopyButton, DateInput, Dialog, Drawer, EmptyState, Expandable, ExpandableCard, FileInput, GlobalAlert, InfiniteScroll, Key, Label, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NotificationContainer, NumberInput, Pagination, PasswordCheck, PhoneInput, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, SearchInput, SelectInput, SelectableCard, SelectableCardGroup, SelectableCardOptionGroup, Separator, Skeleton, Slider, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, ThemeProvider, TimeInput, Toast, ToastContainer, Toggle, ToggleGroup, Tooltip, TreeMapChart, UnitInput, VerificationCode, actionBarStyle, alertStyle, avatarStyle, badgeStyle, bannerStyle, barChartStyle, barStackStyle, bounce, bounce$1 as bounceDefault, breadcrumbsStyle, bulletStyle, buttonStyle, cardStyle, carouselStyle, checkboxGroupStyle, checkboxStyle, chipStyle, consoleDarkTheme as darkTheme, dateInputStyle, dialogStyle, down, drawerStyle, emptyStateStyle, expandableCardStyle, expandableStyle, extendTheme, fadeIn, fadeIn$1 as fadeInDefault, fadeOut, fadeOut$1 as fadeOutDefault, fileInputStyle, flash, flash$1 as flashDefault, getUUID, globalAlertStyle, keyStyle, labelStyle, lineChartStyle, linkStyle, listStyle, loaderStyle, menuStyle, meterStyle, modalStyle, normalize, noticeStyle, notification, notificationStyle, numberInputStyle, paginationStyle, passwordCheckStyle, pieChartStyle, ping, ping$1 as pingDefault, popoverStyle, popupStyle, progressBarStyle, pulse, pulse$1 as pulseDefault, quickScaleDown, quickScaleDown$1 as quickScaleDownDefault, radioGRoupStyle, radioStyle, rowStyle, scaleBack, scaleBack$1 as scaleBackDefault, scaleDown, scaleDown$1 as scaleDownDefault, scaleForward, scaleForward$1 as scaleForwardDefault, scaleUp, scaleUp$1 as scaleUpDefault, searchInputStyle, selectInputStyle, selectableCardGroupStyle, selectableCardOptionGroupStyle, selectableCardStyle, separatorStyle, skeletonStyle, sketchIn, sketchIn$1 as sketchInDefault, sketchOut, sketchOut$1 as sketchOutDefault, slideDownLarge, slideDownLarge$1 as slideDownLargeDefault, slideFromBottom, slideFromBottom$1 as slideFromBottomDefault, slideFromLeft, slideFromLeft$1 as slideFromLeftDefault, slideFromRight, slideFromRight$1 as slideFromRightDefault, slideFromTop, slideFromTop$1 as slideFromTopDefault, slideToBottom, slideToBottom$1 as slideToBottomDefault, slideToLeft, slideToLeft$1 as slideToLeftDefault, slideToRight, slideToRight$1 as slideToRightDefault, slideToTop, slideToTop$1 as slideToTopDefault, slideUpLarge, slideUpLarge$1 as slideUpLargeDefault, sliderStyle, snippetStyle, stackStyle, statusStyle, stepListStyle, stepperStyle, switchButtonStyle, tableStyle, tabsStyle, tagInputStyle, tagListStyle, tagStyle, textAreaStyle, textInputStyle, textStyle, theme_default as theme, timeInputStyle, toast, toasterStyle, toggleGroupStyle, toggleStyle, tooltipStyle, treeMapChartStyle, unfoldIn, unfoldIn$1 as unfoldInDefault, unfoldOut, unfoldOut$1 as unfoldOutDefault, unitInputStyle, up, useTheme, verificationCodeStyle, zoomIn, zoomIn$1 as zoomInDefault, zoomOut, zoomOut$1 as zoomOutDefault };