@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/SmsOtpField/SmsOtpField.js

@@ -0,0 +1,179 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmsOtpField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+require("./SmsOtpField.css");
+/**
+ * SmsOtpField Component
+ *
+ * An OTP (One-Time Password) input following web.dev SMS OTP best practices:
+ * - Uses `autocomplete="one-time-code"` for browser autofill and WebOTP API
+ * - Uses `inputmode="numeric"` for mobile numeric keyboard
+ * - Uses `type="text"` (not number) to avoid spinner buttons
+ * - Individual digit boxes with a single hidden input for autofill
+ *
+ * Tokens used:
+ * - input.field.color.{state}.{background|foreground|border}
+ * - input.field.radius.{size}
+ * - input.field.height.{size}
+ * - text.input.{size}
+ * - text.label.{size}.semibold
+ */
+const SmsOtpField = ({ length = 6, value: controlledValue, onChange, onComplete, label, helperText, error = false, errorMessage, disabled = false, size = 'md', required = false, className = '', name, }) => {
+    const generatedId = (0, react_1.useId)();
+    const fieldId = name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)('');
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(null);
+    const inputRefs = (0, react_1.useRef)([]);
+    const hiddenInputRef = (0, react_1.useRef)(null);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const digits = Array.from({ length }, (_, i) => currentValue[i] || '');
+    const updateValue = (0, react_1.useCallback)((newValue) => {
+        const sanitized = newValue.replace(/[^0-9]/g, '').slice(0, length);
+        if (!isControlled) {
+            setInternalValue(sanitized);
+        }
+        onChange?.(sanitized);
+        if (sanitized.length === length) {
+            onComplete?.(sanitized);
+        }
+    }, [isControlled, length, onChange, onComplete]);
+    const focusDigit = (0, react_1.useCallback)((index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length - 1));
+        inputRefs.current[clampedIndex]?.focus();
+    }, [length]);
+    const handleDigitInput = (0, react_1.useCallback)((index, e) => {
+        const input = e.currentTarget;
+        const inputData = input.value;
+        // Handle paste or autofill of multiple characters
+        if (inputData.length > 1) {
+            const numericOnly = inputData.replace(/[^0-9]/g, '');
+            const newValue = currentValue.slice(0, index) + numericOnly;
+            updateValue(newValue);
+            const nextIndex = Math.min(index + numericOnly.length, length - 1);
+            focusDigit(nextIndex);
+            return;
+        }
+        // Single character input
+        const char = inputData.replace(/[^0-9]/g, '');
+        if (!char) {
+            input.value = '';
+            return;
+        }
+        const chars = currentValue.split('');
+        chars[index] = char;
+        // Fill gaps with empty strings
+        for (let i = 0; i < length; i++) {
+            if (chars[i] === undefined)
+                chars[i] = '';
+        }
+        updateValue(chars.join(''));
+        if (index < length - 1) {
+            focusDigit(index + 1);
+        }
+    }, [currentValue, focusDigit, length, updateValue]);
+    const handleKeyDown = (0, react_1.useCallback)((index, e) => {
+        if (e.key === 'Backspace') {
+            e.preventDefault();
+            const chars = currentValue.split('');
+            if (chars[index]) {
+                chars[index] = '';
+                updateValue(chars.join(''));
+            }
+            else if (index > 0) {
+                chars[index - 1] = '';
+                updateValue(chars.join(''));
+                focusDigit(index - 1);
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            e.preventDefault();
+            focusDigit(index - 1);
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            e.preventDefault();
+            focusDigit(index + 1);
+        }
+    }, [currentValue, focusDigit, length, updateValue]);
+    const handlePaste = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData('text/plain').replace(/[^0-9]/g, '').slice(0, length);
+        if (pasted) {
+            updateValue(pasted);
+            focusDigit(Math.min(pasted.length, length - 1));
+        }
+    }, [focusDigit, length, updateValue]);
+    // Handle autofill on the hidden input
+    const handleHiddenInputChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value.replace(/[^0-9]/g, '').slice(0, length);
+        if (newValue) {
+            updateValue(newValue);
+            focusDigit(Math.min(newValue.length, length - 1));
+        }
+    }, [focusDigit, length, updateValue]);
+    // Sync hidden input value for form submission
+    (0, react_1.useEffect)(() => {
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.value = currentValue;
+        }
+    }, [currentValue]);
+    const wrapperClasses = [
+        'muka-sms-otp-field',
+        className,
+    ].filter(Boolean).join(' ');
+    const digitClasses = (index) => [
+        'muka-sms-otp-field__digit',
+        `muka-sms-otp-field__digit--${size}`,
+        focusedIndex === index && 'muka-sms-otp-field__digit--focused',
+        error && 'muka-sms-otp-field__digit--error',
+        disabled && 'muka-sms-otp-field__digit--disabled',
+        digits[index] && 'muka-sms-otp-field__digit--filled',
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-sms-otp-field__label muka-sms-otp-field__label--${size}`, htmlFor: `${fieldId}-digit-0`, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-sms-otp-field__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsx)("input", { ref: hiddenInputRef, type: "text", inputMode: "numeric", autoComplete: "one-time-code", name: name, pattern: "[0-9]*", className: "muka-sms-otp-field__hidden-input", "aria-hidden": "true", tabIndex: -1, onChange: handleHiddenInputChange, disabled: disabled }), (0, jsx_runtime_1.jsx)("div", { className: "muka-sms-otp-field__digits", role: "group", "aria-label": label || 'One-time code', "aria-describedby": describedBy, children: digits.map((digit, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: (el) => { inputRefs.current[index] = el; }, id: `${fieldId}-digit-${index}`, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: digitClasses(index), value: digit, onInput: (e) => handleDigitInput(index, e), onChange: () => { }, onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => {
+                                setFocusedIndex(index);
+                                // Select the content on focus for easy replacement
+                                inputRefs.current[index]?.select();
+                            }, onBlur: () => setFocusedIndex(null), onPaste: handlePaste, disabled: disabled, required: required && index === 0, "aria-label": `Digit ${index + 1} of ${length}`, "aria-invalid": error || undefined, autoComplete: "off" }), index === Math.floor(length / 2) - 1 && length > 1 && ((0, jsx_runtime_1.jsx)("span", { className: "muka-sms-otp-field__separator", "aria-hidden": "true", children: "\u2013" }))] }, index))) }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-sms-otp-field__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-sms-otp-field__helper", id: helperTextId, children: helperText }))] }));
+};
+exports.SmsOtpField = SmsOtpField;
+exports.default = exports.SmsOtpField;
+//# sourceMappingURL=SmsOtpField.js.map

package/dist/cjs/components/SmsOtpField/SmsOtpField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmsOtpField.js","sourceRoot":"","sources":["../../../../components/SmsOtpField/SmsOtpField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+E;AAC/E,6BAA2B;AA2C3B;;;;;;;;;;;;;;;GAeG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,GACL,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC;IACpC,MAAM,YAAY,GAAG,GAAG,OAAO,SAAS,CAAC;IACzC,MAAM,cAAc,GAAG,GAAG,OAAO,QAAQ,CAAC;IAE1C,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS,CAAC;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;IAEpE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,IAAA,cAAM,EAA8B,EAAE,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,KAAK,IAAI,YAAY,CAAC;IACxC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvF,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,QAAgB,EAAE,EAAE;QACnB,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAC9B,CAAC;QACD,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC;QACtB,IAAI,SAAS,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAChC,UAAU,EAAE,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,CAC7C,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,CAAC,KAAa,EAAE,EAAE;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC9D,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;IAC3C,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAClC,CAAC,KAAa,EAAE,CAAoC,EAAE,EAAE;QACtD,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC;QAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAE9B,kDAAkD;QAClD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;YACrD,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,WAAW,CAAC;YAC5D,WAAW,CAAC,QAAQ,CAAC,CAAC;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;YACnE,UAAU,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,yBAAyB;QACzB,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;QACpB,+BAA+B;QAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS;gBAAE,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QAC5C,CAAC;QACD,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5B,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAChD,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,KAAa,EAAE,CAAwC,EAAE,EAAE;QAC1D,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACrC,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBACjB,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9B,CAAC;iBAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;gBACtB,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC5B,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;YACxD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAChD,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,CAAuB,EAAE,EAAE;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAC7F,IAAI,MAAM,EAAE,CAAC;YACX,WAAW,CAAC,MAAM,CAAC,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAClC,CAAC;IAEF,sCAAsC;IACtC,MAAM,uBAAuB,GAAG,IAAA,mBAAW,EACzC,CAAC,CAAsC,EAAE,EAAE;QACzC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACxE,IAAI,QAAQ,EAAE,CAAC;YACb,WAAW,CAAC,QAAQ,CAAC,CAAC;YACtB,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAClC,CAAC;IAEF,8CAA8C;IAC9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAC3B,cAAc,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG;QACrB,oBAAoB;QACpB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CACrC;QACE,2BAA2B;QAC3B,8BAA8B,IAAI,EAAE;QACpC,YAAY,KAAK,KAAK,IAAI,oCAAoC;QAC9D,KAAK,IAAI,kCAAkC;QAC3C,QAAQ,IAAI,qCAAqC;QACjD,MAAM,CAAC,KAAK,CAAC,IAAI,mCAAmC;KACrD,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE9B,OAAO,CACL,iCAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,mCACE,SAAS,EAAE,wDAAwD,IAAI,EAAE,EACzE,OAAO,EAAE,GAAG,OAAO,UAAU,aAE5B,KAAK,EACL,QAAQ,IAAI,iCAAM,SAAS,EAAC,8BAA8B,iBAAa,MAAM,mBAAU,IAClF,CACT,EAGD,kCACE,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,YAAY,EAAC,eAAe,EAC5B,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAC,kCAAkC,iBAChC,MAAM,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,uBAAuB,EACjC,QAAQ,EAAE,QAAQ,GAClB,EAEF,gCACE,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,OAAO,gBACA,KAAK,IAAI,eAAe,sBAClB,WAAW,YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,wBAAC,eAAK,CAAC,QAAQ,eACb,kCACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAC/C,EAAE,EAAE,GAAG,OAAO,UAAU,KAAK,EAAE,EAC/B,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC,EAC1C,QAAQ,EAAE,GAAG,EAAE,GAA8B,CAAC,EAC9C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE;gCACZ,eAAe,CAAC,KAAK,CAAC,CAAC;gCACvB,mDAAmD;gCACnD,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;4BACrC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,KAAK,KAAK,CAAC,gBACrB,SAAS,KAAK,GAAG,CAAC,OAAO,MAAM,EAAE,kBAC/B,KAAK,IAAI,SAAS,EAChC,YAAY,EAAC,KAAK,GAClB,EAED,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC,IAAI,CACrD,iCAAM,SAAS,EAAC,+BAA+B,iBAAa,MAAM,uBAE3D,CACR,KA/BkB,KAAK,CAgCT,CAClB,CAAC,GACE,EAEL,SAAS,IAAI,CACZ,8BAAG,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YACtE,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,8BAAG,SAAS,EAAC,4BAA4B,EAAC,EAAE,EAAE,YAAY,YACvD,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AArPW,QAAA,WAAW,eAqPtB;AAEF,kBAAe,mBAAW,CAAC"}

package/dist/cjs/components/SmsOtpField/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.SmsOtpField = void 0;
+var SmsOtpField_1 = require("./SmsOtpField");
+Object.defineProperty(exports, "SmsOtpField", { enumerable: true, get: function () { return SmsOtpField_1.SmsOtpField; } });
+var SmsOtpField_2 = require("./SmsOtpField");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SmsOtpField_2).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/SmsOtpField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SmsOtpField/index.ts"],"names":[],"mappings":";;;;;;AAAA,6CAAmE;AAA1D,0GAAA,WAAW,OAAA;AACpB,6CAAwC;AAA/B,uHAAA,OAAO,OAAA"}

package/dist/cjs/components/SpecList/SpecList.css

@@ -0,0 +1,69 @@
+/* SpecList Component Styles */
+
+.muka-spec-list {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-surface-level1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ─── Row ─────────────────────────────────────────────── */
+
+.muka-spec-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-spec-row:first-child {
+  border-top: none;
+}
+
+/* ─── Label ───────────────────────────────────────────── */
+
+.muka-spec-row__label {
+  flex: 0 0 auto;
+  min-width: 40%;
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
+}
+
+/* ─── Value ───────────────────────────────────────────── */
+
+.muka-spec-row__value {
+  flex: 1 1 auto;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+  color: var(--color-text-default-default);
+}
+
+.muka-spec-row__value-text {
+  font-family: var(--text-body-md-medium-fontFamily);
+  font-weight: var(--text-body-md-medium-fontWeight);
+  font-size: var(--text-body-md-medium-fontSize);
+  line-height: var(--text-body-md-medium-lineHeight);
+}
+
+.muka-spec-row__hint {
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+/* ─── Compact density ─────────────────────────────────── */
+
+.muka-spec-list--compact .muka-spec-row {
+  padding: var(--spacing-2) var(--spacing-4);
+}

package/dist/cjs/components/SpecList/SpecList.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecList = exports.SpecRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./SpecList.css");
+/**
+ * SpecRow — a single key/value row inside a SpecList.
+ *
+ * Renders as a `<dt>` (label) + `<dd>` (value) pair for semantic correctness.
+ */
+const SpecRow = ({ label, value, hint, className = '' }) => {
+    const classes = ['muka-spec-row', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)("dt", { className: "muka-spec-row__label", children: label }), (0, jsx_runtime_1.jsxs)("dd", { className: "muka-spec-row__value", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-spec-row__value-text", children: value }), hint && (0, jsx_runtime_1.jsx)("span", { className: "muka-spec-row__hint", children: hint })] })] }));
+};
+exports.SpecRow = SpecRow;
+/**
+ * SpecList — key/value list for technical specifications.
+ *
+ * Mobile-friendly alternative to `Table` when displaying flat key/value data
+ * (e.g. motorcycle specs, vehicle details). Each row is a `<dt>/<dd>` pair
+ * inside a `<dl>` for semantic accessibility.
+ */
+const SpecList = ({ children, density = 'default', className = '', }) => {
+    const classes = ['muka-spec-list', `muka-spec-list--${density}`, className]
+        .filter(Boolean)
+        .join(' ');
+    return (0, jsx_runtime_1.jsx)("dl", { className: classes, children: children });
+};
+exports.SpecList = SpecList;
+exports.default = exports.SpecList;
+//# sourceMappingURL=SpecList.js.map

package/dist/cjs/components/SpecList/SpecList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":";;;;AACA,0BAAwB;AAkBxB;;;;GAIG;AACI,MAAM,OAAO,GAA2B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvE,OAAO,CACL,iCAAK,SAAS,EAAE,OAAO,aACrB,+BAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,gCAAI,SAAS,EAAC,sBAAsB,aAClC,iCAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,EACzD,IAAI,IAAI,iCAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACzD,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,OAAO,WAWlB;AAmBF;;;;;;GAMG;AACI,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,gBAAgB,EAAE,mBAAmB,OAAO,EAAE,EAAE,SAAS,CAAC;SACxE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,+BAAI,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAM,CAAC;AACjD,CAAC,CAAC;AATW,QAAA,QAAQ,YASnB;AAEF,kBAAe,gBAAQ,CAAC"}

package/dist/cjs/components/SpecList/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecRow = exports.SpecList = void 0;
+var SpecList_1 = require("./SpecList");
+Object.defineProperty(exports, "SpecList", { enumerable: true, get: function () { return SpecList_1.SpecList; } });
+Object.defineProperty(exports, "SpecRow", { enumerable: true, get: function () { return SpecList_1.SpecRow; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/SpecList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SpecList/index.ts"],"names":[],"mappings":";;;AAAA,uCAAsF;AAA7E,oGAAA,QAAQ,OAAA;AAAE,mGAAA,OAAO,OAAA"}

package/dist/cjs/components/Spinner/Spinner.css

@@ -0,0 +1,75 @@
+/* Spinner Component Styles */
+
+.muka-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-default-default);
+  line-height: 0;
+}
+
+.muka-spinner--subtle {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-spinner--inverse {
+  color: var(--color-text-inverse-default);
+}
+
+.muka-spinner__circle {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+  animation: muka-spinner-rotate 0.7s linear infinite;
+  box-sizing: border-box;
+}
+
+/* ─── Sizes ───────────────────────────────────────────── */
+
+.muka-spinner--sm .muka-spinner__circle {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.muka-spinner--md .muka-spinner__circle {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.muka-spinner--lg .muka-spinner__circle {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
+/* ─── Visually-hidden label ───────────────────────────── */
+
+.muka-spinner__sr-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+
+@keyframes muka-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-spinner__circle {
+    animation-duration: 2.5s;
+  }
+}

package/dist/cjs/components/Spinner/Spinner.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./Spinner.css");
+/**
+ * Spinner — indeterminate loading indicator.
+ *
+ * Use for inline loading states (button labels, async fetches, image uploads).
+ * For full-page loading, prefer `Skeleton`. For determinate progress, use `Progress`.
+ *
+ * @accessibility
+ * - Renders with `role="status"` and a visually-hidden label for screen readers
+ * - Animation respects `prefers-reduced-motion`
+ */
+const Spinner = ({ size = 'md', variant = 'default', label = 'Loading', className = '', }) => {
+    const classes = [
+        'muka-spinner',
+        `muka-spinner--${size}`,
+        `muka-spinner--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("span", { className: classes, role: "status", "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-spinner__circle", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "muka-spinner__sr-label", children: label })] }));
+};
+exports.Spinner = Spinner;
+exports.default = exports.Spinner;
+//# sourceMappingURL=Spinner.js.map

package/dist/cjs/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;AACA,yBAAuB;AAyBvB;;;;;;;;;GASG;AACI,MAAM,OAAO,GAA2B,CAAC,EAC9C,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,cAAc;QACd,iBAAiB,IAAI,EAAE;QACvB,iBAAiB,OAAO,EAAE;QAC1B,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kCAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,eAAW,QAAQ,aACxD,iCAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,GAAG,EAC5D,iCAAM,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAQ,IAClD,CACR,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,OAAO,WAqBlB;AAEF,kBAAe,eAAO,CAAC"}

package/dist/cjs/components/Spinner/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Spinner/index.ts"],"names":[],"mappings":";;;AAAA,qCAAuD;AAA9C,kGAAA,OAAO,OAAA"}

package/dist/cjs/components/SwipeActions/SwipeActions.css

@@ -0,0 +1,105 @@
+/* SwipeActions Component Styles */
+
+.muka-swipe-actions {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: var(--color-surface-level3);
+}
+
+.muka-swipe-actions--disabled {
+  touch-action: auto;
+}
+
+/* ─── Row that holds the actual content ────────────────── */
+
+.muka-swipe-actions__row {
+  position: relative;
+  z-index: 1;
+  background-color: inherit;
+  will-change: transform;
+}
+
+/* ─── Action panels — sit beneath the row ──────────────── */
+
+.muka-swipe-actions__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: stretch;
+  z-index: 0;
+}
+
+.muka-swipe-actions__panel--left {
+  left: 0;
+}
+
+.muka-swipe-actions__panel--right {
+  right: 0;
+}
+
+/* ─── Single action button ─────────────────────────────── */
+
+.muka-swipe-actions__button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-2);
+  background-color: var(--color-surface-level2);
+  color: var(--color-text-default-default);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  -webkit-tap-highlight-color: transparent;
+  transition: filter 0.12s ease;
+}
+
+.muka-swipe-actions__button:hover {
+  filter: brightness(0.95);
+}
+
+.muka-swipe-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+.muka-swipe-actions__button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Color variants ───────────────────────────────────── */
+
+.muka-swipe-actions__button--neutral {
+  background-color: var(--color-surface-level2);
+  color: var(--color-text-default-default);
+}
+
+.muka-swipe-actions__button--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-inverse-default, #fff);
+}
+
+.muka-swipe-actions__button--success {
+  background-color: var(--color-state-success-default, var(--color-action-default));
+  color: var(--color-text-inverse-default, #fff);
+}
+
+.muka-swipe-actions__button--warning {
+  background-color: var(--color-state-warning-default, var(--color-action-default));
+  color: var(--color-text-default-default);
+}
+
+.muka-swipe-actions__button--destructive {
+  background-color: var(--color-state-error-default, #c0392b);
+  color: var(--color-text-inverse-default, #fff);
+}