@rovula/ui 0.0.76 → 0.0.78

package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts

@@ -279,9 +279,9 @@ declare const meta: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         required?: boolean | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
         loop?: boolean | undefined;
         asChild?: boolean | undefined;
-        onValueChange?: ((value: string) => void) | undefined;
         ref?: React.LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -314,6 +314,13 @@ declare const meta: {
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/cjs/types/components/Slider/Slider.stories.d.ts

@@ -289,10 +289,10 @@ declare const meta: {
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        onValueChange?: ((value: number[]) => void) | undefined;
         asChild?: boolean | undefined;
         inverted?: boolean | undefined;
         minStepsBetweenThumbs?: number | undefined;
-        onValueChange?: ((value: number[]) => void) | undefined;
         onValueCommit?: ((value: number[]) => void) | undefined;
         ref?: React.LegacyRef<HTMLSpanElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/cjs/types/components/TextInput/TextInput.d.ts

@@ -21,6 +21,13 @@ export type InputProps = {
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;
@@ -48,6 +55,13 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    classes?: {
+        iconWrapper?: string;
+        iconSearchWrapper?: string;
+        icon?: string;
+        startIconWrapper?: string;
+        endIconWrapper?: string;
+    };
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
     renderStartIcon?: () => ReactNode;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -23,6 +23,13 @@ declare const meta: {
         endIcon?: React.ReactNode;
         className?: string;
         labelClassName?: string;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        };
         onClickStartIcon?: () => void;
         onClickEndIcon?: () => void;
         renderStartIcon?: () => React.ReactNode;
@@ -54,6 +61,13 @@ declare const meta: {
         endIcon?: React.ReactNode;
         className?: string | undefined;
         labelClassName?: string | undefined;
+        classes?: {
+            iconWrapper?: string;
+            iconSearchWrapper?: string;
+            icon?: string;
+            startIconWrapper?: string;
+            endIconWrapper?: string;
+        } | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
         renderStartIcon?: (() => React.ReactNode) | undefined;

package/dist/cjs/types/index.d.ts

@@ -2,6 +2,8 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as MaskedTextInput } from "./components/MaskedTextInput";
+export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
@@ -38,6 +40,8 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { MaskedTextInputProps, MaskRule, } from "./components/MaskedTextInput";
+export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";

package/dist/components/MaskedTextInput/MaskedTextInput.js

@@ -0,0 +1,267 @@
+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 } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState, useEffect, } from "react";
+import TextInput from "../TextInput/TextInput";
+import { cn } from "@/utils/cn";
+// Kendo UI style mask patterns
+export const MASK_PATTERNS = {
+    PHONE: "(000) 000-0000",
+    PHONE_INTL: "+000 000 000 0000",
+    CREDIT_CARD: "0000 0000 0000 0000",
+    DATE: "00/00/0000",
+    TIME: "00:00",
+    SSN: "000-00-0000",
+    ZIP_CODE: "00000",
+    ZIP_CODE_EXT: "00000-0000",
+    CURRENCY: "$000,000.00",
+    PERCENTAGE: "000%",
+    LICENSE_PLATE: "AAA-0000",
+    PRODUCT_CODE: "AA-0000-AA",
+    ALPHANUMERIC: "AAAA-0000",
+};
+// Kendo UI mask rules
+const KENDO_RULES = {
+    "0": { pattern: /[0-9]/, placeholder: "0" }, // Any digit 0-9
+    "9": { pattern: /[0-9\s]/, placeholder: "9" }, // Any digit 0-9 or space
+    "#": { pattern: /[0-9\s+\-]/, placeholder: "#" }, // Any digit, space, +, or -
+    L: { pattern: /[a-zA-Z]/, placeholder: "L" }, // Any letter
+    "?": { pattern: /[a-zA-Z\s]/, placeholder: "?" }, // Any letter or space
+    "&": { pattern: /[^\s]/, placeholder: "&" }, // Any character except space
+    C: { pattern: /./, placeholder: "C" }, // Any character including space
+    A: { pattern: /[a-zA-Z0-9]/, placeholder: "A" }, // Any alphanumeric
+    a: { pattern: /[a-zA-Z0-9\s]/, placeholder: "a" }, // Any alphanumeric or space
+};
+// Helper function to create mask pattern from string using Kendo UI rules
+const createMaskPattern = (mask, customRules) => {
+    const rules = Object.assign(Object.assign({}, KENDO_RULES), customRules);
+    const pattern = [];
+    let i = 0;
+    while (i < mask.length) {
+        const char = mask[i];
+        if (char === "\\" && i + 1 < mask.length) {
+            // Escaped character - treat as literal
+            const nextChar = mask[i + 1];
+            pattern.push({
+                pattern: new RegExp(`^${nextChar}$`),
+                placeholder: nextChar,
+                isLiteral: true,
+            });
+            i += 2;
+        }
+        else if (rules[char]) {
+            // Apply Kendo rule
+            const rule = rules[char];
+            if (typeof rule === "function") {
+                pattern.push({
+                    pattern: /./, // Accept any character, validate with function
+                    placeholder: char,
+                    validator: rule,
+                });
+            }
+            else if (rule instanceof RegExp) {
+                pattern.push({
+                    pattern: rule,
+                    placeholder: char,
+                });
+            }
+            else {
+                pattern.push({
+                    pattern: rule.pattern,
+                    placeholder: rule.placeholder,
+                });
+            }
+            i++;
+        }
+        else {
+            // Literal character
+            pattern.push({
+                pattern: new RegExp(`^${char.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
+                placeholder: char,
+                isLiteral: true,
+            });
+            i++;
+        }
+    }
+    return pattern;
+};
+// Helper function to apply mask to value using Kendo UI rules
+const applyMask = (value, maskPattern, maskChar = "_", showMask = true, guide = true) => {
+    let maskedValue = "";
+    let valueIndex = 0;
+    for (let i = 0; i < maskPattern.length; i++) {
+        const rule = maskPattern[i];
+        if (rule.isLiteral) {
+            // Literal character - always add
+            maskedValue += rule.placeholder;
+        }
+        else {
+            // Input character - find next valid character
+            let foundValid = false;
+            while (valueIndex < value.length) {
+                const char = value[valueIndex];
+                valueIndex++;
+                // Check with validator function first if exists
+                const isValid = rule.validator
+                    ? rule.validator(char)
+                    : rule.pattern.test(char);
+                if (isValid) {
+                    maskedValue += char;
+                    foundValid = true;
+                    break;
+                }
+                // Skip invalid characters and continue searching
+            }
+            if (!foundValid && guide && showMask) {
+                // No valid character found, fill with placeholder
+                maskedValue += maskChar;
+            }
+            else if (!foundValid) {
+                // No placeholder needed, stop building the mask
+                break;
+            }
+        }
+    }
+    return maskedValue;
+};
+// Helper function to extract raw value from masked value
+const extractRawValue = (maskedValue, maskPattern) => {
+    let rawValue = "";
+    for (let i = 0; i < maskedValue.length && i < maskPattern.length; i++) {
+        const rule = maskPattern[i];
+        const char = maskedValue[i];
+        if (!rule.isLiteral) {
+            // Only include non-literal characters in raw value
+            rawValue += char;
+        }
+    }
+    return rawValue;
+};
+// Helper function to get cursor position after masking
+const getCursorPosition = (maskedValue, rawInputLength, maskPattern) => {
+    let inputCount = 0;
+    let cursorPos = 0;
+    for (let i = 0; i < maskPattern.length && i < maskedValue.length; i++) {
+        const rule = maskPattern[i];
+        const char = maskedValue[i];
+        if (rule.isLiteral) {
+            cursorPos = i + 1;
+        }
+        else {
+            inputCount++;
+            cursorPos = i + 1;
+            if (inputCount >= rawInputLength) {
+                break;
+            }
+        }
+    }
+    return cursorPos;
+};
+export const MaskedTextInput = forwardRef((_a, ref) => {
+    var { mask, maskChar = "_", showMask = true, guide = true, keepCharPositions = false, rules, onMaskedChange, onChange, value, defaultValue } = _a, props = __rest(_a, ["mask", "maskChar", "showMask", "guide", "keepCharPositions", "rules", "onMaskedChange", "onChange", "value", "defaultValue"]);
+    const inputRef = useRef(null);
+    const [maskedValue, setMaskedValue] = useState("");
+    const [rawValue, setRawValue] = useState("");
+    // Parse mask pattern using Kendo UI rules
+    const maskPattern = React.useMemo(() => {
+        if (!mask)
+            return null;
+        return createMaskPattern(mask, rules);
+    }, [mask, rules]);
+    // Initialize values
+    useEffect(() => {
+        const initialValue = value || defaultValue || "";
+        if (maskPattern && initialValue) {
+            const masked = applyMask(initialValue, maskPattern, maskChar, showMask, guide);
+            const raw = extractRawValue(masked, maskPattern);
+            setMaskedValue(masked);
+            setRawValue(raw);
+        }
+        else {
+            setMaskedValue(initialValue);
+            setRawValue(initialValue);
+        }
+    }, [maskPattern, maskChar, showMask, guide, value, defaultValue]);
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleChange = useCallback((event) => {
+        const inputValue = event.target.value;
+        if (!maskPattern) {
+            setMaskedValue(inputValue);
+            setRawValue(inputValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            onMaskedChange === null || onMaskedChange === void 0 ? void 0 : onMaskedChange(inputValue, inputValue);
+            return;
+        }
+        const newMaskedValue = applyMask(inputValue, maskPattern, maskChar, showMask, guide);
+        const newRawValue = extractRawValue(newMaskedValue, maskPattern);
+        setMaskedValue(newMaskedValue);
+        setRawValue(newRawValue);
+        // Create synthetic event with masked value
+        const syntheticEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: newMaskedValue }) });
+        onChange === null || onChange === void 0 ? void 0 : onChange(syntheticEvent);
+        onMaskedChange === null || onMaskedChange === void 0 ? void 0 : onMaskedChange(newMaskedValue, newRawValue);
+        // Set cursor position after state update
+        setTimeout(() => {
+            if (inputRef.current) {
+                const rawLength = newRawValue.replace(/[_\s]/g, "").length;
+                const newCursorPos = getCursorPosition(newMaskedValue, rawLength, maskPattern);
+                inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+            }
+        }, 0);
+    }, [maskPattern, maskChar, showMask, guide, onChange, onMaskedChange]);
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b, _c;
+        if (!maskPattern) {
+            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            return;
+        }
+        const { key, ctrlKey, metaKey } = event;
+        const input = event.target;
+        const cursorPos = input.selectionStart || 0;
+        // Allow navigation and editing keys
+        if (key === "Backspace" ||
+            key === "Delete" ||
+            key === "ArrowLeft" ||
+            key === "ArrowRight" ||
+            key === "Home" ||
+            key === "End" ||
+            key === "Tab" ||
+            key.length > 1 || // Allow other special keys
+            ctrlKey ||
+            metaKey) {
+            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+            return;
+        }
+        // Find the next non-literal position from cursor
+        let targetPos = cursorPos;
+        while (targetPos < maskPattern.length &&
+            maskPattern[targetPos].isLiteral) {
+            targetPos++;
+        }
+        // Check if we have a valid position and the key matches
+        if (targetPos < maskPattern.length) {
+            const targetRule = maskPattern[targetPos];
+            // Check with validator function first if exists
+            const isValid = targetRule.validator
+                ? targetRule.validator(key)
+                : targetRule.pattern.test(key);
+            if (!isValid) {
+                event.preventDefault();
+                return;
+            }
+        }
+        (_c = props.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(props, event);
+    }, [maskPattern, props]);
+    return (_jsx(TextInput, Object.assign({}, props, { ref: inputRef, value: maskedValue, onChange: handleChange, onKeyDown: handleKeyDown, className: cn(props.className) })));
+});
+MaskedTextInput.displayName = "MaskedTextInput";
+export default MaskedTextInput;

package/dist/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import MaskedTextInput, { MASK_PATTERNS } from "./MaskedTextInput";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+    title: "Components/MaskedTextInput",
+    component: MaskedTextInput,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Phone Number",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(MaskedTextInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(MaskedTextInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(MaskedTextInput, Object.assign({ id: "3", size: "sm" }, args))] }));
+    },
+};
+export const PhoneNumber = {
+    args: {
+        label: "Phone Number",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "International Phone", mask: MASK_PATTERNS.PHONE_INTL }))] }));
+    },
+};
+export const CreditCard = {
+    args: {
+        label: "Credit Card Number",
+        mask: MASK_PATTERNS.CREDIT_CARD,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const DateAndTime = {
+    args: {
+        label: "Date",
+        mask: MASK_PATTERNS.DATE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: MASK_PATTERNS.TIME }))] }));
+    },
+};
+export const SocialSecurityNumber = {
+    args: {
+        label: "Social Security Number",
+        mask: MASK_PATTERNS.SSN,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const ZipCode = {
+    args: {
+        label: "ZIP Code",
+        mask: MASK_PATTERNS.ZIP_CODE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code + 4", mask: MASK_PATTERNS.ZIP_CODE_EXT }))] }));
+    },
+};
+export const Currency = {
+    args: {
+        label: "Amount",
+        mask: MASK_PATTERNS.CURRENCY,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const CustomMask = {
+    args: {
+        label: "Custom Pattern",
+        mask: "AAA-999-AAA",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "License Plate", mask: "999-AAA" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Product Code", mask: "AA-9999-AA" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: "00:00:00" }))] }));
+    },
+};
+export const MaskOptions = {
+    args: {
+        label: "Phone with Options",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args, { label: "With Guide", guide: true, showMask: true })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Without Guide", guide: false, showMask: true })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Mask Char", maskChar: "*", guide: true, showMask: true }))] }));
+    },
+};
+export const WithCallbacks = {
+    args: {
+        label: "Phone with Callbacks",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        const [maskedValue, setMaskedValue] = useState("");
+        const [rawValue, setRawValue] = useState("");
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args, { onChange: (e) => {
+                        setMaskedValue(e.target.value);
+                        setRawValue(e.target.value);
+                    }, onMaskedChange: (masked, raw) => {
+                        setMaskedValue(masked);
+                        setRawValue(raw);
+                    } })), _jsxs("div", { className: "p-4 bg-gray-100 rounded", children: [_jsxs("p", { children: [_jsx("strong", { children: "Masked Value:" }), " ", maskedValue] }), _jsxs("p", { children: [_jsx("strong", { children: "Raw Value:" }), " ", rawValue] })] })] }));
+    },
+};
+export const AllPatterns = {
+    args: {
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-2xl", children: [_jsx("h3", { className: "text-lg font-semibold", children: "All Mask Patterns" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(MaskedTextInput, Object.assign({}, args, { label: "Phone", mask: MASK_PATTERNS.PHONE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "International Phone", mask: MASK_PATTERNS.PHONE_INTL })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Credit Card", mask: MASK_PATTERNS.CREDIT_CARD })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Date", mask: MASK_PATTERNS.DATE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: MASK_PATTERNS.TIME })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "SSN", mask: MASK_PATTERNS.SSN })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code", mask: MASK_PATTERNS.ZIP_CODE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code + 4", mask: MASK_PATTERNS.ZIP_CODE_EXT })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Currency", mask: MASK_PATTERNS.CURRENCY })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Percentage", mask: MASK_PATTERNS.PERCENTAGE }))] })] }));
+    },
+};
+export const KendoRules = {
+    args: {
+        label: "Kendo UI Rules",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Kendo UI Mask Rules Examples" }), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: 0 (Digits Only)", mask: "000-000-0000", helperText: "0 = Required digit (0-9)" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: L (Letters Only)", mask: "LLL-LLLL", helperText: "L = Required letter (a-z, A-Z)" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: A (Alphanumeric)", mask: "AAAA-0000", helperText: "A = Letter or digit" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: # (Number with sign)", mask: "###", helperText: "# = Digit, space, + or -" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Mixed Pattern Example", mask: "(000) LLL-0000", helperText: "Format: (123) ABC-4567" }))] }));
+    },
+};
+export const OptionalRules = {
+    args: {
+        label: "Optional Rules (with space)",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Rules that accept space (optional input)" }), _jsx("p", { className: "text-xs text-gray-500", children: "Note: These rules allow space, making the position optional" }), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: 9 (Digit or Space)", mask: "999-999-9999", helperText: "9 = Optional digit (press space to skip)", guide: false })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: ? (Letter or Space)", mask: "???-????", helperText: "? = Optional letter (press space to skip)", guide: false })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: a (Alphanumeric or Space)", mask: "aaaa-aaaa", helperText: "a = Optional alphanumeric (press space to skip)", guide: false }))] }));
+    },
+};
+export const CustomRules = {
+    args: {
+        label: "Custom Rules",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Custom Validation Rules" }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Rule: Digits 3-9 only", mask: "~-~-~", rules: {
+                            "~": /[3-9]/,
+                        }, helperText: "Type only digits 3, 4, 5, 6, 7, 8, or 9" })) }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Rule: Uppercase letters only", mask: "***", rules: {
+                            "*": (char) => char === char.toUpperCase() && /[A-Z]/.test(char),
+                        }, helperText: "Type only uppercase letters (A-Z)" })) }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Mixed Custom Rules", mask: "~*-~*", rules: {
+                            "~": /[0-9]/,
+                            "*": /[A-Z]/,
+                        }, helperText: "Format: Digit-Letter-Digit-Letter" })) })] }));
+    },
+};

package/dist/components/MaskedTextInput/index.js

@@ -0,0 +1,2 @@
+export { default } from "./MaskedTextInput";
+export { MASK_PATTERNS } from "./MaskedTextInput";