@optiaxiom/react 3.0.2 → 3.0.4

package/dist/esm/packages/react/src/pill-menu/PillMenuTrigger-css.js

@@ -1,23 +1,23 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-Bd3vw-eL.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-D04x25am.css";
 //#region src/pill-menu/PillMenuTrigger.css.ts
 var root = recipeRuntime({
 	base: [{
 		border: "1",
 		rounded: "md",
 		transition: "colors"
-	}, "_1ac116g"],
+	}, "_1y1d0sd"],
 	variants: { size: {
-		md: "_1dghakq",
-		lg: "_9q7wcx"
+		md: "s1c00s",
+		lg: "svwrfk"
 	} }
 });
 var trigger = recipeRuntime({ base: [{
 	display: "grid",
 	placeItems: "center",
 	rounded: "md"
-}, "_1lseaek"] });
-var wrapper = recipeRuntime({ base: "tpqdd0" });
+}, "_163jv2b"] });
+var wrapper = recipeRuntime({ base: "_6d18bn" });
 //#endregion
 export { root, trigger, wrapper };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/progress/Progress.css.ts.vanilla-5_YIBaol.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/progress/Progress.css.ts.vanilla-Bcgfxf3Z.css";
 //#region src/progress/Progress.css.ts
 var indicator = recipeRuntime({
 	base: [{
@@ -10,7 +10,7 @@ var indicator = recipeRuntime({
 	}],
 	variants: { intent: {
 		danger: { bg: "bg.error" },
-		opal: "ywp7s4",
+		opal: "h2asbs",
 		primary: { bg: "bg.accent" },
 		success: { bg: "bg.success" }
 	} }
@@ -19,6 +19,6 @@ var progress = recipeRuntime({ base: [{
 	bg: "bg.tertiary",
 	overflow: "hidden",
 	rounded: "full"
-}, "_1jlsi9w"] });
+}, "pkywlt"] });
 //#endregion
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,8 +1,8 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BVJBVYYW.css";
-import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C1tWo2us.css";
-import "./../../../../assets/src/radio/Radio.css.ts.vanilla-SVETEC72.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BZDMhfY2.css";
+import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-cB9nbohe.css";
+import "./../../../../assets/src/radio/Radio.css.ts.vanilla-gGX1eusX.css";
 //#region src/radio/Radio.css.ts
 var control = recipeRuntime({
 	base: [{
@@ -10,17 +10,17 @@ var control = recipeRuntime({
 		display: "grid",
 		rounded: "full",
 		size: "sm"
-	}, "_82ixku"],
+	}, "tx9e2z"],
 	variants: { shift: {
 		false: {},
-		true: "q1lrfy"
+		true: "_79jrwk"
 	} }
 });
 var indicator = recipeRuntime({ base: [{
 	rounded: "inherit",
 	transition: "transform"
-}, "_12hj5et"] });
-var input = recipeRuntime({ base: "_1qmqzrf" });
-var radio = recipeRuntime({ base: "laohjm" });
+}, "_11dho2u"] });
+var input = recipeRuntime({ base: "a3o8ss" });
+var radio = recipeRuntime({ base: "_15nqwxe" });
 //#endregion
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/range/Range-css.js

@@ -1,24 +1,24 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/range/Range.css.ts.vanilla-DSW0zpm3.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/range/Range.css.ts.vanilla-D5pYyy8x.css";
 //#region src/range/Range.css.ts
-var control = recipeRuntime({ base: [{ bg: "transparent" }, "_1yduh2k"] });
-var fillValue = "var(--_1jjlssj)";
+var control = recipeRuntime({ base: [{ bg: "transparent" }, "jodk0f"] });
+var fillValue = "var(--_1berzcx)";
 var mark = recipeRuntime({
-	base: [{ transition: "colors" }, "m8mea"],
+	base: [{ transition: "colors" }, "xqwuwn"],
 	variants: { active: {
 		false: { color: "fg.secondary" },
 		true: {}
 	} }
 });
-var markValue = "var(--_14rrgzo)";
+var markValue = "var(--_11jotl5)";
 var range = recipeRuntime({ base: [{
 	h: "full",
 	rounded: "inherit"
-}, "_1obiion"] });
+}, "rj4ljv"] });
 var root = recipeRuntime({
 	base: [
-		"wp9vl",
+		"zk6cui",
 		{
 			alignItems: "center",
 			color: "fg.default",
@@ -26,7 +26,7 @@ var root = recipeRuntime({
 			fontSize: "md",
 			w: "full"
 		},
-		"_191bkmq"
+		"_1a66dmp"
 	],
 	variants: {
 		marks: {
@@ -44,11 +44,11 @@ var thumb = recipeRuntime({ base: [{
 	rounded: "full",
 	shadow: "sm",
 	size: "xs"
-}, "_1uk5wo6"] });
+}, "j2odgm"] });
 var track = recipeRuntime({ base: [{
 	display: "flex",
 	flex: "1",
 	rounded: "full"
-}, "y65y8o"] });
+}, "_1ek0ql1"] });
 //#endregion
 export { control, fillValue, mark, markValue, range, root, thumb, track };

package/dist/esm/packages/react/src/resizable/ResizableHandle-css.js

@@ -1,19 +1,19 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-PXIXFLKk.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-B9LoPQqz.css";
 //#region src/resizable/ResizableHandle.css.ts
 var handle = recipeRuntime({ base: [{
 	border: "1",
 	h: "56",
 	rounded: "sm",
 	w: "12"
-}, "wn302u"] });
+}, "_10v522m"] });
 var root = recipeRuntime({ base: [{
 	flexDirection: "column",
 	gap: "16",
 	justifyContent: "center",
 	rounded: "sm",
 	z: "10"
-}, "temtjb"] });
+}, "_5m7uif"] });
 //#endregion
 export { handle, root };

package/dist/esm/packages/react/src/rich-text-editor/RichTextEditor-css.js

@@ -0,0 +1,25 @@
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/rich-text-editor/RichTextEditor.css.ts.vanilla-CekY2uOU.css";
+//#region src/rich-text-editor/RichTextEditor.css.ts
+var editor = recipeRuntime({ base: [
+	{
+		bg: "bg.default",
+		border: "1",
+		display: "flex",
+		flexDirection: "column",
+		rounded: "md"
+	},
+	"n04jra",
+	"_1ffh91f"
+] });
+var toolbar = recipeRuntime({ base: [{
+	alignItems: "center",
+	borderB: "1",
+	borderColor: "border.tertiary",
+	gap: "2",
+	px: "8",
+	py: "6"
+}, "b0wzpp"] });
+//#endregion
+export { editor, toolbar };

package/dist/esm/packages/react/src/rich-text-editor/RichTextEditor.js

@@ -0,0 +1,132 @@
+"use client";
+import { Box } from "../box/Box.js";
+import { Group } from "../group/Group.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { ToggleButton } from "../toggle-button/ToggleButton.js";
+import { editor, toolbar } from "./RichTextEditor-css.js";
+import { IconBold, IconItalic, IconLink, IconList, IconListOl } from "@optiaxiom/icons";
+import { forwardRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Table } from "@tiptap/extension-table";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/rich-text-editor/RichTextEditor.tsx
+/**
+* Rich text editor with a toolbar for basic formatting (bold, italic, lists, links).
+*
+* @category form
+* @experimental
+* @since 1.10.0
+*/
+const RichTextEditor = forwardRef(({ "aria-label": ariaLabel = "Rich text editor", "aria-labelledby": ariaLabelledBy, className, defaultValue, onValueChange, placeholder, readOnly, value, ...props }, ref) => {
+	const editor$1 = useEditor({
+		content: value ?? defaultValue ?? "",
+		editable: !readOnly,
+		editorProps: { attributes: {
+			role: "textbox",
+			...ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : { "aria-label": ariaLabel }
+		} },
+		extensions: [
+			StarterKit,
+			Link.configure({ openOnClick: false }),
+			Placeholder.configure({ placeholder: placeholder ?? "" }),
+			Table.configure({ resizable: false }),
+			TableRow,
+			TableHeader,
+			TableCell
+		],
+		onUpdate: ({ editor }) => {
+			onValueChange?.(editor.getHTML());
+		}
+	});
+	useEffect(() => {
+		if (editor$1 && editor$1.isEditable === readOnly) editor$1.setEditable(!readOnly);
+	}, [editor$1, readOnly]);
+	useEffect(() => {
+		if (editor$1 && value !== void 0 && value !== editor$1.getHTML()) editor$1.commands.setContent(value, false);
+	}, [editor$1, value]);
+	if (!editor$1) return null;
+	const setLink = () => {
+		const previous = editor$1.getAttributes("link").href;
+		const url = window.prompt("Enter URL", previous ?? "");
+		if (url === null) return;
+		if (url === "") {
+			editor$1.chain().focus().extendMarkRange("link").unsetLink().run();
+			return;
+		}
+		editor$1.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		...editor({}, className),
+		...props,
+		children: [!readOnly && /* @__PURE__ */ jsxs(Group, {
+			...toolbar(),
+			children: [
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: "Bold",
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Bold",
+						icon: /* @__PURE__ */ jsx(IconBold, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleBold().run(),
+						pressed: editor$1.isActive("bold"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: "Italic",
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Italic",
+						icon: /* @__PURE__ */ jsx(IconItalic, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleItalic().run(),
+						pressed: editor$1.isActive("italic"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: "Bullet list",
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Bullet list",
+						icon: /* @__PURE__ */ jsx(IconList, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleBulletList().run(),
+						pressed: editor$1.isActive("bulletList"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: "Numbered list",
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Numbered list",
+						icon: /* @__PURE__ */ jsx(IconListOl, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleOrderedList().run(),
+						pressed: editor$1.isActive("orderedList"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: "Link",
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Link",
+						icon: /* @__PURE__ */ jsx(IconLink, {}),
+						onClick: setLink,
+						pressed: editor$1.isActive("link"),
+						size: "sm"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(EditorContent, { editor: editor$1 })]
+	});
+});
+RichTextEditor.displayName = "@optiaxiom/react/RichTextEditor";
+//#endregion
+export { RichTextEditor };

package/dist/esm/packages/react/src/search-input/SearchInput-css.js

@@ -1,9 +1,9 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/search-input/SearchInput.css.ts.vanilla-C9oyZMo9.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DnoLAbW2.css";
 //#region src/search-input/SearchInput.css.ts
-var clear = recipeRuntime({ base: [{ size: "sm" }, "_1t3bdj9"] });
-var input = recipeRuntime({ base: "_1lys2a6" });
-var search = recipeRuntime({ base: "_1blvt9u" });
+var clear = recipeRuntime({ base: [{ size: "sm" }, "e22e2k"] });
+var input = recipeRuntime({ base: "_1mday6c" });
+var search = recipeRuntime({ base: "b5hza3" });
 //#endregion
 export { clear, input, search };

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,7 +1,7 @@
 import { createSprinkles } from "../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_patch_hash_530004842e1937cf2ffe2728e2a18629c5dd638aa44_2d8dc8a2e1437882c3e115bf7a65883f/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js";
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/separator/Separator.css.ts.vanilla-bB8ixfQh.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/separator/Separator.css.ts.vanilla-Dsh-q9eh.css";
 //#region src/separator/Separator.css.ts
 var base = recipeRuntime({ base: { borderColor: "border.secondary" } });
 var separator = createSprinkles(function() {
@@ -23,19 +23,19 @@ var separator = createSprinkles(function() {
 			values: {
 				horizontal: {
 					conditions: {
-						sm: "_1lul1ue",
-						md: "gjajdo",
-						base: "_1u9n5un"
+						sm: "_1dr4uqj",
+						md: "_1d9pcw8",
+						base: "iixaqf"
 					},
-					defaultClass: "_1u9n5un"
+					defaultClass: "iixaqf"
 				},
 				vertical: {
 					conditions: {
-						sm: "cbrt2u",
-						md: "_1scqxjs",
-						base: "_1ch1y5n"
+						sm: "_1ij1lw8",
+						md: "_15v8yvx",
+						base: "m53xgy"
 					},
-					defaultClass: "_1ch1y5n"
+					defaultClass: "m53xgy"
 				}
 			},
 			responsiveArray: void 0

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,12 +1,12 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CvCAQOjY.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-nkQILCbx.css";
 //#region src/skeleton/Skeleton.css.ts
 var skeleton = recipeRuntime({ base: [{
 	animation: "pulse",
 	bg: "bg.avatar.neutral",
 	color: "fg.default.inverse",
 	display: "block"
-}, "r87qmi"] });
+}, "afx276"] });
 //#endregion
 export { skeleton };

package/dist/esm/packages/react/src/sortable/SortableHandle-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-N-eyfWZp.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-3CuuYqin.css";
 //#region src/sortable/SortableHandle.css.ts
-var handle = recipeRuntime({ base: "mwzxpz" });
+var handle = recipeRuntime({ base: "ulvp9a" });
 //#endregion
 export { handle };

package/dist/esm/packages/react/src/sortable/SortableItem-css.js

@@ -1,12 +1,12 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/sortable/SortableItem.css.ts.vanilla-4ZOXNCeq.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/sortable/SortableItem.css.ts.vanilla-BdRLhej2.css";
 //#region src/sortable/SortableItem.css.ts
 var item = recipeRuntime({
-	base: "o6q7db",
+	base: "_764i4i",
 	variants: { handle: {
 		false: {},
-		true: "_11qeg"
+		true: "pkjier"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/src/layers/layers.css.ts.vanilla-BP2yAiUA.css";
-import "./../../../../assets/src/spinner/Spinner.css.ts.vanilla-D9P3JmOY.css";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-C_nAZLXE.css";
+import "./../../../../assets/src/spinner/Spinner.css.ts.vanilla-Dzqip5dD.css";
 //#region src/spinner/Spinner.css.ts
 var track = recipeRuntime({ variants: { appearance: {
-	"default": "_1g9qdn4",
-	inverse: "pnpw3t"
+	"default": "r5tgtk",
+	inverse: "_1d9ysdv"
 } } });
 //#endregion
 export { track };