@btst/stack 1.5.2 → 1.7.0

package/dist/packages/ui/src/components/form-builder/sortable-field.cjs

@@ -0,0 +1,151 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const sortable_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0__react@19.2.0/node_modules/@dnd-kit/sortable/dist/sortable.esm.cjs');
+const utilities_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs');
+const lucideReact = require('lucide-react');
+const utils = require('../../lib/utils.cjs');
+const button = require('../button.cjs');
+
+function SortableField({
+  field,
+  index,
+  component,
+  onEdit,
+  onDelete,
+  onConfigureNested
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable_esm.useSortable({
+    id: field.id,
+    data: {
+      type: "field",
+      fieldId: field.id,
+      index
+    }
+  });
+  const style = {
+    transform: utilities_esm.CSS.Transform.toString(transform),
+    transition
+  };
+  const Icon = component?.icon;
+  const isContainerField = field.type === "object" || field.type === "array";
+  const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: utils.cn(
+        "group flex items-center gap-2 p-3 rounded-lg border bg-card",
+        "transition-all duration-200",
+        isDragging && "opacity-50 shadow-lg z-50",
+        !isDragging && "hover:border-muted-foreground/30"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: utils.cn(
+              "flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
+              "hover:bg-muted touch-none",
+              "min-w-[44px] min-h-[44px] -m-1"
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4 text-muted-foreground" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium truncate", children: field.props.label }),
+            field.props.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-sm", children: "*" }),
+            isContainerField && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
+              nestedFieldCount,
+              " ",
+              nestedFieldCount === 1 ? "field" : "fields"
+            ] })
+          ] }),
+          field.props.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          isContainerField && onConfigureNested && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: utils.cn(
+                "h-8 w-8 text-muted-foreground hover:text-primary",
+                "opacity-0 group-hover:opacity-100 transition-opacity",
+                "min-w-[44px] min-h-[44px]"
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onConfigureNested();
+              },
+              title: "Configure nested fields",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: utils.cn(
+                "h-8 w-8 text-muted-foreground hover:text-primary",
+                "opacity-0 group-hover:opacity-100 transition-opacity",
+                "min-w-[44px] min-h-[44px]"
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onEdit();
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: utils.cn(
+                "h-8 w-8 text-muted-foreground hover:text-destructive",
+                "opacity-0 group-hover:opacity-100 transition-opacity",
+                "min-w-[44px] min-h-[44px]"
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FieldDragOverlay({ field, component }) {
+  const Icon = component?.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium truncate", children: field.props.label })
+    ] }) })
+  ] });
+}
+
+exports.FieldDragOverlay = FieldDragOverlay;
+exports.SortableField = SortableField;

package/dist/packages/ui/src/components/form-builder/sortable-field.mjs

@@ -0,0 +1,148 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useSortable } from '../../../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0__react@19.2.0/node_modules/@dnd-kit/sortable/dist/sortable.esm.mjs';
+import { CSS } from '../../../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.mjs';
+import { GripVertical, Settings2, Pencil, Trash2 } from 'lucide-react';
+import { cn } from '../../lib/utils.mjs';
+import { Button } from '../button.mjs';
+
+function SortableField({
+  field,
+  index,
+  component,
+  onEdit,
+  onDelete,
+  onConfigureNested
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: field.id,
+    data: {
+      type: "field",
+      fieldId: field.id,
+      index
+    }
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const Icon = component?.icon;
+  const isContainerField = field.type === "object" || field.type === "array";
+  const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "group flex items-center gap-2 p-3 rounded-lg border bg-card",
+        "transition-all duration-200",
+        isDragging && "opacity-50 shadow-lg z-50",
+        !isDragging && "hover:border-muted-foreground/30"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: cn(
+              "flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
+              "hover:bg-muted touch-none",
+              "min-w-[44px] min-h-[44px] -m-1"
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label }),
+            field.props.required && /* @__PURE__ */ jsx("span", { className: "text-destructive text-sm", children: "*" }),
+            isContainerField && /* @__PURE__ */ jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
+              nestedFieldCount,
+              " ",
+              nestedFieldCount === 1 ? "field" : "fields"
+            ] })
+          ] }),
+          field.props.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          isContainerField && onConfigureNested && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                "h-8 w-8 text-muted-foreground hover:text-primary",
+                "opacity-0 group-hover:opacity-100 transition-opacity",
+                "min-w-[44px] min-h-[44px]"
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onConfigureNested();
+              },
+              title: "Configure nested fields",
+              children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                "h-8 w-8 text-muted-foreground hover:text-primary",
+                "opacity-0 group-hover:opacity-100 transition-opacity",
+                "min-w-[44px] min-h-[44px]"
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onEdit();
+              },
+              children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                "h-8 w-8 text-muted-foreground hover:text-destructive",
+                "opacity-0 group-hover:opacity-100 transition-opacity",
+                "min-w-[44px] min-h-[44px]"
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FieldDragOverlay({ field, component }) {
+  const Icon = component?.icon;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label })
+    ] }) })
+  ] });
+}
+
+export { FieldDragOverlay, SortableField };

package/dist/packages/ui/src/components/form-builder/step-tabs.cjs

@@ -0,0 +1,180 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const lucideReact = require('lucide-react');
+const utils = require('../../lib/utils.cjs');
+const button = require('../button.cjs');
+const input = require('../input.cjs');
+
+function StepTabs({
+  steps,
+  activeStepIndex,
+  onActiveStepChange,
+  onAddStep,
+  onDeleteStep,
+  onRenameStep,
+  className,
+  hideStepControls
+}) {
+  const [editingIndex, setEditingIndex] = React.useState(null);
+  const [editValue, setEditValue] = React.useState("");
+  const handleStartEdit = (index, currentTitle) => {
+    setEditingIndex(index);
+    setEditValue(currentTitle);
+  };
+  const handleConfirmEdit = () => {
+    if (editingIndex !== null && editValue.trim()) {
+      onRenameStep(editingIndex, editValue.trim());
+    }
+    setEditingIndex(null);
+    setEditValue("");
+  };
+  const handleCancelEdit = () => {
+    setEditingIndex(null);
+    setEditValue("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleConfirmEdit();
+    } else if (e.key === "Escape") {
+      handleCancelEdit();
+    }
+  };
+  if (hideStepControls) {
+    return null;
+  }
+  if (steps.length <= 1) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: onAddStep,
+          className: "gap-1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+            "Add Step"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
+    steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
+          activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
+        ),
+        children: editingIndex === index ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              value: editValue,
+              onChange: (e) => setEditValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              className: "h-6 w-24 text-sm px-1",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleConfirmEdit,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleCancelEdit,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onActiveStepChange(index),
+              className: "text-sm font-medium",
+              children: step.title
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: utils.cn(
+                "flex items-center gap-0.5 ml-1",
+                activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: utils.cn(
+                      "h-5 w-5",
+                      activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
+                    ),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleStartEdit(index, step.title);
+                    },
+                    title: "Rename step",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: utils.cn(
+                      "h-5 w-5",
+                      activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
+                    ),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onDeleteStep(index);
+                    },
+                    title: "Delete step",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      },
+      step.id
+    )),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: onAddStep,
+        className: "gap-1 h-8",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+          "Add Step"
+        ]
+      }
+    )
+  ] });
+}
+
+exports.StepTabs = StepTabs;

package/dist/packages/ui/src/components/form-builder/step-tabs.mjs

@@ -0,0 +1,178 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Plus, Check, X, Pencil, Trash2 } from 'lucide-react';
+import { cn } from '../../lib/utils.mjs';
+import { Button } from '../button.mjs';
+import { Input } from '../input.mjs';
+
+function StepTabs({
+  steps,
+  activeStepIndex,
+  onActiveStepChange,
+  onAddStep,
+  onDeleteStep,
+  onRenameStep,
+  className,
+  hideStepControls
+}) {
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [editValue, setEditValue] = useState("");
+  const handleStartEdit = (index, currentTitle) => {
+    setEditingIndex(index);
+    setEditValue(currentTitle);
+  };
+  const handleConfirmEdit = () => {
+    if (editingIndex !== null && editValue.trim()) {
+      onRenameStep(editingIndex, editValue.trim());
+    }
+    setEditingIndex(null);
+    setEditValue("");
+  };
+  const handleCancelEdit = () => {
+    setEditingIndex(null);
+    setEditValue("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleConfirmEdit();
+    } else if (e.key === "Escape") {
+      handleCancelEdit();
+    }
+  };
+  if (hideStepControls) {
+    return null;
+  }
+  if (steps.length <= 1) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 mb-4", className), children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: onAddStep,
+          className: "gap-1",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            "Add Step"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
+    steps.map((step, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
+          activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
+        ),
+        children: editingIndex === index ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: editValue,
+              onChange: (e) => setEditValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              className: "h-6 w-24 text-sm px-1",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleConfirmEdit,
+              children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleCancelEdit,
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onActiveStepChange(index),
+              className: "text-sm font-medium",
+              children: step.title
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-0.5 ml-1",
+                activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn(
+                      "h-5 w-5",
+                      activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
+                    ),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleStartEdit(index, step.title);
+                    },
+                    title: "Rename step",
+                    children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn(
+                      "h-5 w-5",
+                      activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
+                    ),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onDeleteStep(index);
+                    },
+                    title: "Delete step",
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      },
+      step.id
+    )),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: onAddStep,
+        className: "gap-1 h-8",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+          "Add Step"
+        ]
+      }
+    )
+  ] });
+}
+
+export { StepTabs };

package/dist/packages/ui/src/components/form-builder/types.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+function defineComponent(def) {
+  return def;
+}
+
+exports.defineComponent = defineComponent;

package/dist/packages/ui/src/components/form-builder/types.mjs

@@ -0,0 +1,5 @@
+function defineComponent(def) {
+  return def;
+}
+
+export { defineComponent };