@btst/components 0.0.0-stage → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (161) hide show
  1. package/LICENSE.md +17 -0
  2. package/dist/_private/ui/styles/markdown-editor.css +31 -0
  3. package/dist/auto-form/index.cjs +8 -0
  4. package/dist/auto-form/index.d.cts +26 -0
  5. package/dist/auto-form/index.d.mts +26 -0
  6. package/dist/auto-form/index.d.ts +26 -0
  7. package/dist/auto-form/index.mjs +1 -0
  8. package/dist/empty/index.cjs +12 -0
  9. package/dist/empty/index.d.cts +15 -0
  10. package/dist/empty/index.d.mts +15 -0
  11. package/dist/empty/index.d.ts +15 -0
  12. package/dist/empty/index.mjs +1 -0
  13. package/dist/form-builder/index.cjs +16 -0
  14. package/dist/form-builder/index.d.cts +395 -0
  15. package/dist/form-builder/index.d.mts +395 -0
  16. package/dist/form-builder/index.d.ts +395 -0
  17. package/dist/form-builder/index.mjs +4 -0
  18. package/dist/markdown/index.cjs +9 -0
  19. package/dist/markdown/index.d.cts +46 -0
  20. package/dist/markdown/index.d.mts +46 -0
  21. package/dist/markdown/index.d.ts +46 -0
  22. package/dist/markdown/index.mjs +2 -0
  23. package/dist/multi-select/index.cjs +7 -0
  24. package/dist/multi-select/index.d.cts +78 -0
  25. package/dist/multi-select/index.d.mts +78 -0
  26. package/dist/multi-select/index.d.ts +78 -0
  27. package/dist/multi-select/index.mjs +1 -0
  28. package/dist/search-select/index.cjs +7 -0
  29. package/dist/search-select/index.d.cts +16 -0
  30. package/dist/search-select/index.d.mts +16 -0
  31. package/dist/search-select/index.d.ts +16 -0
  32. package/dist/search-select/index.mjs +1 -0
  33. package/dist/shared/components.BdvBiegH.d.cts +291 -0
  34. package/dist/shared/components.BdvBiegH.d.mts +291 -0
  35. package/dist/shared/components.BdvBiegH.d.ts +291 -0
  36. package/dist/shared/components.CZMWR72v.d.cts +10 -0
  37. package/dist/shared/components.CZMWR72v.d.mts +10 -0
  38. package/dist/shared/components.CZMWR72v.d.ts +10 -0
  39. package/dist/stepped-auto-form/index.cjs +7 -0
  40. package/dist/stepped-auto-form/index.d.cts +37 -0
  41. package/dist/stepped-auto-form/index.d.mts +37 -0
  42. package/dist/stepped-auto-form/index.d.ts +37 -0
  43. package/dist/stepped-auto-form/index.mjs +1 -0
  44. package/dist/style.css +440 -0
  45. package/dist/ui/src/components/accordion.cjs +81 -0
  46. package/dist/ui/src/components/accordion.mjs +62 -0
  47. package/dist/ui/src/components/auto-form/common/label.cjs +18 -0
  48. package/dist/ui/src/components/auto-form/common/label.mjs +16 -0
  49. package/dist/ui/src/components/auto-form/common/tooltip.cjs +9 -0
  50. package/dist/ui/src/components/auto-form/common/tooltip.mjs +7 -0
  51. package/dist/ui/src/components/auto-form/config.cjs +40 -0
  52. package/dist/ui/src/components/auto-form/config.mjs +37 -0
  53. package/dist/ui/src/components/auto-form/dependencies.cjs +48 -0
  54. package/dist/ui/src/components/auto-form/dependencies.mjs +46 -0
  55. package/dist/ui/src/components/auto-form/fields/array.cjs +266 -0
  56. package/dist/ui/src/components/auto-form/fields/array.mjs +264 -0
  57. package/dist/ui/src/components/auto-form/fields/checkbox.cjs +38 -0
  58. package/dist/ui/src/components/auto-form/fields/checkbox.mjs +36 -0
  59. package/dist/ui/src/components/auto-form/fields/date.cjs +67 -0
  60. package/dist/ui/src/components/auto-form/fields/date.mjs +65 -0
  61. package/dist/ui/src/components/auto-form/fields/enum.cjs +73 -0
  62. package/dist/ui/src/components/auto-form/fields/enum.mjs +71 -0
  63. package/dist/ui/src/components/auto-form/fields/input.cjs +32 -0
  64. package/dist/ui/src/components/auto-form/fields/input.mjs +30 -0
  65. package/dist/ui/src/components/auto-form/fields/number.cjs +31 -0
  66. package/dist/ui/src/components/auto-form/fields/number.mjs +29 -0
  67. package/dist/ui/src/components/auto-form/fields/object.cjs +233 -0
  68. package/dist/ui/src/components/auto-form/fields/object.mjs +217 -0
  69. package/dist/ui/src/components/auto-form/fields/radio-group.cjs +67 -0
  70. package/dist/ui/src/components/auto-form/fields/radio-group.mjs +65 -0
  71. package/dist/ui/src/components/auto-form/fields/switch.cjs +38 -0
  72. package/dist/ui/src/components/auto-form/fields/switch.mjs +36 -0
  73. package/dist/ui/src/components/auto-form/fields/textarea.cjs +31 -0
  74. package/dist/ui/src/components/auto-form/fields/textarea.mjs +29 -0
  75. package/dist/ui/src/components/auto-form/helpers.cjs +270 -0
  76. package/dist/ui/src/components/auto-form/helpers.mjs +259 -0
  77. package/dist/ui/src/components/auto-form/index.cjs +102 -0
  78. package/dist/ui/src/components/auto-form/index.mjs +93 -0
  79. package/dist/ui/src/components/auto-form/stepped-auto-form.cjs +374 -0
  80. package/dist/ui/src/components/auto-form/stepped-auto-form.mjs +368 -0
  81. package/dist/ui/src/components/auto-form/types.cjs +11 -0
  82. package/dist/ui/src/components/auto-form/types.mjs +9 -0
  83. package/dist/ui/src/components/badge.cjs +42 -0
  84. package/dist/ui/src/components/badge.mjs +39 -0
  85. package/dist/ui/src/components/button.cjs +56 -0
  86. package/dist/ui/src/components/button.mjs +53 -0
  87. package/dist/ui/src/components/calendar.cjs +207 -0
  88. package/dist/ui/src/components/calendar.mjs +190 -0
  89. package/dist/ui/src/components/checkbox.cjs +48 -0
  90. package/dist/ui/src/components/checkbox.mjs +32 -0
  91. package/dist/ui/src/components/command.cjs +118 -0
  92. package/dist/ui/src/components/command.mjs +111 -0
  93. package/dist/ui/src/components/date-picker.cjs +41 -0
  94. package/dist/ui/src/components/date-picker.mjs +39 -0
  95. package/dist/ui/src/components/dialog.cjs +141 -0
  96. package/dist/ui/src/components/dialog.mjs +118 -0
  97. package/dist/ui/src/components/empty.cjs +104 -0
  98. package/dist/ui/src/components/empty.mjs +97 -0
  99. package/dist/ui/src/components/form-builder/canvas.cjs +111 -0
  100. package/dist/ui/src/components/form-builder/canvas.mjs +109 -0
  101. package/dist/ui/src/components/form-builder/components/index.cjs +571 -0
  102. package/dist/ui/src/components/form-builder/components/index.mjs +554 -0
  103. package/dist/ui/src/components/form-builder/edit-field-dialog.cjs +131 -0
  104. package/dist/ui/src/components/form-builder/edit-field-dialog.mjs +129 -0
  105. package/dist/ui/src/components/form-builder/form-preview.cjs +73 -0
  106. package/dist/ui/src/components/form-builder/form-preview.mjs +71 -0
  107. package/dist/ui/src/components/form-builder/index.cjs +350 -0
  108. package/dist/ui/src/components/form-builder/index.mjs +344 -0
  109. package/dist/ui/src/components/form-builder/nested-field-editor-dialog.cjs +263 -0
  110. package/dist/ui/src/components/form-builder/nested-field-editor-dialog.mjs +261 -0
  111. package/dist/ui/src/components/form-builder/palette.cjs +52 -0
  112. package/dist/ui/src/components/form-builder/palette.mjs +49 -0
  113. package/dist/ui/src/components/form-builder/schema-utils.cjs +128 -0
  114. package/dist/ui/src/components/form-builder/schema-utils.mjs +122 -0
  115. package/dist/ui/src/components/form-builder/sortable-field.cjs +151 -0
  116. package/dist/ui/src/components/form-builder/sortable-field.mjs +148 -0
  117. package/dist/ui/src/components/form-builder/step-tabs.cjs +180 -0
  118. package/dist/ui/src/components/form-builder/step-tabs.mjs +178 -0
  119. package/dist/ui/src/components/form-builder/types.cjs +7 -0
  120. package/dist/ui/src/components/form-builder/types.mjs +5 -0
  121. package/dist/ui/src/components/form-builder/validation-schemas.cjs +67 -0
  122. package/dist/ui/src/components/form-builder/validation-schemas.mjs +56 -0
  123. package/dist/ui/src/components/form.cjs +120 -0
  124. package/dist/ui/src/components/form.mjs +98 -0
  125. package/dist/ui/src/components/input.cjs +23 -0
  126. package/dist/ui/src/components/input.mjs +21 -0
  127. package/dist/ui/src/components/label.cjs +39 -0
  128. package/dist/ui/src/components/label.mjs +23 -0
  129. package/dist/ui/src/components/markdown-content.cjs +334 -0
  130. package/dist/ui/src/components/markdown-content.mjs +325 -0
  131. package/dist/ui/src/components/markdown-editor.cjs +180 -0
  132. package/dist/ui/src/components/markdown-editor.mjs +178 -0
  133. package/dist/ui/src/components/multi-select.cjs +555 -0
  134. package/dist/ui/src/components/multi-select.mjs +540 -0
  135. package/dist/ui/src/components/popover.cjs +60 -0
  136. package/dist/ui/src/components/popover.mjs +42 -0
  137. package/dist/ui/src/components/radio-group.cjs +62 -0
  138. package/dist/ui/src/components/radio-group.mjs +45 -0
  139. package/dist/ui/src/components/search-select.cjs +99 -0
  140. package/dist/ui/src/components/search-select.mjs +83 -0
  141. package/dist/ui/src/components/select.cjs +161 -0
  142. package/dist/ui/src/components/select.mjs +139 -0
  143. package/dist/ui/src/components/separator.cjs +43 -0
  144. package/dist/ui/src/components/separator.mjs +27 -0
  145. package/dist/ui/src/components/switch.cjs +48 -0
  146. package/dist/ui/src/components/switch.mjs +32 -0
  147. package/dist/ui/src/components/tabs.cjs +84 -0
  148. package/dist/ui/src/components/tabs.mjs +65 -0
  149. package/dist/ui/src/components/textarea.cjs +20 -0
  150. package/dist/ui/src/components/textarea.mjs +18 -0
  151. package/dist/ui/src/hooks/use-debounce.cjs +16 -0
  152. package/dist/ui/src/hooks/use-debounce.mjs +14 -0
  153. package/dist/ui/src/lib/schema-converter.cjs +94 -0
  154. package/dist/ui/src/lib/schema-converter.mjs +92 -0
  155. package/dist/ui/src/lib/throttle.cjs +56 -0
  156. package/dist/ui/src/lib/throttle.mjs +54 -0
  157. package/dist/ui/src/lib/utils.cjs +10 -0
  158. package/dist/ui/src/lib/utils.mjs +8 -0
  159. package/dist/ui.css +131 -0
  160. package/package.json +176 -3
  161. package/README.md +0 -3
@@ -0,0 +1,151 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ const jsxRuntime = require('react/jsx-runtime');
5
+ const sortable = require('@dnd-kit/sortable');
6
+ const utilities = require('@dnd-kit/utilities');
7
+ const lucideReact = require('lucide-react');
8
+ const utils = require('../../lib/utils.cjs');
9
+ const button = require('../button.cjs');
10
+
11
+ function SortableField({
12
+ field,
13
+ index,
14
+ component,
15
+ onEdit,
16
+ onDelete,
17
+ onConfigureNested
18
+ }) {
19
+ const {
20
+ attributes,
21
+ listeners,
22
+ setNodeRef,
23
+ transform,
24
+ transition,
25
+ isDragging
26
+ } = sortable.useSortable({
27
+ id: field.id,
28
+ data: {
29
+ type: "field",
30
+ fieldId: field.id,
31
+ index
32
+ }
33
+ });
34
+ const style = {
35
+ transform: utilities.CSS.Transform.toString(transform),
36
+ transition
37
+ };
38
+ const Icon = component?.icon;
39
+ const isContainerField = field.type === "object" || field.type === "array";
40
+ const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
41
+ return /* @__PURE__ */ jsxRuntime.jsxs(
42
+ "div",
43
+ {
44
+ ref: setNodeRef,
45
+ style,
46
+ className: utils.cn(
47
+ "group flex items-center gap-2 p-3 rounded-lg border bg-card",
48
+ "transition-all duration-200",
49
+ isDragging && "opacity-50 shadow-lg z-50",
50
+ !isDragging && "hover:border-muted-foreground/30"
51
+ ),
52
+ children: [
53
+ /* @__PURE__ */ jsxRuntime.jsx(
54
+ "div",
55
+ {
56
+ ...attributes,
57
+ ...listeners,
58
+ className: utils.cn(
59
+ "flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
60
+ "hover:bg-muted touch-none",
61
+ "min-w-[44px] min-h-[44px] -m-1"
62
+ ),
63
+ onClick: (e) => e.stopPropagation(),
64
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4 text-muted-foreground" })
65
+ }
66
+ ),
67
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
68
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
69
+ Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
70
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium truncate", children: field.props.label }),
71
+ field.props.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive text-sm", children: "*" }),
72
+ isContainerField && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
73
+ nestedFieldCount,
74
+ " ",
75
+ nestedFieldCount === 1 ? "field" : "fields"
76
+ ] })
77
+ ] }),
78
+ field.props.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
79
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
80
+ ] }),
81
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
82
+ isContainerField && onConfigureNested && /* @__PURE__ */ jsxRuntime.jsx(
83
+ button.Button,
84
+ {
85
+ variant: "ghost",
86
+ size: "icon",
87
+ className: utils.cn(
88
+ "h-8 w-8 text-muted-foreground hover:text-primary",
89
+ "opacity-0 group-hover:opacity-100 transition-opacity",
90
+ "min-w-[44px] min-h-[44px]"
91
+ ),
92
+ onClick: (e) => {
93
+ e.stopPropagation();
94
+ onConfigureNested();
95
+ },
96
+ title: "Configure nested fields",
97
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "h-4 w-4" })
98
+ }
99
+ ),
100
+ /* @__PURE__ */ jsxRuntime.jsx(
101
+ button.Button,
102
+ {
103
+ variant: "ghost",
104
+ size: "icon",
105
+ className: utils.cn(
106
+ "h-8 w-8 text-muted-foreground hover:text-primary",
107
+ "opacity-0 group-hover:opacity-100 transition-opacity",
108
+ "min-w-[44px] min-h-[44px]"
109
+ ),
110
+ onClick: (e) => {
111
+ e.stopPropagation();
112
+ onEdit();
113
+ },
114
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
115
+ }
116
+ ),
117
+ /* @__PURE__ */ jsxRuntime.jsx(
118
+ button.Button,
119
+ {
120
+ variant: "ghost",
121
+ size: "icon",
122
+ className: utils.cn(
123
+ "h-8 w-8 text-muted-foreground hover:text-destructive",
124
+ "opacity-0 group-hover:opacity-100 transition-opacity",
125
+ "min-w-[44px] min-h-[44px]"
126
+ ),
127
+ onClick: (e) => {
128
+ e.stopPropagation();
129
+ onDelete();
130
+ },
131
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
132
+ }
133
+ )
134
+ ] })
135
+ ]
136
+ }
137
+ );
138
+ }
139
+ function FieldDragOverlay({ field, component }) {
140
+ const Icon = component?.icon;
141
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
142
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
143
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
144
+ Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
145
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium truncate", children: field.props.label })
146
+ ] }) })
147
+ ] });
148
+ }
149
+
150
+ exports.FieldDragOverlay = FieldDragOverlay;
151
+ exports.SortableField = SortableField;
@@ -0,0 +1,148 @@
1
+ 'use client';
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import { useSortable } from '@dnd-kit/sortable';
4
+ import { CSS } from '@dnd-kit/utilities';
5
+ import { GripVertical, Settings2, Pencil, Trash2 } from 'lucide-react';
6
+ import { cn } from '../../lib/utils.mjs';
7
+ import { Button } from '../button.mjs';
8
+
9
+ function SortableField({
10
+ field,
11
+ index,
12
+ component,
13
+ onEdit,
14
+ onDelete,
15
+ onConfigureNested
16
+ }) {
17
+ const {
18
+ attributes,
19
+ listeners,
20
+ setNodeRef,
21
+ transform,
22
+ transition,
23
+ isDragging
24
+ } = useSortable({
25
+ id: field.id,
26
+ data: {
27
+ type: "field",
28
+ fieldId: field.id,
29
+ index
30
+ }
31
+ });
32
+ const style = {
33
+ transform: CSS.Transform.toString(transform),
34
+ transition
35
+ };
36
+ const Icon = component?.icon;
37
+ const isContainerField = field.type === "object" || field.type === "array";
38
+ const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
39
+ return /* @__PURE__ */ jsxs(
40
+ "div",
41
+ {
42
+ ref: setNodeRef,
43
+ style,
44
+ className: cn(
45
+ "group flex items-center gap-2 p-3 rounded-lg border bg-card",
46
+ "transition-all duration-200",
47
+ isDragging && "opacity-50 shadow-lg z-50",
48
+ !isDragging && "hover:border-muted-foreground/30"
49
+ ),
50
+ children: [
51
+ /* @__PURE__ */ jsx(
52
+ "div",
53
+ {
54
+ ...attributes,
55
+ ...listeners,
56
+ className: cn(
57
+ "flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
58
+ "hover:bg-muted touch-none",
59
+ "min-w-[44px] min-h-[44px] -m-1"
60
+ ),
61
+ onClick: (e) => e.stopPropagation(),
62
+ children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" })
63
+ }
64
+ ),
65
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
66
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
67
+ Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
68
+ /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label }),
69
+ field.props.required && /* @__PURE__ */ jsx("span", { className: "text-destructive text-sm", children: "*" }),
70
+ isContainerField && /* @__PURE__ */ jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
71
+ nestedFieldCount,
72
+ " ",
73
+ nestedFieldCount === 1 ? "field" : "fields"
74
+ ] })
75
+ ] }),
76
+ field.props.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
77
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
78
+ ] }),
79
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
80
+ isContainerField && onConfigureNested && /* @__PURE__ */ jsx(
81
+ Button,
82
+ {
83
+ variant: "ghost",
84
+ size: "icon",
85
+ className: cn(
86
+ "h-8 w-8 text-muted-foreground hover:text-primary",
87
+ "opacity-0 group-hover:opacity-100 transition-opacity",
88
+ "min-w-[44px] min-h-[44px]"
89
+ ),
90
+ onClick: (e) => {
91
+ e.stopPropagation();
92
+ onConfigureNested();
93
+ },
94
+ title: "Configure nested fields",
95
+ children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" })
96
+ }
97
+ ),
98
+ /* @__PURE__ */ jsx(
99
+ Button,
100
+ {
101
+ variant: "ghost",
102
+ size: "icon",
103
+ className: cn(
104
+ "h-8 w-8 text-muted-foreground hover:text-primary",
105
+ "opacity-0 group-hover:opacity-100 transition-opacity",
106
+ "min-w-[44px] min-h-[44px]"
107
+ ),
108
+ onClick: (e) => {
109
+ e.stopPropagation();
110
+ onEdit();
111
+ },
112
+ children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
113
+ }
114
+ ),
115
+ /* @__PURE__ */ jsx(
116
+ Button,
117
+ {
118
+ variant: "ghost",
119
+ size: "icon",
120
+ className: cn(
121
+ "h-8 w-8 text-muted-foreground hover:text-destructive",
122
+ "opacity-0 group-hover:opacity-100 transition-opacity",
123
+ "min-w-[44px] min-h-[44px]"
124
+ ),
125
+ onClick: (e) => {
126
+ e.stopPropagation();
127
+ onDelete();
128
+ },
129
+ children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
130
+ }
131
+ )
132
+ ] })
133
+ ]
134
+ }
135
+ );
136
+ }
137
+ function FieldDragOverlay({ field, component }) {
138
+ const Icon = component?.icon;
139
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
140
+ /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
141
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
142
+ Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
143
+ /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label })
144
+ ] }) })
145
+ ] });
146
+ }
147
+
148
+ export { FieldDragOverlay, SortableField };
@@ -0,0 +1,180 @@
1
+ 'use client';
2
+ 'use strict';
3
+
4
+ const jsxRuntime = require('react/jsx-runtime');
5
+ const React = require('react');
6
+ const lucideReact = require('lucide-react');
7
+ const utils = require('../../lib/utils.cjs');
8
+ const button = require('../button.cjs');
9
+ const input = require('../input.cjs');
10
+
11
+ function StepTabs({
12
+ steps,
13
+ activeStepIndex,
14
+ onActiveStepChange,
15
+ onAddStep,
16
+ onDeleteStep,
17
+ onRenameStep,
18
+ className,
19
+ hideStepControls
20
+ }) {
21
+ const [editingIndex, setEditingIndex] = React.useState(null);
22
+ const [editValue, setEditValue] = React.useState("");
23
+ const handleStartEdit = (index, currentTitle) => {
24
+ setEditingIndex(index);
25
+ setEditValue(currentTitle);
26
+ };
27
+ const handleConfirmEdit = () => {
28
+ if (editingIndex !== null && editValue.trim()) {
29
+ onRenameStep(editingIndex, editValue.trim());
30
+ }
31
+ setEditingIndex(null);
32
+ setEditValue("");
33
+ };
34
+ const handleCancelEdit = () => {
35
+ setEditingIndex(null);
36
+ setEditValue("");
37
+ };
38
+ const handleKeyDown = (e) => {
39
+ if (e.key === "Enter") {
40
+ handleConfirmEdit();
41
+ } else if (e.key === "Escape") {
42
+ handleCancelEdit();
43
+ }
44
+ };
45
+ if (hideStepControls) {
46
+ return null;
47
+ }
48
+ if (steps.length <= 1) {
49
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4", className), children: [
50
+ /* @__PURE__ */ jsxRuntime.jsxs(
51
+ button.Button,
52
+ {
53
+ variant: "outline",
54
+ size: "sm",
55
+ onClick: onAddStep,
56
+ className: "gap-1",
57
+ children: [
58
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
59
+ "Add Step"
60
+ ]
61
+ }
62
+ ),
63
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
64
+ ] });
65
+ }
66
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
67
+ steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
68
+ "div",
69
+ {
70
+ className: utils.cn(
71
+ "group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
72
+ activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
73
+ ),
74
+ children: editingIndex === index ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
75
+ /* @__PURE__ */ jsxRuntime.jsx(
76
+ input.Input,
77
+ {
78
+ value: editValue,
79
+ onChange: (e) => setEditValue(e.target.value),
80
+ onKeyDown: handleKeyDown,
81
+ className: "h-6 w-24 text-sm px-1",
82
+ autoFocus: true
83
+ }
84
+ ),
85
+ /* @__PURE__ */ jsxRuntime.jsx(
86
+ button.Button,
87
+ {
88
+ variant: "ghost",
89
+ size: "icon",
90
+ className: "h-6 w-6",
91
+ onClick: handleConfirmEdit,
92
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
93
+ }
94
+ ),
95
+ /* @__PURE__ */ jsxRuntime.jsx(
96
+ button.Button,
97
+ {
98
+ variant: "ghost",
99
+ size: "icon",
100
+ className: "h-6 w-6",
101
+ onClick: handleCancelEdit,
102
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
103
+ }
104
+ )
105
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
106
+ /* @__PURE__ */ jsxRuntime.jsx(
107
+ "button",
108
+ {
109
+ type: "button",
110
+ onClick: () => onActiveStepChange(index),
111
+ className: "text-sm font-medium",
112
+ children: step.title
113
+ }
114
+ ),
115
+ /* @__PURE__ */ jsxRuntime.jsxs(
116
+ "div",
117
+ {
118
+ className: utils.cn(
119
+ "flex items-center gap-0.5 ml-1",
120
+ activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
121
+ ),
122
+ children: [
123
+ /* @__PURE__ */ jsxRuntime.jsx(
124
+ button.Button,
125
+ {
126
+ variant: "ghost",
127
+ size: "icon",
128
+ className: utils.cn(
129
+ "h-5 w-5",
130
+ activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
131
+ ),
132
+ onClick: (e) => {
133
+ e.stopPropagation();
134
+ handleStartEdit(index, step.title);
135
+ },
136
+ title: "Rename step",
137
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3 w-3" })
138
+ }
139
+ ),
140
+ /* @__PURE__ */ jsxRuntime.jsx(
141
+ button.Button,
142
+ {
143
+ variant: "ghost",
144
+ size: "icon",
145
+ className: utils.cn(
146
+ "h-5 w-5",
147
+ activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
148
+ ),
149
+ onClick: (e) => {
150
+ e.stopPropagation();
151
+ onDeleteStep(index);
152
+ },
153
+ title: "Delete step",
154
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
155
+ }
156
+ )
157
+ ]
158
+ }
159
+ )
160
+ ] })
161
+ },
162
+ step.id
163
+ )),
164
+ /* @__PURE__ */ jsxRuntime.jsxs(
165
+ button.Button,
166
+ {
167
+ variant: "outline",
168
+ size: "sm",
169
+ onClick: onAddStep,
170
+ className: "gap-1 h-8",
171
+ children: [
172
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
173
+ "Add Step"
174
+ ]
175
+ }
176
+ )
177
+ ] });
178
+ }
179
+
180
+ exports.StepTabs = StepTabs;
@@ -0,0 +1,178 @@
1
+ 'use client';
2
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
+ import { useState } from 'react';
4
+ import { Plus, Check, X, Pencil, Trash2 } from 'lucide-react';
5
+ import { cn } from '../../lib/utils.mjs';
6
+ import { Button } from '../button.mjs';
7
+ import { Input } from '../input.mjs';
8
+
9
+ function StepTabs({
10
+ steps,
11
+ activeStepIndex,
12
+ onActiveStepChange,
13
+ onAddStep,
14
+ onDeleteStep,
15
+ onRenameStep,
16
+ className,
17
+ hideStepControls
18
+ }) {
19
+ const [editingIndex, setEditingIndex] = useState(null);
20
+ const [editValue, setEditValue] = useState("");
21
+ const handleStartEdit = (index, currentTitle) => {
22
+ setEditingIndex(index);
23
+ setEditValue(currentTitle);
24
+ };
25
+ const handleConfirmEdit = () => {
26
+ if (editingIndex !== null && editValue.trim()) {
27
+ onRenameStep(editingIndex, editValue.trim());
28
+ }
29
+ setEditingIndex(null);
30
+ setEditValue("");
31
+ };
32
+ const handleCancelEdit = () => {
33
+ setEditingIndex(null);
34
+ setEditValue("");
35
+ };
36
+ const handleKeyDown = (e) => {
37
+ if (e.key === "Enter") {
38
+ handleConfirmEdit();
39
+ } else if (e.key === "Escape") {
40
+ handleCancelEdit();
41
+ }
42
+ };
43
+ if (hideStepControls) {
44
+ return null;
45
+ }
46
+ if (steps.length <= 1) {
47
+ return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 mb-4", className), children: [
48
+ /* @__PURE__ */ jsxs(
49
+ Button,
50
+ {
51
+ variant: "outline",
52
+ size: "sm",
53
+ onClick: onAddStep,
54
+ className: "gap-1",
55
+ children: [
56
+ /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
57
+ "Add Step"
58
+ ]
59
+ }
60
+ ),
61
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Add a step to create a multi-step form" })
62
+ ] });
63
+ }
64
+ return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 mb-4 flex-wrap", className), children: [
65
+ steps.map((step, index) => /* @__PURE__ */ jsx(
66
+ "div",
67
+ {
68
+ className: cn(
69
+ "group flex items-center gap-1 px-3 py-1.5 rounded-md border transition-colors",
70
+ activeStepIndex === index ? "bg-primary text-primary-foreground border-primary" : "bg-card hover:bg-muted border-border"
71
+ ),
72
+ children: editingIndex === index ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
73
+ /* @__PURE__ */ jsx(
74
+ Input,
75
+ {
76
+ value: editValue,
77
+ onChange: (e) => setEditValue(e.target.value),
78
+ onKeyDown: handleKeyDown,
79
+ className: "h-6 w-24 text-sm px-1",
80
+ autoFocus: true
81
+ }
82
+ ),
83
+ /* @__PURE__ */ jsx(
84
+ Button,
85
+ {
86
+ variant: "ghost",
87
+ size: "icon",
88
+ className: "h-6 w-6",
89
+ onClick: handleConfirmEdit,
90
+ children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
91
+ }
92
+ ),
93
+ /* @__PURE__ */ jsx(
94
+ Button,
95
+ {
96
+ variant: "ghost",
97
+ size: "icon",
98
+ className: "h-6 w-6",
99
+ onClick: handleCancelEdit,
100
+ children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
101
+ }
102
+ )
103
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
104
+ /* @__PURE__ */ jsx(
105
+ "button",
106
+ {
107
+ type: "button",
108
+ onClick: () => onActiveStepChange(index),
109
+ className: "text-sm font-medium",
110
+ children: step.title
111
+ }
112
+ ),
113
+ /* @__PURE__ */ jsxs(
114
+ "div",
115
+ {
116
+ className: cn(
117
+ "flex items-center gap-0.5 ml-1",
118
+ activeStepIndex === index ? "opacity-70 hover:opacity-100" : "opacity-0 group-hover:opacity-100"
119
+ ),
120
+ children: [
121
+ /* @__PURE__ */ jsx(
122
+ Button,
123
+ {
124
+ variant: "ghost",
125
+ size: "icon",
126
+ className: cn(
127
+ "h-5 w-5",
128
+ activeStepIndex === index ? "hover:bg-primary-foreground/20 text-primary-foreground" : "hover:bg-muted-foreground/20"
129
+ ),
130
+ onClick: (e) => {
131
+ e.stopPropagation();
132
+ handleStartEdit(index, step.title);
133
+ },
134
+ title: "Rename step",
135
+ children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
136
+ }
137
+ ),
138
+ /* @__PURE__ */ jsx(
139
+ Button,
140
+ {
141
+ variant: "ghost",
142
+ size: "icon",
143
+ className: cn(
144
+ "h-5 w-5",
145
+ activeStepIndex === index ? "hover:bg-destructive/20 text-primary-foreground" : "hover:bg-destructive/20 hover:text-destructive"
146
+ ),
147
+ onClick: (e) => {
148
+ e.stopPropagation();
149
+ onDeleteStep(index);
150
+ },
151
+ title: "Delete step",
152
+ children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
153
+ }
154
+ )
155
+ ]
156
+ }
157
+ )
158
+ ] })
159
+ },
160
+ step.id
161
+ )),
162
+ /* @__PURE__ */ jsxs(
163
+ Button,
164
+ {
165
+ variant: "outline",
166
+ size: "sm",
167
+ onClick: onAddStep,
168
+ className: "gap-1 h-8",
169
+ children: [
170
+ /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
171
+ "Add Step"
172
+ ]
173
+ }
174
+ )
175
+ ] });
176
+ }
177
+
178
+ export { StepTabs };
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ function defineComponent(def) {
4
+ return def;
5
+ }
6
+
7
+ exports.defineComponent = defineComponent;
@@ -0,0 +1,5 @@
1
+ function defineComponent(def) {
2
+ return def;
3
+ }
4
+
5
+ export { defineComponent };