@dreamtree-org/twreact-ui 1.3.1 → 1.3.3

package/dist/esm/components/rich-text/RichTextToolbar.js

@@ -0,0 +1,397 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect } from 'react';
+import { Redo, Undo, Link, SquareCode, Quote, ListOrdered, List, Heading3, Heading2, Heading1, Code, Strikethrough, Italic, Bold } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || "");
+var shortcutLabel = function shortcutLabel(keys) {
+  return keys.replace("Mod", isMac ? "⌘" : "Ctrl").replace(/-/g, "+");
+};
+/** Every toolbar control, keyed by the name consumers pass in `toolbar`. */
+var TOOLBAR_ITEMS = {
+  bold: {
+    label: "Bold",
+    icon: Bold,
+    group: "marks",
+    shortcut: "Mod-B",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleBold();
+    }
+  },
+  italic: {
+    label: "Italic",
+    icon: Italic,
+    group: "marks",
+    shortcut: "Mod-I",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleItalic();
+    }
+  },
+  strike: {
+    label: "Strikethrough",
+    icon: Strikethrough,
+    group: "marks",
+    shortcut: "Mod-Shift-S",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleStrike();
+    }
+  },
+  code: {
+    label: "Inline code",
+    icon: Code,
+    group: "marks",
+    shortcut: "Mod-E",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleCode();
+    }
+  },
+  heading1: {
+    label: "Heading 1",
+    icon: Heading1,
+    group: "blocks",
+    shortcut: "Mod-Alt-1",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleHeading({
+        level: 1
+      });
+    }
+  },
+  heading2: {
+    label: "Heading 2",
+    icon: Heading2,
+    group: "blocks",
+    shortcut: "Mod-Alt-2",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleHeading({
+        level: 2
+      });
+    }
+  },
+  heading3: {
+    label: "Heading 3",
+    icon: Heading3,
+    group: "blocks",
+    shortcut: "Mod-Alt-3",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleHeading({
+        level: 3
+      });
+    }
+  },
+  bulletList: {
+    label: "Bulleted list",
+    icon: List,
+    group: "blocks",
+    shortcut: "Mod-Shift-8",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleBulletList();
+    }
+  },
+  orderedList: {
+    label: "Numbered list",
+    icon: ListOrdered,
+    group: "blocks",
+    shortcut: "Mod-Shift-7",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleOrderedList();
+    }
+  },
+  blockquote: {
+    label: "Quote",
+    icon: Quote,
+    group: "blocks",
+    shortcut: "Mod-Shift-B",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleBlockquote();
+    }
+  },
+  codeBlock: {
+    label: "Code block",
+    icon: SquareCode,
+    group: "blocks",
+    shortcut: "Mod-Alt-C",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleCodeBlock();
+    }
+  },
+  link: {
+    label: "Link",
+    icon: Link,
+    group: "insert",
+    toggle: true
+  },
+  undo: {
+    label: "Undo",
+    icon: Undo,
+    group: "history",
+    shortcut: "Mod-Z",
+    run: function run(c) {
+      return c.undo();
+    }
+  },
+  redo: {
+    label: "Redo",
+    icon: Redo,
+    group: "history",
+    shortcut: "Mod-Shift-Z",
+    run: function run(c) {
+      return c.redo();
+    }
+  }
+};
+var DEFAULT_TOOLBAR = ["bold", "italic", "strike", "code", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "link", "undo", "redo"];
+/** Toolbar state derived from the editor on every transaction (via useEditorState). */
+function selectToolbarState(editor) {
+  if (!editor) return null;
+  return {
+    isEmpty: editor.isEmpty,
+    bold: editor.isActive("bold"),
+    italic: editor.isActive("italic"),
+    strike: editor.isActive("strike"),
+    code: editor.isActive("code"),
+    heading1: editor.isActive("heading", {
+      level: 1
+    }),
+    heading2: editor.isActive("heading", {
+      level: 2
+    }),
+    heading3: editor.isActive("heading", {
+      level: 3
+    }),
+    bulletList: editor.isActive("bulletList"),
+    orderedList: editor.isActive("orderedList"),
+    blockquote: editor.isActive("blockquote"),
+    codeBlock: editor.isActive("codeBlock"),
+    link: editor.isActive("link"),
+    undo: editor.can().undo(),
+    redo: editor.can().redo()
+  };
+}
+var SAFE_URL = /^(https?:|mailto:|tel:|\/|#)/i;
+var HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+/** Normalises a typed URL; returns null for schemes we refuse (javascript:, data:, …). */
+function normalizeUrl(raw) {
+  var url = String(raw || "").trim();
+  if (!url) return "";
+  if (SAFE_URL.test(url)) return url;
+  if (HAS_SCHEME.test(url)) return null;
+  return "https://".concat(url);
+}
+function LinkForm(_ref) {
+  var editor = _ref.editor,
+    onClose = _ref.onClose;
+  var _useState = useState(function () {
+      return editor.getAttributes("link").href || "";
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    href = _useState2[0],
+    setHref = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    invalid = _useState4[0],
+    setInvalid = _useState4[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, []);
+  var close = function close() {
+    onClose();
+    editor.commands.focus();
+  };
+  var apply = function apply() {
+    var url = normalizeUrl(href);
+    if (url === null) {
+      setInvalid(true);
+      return;
+    }
+    var chain = editor.chain().focus().extendMarkRange("link");
+    if (!url) chain.unsetLink().run();else if (editor.state.selection.empty && !editor.isActive("link")) {
+      chain.insertContent({
+        type: "text",
+        text: url,
+        marks: [{
+          type: "link",
+          attrs: {
+            href: url
+          }
+        }]
+      }).run();
+    } else chain.setLink({
+      href: url
+    }).run();
+    onClose();
+  };
+  var remove = function remove() {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  };
+  return jsxs("div", {
+    className: "flex flex-wrap items-center gap-2 border-b border-gray-200 px-2 py-2 dark:border-gray-700",
+    children: [jsx("input", {
+      ref: inputRef,
+      type: "url",
+      value: href,
+      "aria-label": "Link URL",
+      "aria-invalid": invalid || undefined,
+      placeholder: "https://example.com",
+      onChange: function onChange(e) {
+        setHref(e.target.value);
+        setInvalid(false);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          apply();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          close();
+        }
+      },
+      className: cn("h-8 min-w-0 flex-1 rounded-md border bg-white px-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", invalid ? "border-error-500" : "border-gray-300 dark:border-gray-600")
+    }), jsx("button", {
+      type: "button",
+      onClick: apply,
+      className: formButton,
+      children: "Apply"
+    }), editor.isActive("link") && jsx("button", {
+      type: "button",
+      onClick: remove,
+      className: formButton,
+      children: "Remove link"
+    }), jsx("button", {
+      type: "button",
+      onClick: close,
+      className: formButton,
+      children: "Cancel"
+    }), invalid && jsx("p", {
+      className: "w-full text-xs text-error-600 dark:text-error-400",
+      role: "alert",
+      children: "Use an http(s), mailto: or tel: link."
+    })]
+  });
+}
+var formButton = "h-8 rounded-md px-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-200 dark:hover:bg-gray-800";
+/**
+ * A WAI-ARIA toolbar: one tab stop, arrow keys / Home / End move between the
+ * buttons (roving tabindex), toggles report `aria-pressed`.
+ */
+function RichTextToolbar(_ref2) {
+  var editor = _ref2.editor,
+    state = _ref2.state,
+    items = _ref2.items,
+    disabled = _ref2.disabled,
+    controlsId = _ref2.controlsId,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "Formatting" : _ref2$label;
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusIndex = _useState6[0],
+    setFocusIndex = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    linkOpen = _useState8[0],
+    setLinkOpen = _useState8[1];
+  var buttons = useRef([]);
+  var keys = items.filter(function (k) {
+    return TOOLBAR_ITEMS[k];
+  });
+  var moveFocus = function moveFocus(i) {
+    var _buttons$current$next;
+    var next = (i + keys.length) % keys.length;
+    setFocusIndex(next);
+    (_buttons$current$next = buttons.current[next]) === null || _buttons$current$next === void 0 || _buttons$current$next.focus();
+  };
+  var onKeyDown = function onKeyDown(e) {
+    var map = {
+      ArrowRight: focusIndex + 1,
+      ArrowLeft: focusIndex - 1,
+      Home: 0,
+      End: keys.length - 1
+    };
+    if (!(e.key in map)) return;
+    e.preventDefault();
+    moveFocus(map[e.key]);
+  };
+  var activate = function activate(key) {
+    if (!editor) return;
+    if (key === "link") {
+      setLinkOpen(function (open) {
+        return !open;
+      });
+      return;
+    }
+    var item = TOOLBAR_ITEMS[key];
+    if (!item.toggle && state && !state[key]) return;
+    item.run(editor.chain().focus()).run();
+  };
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      role: "toolbar",
+      "aria-label": label,
+      "aria-controls": controlsId,
+      "aria-orientation": "horizontal",
+      onKeyDown: onKeyDown,
+      className: "flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 px-1 py-1 dark:border-gray-700 dark:bg-gray-800/60",
+      children: keys.map(function (key, i) {
+        var item = TOOLBAR_ITEMS[key];
+        var Icon = item.icon;
+        var pressed = item.toggle ? Boolean(state === null || state === void 0 ? void 0 : state[key]) || key === "link" && linkOpen : undefined;
+        var unavailable = !item.toggle && state ? !state[key] : false;
+        var newGroup = i > 0 && TOOLBAR_ITEMS[keys[i - 1]].group !== item.group;
+        return jsxs(React.Fragment, {
+          children: [newGroup && jsx("span", {
+            className: "mx-1 h-5 w-px bg-gray-300 dark:bg-gray-600",
+            "aria-hidden": "true"
+          }), jsx("button", {
+            ref: function ref(node) {
+              buttons.current[i] = node;
+            },
+            type: "button",
+            tabIndex: i === focusIndex ? 0 : -1,
+            "aria-label": item.label,
+            "aria-pressed": pressed,
+            "aria-disabled": unavailable || undefined,
+            "aria-keyshortcuts": item.shortcut ? item.shortcut.replace("Mod", isMac ? "Meta" : "Control").replace(/-/g, "+") : undefined,
+            title: item.shortcut ? "".concat(item.label, " (").concat(shortcutLabel(item.shortcut), ")") : item.label,
+            disabled: disabled || !editor,
+            onFocus: function onFocus() {
+              return setFocusIndex(i);
+            },
+            onMouseDown: function onMouseDown(e) {
+              return e.preventDefault();
+            },
+            onClick: function onClick() {
+              return activate(key);
+            },
+            className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-600 transition-colors", "hover:bg-gray-200 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", pressed && "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300", unavailable && "opacity-40"),
+            children: jsx(Icon, {
+              className: "h-4 w-4",
+              "aria-hidden": "true"
+            })
+          })]
+        }, key);
+      })
+    }), linkOpen && editor && jsx(LinkForm, {
+      editor: editor,
+      onClose: function onClose() {
+        return setLinkOpen(false);
+      }
+    })]
+  });
+}
+
+export { DEFAULT_TOOLBAR, RichTextToolbar, TOOLBAR_ITEMS, normalizeUrl, selectToolbarState };

package/dist/esm/components/utility/Stepper.js

@@ -34,9 +34,9 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       text: 'text-primary-600'
     },
     upcoming: {
-      circle: 'bg-gray-300 text-primary-500',
+      circle: 'bg-gray-300 text-gray-700',
       line: 'bg-gray-300',
-      text: 'text-primary-500'
+      text: 'text-muted'
     }
   };
   return jsx("nav", _objectSpread2(_objectSpread2({
@@ -70,8 +70,10 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             },
             disabled: !onStepClick || stepIndex > currentStep,
             "aria-current": status === 'current' ? 'step' : undefined,
+            "aria-label": "Step ".concat(stepIndex + 1).concat(step.title ? ": ".concat(step.title) : '').concat(status === 'completed' ? ' (completed)' : ''),
             children: status === 'completed' ? jsx(Check, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             }) : stepIndex + 1
           }), !isLast && jsx("div", {
             className: cn('bg-gray-300', {
@@ -88,7 +90,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             className: cn('text-sm font-medium', colors.text),
             children: step.title
           }), step.description && jsx("span", {
-            className: "text-xs text-primary-500",
+            className: "text-xs text-muted",
             children: step.description
           })]
         })]

package/dist/esm/rich-text/index.js

@@ -0,0 +1 @@
+export { default as RichTextEditor } from '../components/rich-text/RichTextEditor.js';