@drawnagency/primitives 0.1.60 → 0.1.61

package/dist/components/primitives/index.js

@@ -0,0 +1,166 @@
+import {
+  EditableGrid,
+  EditablePlainText,
+  EditableRichText,
+  ImageDropZone,
+  LinkPopover,
+  MediaBlock,
+  ResolvedMedia,
+  defineHeadingSection,
+  useEditableCollection
+} from "../../chunk-4OX3Z7SB.js";
+import {
+  DeleteIcon,
+  DragHandle,
+  IconButton
+} from "../../chunk-WLMJCNU7.js";
+import "../../chunk-CBWK3KPV.js";
+import "../../chunk-53DKVAB6.js";
+import {
+  cn
+} from "../../chunk-7EOSDFS3.js";
+import "../../chunk-ZGFAYZWB.js";
+import "../../chunk-VKAGMEKE.js";
+import "../../chunk-BT7STGDW.js";
+import "../../chunk-JSBRDJBE.js";
+
+// src/components/primitives/EditableList.tsx
+import { useRef, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditableList({
+  items,
+  onChange,
+  createItem,
+  isEditMode,
+  renderItem,
+  className
+}) {
+  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+    items,
+    onChange,
+    createItem
+  });
+  const [dragState, setDragState] = useState({ sourceId: null, targetId: null });
+  if (!isEditMode) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children: wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx("div", { children: renderItem(wrapped.data, { isEditMode: false, index }) }, wrapped.id)) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx(
+      ListRow,
+      {
+        id: wrapped.id,
+        index,
+        onReorder,
+        onRemove,
+        dragState,
+        setDragState,
+        children: renderItem(wrapped.data, { isEditMode: true, index })
+      },
+      wrapped.id
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onAdd,
+        className: "cursor-pointer rounded border-2 border-dashed border-base-200 px-3 py-2 text-sm text-base-contrast-light hover:border-primary hover:text-primary",
+        children: "Add row"
+      }
+    )
+  ] });
+}
+function ListRow({
+  id,
+  index,
+  onReorder,
+  onRemove,
+  dragState,
+  setDragState,
+  children
+}) {
+  const rowRef = useRef(null);
+  const handleRef = useRef(null);
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+    let cleanup;
+    let cancelled = false;
+    import("../../adapter-HH47ZPGM.js").then(({ draggable, dropTargetForElements }) => {
+      if (cancelled) return;
+      const cleanupDraggable = draggable({
+        element: handle,
+        getInitialData: () => ({ dragType: "list-row", id, index }),
+        onDragStart: () => setDragState({ sourceId: id, targetId: null }),
+        onDrop: () => setDragState({ sourceId: null, targetId: null })
+      });
+      const cleanupDropTarget = dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) => source.data.dragType === "list-row",
+        getData: () => ({ id, index }),
+        onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
+        onDragLeave: () => setDragState((prev) => prev.targetId === id ? { ...prev, targetId: null } : prev),
+        onDrop: ({ source }) => {
+          const fromIndex = source.data.index;
+          if (fromIndex !== index) {
+            onReorder(fromIndex, index);
+          }
+        }
+      });
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDropTarget();
+      };
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [id, index, onReorder, setDragState]);
+  const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rowRef,
+      className: cn(
+        "group/row relative flex items-center gap-2",
+        isDropTarget && "border-t-2 border-primary"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ref: handleRef,
+            icon: /* @__PURE__ */ jsx(DragHandle, { size: 14 }),
+            label: "Drag to reorder",
+            size: "sm",
+            className: "shrink-0 cursor-grab opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(DeleteIcon, { size: 14 }),
+            label: "Delete item",
+            size: "sm",
+            intent: "destructive",
+            onClick: () => onRemove(id),
+            className: "shrink-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EditableGrid,
+  EditableList,
+  EditablePlainText,
+  EditableRichText,
+  ImageDropZone,
+  LinkPopover,
+  MediaBlock,
+  ResolvedMedia,
+  defineHeadingSection
+};