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

package/README.md

@@ -862,6 +862,7 @@ function AdvancedMaskingExamples() {
       time: '',
       currency: '',
       alphanumeric: '',
+      ipAddress: '',
     },
     onSubmit: ({ value }) => {
       console.log('Advanced mask values:', value)
@@ -899,42 +900,31 @@ function AdvancedMaskingExamples() {
         )}
       />
 
-      {/* Currency with decimal */}
+      {/* Mixed alphanumeric */}
       <form.AppField
-        name="currency"
+        name="alphanumeric"
         children={field => (
           <field.MaskedTextField
-            mask="$num"
-            blocks={{
-              num: {
-                mask: Number,
-                scale: 2,
-                thousandsSeparator: ',',
-                padFractionalZeros: true,
-                normalizeZeros: true,
-                radix: '.',
-                mapToRadix: ['.'],
-              },
-            }}
-            label="Amount"
+            mask="aa00aa"
+            label="Product Code"
             labelBehavior="shrink"
             size="small"
-            fullWidth
-            placeholder="$1,234.56"
+            placeholder="AB12CD"
           />
         )}
       />
 
-      {/* Mixed alphanumeric */}
+      {/* IP Address */}
       <form.AppField
-        name="alphanumeric"
+        name="ipAddress"
         children={field => (
           <field.MaskedTextField
-            mask="aa00aa"
-            label="Product Code"
+            mask="000.000.000.000"
+            label="IP Address"
             labelBehavior="shrink"
             size="small"
-            placeholder="AB12CD"
+            fullWidth
+            placeholder="192.168.1.1"
           />
         )}
       />
@@ -962,9 +952,11 @@ The MaskedTextField component accepts all standard MUI TextField props and forwa
 **Mask Patterns:**
 - `0` - any digit (0-9)
 - `a` - any letter (a-z, A-Z)
-- `*` - any alphanumeric character
+- `*` - any character
 - `[]` - make input optional (example: `[00]` for optional digits)
-- `{}` - define range of repetitions (example: `{1,3}` for 1 to 3 repetitions)
+- `{}` - 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
@@ -972,7 +964,10 @@ The MaskedTextField component accepts all standard MUI TextField props and forwa
 - `'static'`: Label appears as a static label above the input
 
 **Advanced Masking:**
-For complex masking scenarios like currency formatting or custom validation, you can pass an object with `blocks` configuration to define custom mask behaviors.
+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.

package/dist/form/MaskedInput.d.ts

@@ -1,6 +1,9 @@
 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;
 };

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

@@ -1 +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,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AA4BD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAclD"}
+{"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

@@ -3,15 +3,16 @@ 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, mask, ...other } = props;
-    return (_jsx(IMaskInput, { ...other, mask: mask, definitions: {
-            '#': /[1-9]/,
-        }, inputRef: ref, onAccept: (value) => onChange({ target: { name: props.name, value } }), overwrite: true }));
+    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 } = 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

@@ -1 +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;AAazB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAGrC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAA;IAC1C,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,WAAW,EAAE;YACX,GAAG,EAAE,OAAO;SACb,EACD,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,CAAC,CAAA;AAEF,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAEvC,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;SACX,GACD,CACH,CAAA;AACH,CAAC"}
+{"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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cwncollab-org/mui-component-kit",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",