config-driven-form 1.3.0 → 1.4.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 (7) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +373 -118
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +373 -118
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +13 -4
package/dist/index.d.mts CHANGED
@@ -17,6 +17,7 @@ interface JSONSchema {
17
17
  enum?: any[];
18
18
  items?: JSONSchema | JSONSchema[];
19
19
  default?: any;
20
+ errorMessage?: string | Record<string, string>;
20
21
  }
21
22
  interface FormClassNames {
22
23
  container?: string;
package/dist/index.d.ts CHANGED
@@ -17,6 +17,7 @@ interface JSONSchema {
17
17
  enum?: any[];
18
18
  items?: JSONSchema | JSONSchema[];
19
19
  default?: any;
20
+ errorMessage?: string | Record<string, string>;
20
21
  }
21
22
  interface FormClassNames {
22
23
  container?: string;
package/dist/index.js CHANGED
@@ -38,6 +38,14 @@ var TextField = ({ name, schema, uiSchema, isRequired }) => {
38
38
  schema.title || name,
39
39
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
40
40
  ] }),
41
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
42
+ "p",
43
+ {
44
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
45
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
46
+ children: schema.description
47
+ }
48
+ ),
41
49
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
42
50
  "input",
43
51
  {
@@ -80,6 +88,14 @@ var PasswordField = ({
80
88
  schema.title || name,
81
89
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
82
90
  ] }),
91
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
92
+ "p",
93
+ {
94
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
95
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
96
+ children: schema.description
97
+ }
98
+ ),
83
99
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-input-wrapper", children: [
84
100
  /* @__PURE__ */ jsxRuntime.jsx(
85
101
  "input",
@@ -129,6 +145,14 @@ var NumberField = ({ name, schema, uiSchema, isRequired }) => {
129
145
  schema.title || name,
130
146
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
131
147
  ] }),
148
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
149
+ "p",
150
+ {
151
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
152
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
153
+ children: schema.description
154
+ }
155
+ ),
132
156
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
133
157
  "input",
134
158
  {
@@ -186,6 +210,14 @@ var RichTextField = ({
186
210
  schema.title || name,
187
211
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
188
212
  ] }),
213
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
214
+ "p",
215
+ {
216
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
217
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
218
+ children: schema.description
219
+ }
220
+ ),
189
221
  /* @__PURE__ */ jsxRuntime.jsxs(
190
222
  "div",
191
223
  {
@@ -267,6 +299,14 @@ var SelectField = ({ name, schema, uiSchema, isRequired }) => {
267
299
  schema.title || name,
268
300
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
269
301
  ] }),
302
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
303
+ "p",
304
+ {
305
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
306
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
307
+ children: schema.description
308
+ }
309
+ ),
270
310
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
271
311
  "select",
272
312
  {
@@ -322,6 +362,14 @@ var RadioField = ({ name, schema, uiSchema, isRequired }) => {
322
362
  schema.title || name,
323
363
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
324
364
  ] }),
365
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
366
+ "p",
367
+ {
368
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
369
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
370
+ children: schema.description
371
+ }
372
+ ),
325
373
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("cdf-radio-group", globalClasses.radioGroup, localClasses.radioGroup), children: (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
326
374
  "label",
327
375
  {
@@ -456,6 +504,14 @@ var CheckboxGroupField = ({
456
504
  schema.title || name,
457
505
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
458
506
  ] }),
507
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
508
+ "p",
509
+ {
510
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
511
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
512
+ children: schema.description
513
+ }
514
+ ),
459
515
  /* @__PURE__ */ jsxRuntime.jsx(
460
516
  "div",
461
517
  {
@@ -544,6 +600,14 @@ var FileField = ({ name, schema, uiSchema, isRequired }) => {
544
600
  schema.title || name,
545
601
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
546
602
  ] }),
603
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
604
+ "p",
605
+ {
606
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
607
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
608
+ children: schema.description
609
+ }
610
+ ),
547
611
  /* @__PURE__ */ jsxRuntime.jsxs(
548
612
  "div",
549
613
  {
@@ -1123,10 +1187,7 @@ var Canvas = ({
1123
1187
  flex: 1,
1124
1188
  padding: "2rem",
1125
1189
  backgroundColor: "#f3f4f6",
1126
- overflowY: "auto",
1127
- display: "flex",
1128
- flexDirection: "column",
1129
- alignItems: "center"
1190
+ overflowY: "auto"
1130
1191
  },
1131
1192
  onClick: () => onSelectField(""),
1132
1193
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1134,6 +1195,8 @@ var Canvas = ({
1134
1195
  {
1135
1196
  ref: setNodeRef,
1136
1197
  style: {
1198
+ margin: "0 auto",
1199
+ height: "fit-content",
1137
1200
  width: "100%",
1138
1201
  maxWidth: "800px",
1139
1202
  minHeight: "400px",
@@ -1397,6 +1460,25 @@ var PropertiesPanel = ({
1397
1460
  [element]: value
1398
1461
  });
1399
1462
  };
1463
+ const handleErrorMessageChange = (errorKey, message) => {
1464
+ const currentMessages = typeof field.schema.errorMessage === "object" ? field.schema.errorMessage : {};
1465
+ const newMessages = { ...currentMessages };
1466
+ if (!message) {
1467
+ delete newMessages[errorKey];
1468
+ } else {
1469
+ newMessages[errorKey] = message;
1470
+ }
1471
+ handleSchemaChange(
1472
+ "errorMessage",
1473
+ Object.keys(newMessages).length > 0 ? newMessages : void 0
1474
+ );
1475
+ };
1476
+ const getErrorMessage = (errorKey) => {
1477
+ if (typeof field.schema.errorMessage === "object") {
1478
+ return field.schema.errorMessage[errorKey] || "";
1479
+ }
1480
+ return "";
1481
+ };
1400
1482
  return /* @__PURE__ */ jsxRuntime.jsxs(
1401
1483
  "div",
1402
1484
  {
@@ -1585,135 +1667,308 @@ var PropertiesPanel = ({
1585
1667
  ] }),
1586
1668
  activeTab === "validation" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1587
1669
  /* @__PURE__ */ jsxRuntime.jsxs(
1588
- "label",
1670
+ "div",
1589
1671
  {
1590
1672
  style: {
1591
1673
  display: "flex",
1592
- alignItems: "center",
1593
- gap: "0.5rem",
1594
- fontSize: "0.875rem",
1595
- fontWeight: 500,
1596
- color: "#374151",
1597
- cursor: "pointer"
1674
+ flexDirection: "column",
1675
+ gap: "0.375rem",
1676
+ marginBottom: "1rem",
1677
+ borderBottom: "1px solid #e5e7eb",
1678
+ paddingBottom: "1rem"
1598
1679
  },
1599
1680
  children: [
1600
- /* @__PURE__ */ jsxRuntime.jsx(
1601
- "input",
1681
+ /* @__PURE__ */ jsxRuntime.jsxs(
1682
+ "label",
1602
1683
  {
1603
- type: "checkbox",
1604
- checked: field.isRequired || false,
1605
- onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
1684
+ style: {
1685
+ display: "flex",
1686
+ alignItems: "center",
1687
+ gap: "0.5rem",
1688
+ fontSize: "0.875rem",
1689
+ fontWeight: 500,
1690
+ color: "#374151",
1691
+ cursor: "pointer"
1692
+ },
1693
+ children: [
1694
+ /* @__PURE__ */ jsxRuntime.jsx(
1695
+ "input",
1696
+ {
1697
+ type: "checkbox",
1698
+ checked: field.isRequired || false,
1699
+ onChange: (e) => onUpdate(field.id, { isRequired: e.target.checked })
1700
+ }
1701
+ ),
1702
+ "Required Field"
1703
+ ]
1606
1704
  }
1607
1705
  ),
1608
- "Required Field"
1706
+ field.isRequired && /* @__PURE__ */ jsxRuntime.jsx(
1707
+ "input",
1708
+ {
1709
+ type: "text",
1710
+ placeholder: "Custom required error message",
1711
+ value: getErrorMessage("required"),
1712
+ onChange: (e) => handleErrorMessageChange("required", e.target.value),
1713
+ style: {
1714
+ width: "100%",
1715
+ padding: "0.4rem",
1716
+ border: "1px dashed #d1d5db",
1717
+ borderRadius: "0.375rem",
1718
+ fontSize: "0.75rem",
1719
+ marginTop: "0.25rem",
1720
+ backgroundColor: "#f9fafb"
1721
+ }
1722
+ }
1723
+ )
1609
1724
  ]
1610
1725
  }
1611
1726
  ),
1612
1727
  (field.type === "text" || field.type === "email" || field.type === "password") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1613
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1614
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
1615
- /* @__PURE__ */ jsxRuntime.jsx(
1616
- "input",
1617
- {
1618
- type: "number",
1619
- value: field.schema.minLength || "",
1620
- onChange: (e) => handleSchemaChange(
1621
- "minLength",
1622
- e.target.value ? Number(e.target.value) : void 0
1728
+ /* @__PURE__ */ jsxRuntime.jsxs(
1729
+ "div",
1730
+ {
1731
+ style: {
1732
+ display: "flex",
1733
+ flexDirection: "column",
1734
+ gap: "0.375rem",
1735
+ marginBottom: "0.5rem"
1736
+ },
1737
+ children: [
1738
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Min Length" }),
1739
+ /* @__PURE__ */ jsxRuntime.jsx(
1740
+ "input",
1741
+ {
1742
+ type: "number",
1743
+ value: field.schema.minLength || "",
1744
+ onChange: (e) => handleSchemaChange(
1745
+ "minLength",
1746
+ e.target.value ? Number(e.target.value) : void 0
1747
+ ),
1748
+ style: {
1749
+ width: "100%",
1750
+ padding: "0.5rem",
1751
+ border: "1px solid #d1d5db",
1752
+ borderRadius: "0.375rem",
1753
+ fontSize: "0.875rem"
1754
+ }
1755
+ }
1623
1756
  ),
1624
- style: {
1625
- width: "100%",
1626
- padding: "0.5rem",
1627
- border: "1px solid #d1d5db",
1628
- borderRadius: "0.375rem",
1629
- fontSize: "0.875rem"
1630
- }
1631
- }
1632
- )
1633
- ] }),
1634
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1635
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
1636
- /* @__PURE__ */ jsxRuntime.jsx(
1637
- "input",
1638
- {
1639
- type: "number",
1640
- value: field.schema.maxLength || "",
1641
- onChange: (e) => handleSchemaChange(
1642
- "maxLength",
1643
- e.target.value ? Number(e.target.value) : void 0
1757
+ field.schema.minLength !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1758
+ "input",
1759
+ {
1760
+ type: "text",
1761
+ placeholder: "Custom error message",
1762
+ value: getErrorMessage("minLength"),
1763
+ onChange: (e) => handleErrorMessageChange("minLength", e.target.value),
1764
+ style: {
1765
+ width: "100%",
1766
+ padding: "0.4rem",
1767
+ border: "1px dashed #d1d5db",
1768
+ borderRadius: "0.375rem",
1769
+ fontSize: "0.75rem",
1770
+ backgroundColor: "#f9fafb"
1771
+ }
1772
+ }
1773
+ )
1774
+ ]
1775
+ }
1776
+ ),
1777
+ /* @__PURE__ */ jsxRuntime.jsxs(
1778
+ "div",
1779
+ {
1780
+ style: {
1781
+ display: "flex",
1782
+ flexDirection: "column",
1783
+ gap: "0.375rem",
1784
+ marginBottom: "0.5rem"
1785
+ },
1786
+ children: [
1787
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Max Length" }),
1788
+ /* @__PURE__ */ jsxRuntime.jsx(
1789
+ "input",
1790
+ {
1791
+ type: "number",
1792
+ value: field.schema.maxLength || "",
1793
+ onChange: (e) => handleSchemaChange(
1794
+ "maxLength",
1795
+ e.target.value ? Number(e.target.value) : void 0
1796
+ ),
1797
+ style: {
1798
+ width: "100%",
1799
+ padding: "0.5rem",
1800
+ border: "1px solid #d1d5db",
1801
+ borderRadius: "0.375rem",
1802
+ fontSize: "0.875rem"
1803
+ }
1804
+ }
1644
1805
  ),
1645
- style: {
1646
- width: "100%",
1647
- padding: "0.5rem",
1648
- border: "1px solid #d1d5db",
1649
- borderRadius: "0.375rem",
1650
- fontSize: "0.875rem"
1651
- }
1652
- }
1653
- )
1654
- ] }),
1655
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1656
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
1657
- /* @__PURE__ */ jsxRuntime.jsx(
1658
- "input",
1659
- {
1660
- type: "text",
1661
- value: field.schema.pattern || "",
1662
- onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
1663
- style: {
1664
- width: "100%",
1665
- padding: "0.5rem",
1666
- border: "1px solid #d1d5db",
1667
- borderRadius: "0.375rem",
1668
- fontSize: "0.875rem"
1669
- }
1670
- }
1671
- )
1672
- ] })
1806
+ field.schema.maxLength !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1807
+ "input",
1808
+ {
1809
+ type: "text",
1810
+ placeholder: "Custom error message",
1811
+ value: getErrorMessage("maxLength"),
1812
+ onChange: (e) => handleErrorMessageChange("maxLength", e.target.value),
1813
+ style: {
1814
+ width: "100%",
1815
+ padding: "0.4rem",
1816
+ border: "1px dashed #d1d5db",
1817
+ borderRadius: "0.375rem",
1818
+ fontSize: "0.75rem",
1819
+ backgroundColor: "#f9fafb"
1820
+ }
1821
+ }
1822
+ )
1823
+ ]
1824
+ }
1825
+ ),
1826
+ /* @__PURE__ */ jsxRuntime.jsxs(
1827
+ "div",
1828
+ {
1829
+ style: {
1830
+ display: "flex",
1831
+ flexDirection: "column",
1832
+ gap: "0.375rem",
1833
+ marginBottom: "0.5rem"
1834
+ },
1835
+ children: [
1836
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Regex Pattern" }),
1837
+ /* @__PURE__ */ jsxRuntime.jsx(
1838
+ "input",
1839
+ {
1840
+ type: "text",
1841
+ value: field.schema.pattern || "",
1842
+ onChange: (e) => handleSchemaChange("pattern", e.target.value || void 0),
1843
+ style: {
1844
+ width: "100%",
1845
+ padding: "0.5rem",
1846
+ border: "1px solid #d1d5db",
1847
+ borderRadius: "0.375rem",
1848
+ fontSize: "0.875rem"
1849
+ }
1850
+ }
1851
+ ),
1852
+ field.schema.pattern !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1853
+ "input",
1854
+ {
1855
+ type: "text",
1856
+ placeholder: "Custom error message",
1857
+ value: getErrorMessage("pattern"),
1858
+ onChange: (e) => handleErrorMessageChange("pattern", e.target.value),
1859
+ style: {
1860
+ width: "100%",
1861
+ padding: "0.4rem",
1862
+ border: "1px dashed #d1d5db",
1863
+ borderRadius: "0.375rem",
1864
+ fontSize: "0.75rem",
1865
+ backgroundColor: "#f9fafb"
1866
+ }
1867
+ }
1868
+ )
1869
+ ]
1870
+ }
1871
+ )
1673
1872
  ] }),
1674
1873
  field.type === "number" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1675
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1676
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
1677
- /* @__PURE__ */ jsxRuntime.jsx(
1678
- "input",
1679
- {
1680
- type: "number",
1681
- value: field.schema.minimum || "",
1682
- onChange: (e) => handleSchemaChange(
1683
- "minimum",
1684
- e.target.value ? Number(e.target.value) : void 0
1874
+ /* @__PURE__ */ jsxRuntime.jsxs(
1875
+ "div",
1876
+ {
1877
+ style: {
1878
+ display: "flex",
1879
+ flexDirection: "column",
1880
+ gap: "0.375rem",
1881
+ marginBottom: "0.5rem"
1882
+ },
1883
+ children: [
1884
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Minimum Value" }),
1885
+ /* @__PURE__ */ jsxRuntime.jsx(
1886
+ "input",
1887
+ {
1888
+ type: "number",
1889
+ value: field.schema.minimum || "",
1890
+ onChange: (e) => handleSchemaChange(
1891
+ "minimum",
1892
+ e.target.value ? Number(e.target.value) : void 0
1893
+ ),
1894
+ style: {
1895
+ width: "100%",
1896
+ padding: "0.5rem",
1897
+ border: "1px solid #d1d5db",
1898
+ borderRadius: "0.375rem",
1899
+ fontSize: "0.875rem"
1900
+ }
1901
+ }
1685
1902
  ),
1686
- style: {
1687
- width: "100%",
1688
- padding: "0.5rem",
1689
- border: "1px solid #d1d5db",
1690
- borderRadius: "0.375rem",
1691
- fontSize: "0.875rem"
1692
- }
1693
- }
1694
- )
1695
- ] }),
1696
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: [
1697
- /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
1698
- /* @__PURE__ */ jsxRuntime.jsx(
1699
- "input",
1700
- {
1701
- type: "number",
1702
- value: field.schema.maximum || "",
1703
- onChange: (e) => handleSchemaChange(
1704
- "maximum",
1705
- e.target.value ? Number(e.target.value) : void 0
1903
+ field.schema.minimum !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1904
+ "input",
1905
+ {
1906
+ type: "text",
1907
+ placeholder: "Custom error message",
1908
+ value: getErrorMessage("minimum"),
1909
+ onChange: (e) => handleErrorMessageChange("minimum", e.target.value),
1910
+ style: {
1911
+ width: "100%",
1912
+ padding: "0.4rem",
1913
+ border: "1px dashed #d1d5db",
1914
+ borderRadius: "0.375rem",
1915
+ fontSize: "0.75rem",
1916
+ backgroundColor: "#f9fafb"
1917
+ }
1918
+ }
1919
+ )
1920
+ ]
1921
+ }
1922
+ ),
1923
+ /* @__PURE__ */ jsxRuntime.jsxs(
1924
+ "div",
1925
+ {
1926
+ style: {
1927
+ display: "flex",
1928
+ flexDirection: "column",
1929
+ gap: "0.375rem",
1930
+ marginBottom: "0.5rem"
1931
+ },
1932
+ children: [
1933
+ /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#374151" }, children: "Maximum Value" }),
1934
+ /* @__PURE__ */ jsxRuntime.jsx(
1935
+ "input",
1936
+ {
1937
+ type: "number",
1938
+ value: field.schema.maximum || "",
1939
+ onChange: (e) => handleSchemaChange(
1940
+ "maximum",
1941
+ e.target.value ? Number(e.target.value) : void 0
1942
+ ),
1943
+ style: {
1944
+ width: "100%",
1945
+ padding: "0.5rem",
1946
+ border: "1px solid #d1d5db",
1947
+ borderRadius: "0.375rem",
1948
+ fontSize: "0.875rem"
1949
+ }
1950
+ }
1706
1951
  ),
1707
- style: {
1708
- width: "100%",
1709
- padding: "0.5rem",
1710
- border: "1px solid #d1d5db",
1711
- borderRadius: "0.375rem",
1712
- fontSize: "0.875rem"
1713
- }
1714
- }
1715
- )
1716
- ] })
1952
+ field.schema.maximum !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
1953
+ "input",
1954
+ {
1955
+ type: "text",
1956
+ placeholder: "Custom error message",
1957
+ value: getErrorMessage("maximum"),
1958
+ onChange: (e) => handleErrorMessageChange("maximum", e.target.value),
1959
+ style: {
1960
+ width: "100%",
1961
+ padding: "0.4rem",
1962
+ border: "1px dashed #d1d5db",
1963
+ borderRadius: "0.375rem",
1964
+ fontSize: "0.75rem",
1965
+ backgroundColor: "#f9fafb"
1966
+ }
1967
+ }
1968
+ )
1969
+ ]
1970
+ }
1971
+ )
1717
1972
  ] })
1718
1973
  ] }),
1719
1974
  activeTab === "design" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2013,14 +2268,14 @@ var FormBuilder = ({
2013
2268
  style: {
2014
2269
  flex: 1,
2015
2270
  padding: "3rem",
2016
- overflowY: "auto",
2017
- display: "flex",
2018
- justifyContent: "center"
2271
+ overflowY: "auto"
2019
2272
  },
2020
2273
  children: /* @__PURE__ */ jsxRuntime.jsxs(
2021
2274
  "div",
2022
2275
  {
2023
2276
  style: {
2277
+ margin: "0 auto",
2278
+ height: "fit-content",
2024
2279
  width: "100%",
2025
2280
  maxWidth: "800px",
2026
2281
  backgroundColor: "white",