dune-react 0.0.22 → 0.0.23

package/dist/components/puck-core/fields/array-field.js

@@ -0,0 +1,229 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useMemo, useCallback } from "react";
+import { ChevronLeft, Plus, GripVertical, Pencil, Trash2 } from "lucide-react";
+import { useSensors, useSensor, DndContext, closestCenter, KeyboardSensor, PointerSensor } from "../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove, SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinates, useSortable } from "../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.4_react@19.2.4__react@19.2.4__react@19.2.4/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS } from "../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.4/node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { Label } from "../../shadcn/label.js";
+import { Button } from "../../shadcn/button.js";
+import { AutoField } from "./auto-field.js";
+const POINTER_SENSOR_OPTIONS = { activationConstraint: { distance: 5 } };
+const KEYBOARD_SENSOR_OPTIONS = {
+  coordinateGetter: sortableKeyboardCoordinates
+};
+const SortableItem = memo(function SortableItem2({
+  id,
+  summary,
+  canDelete,
+  onEdit,
+  onDelete
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "bg-muted/50 group flex items-center gap-2 rounded-xl p-3",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-muted-foreground/40 hover:text-muted-foreground cursor-grab active:cursor-grabbing",
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground flex-1 truncate text-sm", children: summary }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 gap-1 px-2",
+            onClick: onEdit,
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }),
+              "Edit"
+            ]
+          }
+        ),
+        canDelete && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: "text-muted-foreground hover:text-destructive h-7 w-7",
+            onClick: onDelete,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+});
+const ArrayField = memo(function ArrayField2({
+  field,
+  name,
+  value,
+  onChange
+}) {
+  const arrayFields = field.arrayFields || {};
+  const label = field.label || name;
+  const items = Array.isArray(value) ? value : [];
+  const [editingIndex, setEditingIndex] = useState(null);
+  const idCounterRef = useRef(0);
+  const itemIdMapRef = useRef(/* @__PURE__ */ new WeakMap());
+  const itemIds = useMemo(() => {
+    return items.map((item) => {
+      if (item && typeof item === "object") {
+        let id = itemIdMapRef.current.get(item);
+        if (!id) {
+          id = `${name}-${idCounterRef.current++}`;
+          itemIdMapRef.current.set(item, id);
+        }
+        return id;
+      }
+      return `${name}-${idCounterRef.current++}`;
+    });
+  }, [items, name]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, POINTER_SENSOR_OPTIONS),
+    useSensor(KeyboardSensor, KEYBOARD_SENSOR_OPTIONS)
+  );
+  const handleDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = itemIds.indexOf(String(active.id));
+      const newIndex = itemIds.indexOf(String(over.id));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onChange(arrayMove(items, oldIndex, newIndex));
+      }
+    },
+    [itemIds, items, onChange]
+  );
+  const handleAdd = useCallback(() => {
+    if (field.defaultItemProps) {
+      onChange([...items, { ...field.defaultItemProps }]);
+      return;
+    }
+    const newItem = {};
+    for (const key of Object.keys(arrayFields)) {
+      newItem[key] = "";
+    }
+    onChange([...items, newItem]);
+  }, [items, onChange, field.defaultItemProps, arrayFields]);
+  const handleDelete = useCallback(
+    (index) => {
+      onChange(items.filter((_, i) => i !== index));
+      if (editingIndex === index) setEditingIndex(null);
+    },
+    [items, onChange, editingIndex]
+  );
+  const handleItemFieldChange = useCallback(
+    (index, key, val) => {
+      const newItems = items.map(
+        (item, i) => i === index ? { ...item, [key]: val } : item
+      );
+      onChange(newItems);
+    },
+    [items, onChange]
+  );
+  const canAdd = field.max == null || items.length < field.max;
+  const canDelete = field.min == null || items.length > field.min;
+  const getSummary = useCallback(
+    (item, index) => {
+      if (field.getItemSummary) return field.getItemSummary(item, index);
+      return item.label || item.heading || item.name || item.title || `Item ${index + 1}`;
+    },
+    [field]
+  );
+  if (editingIndex !== null && items[editingIndex]) {
+    const item = items[editingIndex];
+    return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: () => setEditingIndex(null),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Label, { children: [
+          label,
+          " / ",
+          getSummary(item, editingIndex)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted/30 p-3", children: Object.entries(arrayFields).map(([key, subField]) => /* @__PURE__ */ jsx(
+        AutoField,
+        {
+          field: subField,
+          name: key,
+          value: item[key],
+          onChange: (val) => handleItemFieldChange(editingIndex, key, val)
+        },
+        key
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item, i) => /* @__PURE__ */ jsx(
+          SortableItem,
+          {
+            id: itemIds[i],
+            summary: getSummary(item, i),
+            canDelete,
+            onEdit: () => setEditingIndex(i),
+            onDelete: () => handleDelete(i)
+          },
+          itemIds[i]
+        )) }) })
+      }
+    ),
+    canAdd && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "mt-2 gap-1.5 text-primary",
+        onClick: handleAdd,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+          "Add ",
+          label.replace(/s$/, "").toLowerCase()
+        ]
+      }
+    )
+  ] });
+});
+export {
+  ArrayField
+};

package/dist/components/puck-core/fields/auto-field.js

@@ -7,6 +7,7 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from ".
 import { ColorField } from "./color-field.js";
 import { RadioToggleField } from "./radio-toggle-field.js";
 import { ObjectField } from "./object-field.js";
+import { ArrayField } from "./array-field.js";
 import { LARGE_SELECT_THRESHOLD, VirtualizedSelectField } from "./virtualized-select-field.js";
 const KEY_FIELD_MAP = {
   color: ColorField,
@@ -119,6 +120,16 @@ const AutoField = memo(function AutoField2({
           onChange
         }
       );
+    case "array":
+      return /* @__PURE__ */ jsx(
+        ArrayField,
+        {
+          field,
+          name,
+          value,
+          onChange
+        }
+      );
     case "custom":
       if (field.render) {
         const CustomRender = field.render;

package/dist/components/puck-core/fields/image-upload-field.js

@@ -32,7 +32,7 @@ function ImageUploadField({
         {
           src: value,
           alt: "preview",
-          className: "block h-32 w-full object-cover"
+          className: "block h-32 w-full object-contain"
         }
       ),
       /* @__PURE__ */ jsx(

package/dist/components/puck-core/fields/index.d.ts

@@ -3,6 +3,7 @@ export { AutoField } from "./auto-field";
 export { ColorField } from "./color-field";
 export { RadioToggleField } from "./radio-toggle-field";
 export { ObjectField } from "./object-field";
+export { ArrayField } from "./array-field";
 export { VirtualizedSelectField, LARGE_SELECT_THRESHOLD, } from "./virtualized-select-field";
 export { LocationField } from "./location-field";
 export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./action-field";

package/dist/components/puck-core/fields/object-field.js

@@ -13,7 +13,7 @@ const ObjectField = memo(function ObjectField2({
   const objValue = value && typeof value === "object" ? value : {};
   return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
     /* @__PURE__ */ jsx(Label, { children: label }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-3", children: Object.entries(objectFields).map(([key, subField]) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg p-3 bg-muted/50", children: Object.entries(objectFields).map(([key, subField]) => /* @__PURE__ */ jsx(
       AutoField,
       {
         field: subField,

package/dist/node_modules/.pnpm/@dnd-kit_accessibility@3.1.1_react@19.2.4/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js

@@ -0,0 +1,59 @@
+import React__default, { useState, useCallback } from "react";
+const hiddenStyles = {
+  display: "none"
+};
+function HiddenText(_ref) {
+  let {
+    id,
+    value
+  } = _ref;
+  return React__default.createElement("div", {
+    id,
+    style: hiddenStyles
+  }, value);
+}
+function LiveRegion(_ref) {
+  let {
+    id,
+    announcement,
+    ariaLiveType = "assertive"
+  } = _ref;
+  const visuallyHidden = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: 1,
+    height: 1,
+    margin: -1,
+    border: 0,
+    padding: 0,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(100%)",
+    whiteSpace: "nowrap"
+  };
+  return React__default.createElement("div", {
+    id,
+    style: visuallyHidden,
+    role: "status",
+    "aria-live": ariaLiveType,
+    "aria-atomic": true
+  }, announcement);
+}
+function useAnnouncement() {
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((value) => {
+    if (value != null) {
+      setAnnouncement(value);
+    }
+  }, []);
+  return {
+    announce,
+    announcement
+  };
+}
+export {
+  HiddenText,
+  LiveRegion,
+  useAnnouncement
+};