form-input-fields 1.0.2 → 1.0.4

package/README.md

@@ -2,6 +2,8 @@
 
 A collection of Material-UI form field components with Formik integration.
 
+More controls are coming soon.
+
 ## Table of Contents
 
 - [FormDateField](#formdatefield)
@@ -31,6 +33,14 @@ A collection of Material-UI form field components with Formik integration.
     - [Show Mask Pattern](#show-mask-pattern)
     - [Show Placeholder](#show-placeholder)
     - [Custom Mask with Validation](#custom-mask-with-validation)
+- [FormCheckboxField](#formcheckboxfield)
+  - [Features](#features-2)
+  - [Basic Usage](#basic-usage-1)
+  - [Props](#props-2)
+  - [Examples](#examples-2)
+    - [Basic Checkbox](#basic-checkbox)
+    - [Checkbox with Formik](#checkbox-with-formik)
+    - [Custom Styled Checkbox](#custom-styled-checkbox)
 
 ---
 
@@ -267,6 +277,169 @@ The FormDateField component accepts all props from `FormDateFieldProps`, `FieldP
 />
 ```
 
+## FormCheckboxField
+
+A customizable checkbox component with Material-UI and Formik integration, providing consistent styling and behavior across your application.
+
+### Features
+
+- **Material-UI Integration**: Consistent styling with Material-UI's design system
+- **Formik Integration**: Seamless form state management with error handling
+- **Custom Styling**: Easy customization through Material-UI's styling system
+- **TypeScript Support**: Full type safety with exported interfaces
+- **Accessibility**: Built with accessibility in mind, following WAI-ARIA guidelines
+- **Responsive Design**: Works well on all screen sizes
+
+### Basic Usage
+
+```tsx
+import { Formik, Field } from 'formik';
+import { FormCheckboxField } from 'form-input-mask-field';
+
+// Basic usage
+<FormCheckboxField
+  id="terms"
+  label="I agree to the terms and conditions"
+  checked={false}
+  onChange={(e) => console.log('Checked:', e.target.checked)}
+/>
+
+// With Formik
+<Formik
+  initialValues={{ termsAccepted: false }}
+  onSubmit={(values) => console.log(values)}
+>
+  {({ values }) => (
+    <Field
+      name="termsAccepted"
+      component={({ field, form }) => (
+        <FormCheckboxField
+          {...field}
+          label="I agree to the terms and conditions"
+          checked={field.value}
+          onChange={(e) => {
+            form.setFieldValue(field.name, e.target.checked);
+          }}
+        />
+      )}
+    />
+  )}
+</Formik>
+```
+
+### Props
+
+The FormCheckboxField component accepts all props from `FormCheckboxFieldProps` and Material-UI's `CheckboxProps`.
+
+#### FormCheckboxFieldProps Interface
+
+| Prop           | Type      | Default | Description                                      |
+| -------------- | --------- | ------- | ------------------------------------------------ |
+| `id`           | `string`  | -       | Unique identifier for the checkbox               |
+| `label`        | `string`  | -       | Label text displayed next to the checkbox        |
+| `checked`      | `boolean` | `false` | Whether the checkbox is checked                  |
+| `onChange`     | `function`| -       | Callback when checkbox state changes             |
+| `disabled`     | `boolean` | `false` | Disable the checkbox                             |
+| `required`     | `boolean` | `false` | Mark the field as required                       |
+| `color`        | `string`  | 'primary'| Color of the checkbox when checked               |
+| `size`         | `string`  | 'medium'| Size of the checkbox ('small' or 'medium')       |
+| `labelPlacement`| `string` | 'end'   | Position of the label ('end', 'start', 'top', 'bottom') |
+
+### Examples
+
+#### Basic Checkbox
+
+```tsx
+<FormCheckboxField
+  id="notifications"
+  label="Enable email notifications"
+  checked={notificationsEnabled}
+  onChange={(e) => setNotificationsEnabled(e.target.checked)}
+  color="secondary"
+/>
+```
+
+#### Checkbox with Formik
+
+```tsx
+<Formik
+  initialValues={{
+    termsAccepted: false,
+    newsletter: true,
+    notifications: false
+  }}
+  onSubmit={(values) => console.log('Form values:', values)}
+>
+  {({ values }) => (
+    <Form>
+      <Field
+        name="termsAccepted"
+        component={({ field, form }) => (
+          <FormCheckboxField
+            {...field}
+            label="I agree to the terms and conditions"
+            checked={field.value}
+            onChange={(e) => form.setFieldValue(field.name, e.target.checked)}
+            required
+          />
+        )}
+      />
+      
+      <Field
+        name="newsletter"
+        component={({ field, form }) => (
+          <FormCheckboxField
+            {...field}
+            label="Subscribe to newsletter"
+            checked={field.value}
+            onChange={(e) => form.setFieldValue(field.name, e.target.checked)}
+            color="secondary"
+          />
+        )}
+      />
+      
+      <Button type="submit" variant="contained" color="primary">
+        Submit
+      </Button>
+    </Form>
+  )}
+</Formik>
+```
+
+#### Custom Styled Checkbox
+
+```tsx
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    margin: theme.spacing(1),
+  },
+  labelRoot: {
+    color: theme.palette.primary.main,
+    fontWeight: 500,
+  },
+}));
+
+function CustomCheckbox() {
+  const classes = useStyles();
+  
+  return (
+    <FormCheckboxField
+      id="custom-checkbox"
+      label="Custom Styled Checkbox"
+      checked={false}
+      onChange={() => {}}
+      classes={{
+        root: classes.root,
+        label: classes.labelRoot,
+      }}
+      color="primary"
+    />
+  );
+}
+```
+
 ## FormMaskField
 
 A flexible form field component with advanced text masking capabilities.

package/dist/controls/FormCheckboxField/FormCheckboxField.d.ts

@@ -0,0 +1,22 @@
+export interface FormCheckboxFieldProps {
+    /**
+     * Unique identifier for the checkbox
+     */
+    id: string;
+    /**
+     * Label text displayed next to the checkbox
+     */
+    label: string;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Callback fired when the state is changed
+     * @param event The event source of the callback
+     * @param checked The new checked state
+     */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+}
+export declare const FormCheckboxField: ({ id, label, checked, onChange }: FormCheckboxFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormCheckboxField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormCheckboxField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormCheckboxField/FormCheckboxField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAClF;AAED,eAAO,MAAM,iBAAiB,GAAI,kCAAkC,sBAAsB,4CAqBzF,CAAC"}

package/dist/controls/FormCheckboxField/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const useStyles: (props?: any) => import('@mui/styles').ClassNameMap<"margin" | "labelRoot">;
+//# sourceMappingURL=styles.d.ts.map

package/dist/controls/FormCheckboxField/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/controls/FormCheckboxField/styles.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,6EAWrB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormDateField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateField/FormDateField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;KACxB,KACE,IAAI,CAAC;IAEV,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAClD,cAAc,GACd,kBAAkB,CAAC;AAErB,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CAsG/D,CAAC"}

package/dist/controls/FormDateField/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDateField/date.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;CAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;CAGzC,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormMaskField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormMaskField/FormMaskField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAS9D,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE;QACL,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;KACH,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACpC,IAAI,CAAC;IAEV,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAClD,cAAc,GACd,kBAAkB,CAAC;AAErB,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CAmI/D,CAAC"}

package/dist/controls/FormMaskField/FormMaskFiledUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormMaskFiledUtils.d.ts","sourceRoot":"","sources":["../../../src/controls/FormMaskField/FormMaskFiledUtils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAGD,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,EAAE,wBAAqB,KAAG,UAanE,CAAC;AAEF,eAAO,MAAM,SAAS,GACpB,OAAO,MAAM,EACb,YAAY,UAAU,GAAG,IAAI,EAC7B,qBAAmB,KAClB,MA6CF,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,YAAY,UAAU,GAAG,IAAI,KAAG,MAgBzE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,YAAY,UAAU,GAAG,IAAI,KAAG,MAkBnE,CAAC"}

package/dist/controls/portal-material.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from '@mui/styles';
+declare const drawerBackGround = "#19212b";
+declare const dividerColor = "#404854";
+declare const headerBackground = "#262f3d";
+declare const defaultLabelFont: CSSProperties;
+export { drawerBackGround, defaultLabelFont, dividerColor, headerBackground };
+//# sourceMappingURL=portal-material.d.ts.map

package/dist/controls/portal-material.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-material.d.ts","sourceRoot":"","sources":["../../src/controls/portal-material.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,QAAA,MAAM,gBAAgB,YAAY,CAAC;AACnC,QAAA,MAAM,YAAY,YAAY,CAAC;AAC/B,QAAA,MAAM,gBAAgB,YAAY,CAAC;AAMnC,QAAA,MAAM,gBAAgB,EAAE,aAKvB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { FormMaskField, type FormMaskFieldProps, } from './controls/FormMaskField';
-export { createMask, applyMask, removeMask, generatePlaceholder, type MaskConfig, } from './controls/FormMaskFiledUtils';
-export { FormDateField, type FormDateFieldProps, } from './controls/FormDateField';
+export { FormMaskField, type FormMaskFieldProps, } from './controls/FormMaskField/FormMaskField';
+export { createMask, applyMask, removeMask, generatePlaceholder, type MaskConfig, } from './controls/FormMaskField/FormMaskFiledUtils';
+export { FormDateField, type FormDateFieldProps, } from './controls/FormDateField/FormDateField';
+export { FormCheckboxField, type FormCheckboxFieldProps, } from './controls/FormCheckboxField/FormCheckboxField';
 //# 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,0BAA0B,CAAC;AAClC,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,0BAA0B,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"}