@pibit.ai/cure-design-system 0.6.50 → 0.6.51

package/dist/rich-text/token-input/token-node.js

@@ -0,0 +1,89 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Node as p, mergeAttributes as m } from "@tiptap/core";
+import { ReactNodeViewRenderer as c, NodeViewWrapper as f } from "@tiptap/react";
+import { TOKEN_NODE_NAME as a } from "./segments.js";
+function T({
+  node: e,
+  editor: t,
+  getPos: n,
+  selected: o,
+  extension: r
+}) {
+  const s = r.options, u = String(e.attrs.value ?? ""), d = () => {
+    if (!t.isEditable) return;
+    const i = typeof n == "function" ? n() : null;
+    i != null && t.chain().focus().deleteRange({ from: i, to: i + e.nodeSize }).run();
+  };
+  return /* @__PURE__ */ l(
+    f,
+    {
+      as: "span",
+      className: "inline-flex align-middle",
+      "data-type": a,
+      children: s.getRenderToken()({
+        value: u,
+        readOnly: !t.isEditable,
+        selected: o,
+        remove: d
+      })
+    }
+  );
+}
+const k = p.create({
+  name: a,
+  group: "inline",
+  inline: !0,
+  atom: !0,
+  selectable: !0,
+  addOptions() {
+    return {
+      getRenderToken: () => () => null,
+      getTokenText: () => (e) => e
+    };
+  },
+  addAttributes() {
+    return {
+      value: {
+        default: null,
+        parseHTML: (e) => e.getAttribute("data-value"),
+        renderHTML: (e) => e.value ? { "data-value": e.value } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: `span[data-type="${a}"]` }];
+  },
+  renderHTML({ node: e, HTMLAttributes: t }) {
+    return [
+      "span",
+      m({ "data-type": a }, t),
+      String(e.attrs.value ?? "")
+    ];
+  },
+  renderText({ node: e }) {
+    const t = e.attrs.value;
+    return t ? this.options.getTokenText()(t) : "";
+  },
+  addNodeView() {
+    return c(T);
+  },
+  addCommands() {
+    return {
+      insertToken: (e) => ({ commands: t }) => t.insertContent({ type: this.name, attrs: { value: e } })
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      // Without this, the first Backspace only selects the atom.
+      Backspace: () => this.editor.commands.command(({ state: e, dispatch: t }) => {
+        const { $from: n, empty: o } = e.selection;
+        if (!o) return !1;
+        const r = n.nodeBefore;
+        return !r || r.type.name !== this.name ? !1 : (t && t(e.tr.delete(n.pos - r.nodeSize, n.pos)), !0);
+      })
+    };
+  }
+});
+export {
+  k as TokenNode
+};

package/dist/rich-text/token-input/token-suggestion.d.ts

@@ -0,0 +1,37 @@
+import { Extension } from '@tiptap/core';
+import { ReactNode } from 'react';
+export interface TokenSuggestionItem {
+    /** Inserted as the token's value. */
+    value: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+}
+export interface TokenSuggestionTrigger {
+    /** Character(s) that open the menu, e.g. "/", "{{" or "@". */
+    char: string;
+    /** Items for the text typed after the trigger; filter as you see fit. */
+    items: (query: string) => TokenSuggestionItem[] | Promise<TokenSuggestionItem[]>;
+    /** Let the query contain spaces. @default false */
+    allowSpaces?: boolean;
+    /** Characters allowed right before the trigger. @default [" "] plus line start */
+    allowedPrefixes?: string[] | null;
+    /** Message when nothing matches. @default "No matches" */
+    emptyMessage?: string;
+}
+interface ListProps {
+    items: TokenSuggestionItem[];
+    emptyMessage: string;
+    onSelect: (item: TokenSuggestionItem) => void;
+}
+export interface TokenSuggestionListHandle {
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}
+export declare const TokenSuggestionList: import('react').ForwardRefExoticComponent<ListProps & import('react').RefAttributes<TokenSuggestionListHandle>>;
+/**
+ * One Suggestion plugin per trigger. `onOpenChange` reports whether any menu is
+ * showing, so TokenInput lets Enter through to the menu in single-line fields.
+ */
+export declare function createTokenSuggestionExtension(triggers: TokenSuggestionTrigger[], onOpenChange: (open: boolean) => void): Extension<any, any>;
+export {};
+//# sourceMappingURL=token-suggestion.d.ts.map

package/dist/rich-text/token-input/token-suggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-suggestion.d.ts","sourceRoot":"","sources":["../../../src/rich-text/token-input/token-suggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,KACV,mBAAmB,EAAE,GAAG,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAC5D,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kFAAkF;IAClF,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC9C;AAED,eAAO,MAAM,mBAAmB,iHAqE9B,CAAC;AAGH;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,sBAAsB,EAAE,EAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,uBAmFtC"}

package/dist/rich-text/token-input/token-suggestion.js

@@ -0,0 +1,110 @@
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import { Extension as d } from "@tiptap/core";
+import { PluginKey as f } from "@tiptap/pm/state";
+import { ReactRenderer as y } from "@tiptap/react";
+import g from "@tiptap/suggestion";
+import { forwardRef as h, useState as w, useEffect as x, useImperativeHandle as k } from "react";
+import R from "tippy.js";
+import { cx as b } from "../../utils/cn.js";
+const m = h(({ items: o, emptyMessage: s, onSelect: l }, c) => {
+  const [t, r] = w(0);
+  return x(() => r(0), [o]), k(c, () => ({
+    onKeyDown: (n) => o.length ? n.key === "ArrowDown" ? (r((e) => (e + 1) % o.length), !0) : n.key === "ArrowUp" ? (r((e) => (e + o.length - 1) % o.length), !0) : n.key === "Enter" || n.key === "Tab" ? (l(o[t]), !0) : !1 : !1
+  })), /* @__PURE__ */ i(
+    "div",
+    {
+      role: "listbox",
+      "aria-label": "Suggestions",
+      className: "max-h-64 min-w-56 overflow-y-auto rounded-lg bg-primary p-1 shadow-lg ring-1 ring-secondary",
+      onMouseDown: (n) => n.preventDefault(),
+      children: o.length === 0 ? /* @__PURE__ */ i("div", { className: "px-2.5 py-2 text-sm text-tertiary", children: s }) : o.map((n, e) => /* @__PURE__ */ u(
+        "div",
+        {
+          role: "option",
+          "aria-selected": e === t,
+          onMouseEnter: () => r(e),
+          onClick: () => l(n),
+          className: b(
+            "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-2 text-sm",
+            e === t ? "bg-primary_hover" : ""
+          ),
+          children: [
+            n.icon && /* @__PURE__ */ i("span", { className: "flex size-4 shrink-0 items-center text-fg-quaternary", children: n.icon }),
+            /* @__PURE__ */ u("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ i("span", { className: "block truncate font-medium text-secondary", children: n.label }),
+              n.description && /* @__PURE__ */ i("span", { className: "block truncate text-xs text-tertiary", children: n.description })
+            ] })
+          ]
+        },
+        `${n.value}-${e}`
+      ))
+    }
+  );
+});
+m.displayName = "TokenSuggestionList";
+function T(o, s) {
+  return d.create({
+    name: "tokenSuggestion",
+    addProseMirrorPlugins() {
+      return o.map(
+        (l, c) => g({
+          editor: this.editor,
+          char: l.char,
+          pluginKey: new f(`tokenSuggestion${c}`),
+          allowSpaces: l.allowSpaces ?? !1,
+          allowedPrefixes: l.allowedPrefixes === void 0 ? [" "] : l.allowedPrefixes,
+          items: ({ query: t }) => l.items(t),
+          command: ({ editor: t, range: r, props: n }) => {
+            t.chain().focus().deleteRange(r).insertToken(n.value).run();
+          },
+          render: () => {
+            let t = null, r = null;
+            const n = (e) => ({
+              items: e.items,
+              emptyMessage: l.emptyMessage ?? "No matches",
+              onSelect: (a) => e.command(a)
+            });
+            return {
+              onStart: (e) => {
+                s(!0), t = new y(m, {
+                  props: n(e),
+                  editor: e.editor
+                }), e.clientRect && (r = R(document.body, {
+                  getReferenceClientRect: () => {
+                    var a;
+                    return ((a = e.clientRect) == null ? void 0 : a.call(e)) ?? new DOMRect();
+                  },
+                  appendTo: () => document.body,
+                  content: t.element,
+                  showOnCreate: !0,
+                  interactive: !0,
+                  trigger: "manual",
+                  placement: "bottom-start"
+                }));
+              },
+              onUpdate: (e) => {
+                t == null || t.updateProps(n(e)), r == null || r.setProps({
+                  getReferenceClientRect: () => {
+                    var a;
+                    return ((a = e.clientRect) == null ? void 0 : a.call(e)) ?? new DOMRect();
+                  }
+                });
+              },
+              onKeyDown: ({ event: e }) => {
+                var a;
+                return e.key === "Escape" ? (r == null || r.hide(), !0) : ((a = t == null ? void 0 : t.ref) == null ? void 0 : a.onKeyDown(e)) ?? !1;
+              },
+              onExit: () => {
+                s(!1), r == null || r.destroy(), t == null || t.destroy(), r = null, t = null;
+              }
+            };
+          }
+        })
+      );
+    }
+  });
+}
+export {
+  m as TokenSuggestionList,
+  T as createTokenSuggestionExtension
+};