form-input-fields 1.0.6 → 1.0.7

package/README.md

@@ -73,7 +73,7 @@ For Internet Explorer 11 support, you'll need to include polyfills. See [Browser
 After installation, you can import and use the components in your application:
 
 ```tsx
-import { FormTextField, FormDateField, FormMaskField } from 'form-input-fields';
+import { FormTextField, FormDateField, FormMaskField, FormSwitch } from 'form-input-fields';
 ```
 
 ### Troubleshooting
@@ -156,6 +156,14 @@ If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.
     - [Basic Checkbox](#basic-checkbox)
     - [Checkbox with Formik](#checkbox-with-formik)
     - [Custom Styled Checkbox](#custom-styled-checkbox)
+- [FormSwitch](#formswitch)
+  - [Features](#features-5)
+  - [Basic Usage](#basic-usage-5)
+  - [Props](#props-5)
+  - [Examples](#examples-5)
+    - [Basic Switch](#basic-switch)
+    - [Switch with Formik](#switch-with-formik)
+    - [Custom Styled Switch](#custom-styled-switch)
 - [FormDateTextField](#formdatetextfield)
   - [Features](#features-3)
   - [Available Date Formats](#available-date-formats-1)
@@ -809,6 +817,198 @@ function CustomCheckbox() {
 }
 ```
 
+## FormSwitch
+
+A customizable switch component with Material-UI and Formik integration, providing consistent styling and behavior for boolean inputs across your application.
+
+### Features
+
+- **Material-UI Integration**: Consistent styling with Material-UI's design system
+- **Formik Integration**: Seamless form state management with error handling
+- **Flexible Label Placement**: Support for different label positions
+- **TypeScript Support**: Full type safety with exported interfaces
+- **Accessibility**: Built with accessibility in mind, following WAI-ARIA guidelines
+- **Error Handling**: Built-in error state management with Formik
+- **Responsive Design**: Works well on all screen sizes
+
+### Basic Usage
+
+```tsx
+import { Formik, Field } from 'formik';
+import { FormSwitch } from 'form-input-fields';
+
+// Basic usage
+<FormSwitch
+  label="Enable Notifications"
+  checked={notificationsEnabled}
+  onChange={(e, checked) => setNotificationsEnabled(checked)}
+/>
+
+// With Formik
+<Formik
+  initialValues={{ notifications: false }}
+  onSubmit={(values) => console.log(values)}
+>
+  <Field
+    component={FormSwitch}
+    name="notifications"
+    label="Enable Notifications"
+    helperText="Receive email notifications"
+  />
+</Formik>
+```
+
+### Props
+
+The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps` (Formik), and Material-UI's `SwitchProps`.
+
+#### FormSwitchProps Interface
+
+| Prop             | Type       | Default | Description                                      |
+| ---------------- | ---------- | ------- | ------------------------------------------------ |
+| `label`          | `string`   | -       | Label text displayed next to the switch          |
+| `labelPlacement` | `string`   | 'end'   | Position of label ('top', 'start', 'bottom', 'end') |
+| `color`          | `string`   | 'primary'| Switch color ('primary', 'secondary', 'error', 'info', 'success', 'warning', 'default') |
+| `size`           | `string`   | 'medium'| Switch size ('small' or 'medium')               |
+| `disabled`       | `boolean`  | `false` | Disable the switch                               |
+| `required`       | `boolean`  | `false` | Mark the field as required                       |
+| `onChange`       | `function` | -       | Custom change handler with context data          |
+| `onBlur`         | `function` | -       | Custom blur handler                               |
+| `helperText`     | `string`   | -       | Helper text to display below the switch          |
+| `error`          | `boolean`  | `false` | Error state of the switch                        |
+| `className`      | `string`   | -       | Custom class name for the root element           |
+
+#### Common Props (from FieldProps & SwitchProps)
+
+| Prop         | Type             | Required | Description                                   |
+|--------------|------------------|----------|-----------------------------------------------|
+| `name`       | `string`         | Yes      | Field name in Formik values                   |
+| `label`      | `string`         | No       | Field label                                   |
+| `helperText` | `string`         | No       | Custom helper text                            |
+| `error`      | `boolean`        | No       | Error state (auto-managed by Formik)          |
+| `disabled`   | `boolean`        | No       | Disabled state                                |
+| `required`   | `boolean`        | No       | Required field indicator                      |
+| Other        | `SwitchProps`    | No       | All Material-UI Switch props are supported    |
+
+### Examples
+
+#### Basic Switch
+
+```tsx
+<FormSwitch
+  label="Enable Dark Mode"
+  checked={darkModeEnabled}
+  onChange={(e, checked) => setDarkModeEnabled(checked)}
+  color="secondary"
+  size="small"
+/>
+```
+
+#### Switch with Formik
+
+```tsx
+<Formik
+  initialValues={{
+    notifications: false,
+    darkMode: true,
+    autoSave: false
+  }}
+  onSubmit={(values) => console.log('Form values:', values)}
+>
+  <Form>
+    <Field
+      component={FormSwitch}
+      name="notifications"
+      label="Enable Notifications"
+      helperText="Receive email notifications"
+      color="primary"
+    />
+    
+    <Field
+      component={FormSwitch}
+      name="darkMode"
+      label="Dark Mode"
+      helperText="Use dark theme"
+      color="secondary"
+      labelPlacement="start"
+    />
+    
+    <Field
+      component={FormSwitch}
+      name="autoSave"
+      label="Auto Save"
+      helperText="Automatically save changes"
+      color="success"
+      size="small"
+    />
+    
+    <Button type="submit" variant="contained" color="primary">
+      Save Settings
+    </Button>
+  </Form>
+</Formik>
+```
+
+#### Custom Styled Switch
+
+```tsx
+<FormSwitch
+  label="Custom Styled Switch"
+  checked={false}
+  onChange={(e, checked) => console.log('Switch toggled:', checked)}
+  className="custom-switch-class"
+  color="warning"
+  labelPlacement="top"
+  helperText="This is a custom styled switch"
+/>
+```
+
+#### Switch with Custom Change Handler
+
+```tsx
+<Field
+  component={FormSwitch}
+  name="advancedMode"
+  label="Advanced Mode"
+  onChange={(e, checked, context) => {
+    console.log('Field name:', context.fieldName);
+    console.log('Formik value:', context.formikValue);
+    // Custom logic here
+  }}
+  helperText="Enable advanced features"
+/>
+```
+
+#### Switch with Validation
+
+```tsx
+<Formik
+  initialValues={{ termsAccepted: false }}
+  validate={(values) => {
+    const errors = {};
+    if (!values.termsAccepted) {
+      errors.termsAccepted = 'You must accept the terms to continue';
+    }
+    return errors;
+  }}
+  onSubmit={(values) => console.log(values)}
+>
+  <Form>
+    <Field
+      component={FormSwitch}
+      name="termsAccepted"
+      label="I accept the terms and conditions"
+      helperText="Please read and accept the terms"
+      required
+    />
+    
+    <Button type="submit" variant="contained" color="primary">
+      Continue
+    </Button>
+  </Form>
+</Formik>
+```
+
 ## FormDateTextField
 
 A versatile date input field component that provides a text-based date picker with Formik integration and Material-UI styling.

package/dist/controls/FormSwitch/FormSwitch.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+import { FieldProps } from 'formik';
+import { SwitchProps } from '@mui/material/Switch';
+export interface FormSwitchProps {
+    /**
+     * Label text displayed next to the switch
+     */
+    label?: string;
+    /**
+     * Position of the label relative to the switch
+     * @default 'end'
+     */
+    labelPlacement?: 'top' | 'start' | 'bottom' | 'end';
+    /**
+     * Color of the switch when checked
+     * @default 'primary'
+     */
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
+    /**
+     * Size of the switch
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Whether the switch is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the switch is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Custom onChange handler with additional switch-related data
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, context: {
+        fieldName: string;
+        formikValue: boolean;
+    }) => void;
+    /**
+     * Custom onBlur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Helper text to display below the switch
+     */
+    helperText?: string;
+    /**
+     * Error state of the switch
+     */
+    error?: boolean;
+    /**
+     * Custom class name for the root element
+     */
+    className?: string;
+}
+export type FormSwitchComponentProps = FieldProps & SwitchProps & FormSwitchProps;
+export declare const FormSwitch: (props: FormSwitchComponentProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormSwitch.d.ts.map

package/dist/controls/FormSwitch/FormSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSwitch.d.ts","sourceRoot":"","sources":["../../../src/controls/FormSwitch/FormSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEpD;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAEvF;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;KACtB,KACE,IAAI,CAAC;IAEV;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,WAAW,GAAG,eAAe,CAAC;AAElF,eAAO,MAAM,UAAU,GAAI,OAAO,wBAAwB,4CAyFzD,CAAC"}

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export { FormCheckboxField, type FormCheckboxFieldProps, } from './controls/Form
 export { FormDateTextField, type FormDateTextFieldProps, } from './controls/FormDateTextField/FormDateTextField';
 export { FormTextField, type FormTextFieldProps, } from './controls/FormTextField/FormTextField';
 export { FormDropDownField, type FormDropDownFieldProps, } from './controls/FormDropDownField/FormDropDownField';
+export { FormSwitch, type FormSwitchProps, } from './controls/FormSwitch/FormSwitch';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,kCAAkC,CAAC"}