@cwncollab-org/mui-component-kit 0.2.4 → 0.3.1

package/README.md

@@ -722,6 +722,257 @@ function MyForm() {
 The RadioGroup component also accepts all standard MUI RadioGroup props except `name`, `value`, and `defaultValue` which are managed by the form field.
 
 
+### MaskedTextField Component
+
+The MaskedTextField component provides input masking functionality, built on top of MUI's TextField component and `react-imask` library, integrated with TanStack Form. This component is useful for formatting user input such as phone numbers, credit card numbers, social security numbers, and other structured data.
+
+```tsx
+import { useAppForm } from '@cwncollab-org/component-kit'
+import { z } from 'zod'
+
+// Define your form schema
+const formSchema = z.object({
+  phone: z.string().min(1, 'Phone number is required'),
+  ssn: z.string().min(1, 'SSN is required'),
+  creditCard: z.string().min(1, 'Credit card number is required'),
+  zipCode: z.string().min(1, 'ZIP code is required'),
+  date: z.string().min(1, 'Date is required'),
+})
+
+function MyForm() {
+  const form = useAppForm({
+    defaultValues: {
+      phone: '',
+      ssn: '',
+      creditCard: '',
+      zipCode: '',
+      date: '',
+    },
+    validators: {
+      onSubmit: formSchema,
+    },
+    onSubmit: ({ value }) => {
+      console.log('Form values:', value)
+    },
+  })
+
+  return (
+    <>
+      {/* Phone number mask */}
+      <form.AppField
+        name="phone"
+        children={field => (
+          <field.MaskedTextField
+            mask="(000) 000-0000"
+            label="Phone Number"
+            labelBehavior="shrink"
+            size="small"
+            fullWidth
+            placeholder="(123) 456-7890"
+          />
+        )}
+      />
+
+      {/* Social Security Number mask */}
+      <form.AppField
+        name="ssn"
+        children={field => (
+          <field.MaskedTextField
+            mask="000-00-0000"
+            label="Social Security Number"
+            labelBehavior="shrink"
+            size="small"
+            fullWidth
+            placeholder="123-45-6789"
+          />
+        )}
+      />
+
+      {/* Credit Card Number mask */}
+      <form.AppField
+        name="creditCard"
+        children={field => (
+          <field.MaskedTextField
+            mask="0000 0000 0000 0000"
+            label="Credit Card Number"
+            labelBehavior="shrink"
+            size="small"
+            fullWidth
+            placeholder="1234 5678 9012 3456"
+          />
+        )}
+      />
+
+      {/* ZIP Code mask */}
+      <form.AppField
+        name="zipCode"
+        children={field => (
+          <field.MaskedTextField
+            mask="00000"
+            label="ZIP Code"
+            labelBehavior="shrink"
+            size="small"
+            placeholder="12345"
+          />
+        )}
+      />
+
+      {/* Date mask */}
+      <form.AppField
+        name="date"
+        children={field => (
+          <field.MaskedTextField
+            mask="00/00/0000"
+            label="Date (MM/DD/YYYY)"
+            labelBehavior="shrink"
+            size="small"
+            fullWidth
+            placeholder="12/31/2023"
+          />
+        )}
+      />
+
+      {/* SubscribeMaskedTextField automatically disables during form submission */}
+      <form.AppField
+        name="phone"
+        children={field => (
+          <field.SubscribeMaskedTextField
+            mask="(000) 000-0000"
+            label="Phone Number"
+            labelBehavior="auto"
+            size="small"
+            fullWidth
+            placeholder="(123) 456-7890"
+          />
+        )}
+      />
+    </>
+  )
+}
+```
+
+#### Advanced Masking Examples
+
+```tsx
+// Custom mask patterns
+function AdvancedMaskingExamples() {
+  const form = useAppForm({
+    defaultValues: {
+      license: '',
+      time: '',
+      currency: '',
+      alphanumeric: '',
+      ipAddress: '',
+    },
+    onSubmit: ({ value }) => {
+      console.log('Advanced mask values:', value)
+    },
+  })
+
+  return (
+    <>
+      {/* License plate (letters and numbers) */}
+      <form.AppField
+        name="license"
+        children={field => (
+          <field.MaskedTextField
+            mask="aaa-0000"
+            label="License Plate"
+            labelBehavior="shrink"
+            size="small"
+            fullWidth
+            placeholder="ABC-1234"
+          />
+        )}
+      />
+
+      {/* Time format */}
+      <form.AppField
+        name="time"
+        children={field => (
+          <field.MaskedTextField
+            mask="00:00"
+            label="Time (24h format)"
+            labelBehavior="shrink"
+            size="small"
+            placeholder="14:30"
+          />
+        )}
+      />
+
+      {/* Mixed alphanumeric */}
+      <form.AppField
+        name="alphanumeric"
+        children={field => (
+          <field.MaskedTextField
+            mask="aa00aa"
+            label="Product Code"
+            labelBehavior="shrink"
+            size="small"
+            placeholder="AB12CD"
+          />
+        )}
+      />
+
+      {/* IP Address */}
+      <form.AppField
+        name="ipAddress"
+        children={field => (
+          <field.MaskedTextField
+            mask="000.000.000.000"
+            label="IP Address"
+            labelBehavior="shrink"
+            size="small"
+            fullWidth
+            placeholder="192.168.1.1"
+          />
+        )}
+      />
+    </>
+  )
+}
+```
+
+#### MaskedTextField Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mask` | `IMaskInputProps['mask']` | - | The mask pattern to apply to the input |
+| `label` | `string` | - | The label text for the text field |
+| `labelBehavior` | `'auto' \| 'shrink' \| 'static'` | `'auto'` | How the label should behave |
+| `size` | `'small' \| 'medium'` | `'medium'` | The size of the text field |
+| `fullWidth` | `boolean` | `false` | Whether the text field should take full width |
+| `placeholder` | `string` | - | Placeholder text when the field is empty |
+| `disabled` | `boolean` | `false` | Whether the text field is disabled |
+| `required` | `boolean` | `false` | Whether the text field is required |
+| `slotProps` | `object` | - | Props for underlying MUI components |
+
+The MaskedTextField component accepts all standard MUI TextField props and forwards them to the underlying TextField component.
+
+**Mask Patterns:**
+- `0` - any digit (0-9)
+- `a` - any letter (a-z, A-Z)
+- `*` - any character
+- `[]` - make input optional (example: `[00]` for optional digits)
+- `{}` - include fixed part in unmasked value
+- ``` - prevent symbols shift back
+- `\\` - escape character to treat definition characters as fixed (example: `\\0` treats 0 as literal)
+
+**Label Behaviors:**
+- `'auto'`: Default MUI behavior - label floats when focused or has value
+- `'shrink'`: Label is always in the shrunk (floating) position
+- `'static'`: Label appears as a static label above the input
+
+**Advanced Masking:**
+The current MaskedTextField component supports basic mask patterns. For more advanced masking scenarios like currency formatting, custom validation, or nested patterns with custom definitions and blocks, you would need to extend the component or use IMask directly.
+
+**Available Mask Patterns:**
+The component currently supports simple string patterns where each character in the mask string represents a constraint for the corresponding input character.
+
+**SubscribeMaskedTextField:**
+The `SubscribeMaskedTextField` component has the same props as `MaskedTextField` but automatically disables the field when the form is submitting, providing better UX during form submission.
+
+
 ### Common Dialog Patterns
 
 Here are some common dialog patterns you can implement using the component kit:

package/dist/form/MaskedInput.d.ts

@@ -0,0 +1,11 @@
+import { IMaskInputProps } from 'react-imask';
+export type MaskedInputProps = {
+    mask: IMaskInputProps<HTMLInputElement>['mask'];
+    pattern?: string;
+    definitions?: Record<string, RegExp>;
+    blocks?: Record<string, any>;
+    value?: string;
+    onChange?: (value: string) => void;
+};
+export declare function MaskedInput(props: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaskedInput.d.ts.map

package/dist/form/MaskedInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInput.d.ts","sourceRoot":"","sources":["../../src/lib/form/MaskedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,aAAa,CAAA;AAIzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AA0BD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAiBlD"}

package/dist/form/MaskedInput.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IMaskInput } from 'react-imask';
+import { Input as MuiInput } from '@mui/material';
+import React from 'react';
+const TextMaskCustom = React.forwardRef(function TextMaskCustom(props, ref) {
+    const { onChange, ...other } = props;
+    return (_jsx(IMaskInput, { ...other, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), overwrite: true }));
+});
+export function MaskedInput(props) {
+    const { mask, value, onChange, definitions, blocks, pattern } = props;
+    return (_jsx(MuiInput, { value: value, onChange: e => onChange?.(e.target.value), name: 'maskedInput', inputComponent: TextMaskCustom, inputProps: {
+            mask: mask,
+            definitions: definitions,
+            blocks: blocks,
+            pattern: pattern,
+        } }));
+}
+//# sourceMappingURL=MaskedInput.js.map

package/dist/form/MaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInput.js","sourceRoot":"","sources":["../../src/lib/form/MaskedInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,aAAa,CAAA;AACzD,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,CACL,KAAC,UAAU,OACJ,KAAa,EAClB,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE,CACvB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,EAEnD,SAAS,SACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAErE,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,IAAI,EAAC,aAAa,EAClB,cAAc,EAAE,cAAqB,EACrC,UAAU,EAAE;YACV,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,WAAW;YACxB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,OAAO;SACjB,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/form/MaskedTextField.d.ts

@@ -0,0 +1,10 @@
+import { IMaskInputProps } from 'react-imask';
+import { TextFieldProps } from './TextField';
+export type MaskedTextFieldProps = Omit<TextFieldProps, 'slotProps'> & {
+    mask: IMaskInputProps<HTMLInputElement>['mask'];
+    slotProps?: Omit<TextFieldProps['slotProps'], 'input'> & {
+        input?: Omit<TextFieldProps['slotProps'], 'input'>;
+    };
+};
+export declare function MaskedTextField(props: MaskedTextFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MaskedTextField.d.ts.map

package/dist/form/MaskedTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedTextField.d.ts","sourceRoot":"","sources":["../../src/lib/form/MaskedTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAA;AAGvD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,GAAG;IACrE,IAAI,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;IAC/C,SAAS,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;QACvD,KAAK,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAA;KACnD,CAAA;CACF,CAAA;AAmBD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAkB1D"}

package/dist/form/MaskedTextField.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TextField } from './TextField';
+import { IMaskInput } from 'react-imask';
+const MaskedInputAdapter = React.forwardRef(function MaskedInputAdapter(props, ref) {
+    const { onChange, mask, ...other } = props;
+    return (_jsx(IMaskInput, { ...other, mask: mask, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), overwrite: true }));
+});
+export function MaskedTextField(props) {
+    const { mask, slotProps, ...rest } = props;
+    return (_jsx(TextField, { ...rest, slotProps: {
+            ...slotProps,
+            input: {
+                inputComponent: MaskedInputAdapter,
+                inputProps: {
+                    mask: mask,
+                },
+                ...slotProps?.input,
+            },
+        } }));
+}
+//# sourceMappingURL=MaskedTextField.js.map

package/dist/form/MaskedTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedTextField.js","sourceRoot":"","sources":["../../src/lib/form/MaskedTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AASxC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CACzC,SAAS,kBAAkB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAA;IAC1C,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE,CACvB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,EAEnD,SAAS,SACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAE1C,OAAO,CACL,KAAC,SAAS,OACJ,IAAI,EACR,SAAS,EAAE;YACT,GAAG,SAAS;YACZ,KAAK,EAAE;gBACL,cAAc,EAAE,kBAAyB;gBACzC,UAAU,EAAE;oBACV,IAAI,EAAE,IAAI;iBACX;gBACD,GAAG,SAAS,EAAE,KAAK;aACpB;SACF,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/form/SubscribeMaskedTextField.d.ts

@@ -0,0 +1,4 @@
+import { MaskedTextFieldProps } from './MaskedTextField';
+export type SubscribeMaskedTextFieldProps = MaskedTextFieldProps;
+export declare function SubscribeMaskedTextField(props: SubscribeMaskedTextFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubscribeMaskedTextField.d.ts.map

package/dist/form/SubscribeMaskedTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeMaskedTextField.d.ts","sourceRoot":"","sources":["../../src/lib/form/SubscribeMaskedTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAGzE,MAAM,MAAM,6BAA6B,GAAG,oBAAoB,CAAA;AAEhE,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,2CAY5E"}

package/dist/form/SubscribeMaskedTextField.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MaskedTextField } from './MaskedTextField';
+import { useFormContext } from './formContext';
+export function SubscribeMaskedTextField(props) {
+    const form = useFormContext();
+    const { disabled, ...rest } = props;
+    return (_jsx(form.Subscribe, { selector: state => state.isSubmitting, children: isSubmitting => (_jsx(MaskedTextField, { disabled: isSubmitting || disabled, ...rest })) }));
+}
+//# sourceMappingURL=SubscribeMaskedTextField.js.map

package/dist/form/SubscribeMaskedTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeMaskedTextField.js","sourceRoot":"","sources":["../../src/lib/form/SubscribeMaskedTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI9C,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAE7B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAEnC,OAAO,CACL,KAAC,IAAI,CAAC,SAAS,IAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,YAClD,YAAY,CAAC,EAAE,CAAC,CACf,KAAC,eAAe,IAAC,QAAQ,EAAE,YAAY,IAAI,QAAQ,KAAM,IAAI,GAAI,CAClE,GACc,CAClB,CAAA;AACH,CAAC"}

package/dist/form/formHooks.d.ts

@@ -15,6 +15,8 @@ import { SubscribeDatePicker } from './SubscribeDatePicker';
 import { SubscribeTimePicker } from './SubscribeTimePicker';
 import { RadioGroup } from './RadioGroup';
 import { SubscribeRadioGroup } from './SubscribeRadioGroup';
+import { MaskedTextField } from './MaskedTextField';
+import { SubscribeMaskedTextField } from './SubscribeMaskedTextField';
 export declare const useAppForm: <TFormData, TOnMount extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import("@tanstack/form-core").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => import("@tanstack/form-core").FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & import("@tanstack/react-form").ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & NoInfer<{
     readonly SubscribeButton: typeof SubscribeButton;
 }> & {
@@ -23,12 +25,14 @@ export declare const useAppForm: <TFormData, TOnMount extends import("@tanstack/
         readonly TextField: typeof TextField;
         readonly Checkbox: typeof Checkbox;
         readonly Select: typeof Select;
+        readonly MaskedTextField: typeof MaskedTextField;
         readonly MultiSelect: typeof MultiSelect;
         readonly RadioGroup: typeof RadioGroup;
         readonly DatePicker: typeof DatePicker;
         readonly TimePicker: typeof TimePicker;
         readonly SubscribeAutocomplete: typeof SubscribeAutocomplete;
         readonly SubscribeTextField: typeof SubscribeTextField;
+        readonly SubscribeMaskedTextField: typeof SubscribeMaskedTextField;
         readonly SubscribeSelect: typeof SubscribeSelect;
         readonly SubscribeMultiSelect: typeof SubscribeMultiSelect;
         readonly SubscribeCheckbox: typeof SubscribeCheckbox;
@@ -42,12 +46,14 @@ export declare const useAppForm: <TFormData, TOnMount extends import("@tanstack/
     readonly TextField: typeof TextField;
     readonly Checkbox: typeof Checkbox;
     readonly Select: typeof Select;
+    readonly MaskedTextField: typeof MaskedTextField;
     readonly MultiSelect: typeof MultiSelect;
     readonly RadioGroup: typeof RadioGroup;
     readonly DatePicker: typeof DatePicker;
     readonly TimePicker: typeof TimePicker;
     readonly SubscribeAutocomplete: typeof SubscribeAutocomplete;
     readonly SubscribeTextField: typeof SubscribeTextField;
+    readonly SubscribeMaskedTextField: typeof SubscribeMaskedTextField;
     readonly SubscribeSelect: typeof SubscribeSelect;
     readonly SubscribeMultiSelect: typeof SubscribeMultiSelect;
     readonly SubscribeCheckbox: typeof SubscribeCheckbox;
@@ -65,12 +71,14 @@ export declare const useAppForm: <TFormData, TOnMount extends import("@tanstack/
             readonly TextField: typeof TextField;
             readonly Checkbox: typeof Checkbox;
             readonly Select: typeof Select;
+            readonly MaskedTextField: typeof MaskedTextField;
             readonly MultiSelect: typeof MultiSelect;
             readonly RadioGroup: typeof RadioGroup;
             readonly DatePicker: typeof DatePicker;
             readonly TimePicker: typeof TimePicker;
             readonly SubscribeAutocomplete: typeof SubscribeAutocomplete;
             readonly SubscribeTextField: typeof SubscribeTextField;
+            readonly SubscribeMaskedTextField: typeof SubscribeMaskedTextField;
             readonly SubscribeSelect: typeof SubscribeSelect;
             readonly SubscribeMultiSelect: typeof SubscribeMultiSelect;
             readonly SubscribeCheckbox: typeof SubscribeCheckbox;

package/dist/form/formHooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formHooks.d.ts","sourceRoot":"","sources":["../../src/lib/form/formHooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAO,MAAQ,UAAU;;;;;;;;;;;;;;;;;;;;;;GAAE,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAsBjC,CAAA"}
+{"version":3,"file":"formHooks.d.ts","sourceRoot":"","sources":["../../src/lib/form/formHooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAErE,eAAO,MAAQ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;GAAE,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAwBjC,CAAA"}

package/dist/form/formHooks.js

@@ -17,6 +17,8 @@ import { SubscribeDatePicker } from './SubscribeDatePicker';
 import { SubscribeTimePicker } from './SubscribeTimePicker';
 import { RadioGroup } from './RadioGroup';
 import { SubscribeRadioGroup } from './SubscribeRadioGroup';
+import { MaskedTextField } from './MaskedTextField';
+import { SubscribeMaskedTextField } from './SubscribeMaskedTextField';
 export const { useAppForm, withForm } = createFormHook({
     fieldContext,
     formContext,
@@ -25,12 +27,14 @@ export const { useAppForm, withForm } = createFormHook({
         TextField,
         Checkbox,
         Select,
+        MaskedTextField,
         MultiSelect,
         RadioGroup,
         DatePicker,
         TimePicker,
         SubscribeAutocomplete,
         SubscribeTextField,
+        SubscribeMaskedTextField,
         SubscribeSelect,
         SubscribeMultiSelect,
         SubscribeCheckbox,

package/dist/form/formHooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"formHooks.js","sourceRoot":"","sources":["../../src/lib/form/formHooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;IACrD,YAAY;IACZ,WAAW;IACX,eAAe,EAAE;QACf,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,MAAM;QACN,WAAW;QACX,UAAU;QACV,UAAU;QACV,UAAU;QACV,qBAAqB;QACrB,kBAAkB;QAClB,eAAe;QACf,oBAAoB;QACpB,iBAAiB;QACjB,mBAAmB;QACnB,mBAAmB;QACnB,mBAAmB;KACpB;IACD,cAAc,EAAE,EAAE,eAAe,EAAE;CACpC,CAAC,CAAA"}
+{"version":3,"file":"formHooks.js","sourceRoot":"","sources":["../../src/lib/form/formHooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAErE,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;IACrD,YAAY;IACZ,WAAW;IACX,eAAe,EAAE;QACf,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,MAAM;QACN,eAAe;QACf,WAAW;QACX,UAAU;QACV,UAAU;QACV,UAAU;QACV,qBAAqB;QACrB,kBAAkB;QAClB,wBAAwB;QACxB,eAAe;QACf,oBAAoB;QACpB,iBAAiB;QACjB,mBAAmB;QACnB,mBAAmB;QACnB,mBAAmB;KACpB;IACD,cAAc,EAAE,EAAE,eAAe,EAAE;CACpC,CAAC,CAAA"}

package/dist/form/index.d.ts

@@ -15,4 +15,7 @@ export { type SubscribeRadioGroupProps } from './SubscribeRadioGroup';
 export { type SubscribeSelectProps } from './SubscribeSelect';
 export { type SubscribeTextFieldProps } from './SubscribeTextField';
 export { type SubscribeTimePickerProps } from './SubscribeTimePicker';
+export { MaskedInput, type MaskedInputProps } from './MaskedInput';
+export { MaskedTextField, type MaskedTextFieldProps } from './MaskedTextField';
+export { SubscribeMaskedTextField, type SubscribeMaskedTextFieldProps, } from './SubscribeMaskedTextField';
 //# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AACzE,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AACzE,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,4BAA4B,CAAA"}

package/dist/form/index.js

@@ -1,2 +1,5 @@
 export { useAppForm, withForm } from './formHooks';
+export { MaskedInput } from './MaskedInput';
+export { MaskedTextField } from './MaskedTextField';
+export { SubscribeMaskedTextField, } from './SubscribeMaskedTextField';
 //# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAiBlD,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAA"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { DialogsProvider, DialogCloseButton, useDialogs, type DialogProps, type DialogResult, } from './dialogs';
-export { useAppForm, withForm, type CheckboxProps, type DatePickerProps, type MultiSelectProps, type SelectProps, type TextFieldProps, type TimePickerProps, type SubscribeCheckboxProps, type SubscribeDatePickerProps, type SubscribeMultiSelectProps, type SubscribeSelectProps, type SubscribeTextFieldProps, type SubscribeTimePickerProps, } from './form';
+export { useAppForm, withForm, type CheckboxProps, type DatePickerProps, type MultiSelectProps, type SelectProps, type TextFieldProps, type TimePickerProps, type SubscribeCheckboxProps, type SubscribeDatePickerProps, type SubscribeMultiSelectProps, type SubscribeSelectProps, type SubscribeTextFieldProps, type SubscribeTimePickerProps, MaskedInput, type MaskedInputProps, MaskedTextField, type MaskedTextFieldProps, SubscribeMaskedTextField, type SubscribeMaskedTextFieldProps, } from './form';
 export { RouterTab, TabLabel, useRouterTabsValue } from './tabs';
 export { useMaterialRouterTable, tableSearchSchema } from './table';
 export { useConfirmDialog, useConfirmDeleteDialog } from './common-dialogs';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,UAAU,EACV,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,GAC9B,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,UAAU,EACV,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,WAAW,EACX,KAAK,gBAAgB,EACrB,eAAe,EACf,KAAK,oBAAoB,EACzB,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 export { DialogsProvider, DialogCloseButton, useDialogs, } from './dialogs';
-export { useAppForm, withForm, } from './form';
+export { useAppForm, withForm, MaskedInput, MaskedTextField, SubscribeMaskedTextField, } from './form';
 export { RouterTab, TabLabel, useRouterTabsValue } from './tabs';
 export { useMaterialRouterTable, tableSearchSchema } from './table';
 export { useConfirmDialog, useConfirmDeleteDialog } from './common-dialogs';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,UAAU,GAGX,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,UAAU,EACV,QAAQ,GAaT,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,UAAU,GAGX,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,UAAU,EACV,QAAQ,EAaR,WAAW,EAEX,eAAe,EAEf,wBAAwB,GAEzB,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cwncollab-org/mui-component-kit",
   "private": false,
-  "version": "0.2.4",
+  "version": "0.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -43,7 +43,8 @@
     "@tanstack/react-router": "^1.116.0",
     "@tanstack/react-table": "^8.21.3",
     "dayjs": "^1.11.13",
-    "material-react-table": "^3.2.1"
+    "material-react-table": "^3.2.1",
+    "react-imask": "^7.6.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",