@particle-academy/react-fancy 3.2.2 → 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,
@@ -6673,6 +6769,127 @@ var Timeline = Object.assign(TimelineRoot, {
   Item: TimelineItem,
   Block: TimelineBlock
 });
+var TONE_CLASSES = {
+  violet: "bg-violet-500 hover:bg-violet-600",
+  emerald: "bg-emerald-500 hover:bg-emerald-600",
+  sky: "bg-sky-500 hover:bg-sky-600",
+  rose: "bg-rose-500 hover:bg-rose-600",
+  amber: "bg-amber-500 hover:bg-amber-600",
+  indigo: "bg-indigo-500 hover:bg-indigo-600",
+  blue: "bg-blue-500 hover:bg-blue-600",
+  zinc: "bg-zinc-500 hover:bg-zinc-600"
+};
+var OFF_CLASSES = "bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700";
+var TimeGrid = react.forwardRef(
+  ({
+    rows,
+    cols,
+    value,
+    onChange,
+    toneOn = "violet",
+    cellWidth = 20,
+    cellHeight = 16,
+    sparseColLabels = true,
+    toggleStripsOnHeaderClick = true,
+    ariaCell,
+    cellId,
+    className
+  }, ref) => {
+    const [drag, setDrag] = react.useState(null);
+    const setCell = (r, c, v) => {
+      if (value[r]?.[c] === v) return;
+      const next = value.map((row) => row.slice());
+      next[r][c] = v;
+      onChange(next);
+    };
+    const toggleRow = (r) => {
+      if (!toggleStripsOnHeaderClick) return;
+      const all = value[r].every(Boolean);
+      const next = value.map((row) => row.slice());
+      for (let c = 0; c < cols.length; c++) next[r][c] = !all;
+      onChange(next);
+    };
+    const toggleCol = (c) => {
+      if (!toggleStripsOnHeaderClick) return;
+      const all = value.every((row) => row[c]);
+      const next = value.map((row) => row.slice());
+      for (let r = 0; r < rows.length; r++) next[r][c] = !all;
+      onChange(next);
+    };
+    const colStep = Math.max(1, Math.floor(cols.length / 6));
+    const onTone = TONE_CLASSES[toneOn];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-timegrid": "",
+        className: cn(
+          "select-none overflow-x-auto",
+          className
+        ),
+        onMouseLeave: () => setDrag(null),
+        onMouseUp: () => setDrag(null),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "text-[10px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", {}),
+            cols.map((label, c) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                onClick: () => toggleCol(c),
+                style: { width: cellWidth },
+                "data-react-fancy-timegrid-col": c,
+                className: cn(
+                  "text-zinc-400",
+                  toggleStripsOnHeaderClick && "cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-200"
+                ),
+                children: sparseColLabels ? c % colStep === 0 ? label : "" : label
+              },
+              c
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((label, r) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                onClick: () => toggleRow(r),
+                "data-react-fancy-timegrid-row": r,
+                className: cn(
+                  "pr-1 text-right font-medium text-zinc-500",
+                  toggleStripsOnHeaderClick && "cursor-pointer hover:text-zinc-800 dark:hover:text-zinc-200"
+                ),
+                children: label
+              }
+            ),
+            cols.map((_, c) => {
+              const on = value[r]?.[c] ?? false;
+              return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-px", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: () => {
+                    const v = !on;
+                    setDrag(v);
+                    setCell(r, c, v);
+                  },
+                  onMouseEnter: () => drag !== null && setCell(r, c, drag),
+                  style: { width: cellWidth, height: cellHeight },
+                  "data-react-fancy-timegrid-cell": cellId ? cellId(r, c) : `${r}:${c}`,
+                  "aria-pressed": on,
+                  "aria-label": ariaCell ? ariaCell(r, c, on) : `${rows[r]} ${cols[c]} ${on ? "on" : "off"}`,
+                  className: cn(
+                    "block rounded-sm transition",
+                    on ? onTone : OFF_CLASSES
+                  )
+                }
+              ) }, c);
+            })
+          ] }, r)) })
+        ] })
+      }
+    );
+  }
+);
+TimeGrid.displayName = "TimeGrid";
 var Tooltip = react.forwardRef(
   function Tooltip2({ children, content, placement = "top", delay = 200, offset = 8, className }, _ref) {
     const [open, setOpen] = react.useState(false);
@@ -13174,11 +13391,13 @@ exports.Separator = Separator;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
+exports.StickyNote = StickyNote;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.Textarea = Textarea;
+exports.TimeGrid = TimeGrid;
 exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
 exports.Toast = Toast;