@a-type/ui 3.0.24 → 3.0.26
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/components/button/Button.js +3 -3
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/forms/CheckboxField.js +4 -5
- package/dist/cjs/components/forms/CheckboxField.js.map +1 -1
- package/dist/cjs/components/forms/FieldLabel.d.ts +1 -0
- package/dist/cjs/components/forms/FieldLabel.js +3 -2
- package/dist/cjs/components/forms/FieldLabel.js.map +1 -1
- package/dist/cjs/components/forms/FormikForm.d.ts +5 -0
- package/dist/cjs/components/forms/FormikForm.js +5 -1
- package/dist/cjs/components/forms/FormikForm.js.map +1 -1
- package/dist/cjs/components/forms/FormikForm.stories.d.ts +5 -0
- package/dist/cjs/components/forms/FormikForm.stories.js +10 -1
- package/dist/cjs/components/forms/FormikForm.stories.js.map +1 -1
- package/dist/cjs/components/forms/SubmitButton.js +1 -1
- package/dist/cjs/components/forms/SubmitButton.js.map +1 -1
- package/dist/cjs/components/forms/SwitchField.d.ts +8 -0
- package/dist/cjs/components/forms/SwitchField.js +30 -0
- package/dist/cjs/components/forms/SwitchField.js.map +1 -0
- package/dist/cjs/components/forms/ToggleGroupField.d.ts +13 -0
- package/dist/cjs/components/forms/ToggleGroupField.js +29 -0
- package/dist/cjs/components/forms/ToggleGroupField.js.map +1 -0
- package/dist/cjs/components/icon/Icon.d.ts +2 -1
- package/dist/cjs/components/icon/Icon.js +3 -2
- package/dist/cjs/components/icon/Icon.js.map +1 -1
- package/dist/cjs/components/toggleGroup/toggleGroup.d.ts +1 -0
- package/dist/cjs/components/toggleGroup/toggleGroup.js.map +1 -1
- package/dist/css/main.css +3 -3
- package/dist/esm/components/button/Button.js +3 -3
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/forms/CheckboxField.js +4 -5
- package/dist/esm/components/forms/CheckboxField.js.map +1 -1
- package/dist/esm/components/forms/FieldLabel.d.ts +1 -0
- package/dist/esm/components/forms/FieldLabel.js +2 -1
- package/dist/esm/components/forms/FieldLabel.js.map +1 -1
- package/dist/esm/components/forms/FormikForm.d.ts +5 -0
- package/dist/esm/components/forms/FormikForm.js +5 -1
- package/dist/esm/components/forms/FormikForm.js.map +1 -1
- package/dist/esm/components/forms/FormikForm.stories.d.ts +5 -0
- package/dist/esm/components/forms/FormikForm.stories.js +10 -1
- package/dist/esm/components/forms/FormikForm.stories.js.map +1 -1
- package/dist/esm/components/forms/SubmitButton.js +1 -1
- package/dist/esm/components/forms/SubmitButton.js.map +1 -1
- package/dist/esm/components/forms/SwitchField.d.ts +8 -0
- package/dist/esm/components/forms/SwitchField.js +27 -0
- package/dist/esm/components/forms/SwitchField.js.map +1 -0
- package/dist/esm/components/forms/ToggleGroupField.d.ts +13 -0
- package/dist/esm/components/forms/ToggleGroupField.js +26 -0
- package/dist/esm/components/forms/ToggleGroupField.js.map +1 -0
- package/dist/esm/components/icon/Icon.d.ts +2 -1
- package/dist/esm/components/icon/Icon.js +3 -2
- package/dist/esm/components/icon/Icon.js.map +1 -1
- package/dist/esm/components/toggleGroup/toggleGroup.d.ts +1 -0
- package/dist/esm/components/toggleGroup/toggleGroup.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +7 -4
- package/src/components/forms/CheckboxField.tsx +8 -14
- package/src/components/forms/FieldLabel.tsx +6 -1
- package/src/components/forms/FormikForm.stories.tsx +22 -0
- package/src/components/forms/FormikForm.tsx +5 -1
- package/src/components/forms/SubmitButton.tsx +1 -0
- package/src/components/forms/SwitchField.tsx +41 -0
- package/src/components/forms/ToggleGroupField.tsx +40 -0
- package/src/components/icon/Icon.tsx +4 -1
- package/src/components/toggleGroup/toggleGroup.tsx +3 -0
|
@@ -62,14 +62,14 @@ function ButtonRoot(_a) {
|
|
|
62
62
|
// avoid rendering loading spinner with asChild
|
|
63
63
|
return (0, jsx_runtime_1.jsx)(Comp, Object.assign({}, buttonProps, { children: children }));
|
|
64
64
|
}
|
|
65
|
-
return ((0, jsx_runtime_1.jsx)(IconLoadingContext_js_1.IconLoadingProvider, { value: isLoading, children: (0, jsx_runtime_1.jsxs)(Comp, Object.assign({}, buttonProps, { children: [(0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: isLoading && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { width: 0, marginLeft: '-0.5rem' }, animate: { width: 'auto', marginLeft: 0 }, exit: { width: 0, marginLeft: '-0.5rem' }, className: (0, clsx_1.clsx)('flex-shrink-0 inline-block overflow-hidden my-auto flex', '[[data-has-icon=true]
|
|
65
|
+
return ((0, jsx_runtime_1.jsx)(IconLoadingContext_js_1.IconLoadingProvider, { value: isLoading, children: (0, jsx_runtime_1.jsxs)(Comp, Object.assign({}, buttonProps, { children: [(0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: isLoading && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { width: 0, marginLeft: '-0.5rem' }, animate: { width: 'auto', marginLeft: 0 }, exit: { width: 0, marginLeft: '-0.5rem' }, className: (0, clsx_1.clsx)('flex-shrink-0 inline-block overflow-hidden my-auto flex', '[[data-has-icon=true]_&]:hidden'), "data-default-loader": true, children: (0, jsx_runtime_1.jsx)(index_js_2.Spinner, { size: 15, className: "inline-block w-1em h-1em" }) }, "spinner")) }), toggled !== undefined &&
|
|
66
66
|
(toggleMode === 'indicator' ||
|
|
67
|
-
toggleMode === 'color-and-indicator') && ((0, jsx_runtime_1.jsx)(exports.ButtonToggleIndicator, { value: toggled })), children, isDropdownTrigger && ((0, jsx_runtime_1.jsx)(DropdownMenu_js_1.DropdownMenuTriggerIcon, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) }))] })) }));
|
|
67
|
+
toggleMode === 'color-and-indicator') && ((0, jsx_runtime_1.jsx)(exports.ButtonToggleIndicator, { value: toggled })), children, isDropdownTrigger && ((0, jsx_runtime_1.jsx)(IconLoadingContext_js_1.IconLoadingProvider, { value: false, children: (0, jsx_runtime_1.jsx)(DropdownMenu_js_1.DropdownMenuTriggerIcon, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) }) }))] })) }));
|
|
68
68
|
}
|
|
69
69
|
exports.ButtonToggleIndicator = (0, react_2.memo)(function ToggleIndicator({ value, }) {
|
|
70
70
|
return ((0, jsx_runtime_1.jsx)(index_js_1.Icon, { "aria-hidden": true, name: "check", className: "transition-width w-0 ml--1", style: {
|
|
71
71
|
width: value ? '15px' : 0,
|
|
72
|
-
} }));
|
|
72
|
+
}, loading: false }));
|
|
73
73
|
});
|
|
74
74
|
// allows custom icons to trigger icon button behavior
|
|
75
75
|
exports.ButtonIcon = (0, hooks_js_1.withClassName)('div', 'icon flex-shrink-0 flex');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6CA,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6CA,gCA+GC;;AA5JD,qDAA4C;AAC5C,+BAA4B;AAC5B,wCAAuD;AACvD,iCASe;AACf,6CAA+C;AAC/C,kFAAuD;AAEvD,qEAA0E;AAC1E,yFAAiF;AACjF,yEAAoE;AACpE,+CAAwC;AACxC,kDAA8C;AAC9C,6CAAkD;AAwBlD,SAAgB,UAAU,CAAC,EAkBb;QAlBa,EAC1B,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,SAAS,EACpB,IAAI,EACJ,OAAO,EACP,UAAU,GAAG,qBAAqB,EAClC,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,eAAe,EACf,0BAA0B,EAC1B,GAAG,OAEU,EADV,KAAK,cAjBkB,yNAkB1B,CADQ;IAER,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEvC,MAAM,gBAAgB,GAAG,KAAK,CAAC;IAC/B,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,gBAAgB,CAAC;IACpE,MAAM,SAAS,GAAG,OAAO,IAAI,eAAe,CAAC;IAE7C,MAAM,UAAU,GAAG,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;IAC7D,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,GAAG,cAAc,CAAC;IAEzD,MAAM,4BAA4B,GAAG,IAAA,gDAAoB,GAAE,CAAC;IAC5D,MAAM,iBAAiB,GACtB,CAAC,0BAA0B;QAC3B,aAAa;QACb,4BAA4B,CAAC;IAE9B,MAAM,QAAQ,GAAG,IAAA,yBAAY,EAAC,yBAAyB,EAAE,EAAE,GAAG,CAAC,CAAC;IAEhE,MAAM,WAAW,iCAChB,GAAG,EAAE,QAAQ,IACV,KAAK,KACR,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,eAAe,EAAE,gBAAgB,EACjC,YAAY,EAAE,eAAe,EAC7B,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,SAAS,EACzB,gBAAgB,EAAE,aAAa,IAAI,SAAS,EAC5C,eAAe,EAAE,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,iBAAiB,EAAE,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAClE,uBAAuB,EAAE,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,IAAA,WAAI,EACd,IAAA,+BAAkB,EAAC;YAClB,KAAK;YACL,QAAQ;YACR,IAAI;YACJ,UAAU,EACT,OAAO,KAAK,SAAS;gBACrB,CAAC,UAAU,KAAK,OAAO,IAAI,UAAU,KAAK,qBAAqB,CAAC;YACjE,KAAK;YACL,eAAe;SACf,CAAC,EACF,SAAS,CACT,GACD,CAAC;IACF,4BAA4B;IAC5B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IACzC,CAAC;IAED,qDAAqD;IACrD,IAAI,OAAO,EAAE,CAAC;QACb,+CAA+C;QAC/C,OAAO,uBAAC,IAAI,oBAAK,WAAW,cAAG,QAAQ,IAAQ,CAAC;IACjD,CAAC;IAED,OAAO,CACN,uBAAC,2CAAmB,IAAC,KAAK,EAAE,SAAS,YACpC,wBAAC,IAAI,oBAAK,WAAW,eACpB,uBAAC,uBAAe,cACd,SAAS,IAAI,CACb,uBAAC,cAAM,CAAC,GAAG,IAEV,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAC5C,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,EACzC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EACzC,SAAS,EAAE,IAAA,WAAI,EACd,yDAAyD,EACzD,iCAAiC,CACjC,yCAGD,uBAAC,kBAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,IAVtD,SAAS,CAWD,CACb,GACgB,EACjB,OAAO,KAAK,SAAS;oBACrB,CAAC,UAAU,KAAK,WAAW;wBAC1B,UAAU,KAAK,qBAAqB,CAAC,IAAI,CACzC,uBAAC,6BAAqB,IAAC,KAAK,EAAE,OAAO,GAAI,CACzC,EACD,QAAQ,EACR,iBAAiB,IAAI,CACrB,uBAAC,2CAAmB,IAAC,KAAK,EAAE,KAAK,YAChC,uBAAC,yCAAuB,IAAC,OAAO,kBAC/B,uBAAC,eAAI,IAAC,IAAI,EAAC,SAAS,GAAG,GACE,GACL,CACtB,KACK,GACc,CACtB,CAAC;AACH,CAAC;AAEY,QAAA,qBAAqB,GAAG,IAAA,YAAI,EAAC,SAAS,eAAe,CAAC,EAClE,KAAK,GAGL;IACA,OAAO,CACN,uBAAC,eAAI,yBAEJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE;YACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB,EACD,OAAO,EAAE,KAAK,GACb,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,sDAAsD;AACzC,QAAA,UAAU,GAAG,IAAA,wBAAa,EAAC,KAAK,EAAE,yBAAyB,CAAC,CAAC;AAE7D,QAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IAC/C,eAAe,EAAE,6BAAqB;IACtC,IAAI,EAAE,kBAAU;CAChB,CAAC,CAAC;AAEH,SAAS,yBAAyB;IACjC,MAAM,gBAAgB,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE;QACtC,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO,IAAK,CAAC;QAChD,OAAO,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE;YACvC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAA2B,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEN,MAAM,GAAG,GAAG,IAAA,mBAAW,EACtB,CAAC,IAA8B,EAAE,EAAE;QAClC,IAAI,IAAI,IAAI,gBAAgB,EAAE,CAAC;YAC9B,gBAAgB,CAAC,UAAU,EAAE,CAAC;YAC9B,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACnE,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;aAAM,IAAI,gBAAgB,EAAE,CAAC;YAC7B,gBAAgB,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC;IACF,CAAC,EACD,CAAC,gBAAgB,CAAC,CAClB,CAAC;IAEF,OAAO,GAAG,CAAC;AACZ,CAAC;AAED,SAAS,mBAAmB,CAAC,MAAyB;IACrD,uDAAuD;IACvD,MAAM,QAAQ,GAAG;QAChB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACR,CAAC;IACF,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,CAAC,CAAC,KAAK,YAAY,WAAW,IAAI,KAAK,YAAY,UAAU,CAAC;YAAE,OAAO;QAC3E,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG;YAAE,OAAO,CAAC,uBAAuB;QAChG,IACC,CAAC,KAAK,YAAY,WAAW,IAAI,KAAK,YAAY,UAAU,CAAC;YAC7D,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC/B,CAAC;YACF,QAAQ,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;aAAM,CAAC;YACP,QAAQ,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACF,CAAC,CAAC,CAAC;IACH,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;QACxB,QAAQ,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IACD,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;IAChE,MAAM,CAAC,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,CAAC;AAED,SAAS,WAAW,CAAC,KAAgB;IACpC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAC9D,IAAI,MAAM,IAAI,KAAK,EAAE,CAAC;QACrB,MAAM,IAAI,GAAI,KAAa,CAAC,IAAI,CAAC;QACjC,IAAI,IAAI,KAAK,kBAAU;YAAE,OAAO,IAAI,CAAC;QACrC,IAAI,IAAI,KAAK,eAAI;YAAE,OAAO,IAAI,CAAC;QAC/B,IAAI,OAAO,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;YAAE,OAAO,IAAI,CAAC;IAC5E,CAAC;IACD,OAAO,KAAK,CAAC;AACd,CAAC;AAED,SAAS,0BAA0B,CAAC,QAAmB;IACtD,MAAM,QAAQ,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5C,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACjC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,EAAE,CAAC;YACpE,IAAK,KAAa,CAAC,IAAI,KAAK,gBAAQ,EAAE,CAAC;gBACtC,OAAO,0BAA0B,CAAE,KAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAClE,CAAC;QACF,CAAC;QACD,OAAO,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -15,17 +15,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
15
15
|
exports.CheckboxField = CheckboxField;
|
|
16
16
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
17
|
const formik_1 = require("formik");
|
|
18
|
-
const hooks_js_1 = require("../../hooks.js");
|
|
19
18
|
const useIdOrGenerated_js_1 = require("../../hooks/useIdOrGenerated.js");
|
|
19
|
+
const Box_js_1 = require("../box/Box.js");
|
|
20
20
|
const index_js_1 = require("../checkbox/index.js");
|
|
21
|
+
const FieldLabel_js_1 = require("./FieldLabel.js");
|
|
21
22
|
function CheckboxField(_a) {
|
|
22
23
|
var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
|
|
23
24
|
const [props, _, tools] = (0, formik_1.useField)({ name, type: 'checkbox' });
|
|
24
25
|
const id = (0, useIdOrGenerated_js_1.useIdOrGenerated)(providedId);
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(Box_js_1.Box, { gap: "sm", className: className, children: [(0, jsx_runtime_1.jsx)(index_js_1.Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
|
|
26
27
|
tools.setValue(!!v);
|
|
27
|
-
} }, rest)), label && (0, jsx_runtime_1.jsx)(
|
|
28
|
+
}, id: id }, rest)), label && ((0, jsx_runtime_1.jsx)(FieldLabel_js_1.HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
|
|
28
29
|
}
|
|
29
|
-
const FieldRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-row layer-components:gap-2');
|
|
30
|
-
const FieldLabel = (0, hooks_js_1.withClassName)('label', 'layer-components:inline-flex layer-components:flex-col layer-components:gap-1 layer-components:text-md layer-components:font-normal layer-components:color-dark/50 layer-components:mt-2px');
|
|
31
30
|
//# sourceMappingURL=CheckboxField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,sCA0BC;;AAxCD,mCAAkC;AAClC,yEAAmE;AACnE,0CAAoC;AACpC,mDAAgD;AAChD,mDAAuD;AAUvD,SAAgB,aAAa,CAAC,EAOT;QAPS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEM,EADjB,IAAI,cANsB,gDAO7B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,IAAA,iBAAQ,EAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IAC/D,MAAM,EAAE,GAAG,IAAA,sCAAgB,EAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,wBAAC,YAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,uBAAC,mBAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,uBAAC,oCAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1 +1,2 @@
|
|
|
1
1
|
export declare const FieldLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
|
|
2
|
+
export declare const HorizontalFieldLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.FieldLabel = void 0;
|
|
4
|
+
exports.HorizontalFieldLabel = exports.FieldLabel = void 0;
|
|
5
5
|
const hooks_js_1 = require("../../hooks.js");
|
|
6
|
-
exports.FieldLabel = (0, hooks_js_1.withClassName)('label', 'inline-flex flex-col gap-
|
|
6
|
+
exports.FieldLabel = (0, hooks_js_1.withClassName)('label', 'inline-flex flex-col gap-xs text-sm font-bold color-gray-ink ml-md');
|
|
7
|
+
exports.HorizontalFieldLabel = (0, hooks_js_1.withClassName)('label', 'inline-flex flex-row items-center gap-sm text-sm color-gray-ink');
|
|
7
8
|
//# sourceMappingURL=FieldLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":";;;AAAA,6CAA+C;AAElC,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":";;;AAAA,6CAA+C;AAElC,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,OAAO,EACP,oEAAoE,CACpE,CAAC;AAEW,QAAA,oBAAoB,GAAG,IAAA,wBAAa,EAChD,OAAO,EACP,iEAAiE,CACjE,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { FormikConfig, FormikValues } from 'formik';
|
|
|
2
2
|
import { CheckboxField } from './CheckboxField.js';
|
|
3
3
|
import { NumberStepperField } from './NumberStepperField.js';
|
|
4
4
|
import { SubmitButton } from './SubmitButton.js';
|
|
5
|
+
import { SwitchField } from './SwitchField.js';
|
|
5
6
|
import { TextAreaField } from './TextField.js';
|
|
6
7
|
export interface FormikFormProps<T extends FormikValues = FormikValues> extends FormikConfig<T> {
|
|
7
8
|
className?: string;
|
|
@@ -16,4 +17,8 @@ export declare const FormikForm: typeof FormikFormRoot & {
|
|
|
16
17
|
NumberStepperField: typeof NumberStepperField;
|
|
17
18
|
SubmitButton: typeof SubmitButton;
|
|
18
19
|
CheckboxField: typeof CheckboxField;
|
|
20
|
+
SwitchField: typeof SwitchField;
|
|
21
|
+
ToggleGroupField: (({ name, label, required, className, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
22
|
+
Item: import("react").FunctionComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
};
|
|
19
24
|
};
|
|
@@ -21,7 +21,9 @@ const CheckboxField_js_1 = require("./CheckboxField.js");
|
|
|
21
21
|
const Form_js_1 = require("./Form.js");
|
|
22
22
|
const NumberStepperField_js_1 = require("./NumberStepperField.js");
|
|
23
23
|
const SubmitButton_js_1 = require("./SubmitButton.js");
|
|
24
|
+
const SwitchField_js_1 = require("./SwitchField.js");
|
|
24
25
|
const TextField_js_1 = require("./TextField.js");
|
|
26
|
+
const ToggleGroupField_js_1 = require("./ToggleGroupField.js");
|
|
25
27
|
var formik_2 = require("formik");
|
|
26
28
|
Object.defineProperty(exports, "FieldArray", { enumerable: true, get: function () { return formik_2.FieldArray; } });
|
|
27
29
|
function FormikFormRoot(_a) {
|
|
@@ -29,7 +31,7 @@ function FormikFormRoot(_a) {
|
|
|
29
31
|
const wrappedOnSubmit = (0, react_1.useCallback)(async (values, bag) => {
|
|
30
32
|
try {
|
|
31
33
|
bag.setSubmitting(true);
|
|
32
|
-
return await onSubmit(values, bag);
|
|
34
|
+
return await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values, bag));
|
|
33
35
|
}
|
|
34
36
|
finally {
|
|
35
37
|
bag.setSubmitting(false);
|
|
@@ -46,5 +48,7 @@ exports.FormikForm = Object.assign(FormikFormRoot, {
|
|
|
46
48
|
NumberStepperField: NumberStepperField_js_1.NumberStepperField,
|
|
47
49
|
SubmitButton: SubmitButton_js_1.SubmitButton,
|
|
48
50
|
CheckboxField: CheckboxField_js_1.CheckboxField,
|
|
51
|
+
SwitchField: SwitchField_js_1.SwitchField,
|
|
52
|
+
ToggleGroupField: ToggleGroupField_js_1.ToggleGroupField,
|
|
49
53
|
});
|
|
50
54
|
//# sourceMappingURL=FormikForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormikForm.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormikForm.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAiBA,wCA+BC;;AAhDD,mCAA2E;AAC3E,iCAAoC;AACpC,yDAAmD;AACnD,uCAAiC;AACjC,mEAA6D;AAC7D,uDAAiD;AACjD,qDAA+C;AAC/C,iDAA0D;AAC1D,+DAAyD;AAOzD,iCAAoC;AAA3B,oGAAA,UAAU,OAAA;AAEnB,SAAgB,cAAc,CAA8B,EAKlC;QALkC,EAC3D,SAAS,EACT,QAAQ,EACR,QAAQ,OAEiB,EADtB,KAAK,cAJmD,qCAK3D,CADQ;IAER,MAAM,eAAe,GAAG,IAAA,mBAAW,EAClC,KAAK,EAAE,MAAc,EAAE,GAA0B,EAAE,EAAE;QACpD,IAAI,CAAC;YACJ,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxB,OAAO,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,EAAE,GAAG,CAAC,CAAA,CAAC;QACtC,CAAC;gBAAS,CAAC;YACV,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACF,CAAC,EACD,CAAC,QAAQ,CAAC,CACV,CAAC;IAEF,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,CACN,uBAAC,eAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cAClD,CAAC,MAAM,EAAE,EAAE,CAAC,uBAAC,cAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,CAAC,MAAM,CAAC,GAAQ,IAC1D,CACT,CAAC;IACH,CAAC;IAED,OAAO,CACN,uBAAC,eAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cACnD,uBAAC,cAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAQ,IACrC,CACT,CAAC;AACH,CAAC;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACvD,SAAS,EAAT,wBAAS;IACT,aAAa,EAAb,4BAAa;IACb,kBAAkB,EAAlB,0CAAkB;IAClB,YAAY,EAAZ,8BAAY;IACZ,aAAa,EAAb,gCAAa;IACb,WAAW,EAAX,4BAAW;IACX,gBAAgB,EAAhB,sCAAgB;CAChB,CAAC,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { CheckboxField } from './CheckboxField.js';
|
|
|
3
3
|
import { FormikForm } from './FormikForm.js';
|
|
4
4
|
import { NumberStepperField } from './NumberStepperField.js';
|
|
5
5
|
import { SubmitButton } from './SubmitButton.js';
|
|
6
|
+
import { SwitchField } from './SwitchField.js';
|
|
6
7
|
declare const meta: {
|
|
7
8
|
title: string;
|
|
8
9
|
component: typeof import("./FormikForm.js").FormikFormRoot & {
|
|
@@ -13,6 +14,10 @@ declare const meta: {
|
|
|
13
14
|
NumberStepperField: typeof NumberStepperField;
|
|
14
15
|
SubmitButton: typeof SubmitButton;
|
|
15
16
|
CheckboxField: typeof CheckboxField;
|
|
17
|
+
SwitchField: typeof SwitchField;
|
|
18
|
+
ToggleGroupField: (({ name, label, required, className, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
19
|
+
Item: import("react").FunctionComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
20
|
+
};
|
|
16
21
|
};
|
|
17
22
|
argTypes: {};
|
|
18
23
|
parameters: {
|
|
@@ -18,7 +18,9 @@ const CheckboxField_js_1 = require("./CheckboxField.js");
|
|
|
18
18
|
const FormikForm_js_1 = require("./FormikForm.js");
|
|
19
19
|
const NumberStepperField_js_1 = require("./NumberStepperField.js");
|
|
20
20
|
const SubmitButton_js_1 = require("./SubmitButton.js");
|
|
21
|
+
const SwitchField_js_1 = require("./SwitchField.js");
|
|
21
22
|
const TextField_js_1 = require("./TextField.js");
|
|
23
|
+
const ToggleGroupField_js_1 = require("./ToggleGroupField.js");
|
|
22
24
|
const meta = {
|
|
23
25
|
title: 'Components/Form',
|
|
24
26
|
component: FormikForm_js_1.FormikForm,
|
|
@@ -29,6 +31,11 @@ const meta = {
|
|
|
29
31
|
};
|
|
30
32
|
exports.default = meta;
|
|
31
33
|
exports.Default = {
|
|
34
|
+
args: {
|
|
35
|
+
onSubmit: (values) => {
|
|
36
|
+
alert(JSON.stringify(values, null, 2));
|
|
37
|
+
},
|
|
38
|
+
},
|
|
32
39
|
render(_a) {
|
|
33
40
|
var { initialValues } = _a, args = __rest(_a, ["initialValues"]);
|
|
34
41
|
return ((0, jsx_runtime_1.jsxs)(FormikForm_js_1.FormikForm, Object.assign({ initialValues: {
|
|
@@ -36,7 +43,9 @@ exports.Default = {
|
|
|
36
43
|
password: '',
|
|
37
44
|
age: 18,
|
|
38
45
|
tos: false,
|
|
39
|
-
|
|
46
|
+
newsletter: false,
|
|
47
|
+
plan: 'basic',
|
|
48
|
+
} }, args, { children: [(0, jsx_runtime_1.jsx)(TextField_js_1.TextField, { name: "email", type: "email", label: "Email" }), (0, jsx_runtime_1.jsx)(TextField_js_1.TextField, { name: "password", type: "password", label: "Password" }), (0, jsx_runtime_1.jsx)(NumberStepperField_js_1.NumberStepperField, { name: "age", label: "Age", min: 13, max: 100 }), (0, jsx_runtime_1.jsx)(CheckboxField_js_1.CheckboxField, { name: "tos", label: "I agree" }), (0, jsx_runtime_1.jsx)(SwitchField_js_1.SwitchField, { name: "newsletter", label: "Subscribe to newsletter" }), (0, jsx_runtime_1.jsxs)(ToggleGroupField_js_1.ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, children: [(0, jsx_runtime_1.jsx)(ToggleGroupField_js_1.ToggleGroupField.Item, { value: "basic", children: "Basic" }), (0, jsx_runtime_1.jsx)(ToggleGroupField_js_1.ToggleGroupField.Item, { value: "pro", children: "Pro" }), (0, jsx_runtime_1.jsx)(ToggleGroupField_js_1.ToggleGroupField.Item, { value: "enterprise", children: "Enterprise" })] }), (0, jsx_runtime_1.jsx)(SubmitButton_js_1.SubmitButton, { children: "Sign up" })] })));
|
|
40
49
|
},
|
|
41
50
|
};
|
|
42
51
|
//# sourceMappingURL=FormikForm.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,yDAAmD;AACnD,mDAA6C;AAC7C,mEAA6D;AAC7D,uDAAiD;AACjD,iDAA2C;
|
|
1
|
+
{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,yDAAmD;AACnD,mDAA6C;AAC7C,mEAA6D;AAC7D,uDAAiD;AACjD,qDAA+C;AAC/C,iDAA2C;AAC3C,+DAAyD;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,0BAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;KACD;IACD,MAAM,CAAC,EAA0B;YAA1B,EAAE,aAAa,OAAW,EAAN,IAAI,cAAxB,iBAA0B,CAAF;QAC9B,OAAO,CACN,wBAAC,0BAAU,kBACV,aAAa,EAAE;gBACd,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,KAAK;gBACjB,IAAI,EAAE,OAAO;aACb,IACG,IAAI,eAER,uBAAC,wBAAS,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG,EACrD,uBAAC,wBAAS,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,GAAG,EAC9D,uBAAC,0CAAkB,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,EAChE,uBAAC,gCAAa,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,GAAG,EAC5C,uBAAC,4BAAW,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,yBAAyB,GAAG,EACjE,wBAAC,sCAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,QAAQ,mBAER,uBAAC,sCAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,sBAA8B,EAClE,uBAAC,sCAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,oBAA4B,EAC9D,uBAAC,sCAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,YAAY,2BAEjB,IACN,EACnB,uBAAC,8BAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}
|
|
@@ -7,6 +7,6 @@ const formik_1 = require("formik");
|
|
|
7
7
|
const Button_js_1 = require("../button/Button.js");
|
|
8
8
|
function SubmitButton(props) {
|
|
9
9
|
const { isSubmitting, isValid } = (0, formik_1.useFormikContext)();
|
|
10
|
-
return ((0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ loading: isSubmitting, disabled: !isValid, color: "primary", type: "submit" }, props)));
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ loading: isSubmitting, disabled: !isValid, color: "primary", emphasis: "primary", type: "submit" }, props)));
|
|
11
11
|
}
|
|
12
12
|
//# sourceMappingURL=SubmitButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";;AAGA,
|
|
1
|
+
{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";;AAGA,oCAYC;;AAfD,mCAA0C;AAC1C,mDAA0D;AAE1D,SAAgB,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,IAAA,yBAAgB,GAAE,CAAC;IACrD,OAAO,CACN,uBAAC,kBAAM,kBACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,OAAO,EAClB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,IACT,KAAK,EACR,CACF,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface SwitchFieldProps {
|
|
2
|
+
name: string;
|
|
3
|
+
label?: string;
|
|
4
|
+
required?: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
id?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare function SwitchField({ name, label, className, required, id: providedId, ...rest }: SwitchFieldProps): import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.SwitchField = SwitchField;
|
|
16
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
+
const formik_1 = require("formik");
|
|
18
|
+
const useIdOrGenerated_js_1 = require("../../hooks/useIdOrGenerated.js");
|
|
19
|
+
const Box_js_1 = require("../box/Box.js");
|
|
20
|
+
const Switch_js_1 = require("../switch/Switch.js");
|
|
21
|
+
const FieldLabel_js_1 = require("./FieldLabel.js");
|
|
22
|
+
function SwitchField(_a) {
|
|
23
|
+
var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
|
|
24
|
+
const [props, _, tools] = (0, formik_1.useField)({ name, type: 'checkbox' });
|
|
25
|
+
const id = (0, useIdOrGenerated_js_1.useIdOrGenerated)(providedId);
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(Box_js_1.Box, { gap: "sm", className: className, children: [(0, jsx_runtime_1.jsx)(Switch_js_1.Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
|
|
27
|
+
tools.setValue(!!v);
|
|
28
|
+
}, id: id }, rest)), label && ((0, jsx_runtime_1.jsx)(FieldLabel_js_1.HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=SwitchField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,kCA0BC;;AAxCD,mCAAkC;AAClC,yEAAmE;AACnE,0CAAoC;AACpC,mDAA6C;AAC7C,mDAAuD;AAUvD,SAAgB,WAAW,CAAC,EAOT;QAPS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEI,EADf,IAAI,cANoB,gDAO3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,IAAA,iBAAQ,EAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IAC/D,MAAM,EAAE,GAAG,IAAA,sCAAgB,EAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,wBAAC,YAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,uBAAC,kBAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,uBAAC,oCAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
|
|
2
|
+
export type ToggleGroupFieldProps = ToggleGroupProps & {
|
|
3
|
+
name: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
required?: boolean;
|
|
6
|
+
className?: string;
|
|
7
|
+
id?: string;
|
|
8
|
+
};
|
|
9
|
+
declare function ToggleGroupFieldDefault({ name, label, required, className, id, ...props }: ToggleGroupFieldProps): import("react/jsx-runtime.js").JSX.Element;
|
|
10
|
+
export declare const ToggleGroupField: typeof ToggleGroupFieldDefault & {
|
|
11
|
+
Item: import("react").FunctionComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
8
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
10
|
+
t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.ToggleGroupField = void 0;
|
|
16
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
17
|
+
const formik_1 = require("formik");
|
|
18
|
+
const toggleGroup_js_1 = require("../toggleGroup/toggleGroup.js");
|
|
19
|
+
const FieldLabel_js_1 = require("./FieldLabel.js");
|
|
20
|
+
const TextField_js_1 = require("./TextField.js");
|
|
21
|
+
function ToggleGroupFieldDefault(_a) {
|
|
22
|
+
var { name, label, required, className, id } = _a, props = __rest(_a, ["name", "label", "required", "className", "id"]);
|
|
23
|
+
const [fieldProps, _, tools] = (0, formik_1.useField)(Object.assign({ name }, props));
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(TextField_js_1.FieldRoot, { children: [label && (0, jsx_runtime_1.jsx)(FieldLabel_js_1.FieldLabel, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)(toggleGroup_js_1.ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => tools.setValue(v) }, props, { id: id, className: className }))] }));
|
|
25
|
+
}
|
|
26
|
+
exports.ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
|
|
27
|
+
Item: toggleGroup_js_1.ToggleGroup.Item,
|
|
28
|
+
});
|
|
29
|
+
//# sourceMappingURL=ToggleGroupField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,mCAAkC;AAClC,kEAA8E;AAC9E,mDAA6C;AAC7C,iDAA2C;AAU3C,SAAS,uBAAuB,CAAC,EAOT;QAPS,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,EAAE,OAEqB,EADpB,KAAK,cANwB,gDAOhC,CADQ;IAER,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,IAAA,iBAAQ,kBAAG,IAAI,IAAK,KAAK,EAAG,CAAC;IAE5D,OAAO,CACN,wBAAC,wBAAS,eACR,KAAK,IAAI,uBAAC,0BAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,uBAAC,4BAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IACxC,KAAK,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,IACnB,IACS,CACZ,CAAC;AACH,CAAC;AAEY,QAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,4BAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
|
|
@@ -3,7 +3,8 @@ import { IconName } from './generated/iconNames.js';
|
|
|
3
3
|
export interface IconProps extends HTMLAttributes<SVGSVGElement> {
|
|
4
4
|
name: IconName;
|
|
5
5
|
size?: number;
|
|
6
|
+
loading?: boolean;
|
|
6
7
|
}
|
|
7
|
-
export declare const Icon: ({ ref, name, size, className, ...rest }: IconProps & {
|
|
8
|
+
export declare const Icon: ({ ref, name, size, className, loading: loadingProp, ...rest }: IconProps & {
|
|
8
9
|
ref?: React.Ref<SVGSVGElement>;
|
|
9
10
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -21,8 +21,9 @@ const clsx_1 = __importDefault(require("clsx"));
|
|
|
21
21
|
const Spinner_js_1 = require("../spinner/Spinner.js");
|
|
22
22
|
const IconLoadingContext_js_1 = require("./IconLoadingContext.js");
|
|
23
23
|
const Icon = function Icon(_a) {
|
|
24
|
-
var { ref, name, size = 15, className } = _a, rest = __rest(_a, ["ref", "name", "size", "className"]);
|
|
25
|
-
const
|
|
24
|
+
var { ref, name, size = 15, className, loading: loadingProp } = _a, rest = __rest(_a, ["ref", "name", "size", "className", "loading"]);
|
|
25
|
+
const loadingContext = (0, IconLoadingContext_js_1.useIconLoading)();
|
|
26
|
+
const loading = loadingProp !== false && (loadingProp || loadingContext);
|
|
26
27
|
if (loading) {
|
|
27
28
|
return (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: size, className: "icon inline-block" });
|
|
28
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAA8B;AAE9B,sDAAgD;AAEhD,mEAAyD;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAA8B;AAE9B,sDAAgD;AAEhD,mEAAyD;AAQlD,MAAM,IAAI,GAAG,SAAS,IAAI,CAAC,EASjC;QATiC,EACjC,GAAG,EACH,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,SAAS,EACT,OAAO,EAAE,WAAW,OAIpB,EAHG,IAAI,cAN0B,+CAOjC,CADO;IAIP,MAAM,cAAc,GAAG,IAAA,sCAAc,GAAE,CAAC;IACxC,MAAM,OAAO,GAAG,WAAW,KAAK,KAAK,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,CAAC;IAEzE,IAAI,OAAO,EAAE,CAAC;QACb,OAAO,uBAAC,oBAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,mBAAmB,GAAG,CAAC;IAC9D,CAAC;IAED,OAAO,CACN,8CACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,MAAM,EACN,0CAA0C,EAC1C,SAAS,CACT,EACD,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,IACR,IAAI,cAER,gCAAK,SAAS,EAAE,SAAS,IAAI,EAAE,GAAI,IAC9B,CACN,CAAC;AACH,CAAC,CAAC;AAhCW,QAAA,IAAI,QAgCf"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
2
2
|
export declare const ToggleGroupRoot: import("react").FunctionComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
|
|
3
3
|
export declare const ToggleGroupItem: import("react").FunctionComponent<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
export type ToggleGroupProps = ToggleGroupPrimitive.ToggleGroupMultipleProps | ToggleGroupPrimitive.ToggleGroupSingleProps;
|
|
4
5
|
export declare const ToggleGroup: import("react").FunctionComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>> & {
|
|
5
6
|
Item: import("react").FunctionComponent<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
6
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggleGroup.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mFAAqE;AACrE,mEAA6D;AAEhD,QAAA,eAAe,GAAG,IAAA,gCAAa,EAC3C,oBAAoB,CAAC,IAAI,EACzB,yEAAyE,CACzE,CAAC;AACW,QAAA,eAAe,GAAG,IAAA,gCAAa,EAC3C,oBAAoB,CAAC,IAAI,EACzB,wLAAwL,EACxL,yEAAyE,EACzE,iEAAiE,EACjE,iEAAiE,EACjE,6FAA6F,CAC7F,CAAC;
|
|
1
|
+
{"version":3,"file":"toggleGroup.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mFAAqE;AACrE,mEAA6D;AAEhD,QAAA,eAAe,GAAG,IAAA,gCAAa,EAC3C,oBAAoB,CAAC,IAAI,EACzB,yEAAyE,CACzE,CAAC;AACW,QAAA,eAAe,GAAG,IAAA,gCAAa,EAC3C,oBAAoB,CAAC,IAAI,EACzB,wLAAwL,EACxL,yEAAyE,EACzE,iEAAiE,EACjE,iEAAiE,EACjE,6FAA6F,CAC7F,CAAC;AAKW,QAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAe,EAAE;IACzD,IAAI,EAAE,uBAAe;CACrB,CAAC,CAAC"}
|