@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/Select/Select.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = Select;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Select.css");
+const Icon_1 = require("../Icon");
+/**
+ * Select / Dropdown Component
+ *
+ * Uses native <select> for maximum accessibility.
+ * Styled with the Muka design token system.
+ *
+ * Tokens used:
+ * - select.field.color.{state}.{background|foreground|border}
+ * - select.field.radius.{size}
+ * - select.field.padding.{x|y}
+ * - select.field.height.{size}
+ * - text.input.{size}
+ * - text.label.{size}.semibold
+ */
+function Select({ options, value, onChange, onValueChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, required = false, name, className = '', ...props }) {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const selectRef = (0, react_1.useRef)(null);
+    const generatedId = (0, react_1.useId)();
+    const selectId = name || generatedId;
+    const helperTextId = `${selectId}-helper`;
+    const errorMessageId = `${selectId}-error`;
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const wrapperClasses = [
+        'muka-select',
+        fullWidth && 'muka-select--full-width',
+        className,
+    ].filter(Boolean).join(' ');
+    const fieldClasses = [
+        'muka-select__field',
+        `muka-select__field--${size}`,
+        isFocused && 'muka-select__field--focused',
+        error && 'muka-select__field--error',
+        disabled && 'muka-select__field--disabled',
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-select__label muka-select__label--${size}`, htmlFor: selectId, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-select__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsxs)("div", { className: fieldClasses, onMouseDown: (e) => {
+                    if (disabled)
+                        return;
+                    if (e.target !== selectRef.current) {
+                        e.preventDefault();
+                        selectRef.current?.focus();
+                    }
+                }, children: [(0, jsx_runtime_1.jsxs)("select", { ref: selectRef, id: selectId, className: "muka-select__native", value: value, onChange: (e) => {
+                            onChange?.(e);
+                            onValueChange?.(e.target.value);
+                        }, disabled: disabled, name: name, required: required, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [placeholder && ((0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder })), options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), (0, jsx_runtime_1.jsx)("span", { className: "muka-select__chevron", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", variant: "line", size: "sm" }) })] }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-select__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-select__helper", id: helperTextId, children: helperText }))] }));
+}
+exports.default = Select;
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../components/Select/Select.tsx"],"names":[],"mappings":";;AA0EA,wBAkHC;;AA5LD,iCAAuD;AACvD,wBAAsB;AACtB,kCAA+B;AA0D/B;;;;;;;;;;;;;GAaG;AACH,SAAgB,MAAM,CAA4B,EAChD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACO;IACf,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAI,IAAI,WAAW,CAAC;IACrC,MAAM,YAAY,GAAG,GAAG,QAAQ,SAAS,CAAC;IAC1C,MAAM,cAAc,GAAG,GAAG,QAAQ,QAAQ,CAAC;IAE3C,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,cAAc,GAAG;QACrB,aAAa;QACb,SAAS,IAAI,yBAAyB;QACtC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG;QACnB,oBAAoB;QACpB,uBAAuB,IAAI,EAAE;QAC7B,SAAS,IAAI,6BAA6B;QAC1C,KAAK,IAAI,2BAA2B;QACpC,QAAQ,IAAI,8BAA8B;KAC3C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,mCACE,SAAS,EAAE,0CAA0C,IAAI,EAAE,EAC3D,OAAO,EAAE,QAAQ,aAEhB,KAAK,EACL,QAAQ,IAAI,iCAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,mBAAU,IAC3E,CACT,EAID,iCACE,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oBACjB,IAAI,QAAQ;wBAAE,OAAO;oBACrB,IAAI,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO,EAAE,CAAC;wBACnC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC7B,CAAC;gBACH,CAAC,aAED,oCACE,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,QAAQ,EACZ,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;4BACd,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAU,CAAC,CAAC;wBACvC,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,kBACJ,KAAK,IAAI,SAAS,sBACd,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,KAC7B,KAAK,aAER,WAAW,IAAI,CACd,mCAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,kBACtB,WAAW,GACL,CACV,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,mCAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,YACtE,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,EAET,iCAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,YACvD,uBAAC,WAAI,IAAC,IAAI,EAAC,cAAc,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,GAChD,IACH,EAEL,SAAS,IAAI,CACZ,8BAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YAC/D,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,8BAAG,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAE,YAAY,YAChD,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,MAAM,CAAC"}

package/dist/cjs/components/Select/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.Select = void 0;
+var Select_1 = require("./Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var Select_2 = require("./Select");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Select_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Select/index.ts"],"names":[],"mappings":";;;;;;AAAA,mCAAuE;AAA9D,gGAAA,MAAM,OAAA;AACf,mCAAmC;AAA1B,kHAAA,OAAO,OAAA"}

package/dist/cjs/components/Sheet/Sheet.css

@@ -0,0 +1,77 @@
+/* Sheet Component Styles */
+
+/* ─── Backdrop ────────────────────────────────────────── */
+
+.muka-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-surface-backdrop);
+  z-index: 50;
+}
+
+/* ─── Surface ─────────────────────────────────────────── */
+
+.muka-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 51;
+
+  display: flex;
+  flex-direction: column;
+
+  max-height: 96dvh;
+
+  background-color: var(--color-surface-level3);
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level5);
+
+  outline: none;
+}
+
+/* Safe-area bottom inset for the iPhone home indicator. */
+.muka-sheet:not(.muka-sheet--no-safe-area) {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* ─── Drag handle ─────────────────────────────────────── */
+
+.muka-sheet__handle-container {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-3) 0;
+}
+
+.muka-sheet__handle {
+  width: var(--dialog-drag-handle-width);
+  height: var(--dialog-drag-handle-height);
+  background-color: var(--dialog-drag-handle-color);
+  border-radius: var(--dialog-drag-handle-radius);
+}
+
+/* ─── Body (scrollable) ───────────────────────────────── */
+
+.muka-sheet__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+/* ─── Visually-hidden title (a11y) ────────────────────── */
+
+.muka-sheet__sr-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/cjs/components/Sheet/Sheet.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vaul_1 = require("vaul");
+require("./Sheet.css");
+/**
+ * Sheet — bottom sheet overlay with snap-point support and gesture-driven dismissal.
+ *
+ * Built on Vaul (Radix-based). Use for modal content that slides up from the bottom:
+ * action menus, mileage editors, picker lists, AI chat options.
+ *
+ * Composable: render any content as children. For a titled sheet, compose a `TopBar`
+ * inside the body (set `showHandle={false}` if using TopBar's draggable variant to
+ * avoid two handles).
+ *
+ * @accessibility
+ * - Title is announced to screen readers (visually hidden by default)
+ * - Focus is trapped while open
+ * - ESC closes the sheet
+ */
+const Sheet = ({ open, onOpenChange, snapPoints, activeSnapPoint, setActiveSnapPoint, showHandle = true, dismissible = true, disableSafeArea = false, title, children, className = '', }) => {
+    const contentClasses = [
+        'muka-sheet',
+        disableSafeArea && 'muka-sheet--no-safe-area',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsx)(vaul_1.Drawer.Root, { open: open, onOpenChange: onOpenChange, snapPoints: snapPoints, activeSnapPoint: activeSnapPoint, setActiveSnapPoint: setActiveSnapPoint, dismissible: dismissible, children: (0, jsx_runtime_1.jsxs)(vaul_1.Drawer.Portal, { children: [(0, jsx_runtime_1.jsx)(vaul_1.Drawer.Overlay, { className: "muka-sheet__overlay" }), (0, jsx_runtime_1.jsxs)(vaul_1.Drawer.Content, { className: contentClasses, children: [(0, jsx_runtime_1.jsx)(vaul_1.Drawer.Title, { className: "muka-sheet__sr-title", children: title }), showHandle && ((0, jsx_runtime_1.jsx)("div", { className: "muka-sheet__handle-container", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("div", { className: "muka-sheet__handle" }) })), (0, jsx_runtime_1.jsx)("div", { className: "muka-sheet__body", children: children })] })] }) }));
+};
+exports.Sheet = Sheet;
+exports.default = exports.Sheet;
+//# sourceMappingURL=Sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sourceRoot":"","sources":["../../../../components/Sheet/Sheet.tsx"],"names":[],"mappings":";;;;AACA,+BAAsC;AACtC,uBAAqB;AAgDrB;;;;;;;;;;;;;;GAcG;AACI,MAAM,KAAK,GAAyB,CAAC,EAC1C,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,eAAe,GAAG,KAAK,EACvB,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,cAAc,GAAG;QACrB,YAAY;QACZ,eAAe,IAAI,0BAA0B;QAC7C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,uBAAC,aAAI,CAAC,IAAI,IACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,YAExB,wBAAC,aAAI,CAAC,MAAM,eACV,uBAAC,aAAI,CAAC,OAAO,IAAC,SAAS,EAAC,qBAAqB,GAAG,EAChD,wBAAC,aAAI,CAAC,OAAO,IAAC,SAAS,EAAE,cAAc,aACrC,uBAAC,aAAI,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAc,EAChE,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,8BAA8B,iBAAa,MAAM,YAC9D,gCAAK,SAAS,EAAC,oBAAoB,GAAG,GAClC,CACP,EACD,gCAAK,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAO,IACrC,IACH,GACJ,CACb,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,KAAK,SA4ChB;AAEF,kBAAe,aAAK,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Sheet/index.ts"],"names":[],"mappings":";;;AAAA,iCAAiD;AAAxC,8FAAA,KAAK,OAAA"}

package/dist/cjs/components/Skeleton/Skeleton.css

@@ -0,0 +1,72 @@
+/* Skeleton Component Styles */
+
+.muka-skeleton {
+  background-color: var(--color-surface-level1);
+  display: block;
+}
+
+/* Variants */
+.muka-skeleton--text {
+  height: 1em;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+.muka-skeleton--circular {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+}
+
+.muka-skeleton--rectangular {
+  height: 7.5rem;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+/* Last line in multi-line text is shorter */
+.muka-skeleton--last-line {
+  width: 80%;
+}
+
+/* Lines container */
+.muka-skeleton__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Shimmer animation */
+@keyframes muka-skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.muka-skeleton--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-level1) 25%,
+    var(--color-surface-level2) 50%,
+    var(--color-surface-level1) 75%
+  );
+  background-size: 200% 100%;
+  animation: muka-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Pulse animation */
+@keyframes muka-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.muka-skeleton--pulse {
+  animation: muka-skeleton-pulse 1.5s ease-in-out infinite;
+}

package/dist/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./Skeleton.css");
+const Skeleton = ({ variant = 'text', width, height, lines = 1, animation = 'shimmer', borderRadius, className = '', }) => {
+    const baseClasses = [
+        'muka-skeleton',
+        `muka-skeleton--${variant}`,
+        animation !== 'none' && `muka-skeleton--${animation}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const style = {
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+        borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
+    };
+    if (variant === 'text' && lines > 1) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "muka-skeleton__lines", role: "status", "aria-label": "Loading", children: Array.from({ length: lines }, (_, i) => ((0, jsx_runtime_1.jsx)("div", { className: [
+                    baseClasses,
+                    i === lines - 1 && 'muka-skeleton--last-line',
+                ].filter(Boolean).join(' '), style: i === lines - 1 ? { ...style, width: style.width || '80%' } : style }, i))) }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: baseClasses, style: style, role: "status", "aria-label": "Loading" });
+};
+exports.Skeleton = Skeleton;
+exports.default = exports.Skeleton;
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;AACA,0BAAwB;AAmBjB,MAAM,QAAQ,GAA4B,CAAC,EAChD,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,MAAM,EACN,KAAK,GAAG,CAAC,EACT,SAAS,GAAG,SAAS,EACrB,YAAY,EACZ,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,eAAe;QACf,kBAAkB,OAAO,EAAE;QAC3B,SAAS,KAAK,MAAM,IAAI,kBAAkB,SAAS,EAAE;QACrD,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,KAAK,GAAwB;QACjC,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;QACvD,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;QAC3D,YAAY,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,YAAY;KACpF,CAAC;IAEF,IAAI,OAAO,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QACpC,OAAO,CACL,gCAAK,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,QAAQ,gBAAY,SAAS,YACrE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,gCAEE,SAAS,EAAE;oBACT,WAAW;oBACX,CAAC,KAAK,KAAK,GAAG,CAAC,IAAI,0BAA0B;iBAC9C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3B,KAAK,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,IALrE,CAAC,CAMN,CACH,CAAC,GACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,gCAAK,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,gBAAY,SAAS,GAAG,CAAC;AAC1F,CAAC,CAAC;AAxCW,QAAA,QAAQ,YAwCnB;AAEF,kBAAe,gBAAQ,CAAC"}

package/dist/cjs/components/Skeleton/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.Skeleton = void 0;
+var Skeleton_1 = require("./Skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
+var Skeleton_2 = require("./Skeleton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Skeleton_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Skeleton/index.ts"],"names":[],"mappings":";;;;;;AAAA,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}

package/dist/cjs/components/SmsOtpField/SmsOtpField.css

@@ -0,0 +1,189 @@
+/* SmsOtpField Component Styles - Using Muka Design Tokens */
+
+/* Wrapper */
+.muka-sms-otp-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-sms-otp-field__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-sms-otp-field__label--sm {
+  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);
+}
+
+.muka-sms-otp-field__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-sms-otp-field__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-sms-otp-field__required {
+  color: var(--color-state-error-foreground);
+}
+
+/* Hidden input for browser autofill */
+.muka-sms-otp-field__hidden-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Digits container */
+.muka-sms-otp-field__digits {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Separator */
+.muka-sms-otp-field__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  font-size: 1.25rem;
+  padding: 0 var(--spacing-1);
+  user-select: none;
+}
+
+/* Individual digit box */
+.muka-sms-otp-field__digit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  color: var(--input-field-color-default-foreground);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  box-sizing: border-box;
+  caret-color: var(--input-field-color-focus-border);
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove spinner buttons */
+.muka-sms-otp-field__digit::-webkit-inner-spin-button,
+.muka-sms-otp-field__digit::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Size variants */
+.muka-sms-otp-field__digit--sm {
+  width: 36px;
+  height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-sms-otp-field__digit--md {
+  width: 44px;
+  height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-sms-otp-field__digit--lg {
+  width: 52px;
+  height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+/* Inset shadow (matches Input component) */
+.muka-sms-otp-field__digit::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+/* Focus state */
+.muka-sms-otp-field__digit--focused:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  outline: none;
+}
+
+/* Also handle native :focus for keyboard navigation */
+.muka-sms-otp-field__digit:focus {
+  outline: none;
+}
+
+/* Error state */
+.muka-sms-otp-field__digit--error:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+/* Disabled state */
+.muka-sms-otp-field__digit--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Filled state — slightly bolder text */
+.muka-sms-otp-field__digit--filled {
+  color: var(--input-field-color-default-foreground);
+}
+
+/* Helper text */
+.muka-sms-otp-field__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message */
+.muka-sms-otp-field__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}