@a-type/ui 3.0.24 → 3.0.25

package/dist/esm/components/forms/FieldLabel.js

@@ -1,4 +1,5 @@
 // @unocss-include
 import { withClassName } from '../../hooks.js';
-export const FieldLabel = withClassName('label', 'inline-flex flex-col gap-1 text-sm font-bold color-gray-ink');
+export const FieldLabel = withClassName('label', 'inline-flex flex-col gap-xs text-sm font-bold color-gray-ink ml-md');
+export const HorizontalFieldLabel = withClassName('label', 'inline-flex flex-row items-center gap-sm text-sm color-gray-ink');
 //# sourceMappingURL=FieldLabel.js.map

package/dist/esm/components/forms/FieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,OAAO,EACP,6DAA6D,CAC7D,CAAC"}
+{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,OAAO,EACP,oEAAoE,CACpE,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAChD,OAAO,EACP,iEAAiE,CACjE,CAAC"}

package/dist/esm/components/forms/FormikForm.d.ts

@@ -2,6 +2,7 @@ import { FormikConfig, FormikValues } from 'formik';
 import { CheckboxField } from './CheckboxField.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
 import { TextAreaField } from './TextField.js';
 export interface FormikFormProps<T extends FormikValues = FormikValues> extends FormikConfig<T> {
     className?: string;
@@ -16,4 +17,8 @@ export declare const FormikForm: typeof FormikFormRoot & {
     NumberStepperField: typeof NumberStepperField;
     SubmitButton: typeof SubmitButton;
     CheckboxField: typeof CheckboxField;
+    SwitchField: typeof SwitchField;
+    ToggleGroupField: (({ name, label, required, className, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps) => import("react/jsx-runtime").JSX.Element) & {
+        Item: import("react").FunctionComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    };
 };

package/dist/esm/components/forms/FormikForm.js

@@ -17,14 +17,16 @@ import { CheckboxField } from './CheckboxField.js';
 import { Form } from './Form.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
 import { TextAreaField, TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
 export { FieldArray } from 'formik';
 export function FormikFormRoot(_a) {
     var { className, children, onSubmit } = _a, props = __rest(_a, ["className", "children", "onSubmit"]);
     const wrappedOnSubmit = useCallback(async (values, bag) => {
         try {
             bag.setSubmitting(true);
-            return await onSubmit(values, bag);
+            return await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values, bag));
         }
         finally {
             bag.setSubmitting(false);
@@ -41,5 +43,7 @@ export const FormikForm = Object.assign(FormikFormRoot, {
     NumberStepperField,
     SubmitButton,
     CheckboxField,
+    SwitchField,
+    ToggleGroupField,
 });
 //# sourceMappingURL=FormikForm.js.map

package/dist/esm/components/forms/FormikForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikForm.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAA6C,MAAM,QAAQ,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO1D,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,UAAU,cAAc,CAA8B,EAKlC;QALkC,EAC3D,SAAS,EACT,QAAQ,EACR,QAAQ,OAEiB,EADtB,KAAK,cAJmD,qCAK3D,CADQ;IAER,MAAM,eAAe,GAAG,WAAW,CAClC,KAAK,EAAE,MAAc,EAAE,GAA0B,EAAE,EAAE;QACpD,IAAI,CAAC;YACJ,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxB,OAAO,MAAM,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpC,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,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cAClD,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,CAAC,MAAM,CAAC,GAAQ,IAC1D,CACT,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cACnD,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAQ,IACrC,CACT,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACvD,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,YAAY;IACZ,aAAa;CACb,CAAC,CAAC"}
+{"version":3,"file":"FormikForm.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAA6C,MAAM,QAAQ,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAOzD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,UAAU,cAAc,CAA8B,EAKlC;QALkC,EAC3D,SAAS,EACT,QAAQ,EACR,QAAQ,OAEiB,EADtB,KAAK,cAJmD,qCAK3D,CADQ;IAER,MAAM,eAAe,GAAG,WAAW,CAClC,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,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cAClD,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,CAAC,MAAM,CAAC,GAAQ,IAC1D,CACT,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cACnD,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAQ,IACrC,CACT,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACvD,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,YAAY;IACZ,aAAa;IACb,WAAW;IACX,gBAAgB;CAChB,CAAC,CAAC"}

package/dist/esm/components/forms/FormikForm.stories.d.ts

@@ -3,6 +3,7 @@ import { CheckboxField } from './CheckboxField.js';
 import { FormikForm } from './FormikForm.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
 declare const meta: {
     title: string;
     component: typeof import("./FormikForm.js").FormikFormRoot & {
@@ -13,6 +14,10 @@ declare const meta: {
         NumberStepperField: typeof NumberStepperField;
         SubmitButton: typeof SubmitButton;
         CheckboxField: typeof CheckboxField;
+        SwitchField: typeof SwitchField;
+        ToggleGroupField: (({ name, label, required, className, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps) => import("react/jsx-runtime").JSX.Element) & {
+            Item: import("react").FunctionComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+        };
     };
     argTypes: {};
     parameters: {

package/dist/esm/components/forms/FormikForm.stories.js

@@ -15,7 +15,9 @@ import { CheckboxField } from './CheckboxField.js';
 import { FormikForm } from './FormikForm.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
 import { TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
 const meta = {
     title: 'Components/Form',
     component: FormikForm,
@@ -26,6 +28,11 @@ const meta = {
 };
 export default meta;
 export const Default = {
+    args: {
+        onSubmit: (values) => {
+            alert(JSON.stringify(values, null, 2));
+        },
+    },
     render(_a) {
         var { initialValues } = _a, args = __rest(_a, ["initialValues"]);
         return (_jsxs(FormikForm, Object.assign({ initialValues: {
@@ -33,7 +40,9 @@ export const Default = {
                 password: '',
                 age: 18,
                 tos: false,
-            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email" }), _jsx(TextField, { name: "password", type: "password", label: "Password" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100 }), _jsx(CheckboxField, { name: "tos", label: "I agree" }), _jsx(SubmitButton, { children: "Sign up" })] })));
+                newsletter: false,
+                plan: 'basic',
+            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email" }), _jsx(TextField, { name: "password", type: "password", label: "Password" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100 }), _jsx(CheckboxField, { name: "tos", label: "I agree" }), _jsx(SwitchField, { name: "newsletter", label: "Subscribe to newsletter" }), _jsxs(ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, children: [_jsx(ToggleGroupField.Item, { value: "basic", children: "Basic" }), _jsx(ToggleGroupField.Item, { value: "pro", children: "Pro" }), _jsx(ToggleGroupField.Item, { value: "enterprise", children: "Enterprise" })] }), _jsx(SubmitButton, { children: "Sign up" })] })));
     },
 };
 //# sourceMappingURL=FormikForm.stories.js.map

package/dist/esm/components/forms/FormikForm.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,EAA0B;YAA1B,EAAE,aAAa,OAAW,EAAN,IAAI,cAAxB,iBAA0B,CAAF;QAC9B,OAAO,CACN,MAAC,UAAU,kBACV,aAAa,EAAE;gBACd,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,KAAK;aACV,IACG,IAAI,eAER,KAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG,EACrD,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,GAAG,EAC9D,KAAC,kBAAkB,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,EAChE,KAAC,aAAa,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,GAAG,EAC5C,KAAC,YAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,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,MAAC,UAAU,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,KAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG,EACrD,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,GAAG,EAC9D,KAAC,kBAAkB,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,EAChE,KAAC,aAAa,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,GAAG,EAC5C,KAAC,WAAW,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,yBAAyB,GAAG,EACjE,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,QAAQ,mBAER,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,sBAA8B,EAClE,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,oBAA4B,EAC9D,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,YAAY,2BAEjB,IACN,EACnB,KAAC,YAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/esm/components/forms/SubmitButton.js

@@ -4,6 +4,6 @@ import { useFormikContext } from 'formik';
 import { Button } from '../button/Button.js';
 export function SubmitButton(props) {
     const { isSubmitting, isValid } = useFormikContext();
-    return (_jsx(Button, Object.assign({ loading: isSubmitting, disabled: !isValid, color: "primary", type: "submit" }, props)));
+    return (_jsx(Button, Object.assign({ loading: isSubmitting, disabled: !isValid, color: "primary", emphasis: "primary", type: "submit" }, props)));
 }
 //# sourceMappingURL=SubmitButton.js.map

package/dist/esm/components/forms/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACN,KAAC,MAAM,kBACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,OAAO,EAClB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,IACT,KAAK,EACR,CACF,CAAC;AACH,CAAC"}
+{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACN,KAAC,MAAM,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"}

package/dist/esm/components/forms/SwitchField.d.ts

@@ -0,0 +1,8 @@
+export interface SwitchFieldProps {
+    name: string;
+    label?: string;
+    required?: boolean;
+    className?: string;
+    id?: string;
+}
+export declare function SwitchField({ name, label, className, required, id: providedId, ...rest }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/forms/SwitchField.js

@@ -0,0 +1,27 @@
+// @unocss-include
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
+import { Switch } from '../switch/Switch.js';
+import { HorizontalFieldLabel } from './FieldLabel.js';
+export function SwitchField(_a) {
+    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    const [props, _, tools] = useField({ name, type: 'checkbox' });
+    const id = useIdOrGenerated(providedId);
+    return (_jsxs(Box, { gap: "sm", className: className, children: [_jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+                    tools.setValue(!!v);
+                }, id: id }, rest)), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+}
+//# sourceMappingURL=SwitchField.js.map

package/dist/esm/components/forms/SwitchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUvD,MAAM,UAAU,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,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IAC/D,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,KAAC,MAAM,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,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/forms/ToggleGroupField.d.ts

@@ -0,0 +1,13 @@
+import { ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
+export type ToggleGroupFieldProps = ToggleGroupProps & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    className?: string;
+    id?: string;
+};
+declare function ToggleGroupFieldDefault({ name, label, required, className, id, ...props }: ToggleGroupFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroupField: typeof ToggleGroupFieldDefault & {
+    Item: import("react").FunctionComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/esm/components/forms/ToggleGroupField.js

@@ -0,0 +1,26 @@
+// @unocss-include
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
+import { FieldLabel } from './FieldLabel.js';
+import { FieldRoot } from './TextField.js';
+function ToggleGroupFieldDefault(_a) {
+    var { name, label, required, className, id } = _a, props = __rest(_a, ["name", "label", "required", "className", "id"]);
+    const [fieldProps, _, tools] = useField(Object.assign({ name }, props));
+    return (_jsxs(FieldRoot, { children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => tools.setValue(v) }, props, { id: id, className: className }))] }));
+}
+export const ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
+    Item: ToggleGroup.Item,
+});
+//# sourceMappingURL=ToggleGroupField.js.map

package/dist/esm/components/forms/ToggleGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;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,QAAQ,iBAAG,IAAI,IAAK,KAAK,EAAG,CAAC;IAE5D,OAAO,CACN,MAAC,SAAS,eACR,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,WAAW,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;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}

package/dist/esm/components/toggleGroup/toggleGroup.d.ts

@@ -1,6 +1,7 @@
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 export declare const ToggleGroupRoot: import("react").FunctionComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ToggleGroupItem: import("react").FunctionComponent<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type ToggleGroupProps = ToggleGroupPrimitive.ToggleGroupMultipleProps | ToggleGroupPrimitive.ToggleGroupSingleProps;
 export declare const ToggleGroup: import("react").FunctionComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & import("react").RefAttributes<HTMLDivElement>> & {
     Item: import("react").FunctionComponent<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/esm/components/toggleGroup/toggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,oBAAoB,CAAC,IAAI,EACzB,yEAAyE,CACzE,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,oBAAoB,CAAC,IAAI,EACzB,wLAAwL,EACxL,yEAAyE,EACzE,iEAAiE,EACjE,iEAAiE,EACjE,6FAA6F,CAC7F,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,IAAI,EAAE,eAAe;CACrB,CAAC,CAAC"}
+{"version":3,"file":"toggleGroup.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,oBAAoB,CAAC,IAAI,EACzB,yEAAyE,CACzE,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAC3C,oBAAoB,CAAC,IAAI,EACzB,wLAAwL,EACxL,yEAAyE,EACzE,iEAAiE,EACjE,iEAAiE,EACjE,6FAA6F,CAC7F,CAAC;AAKF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,IAAI,EAAE,eAAe;CACrB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.0.24",
+  "version": "3.0.25",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/forms/CheckboxField.tsx

@@ -1,7 +1,8 @@
 import { useField } from 'formik';
-import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
 import { Checkbox } from '../checkbox/index.js';
+import { HorizontalFieldLabel } from './FieldLabel.js';
 
 export interface CheckboxFieldProps {
 	name: string;
@@ -22,26 +23,19 @@ export function CheckboxField({
 	const [props, _, tools] = useField({ name, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<FieldRoot className={className}>
+		<Box gap="sm" className={className}>
 			<Checkbox
 				{...props}
 				checked={props.checked}
 				onCheckedChange={(v) => {
 					tools.setValue(!!v);
 				}}
+				id={id}
 				{...rest}
 			/>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-		</FieldRoot>
+			{label && (
+				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
+			)}
+		</Box>
 	);
 }
-
-const FieldRoot = withClassName(
-	'div',
-	'layer-components:(flex flex-row gap-2)',
-);
-
-const FieldLabel = withClassName(
-	'label',
-	'layer-components:(inline-flex flex-col gap-1 text-md font-normal color-dark/50 mt-2px)',
-);

package/src/components/forms/FieldLabel.tsx

@@ -2,5 +2,10 @@ import { withClassName } from '../../hooks.js';
 
 export const FieldLabel = withClassName(
 	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold color-gray-ink',
+	'inline-flex flex-col gap-xs text-sm font-bold color-gray-ink ml-md',
+);
+
+export const HorizontalFieldLabel = withClassName(
+	'label',
+	'inline-flex flex-row items-center gap-sm text-sm color-gray-ink',
 );

package/src/components/forms/FormikForm.stories.tsx

@@ -3,7 +3,9 @@ import { CheckboxField } from './CheckboxField.js';
 import { FormikForm } from './FormikForm.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
 import { TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
 
 const meta = {
 	title: 'Components/Form',
@@ -19,6 +21,11 @@ export default meta;
 type Story = StoryObj<typeof FormikForm>;
 
 export const Default: Story = {
+	args: {
+		onSubmit: (values) => {
+			alert(JSON.stringify(values, null, 2));
+		},
+	},
 	render({ initialValues, ...args }) {
 		return (
 			<FormikForm
@@ -27,6 +34,8 @@ export const Default: Story = {
 					password: '',
 					age: 18,
 					tos: false,
+					newsletter: false,
+					plan: 'basic',
 				}}
 				{...args}
 			>
@@ -34,6 +43,19 @@ export const Default: Story = {
 				<TextField name="password" type="password" label="Password" />
 				<NumberStepperField name="age" label="Age" min={13} max={100} />
 				<CheckboxField name="tos" label="I agree" />
+				<SwitchField name="newsletter" label="Subscribe to newsletter" />
+				<ToggleGroupField
+					type="single"
+					name="plan"
+					label="Select your plan"
+					required
+				>
+					<ToggleGroupField.Item value="basic">Basic</ToggleGroupField.Item>
+					<ToggleGroupField.Item value="pro">Pro</ToggleGroupField.Item>
+					<ToggleGroupField.Item value="enterprise">
+						Enterprise
+					</ToggleGroupField.Item>
+				</ToggleGroupField>
 				<SubmitButton>Sign up</SubmitButton>
 			</FormikForm>
 		);

package/src/components/forms/FormikForm.tsx

@@ -4,7 +4,9 @@ import { CheckboxField } from './CheckboxField.js';
 import { Form } from './Form.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
 import { TextAreaField, TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
 
 export interface FormikFormProps<T extends FormikValues = FormikValues>
 	extends FormikConfig<T> {
@@ -23,7 +25,7 @@ export function FormikFormRoot<Values extends FormikValues>({
 		async (values: Values, bag: FormikHelpers<Values>) => {
 			try {
 				bag.setSubmitting(true);
-				return await onSubmit(values, bag);
+				return await onSubmit?.(values, bag);
 			} finally {
 				bag.setSubmitting(false);
 			}
@@ -52,4 +54,6 @@ export const FormikForm = Object.assign(FormikFormRoot, {
 	NumberStepperField,
 	SubmitButton,
 	CheckboxField,
+	SwitchField,
+	ToggleGroupField,
 });

package/src/components/forms/SubmitButton.tsx

@@ -8,6 +8,7 @@ export function SubmitButton(props: ButtonProps) {
 			loading={isSubmitting}
 			disabled={!isValid}
 			color="primary"
+			emphasis="primary"
 			type="submit"
 			{...props}
 		/>

package/src/components/forms/SwitchField.tsx

@@ -0,0 +1,41 @@
+import { useField } from 'formik';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
+import { Switch } from '../switch/Switch.js';
+import { HorizontalFieldLabel } from './FieldLabel.js';
+
+export interface SwitchFieldProps {
+	name: string;
+	label?: string;
+	required?: boolean;
+	className?: string;
+	id?: string;
+}
+
+export function SwitchField({
+	name,
+	label,
+	className,
+	required,
+	id: providedId,
+	...rest
+}: SwitchFieldProps) {
+	const [props, _, tools] = useField({ name, type: 'checkbox' });
+	const id = useIdOrGenerated(providedId);
+	return (
+		<Box gap="sm" className={className}>
+			<Switch
+				{...props}
+				checked={props.checked}
+				onCheckedChange={(v) => {
+					tools.setValue(!!v);
+				}}
+				id={id}
+				{...rest}
+			/>
+			{label && (
+				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
+			)}
+		</Box>
+	);
+}

package/src/components/forms/ToggleGroupField.tsx

@@ -0,0 +1,40 @@
+import { useField } from 'formik';
+import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
+import { FieldLabel } from './FieldLabel.js';
+import { FieldRoot } from './TextField.js';
+
+export type ToggleGroupFieldProps = ToggleGroupProps & {
+	name: string;
+	label?: string;
+	required?: boolean;
+	className?: string;
+	id?: string;
+};
+
+function ToggleGroupFieldDefault({
+	name,
+	label,
+	required,
+	className,
+	id,
+	...props
+}: ToggleGroupFieldProps) {
+	const [fieldProps, _, tools] = useField({ name, ...props });
+
+	return (
+		<FieldRoot>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			<ToggleGroup
+				{...fieldProps}
+				onValueChange={(v: any) => tools.setValue(v)}
+				{...props}
+				id={id}
+				className={className}
+			/>
+		</FieldRoot>
+	);
+}
+
+export const ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
+	Item: ToggleGroup.Item,
+});

package/src/components/toggleGroup/toggleGroup.tsx

@@ -14,6 +14,9 @@ export const ToggleGroupItem = withClassName(
 	'layer-components:[&[data-state=on]]:(bg-main border-default shadow-sm hover:border-default)',
 );
 
+export type ToggleGroupProps =
+	| ToggleGroupPrimitive.ToggleGroupMultipleProps
+	| ToggleGroupPrimitive.ToggleGroupSingleProps;
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {
 	Item: ToggleGroupItem,
 });