@algolia/satellite 1.5.0 → 1.7.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.
- package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
- package/dist/cjs/Actions/Button/Button.tailwind.js +0 -12
- package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/cjs/Actions/index.d.ts +2 -0
- package/dist/cjs/Actions/index.js +18 -0
- package/dist/cjs/Fields/Field/Field.js +2 -2
- package/dist/cjs/Fields/Form/Form.d.ts +12 -10
- package/dist/cjs/Fields/Form/Form.js +50 -38
- package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
- package/dist/cjs/Fields/Form/FormContext.js +2 -2
- package/dist/cjs/Fields/Form/index.d.ts +4 -3
- package/dist/cjs/Fields/Form/index.js +31 -21
- package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
- package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
- package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
- package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
- package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
- package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
- package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
- package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
- package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
- package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
- package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
- package/dist/cjs/Fields/Form/useForm.js +3 -3
- package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/cjs/Icons/index.d.ts +1 -1
- package/dist/cjs/Icons/index.js +6 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/cjs/Indicators/index.d.ts +1 -0
- package/dist/cjs/Indicators/index.js +11 -0
- package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
- package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/cjs/styles/tailwind.config.js +1 -1
- package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/esm/Actions/Accordion/Accordion.js +139 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
- package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
- package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/esm/Actions/index.d.ts +2 -0
- package/dist/esm/Actions/index.js +2 -2
- package/dist/esm/Fields/Field/Field.js +3 -3
- package/dist/esm/Fields/Form/Form.d.ts +12 -10
- package/dist/esm/Fields/Form/Form.js +52 -40
- package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
- package/dist/esm/Fields/Form/FormContext.js +1 -1
- package/dist/esm/Fields/Form/index.d.ts +4 -3
- package/dist/esm/Fields/Form/index.js +2 -3
- package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
- package/dist/esm/Fields/Form/stories/Complex.js +649 -643
- package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
- package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
- package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
- package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
- package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
- package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
- package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
- package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
- package/dist/esm/Fields/Form/useForm.d.ts +1 -1
- package/dist/esm/Fields/Form/useForm.js +3 -3
- package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/esm/Icons/index.d.ts +1 -1
- package/dist/esm/Icons/index.js +1 -1
- package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/esm/Indicators/index.d.ts +1 -0
- package/dist/esm/Indicators/index.js +2 -1
- package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/esm/Layout/Tables/Table/Table.js +4 -2
- package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/esm/styles/tailwind.config.js +1 -1
- package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/satellite.min.css +1 -1
- package/package.json +7 -1
@@ -24,7 +24,7 @@ var _Input = require("../../Input");
|
|
24
24
|
var _Form = require("../Form");
|
25
25
|
var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
|
26
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
27
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
27
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
28
28
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
29
29
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
30
30
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
@@ -136,141 +136,144 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
|
|
136
136
|
};
|
137
137
|
}
|
138
138
|
};
|
139
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
140
|
-
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["
|
141
|
-
children:
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
var field = _ref.field;
|
154
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
155
|
-
label: "Card Owner",
|
156
|
-
labelFor: "cardOwner",
|
157
|
-
description: "Please enter the card owner",
|
158
|
-
state: getFieldState("cardOwner"),
|
159
|
-
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
160
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
161
|
-
id: "cardOwner",
|
162
|
-
placeholder: "John Doe",
|
163
|
-
required: true
|
164
|
-
}, field))
|
165
|
-
});
|
166
|
-
}
|
167
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
168
|
-
name: "cardNumber",
|
169
|
-
control: control,
|
170
|
-
render: function render(_ref2) {
|
171
|
-
var field = _ref2.field;
|
172
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
173
|
-
label: "Card Number",
|
174
|
-
labelFor: "cardNumber",
|
175
|
-
description: "Please enter the card number",
|
176
|
-
state: getFieldState("cardNumber"),
|
177
|
-
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
178
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
179
|
-
id: "cardNumber",
|
180
|
-
placeholder: "Card number",
|
181
|
-
maxLength: 16 + 3 // 3 spaces
|
182
|
-
,
|
183
|
-
startIcon: _Icons.CreditCardIcon,
|
184
|
-
required: true
|
185
|
-
}, field), {}, {
|
186
|
-
onChange: function onChange(e) {
|
187
|
-
e.target.value = formatInputValue(e, 4, " ");
|
188
|
-
field.onChange(e);
|
189
|
-
if (e.target.value.length === 19) {
|
190
|
-
trigger("cardNumber");
|
191
|
-
}
|
192
|
-
}
|
193
|
-
}))
|
194
|
-
});
|
195
|
-
}
|
196
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
197
|
-
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
|
198
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
199
|
-
name: "cardExpirationDate",
|
139
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
140
|
+
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
141
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
142
|
+
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
143
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
144
|
+
onSubmit: handleSubmit(function (data) {
|
145
|
+
return setFormData(data);
|
146
|
+
}),
|
147
|
+
onReset: function onReset() {
|
148
|
+
return setFormData(initialFormData);
|
149
|
+
},
|
150
|
+
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
151
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
152
|
+
name: "cardOwner",
|
200
153
|
control: control,
|
201
|
-
render: function render(
|
202
|
-
var field =
|
154
|
+
render: function render(_ref) {
|
155
|
+
var field = _ref.field;
|
203
156
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
204
|
-
label: "Card
|
205
|
-
labelFor: "
|
206
|
-
description: "Please enter the card
|
207
|
-
state: getFieldState("
|
208
|
-
className: (0, _satellitePrefixer["default"])(
|
209
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(
|
210
|
-
id: "
|
211
|
-
placeholder: "
|
212
|
-
maxLength: 4 + 1 // 1 slash
|
213
|
-
,
|
214
|
-
startIcon: _Icons.CalendarIcon,
|
157
|
+
label: "Card Owner",
|
158
|
+
labelFor: "cardOwner",
|
159
|
+
description: "Please enter the card owner",
|
160
|
+
state: getFieldState("cardOwner"),
|
161
|
+
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
162
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
163
|
+
id: "cardOwner",
|
164
|
+
placeholder: "John Doe",
|
215
165
|
required: true
|
216
|
-
}, field)
|
217
|
-
onChange: function onChange(e) {
|
218
|
-
e.target.value = formatInputValue(e, 2, "/");
|
219
|
-
field.onChange(e);
|
220
|
-
},
|
221
|
-
onBlur: function onBlur() {
|
222
|
-
trigger("cardExpirationDate");
|
223
|
-
field.onBlur();
|
224
|
-
}
|
225
|
-
}))
|
166
|
+
}, field))
|
226
167
|
});
|
227
168
|
}
|
228
169
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
229
|
-
name: "
|
170
|
+
name: "cardNumber",
|
230
171
|
control: control,
|
231
|
-
render: function render(
|
232
|
-
var field =
|
172
|
+
render: function render(_ref2) {
|
173
|
+
var field = _ref2.field;
|
233
174
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
234
|
-
label: "Card
|
235
|
-
labelFor: "
|
236
|
-
description: "Please enter the card
|
237
|
-
state: getFieldState("
|
238
|
-
className: (0, _satellitePrefixer["default"])(
|
175
|
+
label: "Card Number",
|
176
|
+
labelFor: "cardNumber",
|
177
|
+
description: "Please enter the card number",
|
178
|
+
state: getFieldState("cardNumber"),
|
179
|
+
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
239
180
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
240
|
-
id: "
|
241
|
-
placeholder: "
|
242
|
-
maxLength:
|
243
|
-
|
181
|
+
id: "cardNumber",
|
182
|
+
placeholder: "Card number",
|
183
|
+
maxLength: 16 + 3 // 3 spaces
|
184
|
+
,
|
185
|
+
startIcon: _Icons.CreditCardIcon,
|
244
186
|
required: true
|
245
187
|
}, field), {}, {
|
246
|
-
|
247
|
-
|
248
|
-
field.
|
188
|
+
onChange: function onChange(e) {
|
189
|
+
e.target.value = formatInputValue(e, 4, " ");
|
190
|
+
field.onChange(e);
|
191
|
+
if (e.target.value.length === 19) {
|
192
|
+
trigger("cardNumber");
|
193
|
+
}
|
249
194
|
}
|
250
195
|
}))
|
251
196
|
});
|
252
197
|
}
|
198
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
199
|
+
className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
|
200
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
201
|
+
name: "cardExpirationDate",
|
202
|
+
control: control,
|
203
|
+
render: function render(_ref3) {
|
204
|
+
var field = _ref3.field;
|
205
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
206
|
+
label: "Card Expiration Date",
|
207
|
+
labelFor: "cardExpirationDate",
|
208
|
+
description: "Please enter the card expiration date",
|
209
|
+
state: getFieldState("cardExpirationDate"),
|
210
|
+
className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
211
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
212
|
+
id: "cardExpirationDate",
|
213
|
+
placeholder: "MM/YY",
|
214
|
+
maxLength: 4 + 1 // 1 slash
|
215
|
+
,
|
216
|
+
startIcon: _Icons.CalendarIcon,
|
217
|
+
required: true
|
218
|
+
}, field), {}, {
|
219
|
+
onChange: function onChange(e) {
|
220
|
+
e.target.value = formatInputValue(e, 2, "/");
|
221
|
+
field.onChange(e);
|
222
|
+
},
|
223
|
+
onBlur: function onBlur() {
|
224
|
+
trigger("cardExpirationDate");
|
225
|
+
field.onBlur();
|
226
|
+
}
|
227
|
+
}))
|
228
|
+
});
|
229
|
+
}
|
230
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
231
|
+
name: "cardCVC",
|
232
|
+
control: control,
|
233
|
+
render: function render(_ref4) {
|
234
|
+
var field = _ref4.field;
|
235
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
236
|
+
label: "Card CVC",
|
237
|
+
labelFor: "cardCVC",
|
238
|
+
description: "Please enter the card security code",
|
239
|
+
state: getFieldState("cardCVC"),
|
240
|
+
className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
241
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
242
|
+
id: "cardCVC",
|
243
|
+
placeholder: "CVC",
|
244
|
+
maxLength: 4,
|
245
|
+
startIcon: _Icons.LockIcon,
|
246
|
+
required: true
|
247
|
+
}, field), {}, {
|
248
|
+
onBlur: function onBlur() {
|
249
|
+
trigger("cardCVC");
|
250
|
+
field.onBlur();
|
251
|
+
}
|
252
|
+
}))
|
253
|
+
});
|
254
|
+
}
|
255
|
+
})]
|
256
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
257
|
+
className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
258
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
259
|
+
variant: "primary",
|
260
|
+
"aria-label": "Save the form",
|
261
|
+
children: "Save"
|
262
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
263
|
+
"aria-label": "Reset the form",
|
264
|
+
onClick: function onClick() {
|
265
|
+
return reset();
|
266
|
+
},
|
267
|
+
children: "Reset"
|
268
|
+
})]
|
253
269
|
})]
|
254
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
255
|
-
className: (0, _satellitePrefixer["default"])(
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
children: "Save"
|
260
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
|
261
|
-
"aria-label": "Reset the form",
|
262
|
-
onClick: function onClick() {
|
263
|
-
return reset();
|
264
|
-
},
|
265
|
-
children: "Reset"
|
266
|
-
})]
|
270
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
271
|
+
className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
272
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
273
|
+
className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
274
|
+
children: JSON.stringify(formData, null, 2)
|
267
275
|
})]
|
268
|
-
})
|
269
|
-
className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
270
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
271
|
-
className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
|
272
|
-
children: JSON.stringify(formData, null, 2)
|
273
|
-
})]
|
276
|
+
})
|
274
277
|
});
|
275
278
|
};
|
276
279
|
var yupSchema = yup.object({
|
@@ -326,130 +329,133 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
|
|
326
329
|
}
|
327
330
|
};
|
328
331
|
(0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
|
329
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
330
|
-
className: (0, _satellitePrefixer["default"])(
|
331
|
-
children:
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
353
|
-
label: "Card Number",
|
354
|
-
labelFor: "cardNumber",
|
355
|
-
description: "Please enter the card number",
|
356
|
-
state: getFieldState("cardNumber"),
|
357
|
-
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
358
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
359
|
-
id: "cardNumber",
|
360
|
-
placeholder: "Card number",
|
361
|
-
maxLength: 16 + 3 // 3 spaces
|
362
|
-
,
|
363
|
-
startIcon: _Icons.CreditCardIcon,
|
364
|
-
required: true
|
365
|
-
}, formik.getFieldProps("cardNumber")), {}, {
|
366
|
-
onChange: ( /*#__PURE__*/function () {
|
367
|
-
var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
|
368
|
-
var value;
|
369
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
370
|
-
while (1) switch (_context.prev = _context.next) {
|
371
|
-
case 0:
|
372
|
-
value = formatInputValue(e, 4, " ");
|
373
|
-
_context.next = 3;
|
374
|
-
return formik.setFieldValue("cardNumber", value);
|
375
|
-
case 3:
|
376
|
-
if (value.length === 19) {
|
377
|
-
formik.validateField("cardNumber");
|
378
|
-
}
|
379
|
-
case 4:
|
380
|
-
case "end":
|
381
|
-
return _context.stop();
|
382
|
-
}
|
383
|
-
}, _callee);
|
384
|
-
}));
|
385
|
-
return function (_x) {
|
386
|
-
return _ref5.apply(this, arguments);
|
387
|
-
};
|
388
|
-
}())
|
389
|
-
}))
|
390
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
391
|
-
className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
|
392
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
393
|
-
label: "Card Expiration Date",
|
394
|
-
labelFor: "cardExpirationDate",
|
395
|
-
description: "Please enter the card expiration date",
|
396
|
-
state: getFieldState("cardExpirationDate"),
|
397
|
-
className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
398
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
399
|
-
id: "cardExpirationDate",
|
400
|
-
placeholder: "MM/YY",
|
401
|
-
maxLength: 4 + 1 // 1 slash
|
402
|
-
,
|
403
|
-
startIcon: _Icons.CalendarIcon,
|
332
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
333
|
+
className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
334
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
335
|
+
className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
336
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
337
|
+
onSubmit: function onSubmit(e) {
|
338
|
+
setRevalidationEnabled(true);
|
339
|
+
formik.handleSubmit(e);
|
340
|
+
},
|
341
|
+
onReset: function onReset(e) {
|
342
|
+
setRevalidationEnabled(false);
|
343
|
+
formik.handleReset(e);
|
344
|
+
},
|
345
|
+
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
346
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
347
|
+
label: "Card Owner",
|
348
|
+
labelFor: "cardOwner",
|
349
|
+
description: "Please enter the card owner",
|
350
|
+
state: getFieldState("cardOwner"),
|
351
|
+
className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
352
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
353
|
+
id: "cardOwner",
|
354
|
+
placeholder: "John Doe",
|
404
355
|
required: true
|
405
|
-
}, formik.getFieldProps("
|
406
|
-
onChange: function onChange(e) {
|
407
|
-
e.target.value = formatInputValue(e, 2, "/");
|
408
|
-
formik.getFieldProps("cardExpirationDate").onChange(e);
|
409
|
-
},
|
410
|
-
onBlur: function onBlur(e) {
|
411
|
-
formik.validateField("cardExpirationDate");
|
412
|
-
formik.getFieldProps("cardExpirationDate").onBlur(e);
|
413
|
-
}
|
414
|
-
}))
|
356
|
+
}, formik.getFieldProps("cardOwner")))
|
415
357
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
416
|
-
label: "Card
|
417
|
-
labelFor: "
|
418
|
-
description: "Please enter the card
|
419
|
-
state: getFieldState("
|
420
|
-
className: (0, _satellitePrefixer["default"])(
|
358
|
+
label: "Card Number",
|
359
|
+
labelFor: "cardNumber",
|
360
|
+
description: "Please enter the card number",
|
361
|
+
state: getFieldState("cardNumber"),
|
362
|
+
className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
421
363
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
422
|
-
id: "
|
423
|
-
placeholder: "
|
424
|
-
maxLength:
|
425
|
-
|
364
|
+
id: "cardNumber",
|
365
|
+
placeholder: "Card number",
|
366
|
+
maxLength: 16 + 3 // 3 spaces
|
367
|
+
,
|
368
|
+
startIcon: _Icons.CreditCardIcon,
|
426
369
|
required: true
|
427
|
-
}, formik.getFieldProps("
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
370
|
+
}, formik.getFieldProps("cardNumber")), {}, {
|
371
|
+
onChange: ( /*#__PURE__*/function () {
|
372
|
+
var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
|
373
|
+
var value;
|
374
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
375
|
+
while (1) switch (_context.prev = _context.next) {
|
376
|
+
case 0:
|
377
|
+
value = formatInputValue(e, 4, " ");
|
378
|
+
_context.next = 3;
|
379
|
+
return formik.setFieldValue("cardNumber", value);
|
380
|
+
case 3:
|
381
|
+
if (value.length === 19) {
|
382
|
+
formik.validateField("cardNumber");
|
383
|
+
}
|
384
|
+
case 4:
|
385
|
+
case "end":
|
386
|
+
return _context.stop();
|
387
|
+
}
|
388
|
+
}, _callee);
|
389
|
+
}));
|
390
|
+
return function (_x) {
|
391
|
+
return _ref5.apply(this, arguments);
|
392
|
+
};
|
393
|
+
}())
|
432
394
|
}))
|
395
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
396
|
+
className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
|
397
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
398
|
+
label: "Card Expiration Date",
|
399
|
+
labelFor: "cardExpirationDate",
|
400
|
+
description: "Please enter the card expiration date",
|
401
|
+
state: getFieldState("cardExpirationDate"),
|
402
|
+
className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
403
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
404
|
+
id: "cardExpirationDate",
|
405
|
+
placeholder: "MM/YY",
|
406
|
+
maxLength: 4 + 1 // 1 slash
|
407
|
+
,
|
408
|
+
startIcon: _Icons.CalendarIcon,
|
409
|
+
required: true
|
410
|
+
}, formik.getFieldProps("cardExpirationDate")), {}, {
|
411
|
+
onChange: function onChange(e) {
|
412
|
+
e.target.value = formatInputValue(e, 2, "/");
|
413
|
+
formik.getFieldProps("cardExpirationDate").onChange(e);
|
414
|
+
},
|
415
|
+
onBlur: function onBlur(e) {
|
416
|
+
formik.validateField("cardExpirationDate");
|
417
|
+
formik.getFieldProps("cardExpirationDate").onBlur(e);
|
418
|
+
}
|
419
|
+
}))
|
420
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
421
|
+
label: "Card CVC",
|
422
|
+
labelFor: "cardCVC",
|
423
|
+
description: "Please enter the card security code",
|
424
|
+
state: getFieldState("cardCVC"),
|
425
|
+
className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
426
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
|
427
|
+
id: "cardCVC",
|
428
|
+
placeholder: "CVC",
|
429
|
+
maxLength: 4,
|
430
|
+
startIcon: _Icons.LockIcon,
|
431
|
+
required: true
|
432
|
+
}, formik.getFieldProps("cardCVC")), {}, {
|
433
|
+
onBlur: function onBlur(e) {
|
434
|
+
formik.validateField("cardCVC");
|
435
|
+
formik.getFieldProps("cardCVC").onBlur(e);
|
436
|
+
}
|
437
|
+
}))
|
438
|
+
})]
|
439
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
440
|
+
className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
441
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
442
|
+
variant: "primary",
|
443
|
+
"aria-label": "Save the form",
|
444
|
+
children: "Save"
|
445
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
446
|
+
"aria-label": "Reset the form",
|
447
|
+
onClick: function onClick() {
|
448
|
+
return formik.resetForm();
|
449
|
+
},
|
450
|
+
children: "Reset"
|
451
|
+
})]
|
433
452
|
})]
|
434
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
435
|
-
className: (0, _satellitePrefixer["default"])(
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
children: "Save"
|
440
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
|
441
|
-
"aria-label": "Reset the form",
|
442
|
-
onClick: function onClick() {
|
443
|
-
return formik.resetForm();
|
444
|
-
},
|
445
|
-
children: "Reset"
|
446
|
-
})]
|
453
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
454
|
+
className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
455
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
456
|
+
className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
457
|
+
children: JSON.stringify(formData, null, 2)
|
447
458
|
})]
|
448
|
-
})
|
449
|
-
className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
450
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
451
|
-
className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
|
452
|
-
children: JSON.stringify(formData, null, 2)
|
453
|
-
})]
|
459
|
+
})
|
454
460
|
});
|
455
461
|
};
|
@@ -1 +1 @@
|
|
1
|
-
export declare const
|
1
|
+
export declare const useForm: () => import("./FormContext").FormContextValue | null;
|
@@ -3,9 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.useForm = void 0;
|
7
7
|
var _react = require("react");
|
8
8
|
var _FormContext = require("./FormContext");
|
9
|
-
var
|
10
|
-
return (0, _react.useContext)(_FormContext.
|
9
|
+
var useForm = exports.useForm = function useForm() {
|
10
|
+
return (0, _react.useContext)(_FormContext.FormContext);
|
11
11
|
};
|
@@ -7,7 +7,7 @@ var plugin = require("tailwindcss/plugin");
|
|
7
7
|
module.exports = plugin(function (_ref) {
|
8
8
|
var addComponents = _ref.addComponents,
|
9
9
|
theme = _ref.theme;
|
10
|
-
addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n .focusable-within:focus-within,\n .focusable-visible:focus-visible,\n .focusable-visible-within:has(:focus-visible),\n input:focus ~ .focusable-sibling,\n .focusable-show", {
|
10
|
+
addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n .focusable-within:focus-within,\n .focusable-visible:focus-visible,\n .focusable-visible-within:has(:focus-visible),\n input:focus ~ .focusable-sibling,\n .focusable-visible-group:focus-visible .focusable-visible-group-item,\n .focusable-show", {
|
11
11
|
outline: "2px solid ".concat(theme("colors.accent.600")),
|
12
12
|
outlineOffset: "1px"
|
13
13
|
}));
|
@@ -17,4 +17,4 @@ export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
|
|
17
17
|
export { BulbIcon } from "./BulbIcon";
|
18
18
|
export { TestingIcon } from "./TestingIcon";
|
19
19
|
export { RocketIcon } from "./RocketIcon";
|
20
|
-
export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
|
20
|
+
export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
|
package/dist/cjs/Icons/index.js
CHANGED
@@ -891,6 +891,12 @@ Object.defineProperty(exports, "KeyIcon", {
|
|
891
891
|
return _lucideReact.KeyIcon;
|
892
892
|
}
|
893
893
|
});
|
894
|
+
Object.defineProperty(exports, "Landmark", {
|
895
|
+
enumerable: true,
|
896
|
+
get: function get() {
|
897
|
+
return _lucideReact.Landmark;
|
898
|
+
}
|
899
|
+
});
|
894
900
|
Object.defineProperty(exports, "LayersIcon", {
|
895
901
|
enumerable: true,
|
896
902
|
get: function get() {
|
@@ -1,12 +1,19 @@
|
|
1
1
|
import type { FC } from "react";
|
2
2
|
export interface SkeletonProps {
|
3
3
|
className?: string;
|
4
|
+
size?: keyof typeof DEFAULT_SKELETON_SIZES;
|
4
5
|
circle?: boolean;
|
5
6
|
image?: boolean;
|
6
7
|
}
|
8
|
+
declare const DEFAULT_SKELETON_SIZES: {
|
9
|
+
sm: string;
|
10
|
+
md: string;
|
11
|
+
lg: string;
|
12
|
+
};
|
7
13
|
/**
|
8
14
|
* The `Skeleton` component is used to display a placeholder during loading.
|
9
15
|
*
|
10
16
|
* See the [Skeleton documentation page](https://satellite.algolia.com/layouts/skeleton) for more information.
|
11
17
|
*/
|
12
18
|
export declare const Skeleton: FC<SkeletonProps>;
|
19
|
+
export {};
|