@drawbridge/components 0.0.52 → 0.0.55

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.
@@ -22,6 +22,8 @@ __export(input_group_exports, {
22
22
  default: () => input_group_default
23
23
  });
24
24
  module.exports = __toCommonJS(input_group_exports);
25
+
26
+ // components/input-group-error.js
25
27
  var import_react = require("react");
26
28
 
27
29
  // components/icons/warning.js
@@ -50,8 +52,86 @@ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
50
52
  );
51
53
  var warning_default = Warning;
52
54
 
53
- // components/input-group.js
55
+ // components/input-group-error.js
54
56
  var import_jsx_runtime2 = require("react/jsx-runtime");
57
+ var InputGroupError = ({
58
+ className,
59
+ error,
60
+ label,
61
+ message,
62
+ style = {}
63
+ }) => {
64
+ var _a, _b, _c, _d;
65
+ if (!(error || message)) {
66
+ return null;
67
+ }
68
+ const classes = [
69
+ "flex items-center justify-start space-x-2 py-1 rounded text-sm"
70
+ ];
71
+ if (error) {
72
+ classes.push("px-1.5");
73
+ }
74
+ if (className) {
75
+ classes.push(className);
76
+ }
77
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
78
+ "p",
79
+ {
80
+ ...{
81
+ className: classes.join(" "),
82
+ ...error && {
83
+ style: {
84
+ backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
85
+ color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
86
+ }
87
+ }
88
+ },
89
+ children: [
90
+ error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
91
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
92
+ warning_default,
93
+ {
94
+ ...{
95
+ className: "w-4 h-4",
96
+ "aria-hidden": true
97
+ }
98
+ }
99
+ ),
100
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
101
+ "span",
102
+ {
103
+ ...{
104
+ className: "text-[0px] opacity-0 w-0 h-0 absolute"
105
+ },
106
+ children: [
107
+ label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
108
+ label,
109
+ ": "
110
+ ] }) : null,
111
+ error
112
+ ]
113
+ }
114
+ )
115
+ ] }),
116
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
117
+ "span",
118
+ {
119
+ ...{
120
+ ...error && {
121
+ "aria-hidden": true
122
+ }
123
+ },
124
+ children: error || message
125
+ }
126
+ )
127
+ ]
128
+ }
129
+ );
130
+ };
131
+ var input_group_error_default = InputGroupError;
132
+
133
+ // components/input-group.js
134
+ var import_jsx_runtime3 = require("react/jsx-runtime");
55
135
  var InputGroup = ({
56
136
  className,
57
137
  error,
@@ -61,7 +141,6 @@ var InputGroup = ({
61
141
  style = {},
62
142
  ...rest
63
143
  }) => {
64
- var _a, _b, _c, _d;
65
144
  const classes = [
66
145
  "input-group"
67
146
  ];
@@ -71,7 +150,7 @@ var InputGroup = ({
71
150
  if (error) {
72
151
  classes.push("error");
73
152
  }
74
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
153
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
75
154
  "div",
76
155
  {
77
156
  ...{
@@ -82,14 +161,14 @@ var InputGroup = ({
82
161
  }
83
162
  },
84
163
  children: [
85
- label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
164
+ label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
86
165
  "div",
87
166
  {
88
167
  ...{
89
168
  className: "space-y-2"
90
169
  },
91
170
  children: [
92
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
171
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
93
172
  "span",
94
173
  {
95
174
  ...{
@@ -102,55 +181,15 @@ var InputGroup = ({
102
181
  ]
103
182
  }
104
183
  ) : input,
105
- (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
106
- "p",
184
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
185
+ input_group_error_default,
107
186
  {
108
187
  ...{
109
- className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
110
- ...error && {
111
- style: {
112
- backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
113
- color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
114
- }
115
- }
116
- },
117
- children: [
118
- error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
119
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
120
- warning_default,
121
- {
122
- ...{
123
- className: "w-4 h-4",
124
- "aria-hidden": true
125
- }
126
- }
127
- ),
128
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
129
- "span",
130
- {
131
- ...{
132
- className: "text-[0px] opacity-0 w-0 h-0 absolute"
133
- },
134
- children: [
135
- label,
136
- ": ",
137
- error
138
- ]
139
- }
140
- )
141
- ] }),
142
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
143
- "span",
144
- {
145
- ...{
146
- ...error && {
147
- "aria-hidden": true
148
- }
149
- },
150
- children: error || message
151
- }
152
- )
153
- ]
188
+ error,
189
+ label,
190
+ message,
191
+ style
192
+ }
154
193
  }
155
194
  )
156
195
  ]
@@ -1,6 +1,7 @@
1
1
  import {
2
2
  input_group_default
3
- } from "./chunk-3SAKIKZP.mjs";
3
+ } from "./chunk-DNK33H3K.mjs";
4
+ import "./chunk-OHJMWJAQ.mjs";
4
5
  import "./chunk-Q3UIVGPQ.mjs";
5
6
  export {
6
7
  input_group_default as default
@@ -23,7 +23,7 @@ __export(input_name_exports, {
23
23
  });
24
24
  module.exports = __toCommonJS(input_name_exports);
25
25
 
26
- // components/input-group.js
26
+ // components/input-group-error.js
27
27
  var import_react = require("react");
28
28
 
29
29
  // components/icons/warning.js
@@ -52,8 +52,86 @@ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
52
52
  );
53
53
  var warning_default = Warning;
54
54
 
55
- // components/input-group.js
55
+ // components/input-group-error.js
56
56
  var import_jsx_runtime2 = require("react/jsx-runtime");
57
+ var InputGroupError = ({
58
+ className,
59
+ error,
60
+ label,
61
+ message,
62
+ style = {}
63
+ }) => {
64
+ var _a, _b, _c, _d;
65
+ if (!(error || message)) {
66
+ return null;
67
+ }
68
+ const classes = [
69
+ "flex items-center justify-start space-x-2 py-1 rounded text-sm"
70
+ ];
71
+ if (error) {
72
+ classes.push("px-1.5");
73
+ }
74
+ if (className) {
75
+ classes.push(className);
76
+ }
77
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
78
+ "p",
79
+ {
80
+ ...{
81
+ className: classes.join(" "),
82
+ ...error && {
83
+ style: {
84
+ backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
85
+ color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
86
+ }
87
+ }
88
+ },
89
+ children: [
90
+ error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
91
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
92
+ warning_default,
93
+ {
94
+ ...{
95
+ className: "w-4 h-4",
96
+ "aria-hidden": true
97
+ }
98
+ }
99
+ ),
100
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
101
+ "span",
102
+ {
103
+ ...{
104
+ className: "text-[0px] opacity-0 w-0 h-0 absolute"
105
+ },
106
+ children: [
107
+ label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
108
+ label,
109
+ ": "
110
+ ] }) : null,
111
+ error
112
+ ]
113
+ }
114
+ )
115
+ ] }),
116
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
117
+ "span",
118
+ {
119
+ ...{
120
+ ...error && {
121
+ "aria-hidden": true
122
+ }
123
+ },
124
+ children: error || message
125
+ }
126
+ )
127
+ ]
128
+ }
129
+ );
130
+ };
131
+ var input_group_error_default = InputGroupError;
132
+
133
+ // components/input-group.js
134
+ var import_jsx_runtime3 = require("react/jsx-runtime");
57
135
  var InputGroup = ({
58
136
  className,
59
137
  error,
@@ -63,7 +141,6 @@ var InputGroup = ({
63
141
  style = {},
64
142
  ...rest
65
143
  }) => {
66
- var _a, _b, _c, _d;
67
144
  const classes = [
68
145
  "input-group"
69
146
  ];
@@ -73,7 +150,7 @@ var InputGroup = ({
73
150
  if (error) {
74
151
  classes.push("error");
75
152
  }
76
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
153
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
77
154
  "div",
78
155
  {
79
156
  ...{
@@ -84,14 +161,14 @@ var InputGroup = ({
84
161
  }
85
162
  },
86
163
  children: [
87
- label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
164
+ label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
88
165
  "div",
89
166
  {
90
167
  ...{
91
168
  className: "space-y-2"
92
169
  },
93
170
  children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
171
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
95
172
  "span",
96
173
  {
97
174
  ...{
@@ -104,55 +181,15 @@ var InputGroup = ({
104
181
  ]
105
182
  }
106
183
  ) : input,
107
- (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
108
- "p",
184
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
185
+ input_group_error_default,
109
186
  {
110
187
  ...{
111
- className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
112
- ...error && {
113
- style: {
114
- backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
115
- color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
116
- }
117
- }
118
- },
119
- children: [
120
- error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
121
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
122
- warning_default,
123
- {
124
- ...{
125
- className: "w-4 h-4",
126
- "aria-hidden": true
127
- }
128
- }
129
- ),
130
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
131
- "span",
132
- {
133
- ...{
134
- className: "text-[0px] opacity-0 w-0 h-0 absolute"
135
- },
136
- children: [
137
- label,
138
- ": ",
139
- error
140
- ]
141
- }
142
- )
143
- ] }),
144
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
145
- "span",
146
- {
147
- ...{
148
- ...error && {
149
- "aria-hidden": true
150
- }
151
- },
152
- children: error || message
153
- }
154
- )
155
- ]
188
+ error,
189
+ label,
190
+ message,
191
+ style
192
+ }
156
193
  }
157
194
  )
158
195
  ]
@@ -183,7 +220,7 @@ var inputStyle = (style) => {
183
220
  };
184
221
 
185
222
  // components/input-text.js
186
- var import_jsx_runtime3 = require("react/jsx-runtime");
223
+ var import_jsx_runtime4 = require("react/jsx-runtime");
187
224
  var InputText = ({
188
225
  className,
189
226
  max,
@@ -197,7 +234,7 @@ var InputText = ({
197
234
  classes.push(className);
198
235
  }
199
236
  ;
200
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
237
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
201
238
  "input",
202
239
  {
203
240
  ...{
@@ -213,7 +250,7 @@ var InputText = ({
213
250
  var input_text_default = InputText;
214
251
 
215
252
  // components/input-name.js
216
- var import_jsx_runtime4 = require("react/jsx-runtime");
253
+ var import_jsx_runtime5 = require("react/jsx-runtime");
217
254
  var InputName = ({
218
255
  error,
219
256
  onChange,
@@ -223,12 +260,12 @@ var InputName = ({
223
260
  }) => {
224
261
  var _a, _b, _c;
225
262
  const inputs = {
226
- first: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
263
+ first: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
227
264
  input_group_default,
228
265
  {
229
266
  ...{
230
267
  error: (_a = error == null ? void 0 : error.first) == null ? void 0 : _a.message,
231
- input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
268
+ input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
232
269
  input_text_default,
233
270
  {
234
271
  ...{
@@ -247,12 +284,12 @@ var InputName = ({
247
284
  }
248
285
  }
249
286
  ),
250
- last: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
287
+ last: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
251
288
  input_group_default,
252
289
  {
253
290
  ...{
254
291
  error: (_b = error == null ? void 0 : error.last) == null ? void 0 : _b.message,
255
- input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
292
+ input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
256
293
  input_text_default,
257
294
  {
258
295
  ...{
@@ -271,12 +308,12 @@ var InputName = ({
271
308
  }
272
309
  }
273
310
  ),
274
- name: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
311
+ name: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
275
312
  input_group_default,
276
313
  {
277
314
  ...{
278
315
  error: (_c = error == null ? void 0 : error.name) == null ? void 0 : _c.message,
279
- input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
316
+ input: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
280
317
  input_text_default,
281
318
  {
282
319
  ...{
@@ -295,13 +332,13 @@ var InputName = ({
295
332
  }
296
333
  )
297
334
  };
298
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
335
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
299
336
  "div",
300
337
  {
301
338
  ...{
302
339
  className: "flex flex-col space-y-4"
303
340
  },
304
- children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
341
+ children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
305
342
  "div",
306
343
  {
307
344
  ...{
@@ -3,7 +3,8 @@ import {
3
3
  } from "./chunk-B6Y2SNRW.mjs";
4
4
  import {
5
5
  input_group_default
6
- } from "./chunk-3SAKIKZP.mjs";
6
+ } from "./chunk-DNK33H3K.mjs";
7
+ import "./chunk-OHJMWJAQ.mjs";
7
8
  import "./chunk-Q3UIVGPQ.mjs";
8
9
  import "./chunk-FJ7PKMAC.mjs";
9
10
 
@@ -38,6 +38,32 @@ var import_react = require("react");
38
38
  var import_input = __toESM(require("react-phone-number-input/input"));
39
39
  var import_phone = require("@drawbridge/drawbridge-utils/phone");
40
40
 
41
+ // components/icons/chevron-down.js
42
+ var import_jsx_runtime = require("react/jsx-runtime");
43
+ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
44
+ "svg",
45
+ {
46
+ ...{
47
+ fill: "none",
48
+ stroke: "currentColor",
49
+ strokeWidth: 1.5,
50
+ viewBox: "0 0 24 24",
51
+ ...props
52
+ },
53
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
+ "path",
55
+ {
56
+ ...{
57
+ d: "m19.5 8.25-7.5 7.5-7.5-7.5",
58
+ strokeLinecap: "round",
59
+ strokeLinejoin: "round"
60
+ }
61
+ }
62
+ )
63
+ }
64
+ );
65
+ var chevron_down_default = ChevronDown;
66
+
41
67
  // components/styles.js
42
68
  var WHITE = "rgb( 255, 255, 255 )";
43
69
  var BLACK = "rgb( 0, 0, 0 )";
@@ -61,7 +87,7 @@ var inputStyle = (style) => {
61
87
  var inputPhoneStyle = (style) => inputStyle(style);
62
88
 
63
89
  // components/input-phone.js
64
- var import_jsx_runtime = require("react/jsx-runtime");
90
+ var import_jsx_runtime2 = require("react/jsx-runtime");
65
91
  var isValidPhone = (number = "", country = "") => {
66
92
  const valid = (0, import_phone.isValid)(number, country);
67
93
  return valid;
@@ -112,7 +138,7 @@ var InputPhone = ({
112
138
  },
113
139
  []
114
140
  );
115
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
141
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
116
142
  "div",
117
143
  {
118
144
  ...{
@@ -120,30 +146,57 @@ var InputPhone = ({
120
146
  style: inputPhoneStyle(style)
121
147
  },
122
148
  children: [
123
- (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
124
- "select",
149
+ (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
150
+ "div",
125
151
  {
126
152
  ...{
127
- className: "px-3 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
128
- onChange: ({ target }) => {
129
- setCountry(target.value);
130
- setNumber("");
131
- },
132
- style: inputPhoneStyle(style),
133
- value: country
153
+ className: "relative"
134
154
  },
135
- children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
136
- "option",
137
- {
138
- ...{
139
- value: item
140
- },
141
- children: item
142
- },
143
- "input-phone-country-" + item + "-" + key
144
- ))
155
+ children: [
156
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
157
+ "select",
158
+ {
159
+ ...{
160
+ className: "pl-3 pr-6 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
161
+ onChange: ({ target }) => {
162
+ setCountry(target.value);
163
+ setNumber("");
164
+ },
165
+ style: inputPhoneStyle(style),
166
+ value: country
167
+ },
168
+ children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
169
+ "option",
170
+ {
171
+ ...{
172
+ value: item
173
+ },
174
+ children: item
175
+ },
176
+ "input-phone-country-" + item + "-" + key
177
+ ))
178
+ }
179
+ ),
180
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
181
+ "div",
182
+ {
183
+ ...{
184
+ "aria-hidden": true,
185
+ className: "h-full flex items-center absolute inset-y-0 right-1.5 pointer-events-none"
186
+ },
187
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
188
+ chevron_down_default,
189
+ {
190
+ ...{
191
+ className: "w-4 h-4 text-inherit"
192
+ }
193
+ }
194
+ )
195
+ }
196
+ )
197
+ ]
145
198
  }
146
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
199
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
147
200
  "span",
148
201
  {
149
202
  ...{
@@ -153,7 +206,7 @@ var InputPhone = ({
153
206
  children: (countries == null ? void 0 : countries[0]) || ""
154
207
  }
155
208
  ),
156
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
209
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
157
210
  "div",
158
211
  {
159
212
  ...{
@@ -162,7 +215,7 @@ var InputPhone = ({
162
215
  borderLeft: "solid 1px " + ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex)
163
216
  }
164
217
  },
165
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
218
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
166
219
  import_input.default,
167
220
  {
168
221
  ...{