@particle-academy/react-fancy 3.3.0 → 3.4.0

package/dist/index.cjs

@@ -6408,6 +6408,102 @@ var Callout = react.forwardRef(
   }
 );
 Callout.displayName = "Callout";
+var colorClasses5 = {
+  yellow: "bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950",
+  blue: "bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950",
+  green: "bg-emerald-100 text-emerald-950 dark:bg-emerald-200 dark:text-emerald-950",
+  pink: "bg-pink-100 text-pink-950 dark:bg-pink-200 dark:text-pink-950",
+  violet: "bg-violet-100 text-violet-950 dark:bg-violet-200 dark:text-violet-950"
+};
+var isPreset = (c) => c in colorClasses5;
+var StickyNote = react.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    color = "yellow",
+    rotate = 0,
+    width = 180,
+    height = "auto",
+    selected = false,
+    editable = true,
+    autoFocus = false,
+    id,
+    children,
+    className,
+    style
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = react.useState(defaultValue ?? "");
+    const text = isControlled ? value : internal;
+    const editRef = react.useRef(null);
+    react.useEffect(() => {
+      const el = editRef.current;
+      if (el && document.activeElement !== el && el.textContent !== text) {
+        el.textContent = text ?? "";
+      }
+    }, [text]);
+    react.useEffect(() => {
+      if (!editable || !autoFocus) return;
+      const el = editRef.current;
+      if (!el) return;
+      el.focus();
+      const range2 = document.createRange();
+      range2.selectNodeContents(el);
+      range2.collapse(false);
+      const sel = window.getSelection();
+      sel?.removeAllRanges();
+      sel?.addRange(range2);
+    }, [editable, autoFocus]);
+    const commit = () => {
+      const next = editRef.current?.textContent ?? "";
+      if (next === text) return;
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    };
+    const preset = isPreset(color);
+    const content = children != null ? children : editable ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: editRef,
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        spellCheck: false,
+        role: "textbox",
+        "aria-multiline": "true",
+        className: "outline-none whitespace-pre-wrap break-words min-h-[1.4em]",
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") e.currentTarget.blur();
+        },
+        children: text
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words", children: text });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id,
+        "data-react-fancy-sticky": "",
+        className: cn(
+          "rounded-sm p-3.5 text-sm leading-relaxed shadow-[0_2px_8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.08)]",
+          preset ? colorClasses5[color] : "text-zinc-900",
+          selected && "ring-2 ring-blue-500 ring-offset-1",
+          className
+        ),
+        style: {
+          width,
+          height,
+          transform: rotate ? `rotate(${rotate}deg)` : void 0,
+          ...preset ? null : { background: color },
+          ...style
+        },
+        children: content
+      }
+    );
+  }
+);
+StickyNote.displayName = "StickyNote";
 var TimelineContext = react.createContext({
   variant: "stacked",
   index: 0,
@@ -13295,6 +13391,7 @@ exports.Separator = Separator;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
+exports.StickyNote = StickyNote;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;