@revikornmann/muka-ui 0.7.0 → 0.9.0

package/dist/esm/components/Radio/Radio.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
+import React, { useId } from 'react';
 import './Radio.css';
 /**
  * Radio Component
@@ -17,7 +17,7 @@ import './Radio.css';
  * - radio.dot.size.{size}
  * - radio.color.{state}.{background|border|dot}
  */
-export const Radio = ({ checked, defaultChecked, onChange, label, disabled = false, name, value, size = 'md', className = '', id, ...props }) => {
+export const Radio = React.forwardRef(function Radio({ checked, defaultChecked, onChange, label, disabled = false, name, value, size = 'md', className = '', id, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputId = id || generatedId;
     const wrapperClasses = [
@@ -26,7 +26,7 @@ export const Radio = ({ checked, defaultChecked, onChange, label, disabled = fal
         disabled && 'muka-radio--disabled',
         className
     ].filter(Boolean).join(' ');
-    return (_jsxs("label", { className: wrapperClasses, htmlFor: inputId, children: [_jsxs("span", { className: "muka-radio__control", children: [_jsx("input", { type: "radio", id: inputId, className: "muka-radio__input", checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }), _jsx("span", { className: "muka-radio__indicator", children: _jsx("span", { className: "muka-radio__dot" }) })] }), label && _jsx("span", { className: "muka-radio__label", children: label })] }));
-};
+    return (_jsxs("label", { className: wrapperClasses, htmlFor: inputId, children: [_jsxs("span", { className: "muka-radio__control", children: [_jsx("input", { ref: forwardedRef, type: "radio", id: inputId, className: "muka-radio__input", checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }), _jsx("span", { className: "muka-radio__indicator", children: _jsx("span", { className: "muka-radio__dot" }) })] }), label && _jsx("span", { className: "muka-radio__label", children: label })] }));
+});
 export default Radio;
 //# sourceMappingURL=Radio.js.map

package/dist/esm/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,aAAa,CAAC;AAkCrB;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG;QACrB,YAAY;QACZ,eAAe,IAAI,EAAE;QACrB,QAAQ,IAAI,sBAAsB;QAClC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,aAChD,gBAAM,SAAS,EAAC,qBAAqB,aACnC,gBACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KACR,KAAK,GACT,EACF,eAAM,SAAS,EAAC,uBAAuB,YACrC,eAAM,SAAS,EAAC,iBAAiB,GAAG,GAC/B,IACF,EACN,KAAK,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,IACtD,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,aAAa,CAAC;AAkCrB;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA+B,SAAS,KAAK,CAChF,EACE,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EACD,YAAY;IAEZ,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG;QACrB,YAAY;QACZ,eAAe,IAAI,EAAE;QACrB,QAAQ,IAAI,sBAAsB;QAClC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,aAChD,gBAAM,SAAS,EAAC,qBAAqB,aACnC,gBACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KACR,KAAK,GACT,EACF,eAAM,SAAS,EAAC,uBAAuB,YACrC,eAAM,SAAS,EAAC,iBAAiB,GAAG,GAC/B,IACF,EACN,KAAK,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,IACtD,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/esm/components/RangeSlider/RangeSlider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
+import React, { useId } from 'react';
 import { Icon } from '../Icon';
 import './RangeSlider.css';
 /**
@@ -19,7 +19,7 @@ import './RangeSlider.css';
  * - Wraps a native <input type="range">, so keyboard and screen-reader support
  *   come for free. Provide a visible `label` or an `aria-label`.
  */
-export const RangeSlider = ({ value, onChange, min, max, step = 1, label, tooltip, optional = false, showValue = true, formatValue, helperText, size = 'md', disabled = false, id, className = '', 'aria-label': ariaLabel, }) => {
+export const RangeSlider = React.forwardRef(function RangeSlider({ value, onChange, min, max, step = 1, label, tooltip, optional = false, showValue = true, formatValue, helperText, size = 'md', disabled = false, id, className = '', 'aria-label': ariaLabel, }, forwardedRef) {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const helperId = helperText ? `${inputId}-helper` : undefined;
@@ -35,7 +35,7 @@ export const RangeSlider = ({ value, onChange, min, max, step = 1, label, toolti
         disabled ? 'muka-range-slider--disabled' : '',
         className,
     ].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: rootClasses, children: [showHeader && (_jsxs("div", { className: "muka-range-slider__header", children: [_jsxs("span", { className: "muka-range-slider__label-group", children: [label && (_jsx("label", { htmlFor: inputId, className: "muka-range-slider__label", children: label })), tooltip && (_jsx(Icon, { name: "information", variant: "line", size: "sm", colorVariant: "subtle", label: tooltip, className: "muka-range-slider__info" })), optional && (_jsx("span", { className: "muka-range-slider__optional", children: "Optional" }))] }), showValue && (_jsx("span", { className: "muka-range-slider__value", children: formatValue ? formatValue(value) : value }))] })), _jsx("div", { className: "muka-range-slider__bar", children: _jsx("input", { id: inputId, type: "range", className: "muka-range-slider__input", value: value, min: min, max: max, step: step, disabled: disabled, "aria-label": label ? undefined : ariaLabel, "aria-describedby": helperId, style: { ['--muka-range-fill']: `${fillPct}%` }, onChange: (e) => onChange(Number(e.target.value)) }) }), helperText && (_jsx("p", { id: helperId, className: "muka-range-slider__helper", children: helperText }))] }));
-};
+    return (_jsxs("div", { className: rootClasses, children: [showHeader && (_jsxs("div", { className: "muka-range-slider__header", children: [_jsxs("span", { className: "muka-range-slider__label-group", children: [label && (_jsx("label", { htmlFor: inputId, className: "muka-range-slider__label", children: label })), tooltip && (_jsx(Icon, { name: "information", variant: "line", size: "sm", colorVariant: "subtle", label: tooltip, className: "muka-range-slider__info" })), optional && (_jsx("span", { className: "muka-range-slider__optional", children: "Optional" }))] }), showValue && (_jsx("span", { className: "muka-range-slider__value", children: formatValue ? formatValue(value) : value }))] })), _jsx("div", { className: "muka-range-slider__bar", children: _jsx("input", { ref: forwardedRef, id: inputId, type: "range", className: "muka-range-slider__input", value: value, min: min, max: max, step: step, disabled: disabled, "aria-label": label ? undefined : ariaLabel, "aria-describedby": helperId, style: { ['--muka-range-fill']: `${fillPct}%` }, onChange: (e) => onChange(Number(e.target.value)) }) }), helperText && (_jsx("p", { id: helperId, className: "muka-range-slider__helper", children: helperText }))] }));
+});
 export default RangeSlider;
 //# sourceMappingURL=RangeSlider.js.map

package/dist/esm/components/RangeSlider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sourceRoot":"","sources":["../../../../components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","sourceRoot":"","sources":["../../../../components/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Select/Select.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useId, useRef } from 'react';
+import React, { useState, useId, useRef } from 'react';
 import './Select.css';
 import { Icon } from '../Icon';
 /**
@@ -17,7 +17,7 @@ import { Icon } from '../Icon';
  * - text.input.{size}
  * - text.label.{size}.semibold
  */
-export function Select({ options, value, onChange, onValueChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, required = false, name, className = '', ...props }) {
+export const Select = React.forwardRef(function Select({ options, value, onChange, onValueChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, required = false, name, className = '', onBlur, onFocus, ...props }, forwardedRef) {
     const [isFocused, setIsFocused] = useState(false);
     const selectRef = useRef(null);
     const generatedId = useId();
@@ -45,10 +45,23 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
                         e.preventDefault();
                         selectRef.current?.focus();
                     }
-                }, children: [_jsxs("select", { ref: selectRef, id: selectId, className: "muka-select__native", value: value, onChange: (e) => {
+                }, children: [_jsxs("select", { ref: (node) => {
+                            selectRef.current = node;
+                            if (typeof forwardedRef === 'function')
+                                forwardedRef(node);
+                            else if (forwardedRef)
+                                forwardedRef.current =
+                                    node;
+                        }, 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 && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx("span", { className: "muka-select__chevron", "aria-hidden": "true", children: _jsx(Icon, { name: "arrow-down-s", variant: "line", size: "sm" }) })] }), showError && (_jsx("p", { className: "muka-select__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-select__helper", id: helperTextId, children: helperText }))] }));
-}
+                        }, disabled: disabled, name: name, required: required, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: (e) => {
+                            setIsFocused(true);
+                            onFocus?.(e);
+                        }, onBlur: (e) => {
+                            setIsFocused(false);
+                            onBlur?.(e);
+                        }, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx("span", { className: "muka-select__chevron", "aria-hidden": "true", children: _jsx(Icon, { name: "arrow-down-s", variant: "line", size: "sm" }) })] }), showError && (_jsx("p", { className: "muka-select__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-select__helper", id: helperTextId, children: helperText }))] }));
+});
 export default Select;
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../components/Select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../components/Select/Select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAgE/B;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,MAAM,CACpD,EACE,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,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACO,EACjB,YAAmD;IAEnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,KAAK,EAAE,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,eAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,iBACE,SAAS,EAAE,0CAA0C,IAAI,EAAE,EAC3D,OAAO,EAAE,QAAQ,aAEhB,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,mBAAU,IAC3E,CACT,EAID,eACE,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,kBACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACZ,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;4BACzB,IAAI,OAAO,YAAY,KAAK,UAAU;gCAAE,YAAY,CAAC,IAAI,CAAC,CAAC;iCACtD,IAAI,YAAY;gCAClB,YAAiE,CAAC,OAAO;oCACxE,IAAI,CAAC;wBACX,CAAC,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,CAAC,CAAC,EAAE,EAAE;4BACb,YAAY,CAAC,IAAI,CAAC,CAAC;4BACnB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;wBACf,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;4BACZ,YAAY,CAAC,KAAK,CAAC,CAAC;4BACpB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;wBACd,CAAC,KACG,KAAK,aAER,WAAW,IAAI,CACd,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,kBACtB,WAAW,GACL,CACV,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,YACtE,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,EAET,eAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,YACvD,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,GAChD,IACH,EAEL,SAAS,IAAI,CACZ,YAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YAC/D,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,YAAG,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAE,YAAY,YAChD,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC,CAEsB,CAAC;AAExB,eAAe,MAAM,CAAC"}

package/dist/esm/components/Textarea/Textarea.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useId } from 'react';
+import React, { useState, useId } from 'react';
 import './Textarea.css';
-export const Textarea = ({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', rows, resize = 'vertical', showCount = false, maxLength, className = '', name, id, required = false, }) => {
+export const Textarea = React.forwardRef(function Textarea({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', rows, resize = 'vertical', showCount = false, maxLength, className = '', name, id, required = false, onBlur, onFocus, }, forwardedRef) {
     const [isFocused, setIsFocused] = useState(false);
     const generatedId = useId();
     const textareaId = id || name || generatedId;
@@ -22,7 +22,13 @@ export const Textarea = ({ value, onChange, placeholder, label, helperText, erro
         error && 'muka-textarea__field--error',
         disabled && 'muka-textarea__field--disabled',
     ].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-textarea__label muka-textarea__label--${size}`, htmlFor: textareaId, children: [label, required && _jsx("span", { className: "muka-textarea__required", "aria-hidden": "true", children: " *" })] })), _jsx("div", { className: fieldClasses, children: _jsx("textarea", { id: textareaId, className: "muka-textarea__native", value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, rows: rows, maxLength: maxLength, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), style: { resize } }) }), _jsxs("div", { className: "muka-textarea__footer", children: [showError && (_jsx("p", { className: "muka-textarea__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-textarea__helper", id: helperTextId, children: helperText })), showCount && (_jsxs("span", { className: "muka-textarea__count", children: [charCount, maxLength ? `/${maxLength}` : ''] }))] })] }));
-};
+    return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-textarea__label muka-textarea__label--${size}`, htmlFor: textareaId, children: [label, required && _jsx("span", { className: "muka-textarea__required", "aria-hidden": "true", children: " *" })] })), _jsx("div", { className: fieldClasses, children: _jsx("textarea", { ref: forwardedRef, id: textareaId, className: "muka-textarea__native", value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, rows: rows, maxLength: maxLength, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: (e) => {
+                        setIsFocused(true);
+                        onFocus?.(e);
+                    }, onBlur: (e) => {
+                        setIsFocused(false);
+                        onBlur?.(e);
+                    }, style: { resize } }) }), _jsxs("div", { className: "muka-textarea__footer", children: [showError && (_jsx("p", { className: "muka-textarea__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-textarea__helper", id: helperTextId, children: helperText })), showCount && (_jsxs("span", { className: "muka-textarea__count", children: [charCount, maxLength ? `/${maxLength}` : ''] }))] })] }));
+});
 export default Textarea;
 //# sourceMappingURL=Textarea.js.map

package/dist/esm/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,gBAAgB,CAAC;AAyCxB,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,MAAM,GAAG,UAAU,EACnB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,EAAE,EACF,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,IAAI,IAAI,WAAW,CAAC;IAC7C,MAAM,YAAY,GAAG,GAAG,UAAU,SAAS,CAAC;IAC5C,MAAM,cAAc,GAAG,GAAG,UAAU,QAAQ,CAAC;IAE7C,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;IACvF,MAAM,SAAS,GAAG,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC;IAErC,MAAM,cAAc,GAAG;QACrB,eAAe;QACf,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG;QACnB,sBAAsB;QACtB,yBAAyB,IAAI,EAAE;QAC/B,SAAS,IAAI,+BAA+B;QAC5C,KAAK,IAAI,6BAA6B;QACtC,QAAQ,IAAI,gCAAgC;KAC7C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,iBACE,SAAS,EAAE,8CAA8C,IAAI,EAAE,EAC/D,OAAO,EAAE,UAAU,aAElB,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,mBAAU,IAC7E,CACT,EAED,cAAK,SAAS,EAAE,YAAY,YAC1B,mBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,kBACN,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,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,GACjB,GACE,EAEN,eAAK,SAAS,EAAC,uBAAuB,aACnC,SAAS,IAAI,CACZ,YAAG,SAAS,EAAC,sBAAsB,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YACjE,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,YAAG,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,YAAY,YAClD,UAAU,GACT,CACL,EAEA,SAAS,IAAI,CACZ,gBAAM,SAAS,EAAC,sBAAsB,aACnC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,IACvC,CACR,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../components/Textarea/Textarea.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Thumbnail/Thumbnail.css

@@ -0,0 +1,171 @@
+/* Thumbnail Component Styles - Using Muka Design Tokens */
+
+.muka-thumbnail {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* The frame carries the border, background and shape clip. Keeping it separate
+   from the root lets the remove (×) button sit outside the clip (needed for the
+   circular/ellipse shape, whose corners would otherwise clip the button). */
+.muka-thumbnail__frame {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border: var(--border-width-regular, 1px) solid var(--color-black-alpha-3);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-level1);
+}
+
+/* ─── Shapes ──────────────────────────────────────────── */
+.muka-thumbnail--4-3 {
+  width: 160px;
+  height: 120px;
+}
+
+.muka-thumbnail--1-1 {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse .muka-thumbnail__frame {
+  border-radius: var(--border-radius-full);
+}
+
+/* Image fills the frame, cropped to cover. Sits at scale(1) by default so the
+   interactive hover zoom has a clean origin. */
+.muka-thumbnail__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transform-origin: center;
+  /* Micro-interaction: hover zoom eases out over the "micro" duration. */
+  transition: transform var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+/* ─── Interactive (click-to-enlarge) ──────────────────── */
+.muka-thumbnail__trigger {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.muka-thumbnail__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* On hover the image scales up ~8px (160px → 168px) with an ease-out feel. */
+.muka-thumbnail--interactive:hover .muka-thumbnail__image {
+  transform: scale(1.05);
+}
+
+/* ─── Loading overlay + progress donut ────────────────── */
+.muka-thumbnail__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dialog-color-backdrop);
+}
+
+.muka-thumbnail__progress {
+  width: 40px;
+  height: 40px;
+}
+
+/* ─── Error / corrupt state ───────────────────────────── */
+.muka-thumbnail--error .muka-thumbnail__frame {
+  background-color: var(--alias-color-state-error-muted);
+  border-color: var(--alias-color-state-error-default);
+}
+
+.muka-thumbnail__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  text-align: center;
+}
+
+.muka-thumbnail__error-icon {
+  color: var(--alert-color-error-accent);
+}
+
+.muka-thumbnail__caption {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--alert-color-error-accent);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+/* ─── Remove (×) button ───────────────────────────────── */
+.muka-thumbnail__remove {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl);
+  height: var(--size-2xl);
+  padding: 0;
+  color: var(--button-color-tertiary-foreground-default);
+  background-color: var(--button-color-tertiary-background-default);
+  border: var(--border-width-regular, 1px) solid var(--button-color-tertiary-border-default);
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-micro) var(--motion-easing-enter),
+    border-color var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-thumbnail__remove:hover {
+  color: var(--button-color-tertiary-foreground-hover);
+  background-color: var(--button-color-tertiary-background-hover);
+  border-color: var(--button-color-tertiary-border-hover);
+}
+
+.muka-thumbnail__remove:active {
+  color: var(--button-color-tertiary-foreground-pressed);
+  background-color: var(--button-color-tertiary-background-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
+}
+
+.muka-thumbnail__remove:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-thumbnail__image,
+  .muka-thumbnail__remove {
+    transition: none;
+  }
+
+  .muka-thumbnail--interactive:hover .muka-thumbnail__image {
+    transform: none;
+  }
+}

package/dist/esm/components/Thumbnail/Thumbnail.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DataPieChart } from '../DataPieChart';
+import { Icon } from '../Icon';
+import './Thumbnail.css';
+/**
+ * Thumbnail Component
+ *
+ * A single uploaded-photo tile used by `PhotoUploader`. Shows an image cropped
+ * to fill a fixed frame, with several behaviours driven by props:
+ *
+ * - **processing** — a dark overlay with an indeterminate (spinning) donut for
+ *   pre-upload work (e.g. HEIC conversion / compression).
+ * - **loading** — a dark overlay with a `DataPieChart` progress donut; swaps
+ *   seamlessly from `processing` (same ring).
+ * - **error** — a red tile with an error icon + caption (filename); the × stays.
+ * - **loaded, interactive** — hovering scales the image up ~8px (motion tokens)
+ *   and clicking activates `onClick` (e.g. to enlarge in a dialog).
+ * - **removable** — a tertiary × button in the top-right corner calls
+ *   `onRemove` to delete the photo.
+ *
+ * Tokens used: border-radius-lg, color-black-alpha-3, dialog-color-backdrop,
+ * button-color-tertiary-*, alias-color-state-error-*, alert-color-error-accent,
+ * motion-duration-micro, motion-easing-enter.
+ */
+export const Thumbnail = forwardRef(({ src, alt = '', shape = '4:3', loading = false, progress = 0, processing = false, error = false, caption, errorReason, onRemove, onClick, removeLabel = 'Remove photo', viewLabel = 'View photo', className = '', ...props }, ref) => {
+    const isBusy = loading || processing;
+    const isInteractive = !isBusy && !error && Boolean(onClick);
+    const showRemove = !isBusy && Boolean(onRemove);
+    const classes = [
+        'muka-thumbnail',
+        // '4:3' → '--4-3', '1:1' → '--1-1', 'ellipse' → '--ellipse'
+        `muka-thumbnail--${shape.replace(':', '-')}`,
+        loading && 'muka-thumbnail--loading',
+        processing && 'muka-thumbnail--processing',
+        error && 'muka-thumbnail--error',
+        isInteractive && 'muka-thumbnail--interactive',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const image = _jsx("img", { className: "muka-thumbnail__image", src: src, alt: alt });
+    const removeButton = showRemove ? (_jsx("button", { type: "button", className: "muka-thumbnail__remove", onClick: onRemove, "aria-label": removeLabel, children: _jsx(Icon, { name: "close", variant: "line", size: "xs" }) })) : null;
+    // The frame owns the shape's clip (border-radius + overflow), so the remove
+    // button — a sibling of the frame — is never clipped, even for the circle.
+    const frameContent = error ? (_jsxs("div", { className: "muka-thumbnail__error", children: [_jsx(Icon, { className: "muka-thumbnail__error-icon", name: "error-warning", variant: "fill", size: "lg", label: errorReason ?? 'Upload failed' }), caption && _jsx("span", { className: "muka-thumbnail__caption", children: caption })] })) : (_jsxs(_Fragment, { children: [isInteractive ? (_jsx("button", { type: "button", className: "muka-thumbnail__trigger", onClick: onClick, "aria-label": viewLabel, children: image })) : (image), isBusy && (_jsx("div", { className: "muka-thumbnail__overlay", children: _jsx(DataPieChart, { className: "muka-thumbnail__progress", value: progress, indeterminate: processing, size: 40, variant: "donut", "aria-label": processing ? 'Processing' : `Uploading, ${Math.round(progress)}%` }) }))] }));
+    return (_jsxs("div", { ref: ref, className: classes, title: error ? errorReason : undefined, ...props, children: [_jsx("div", { className: "muka-thumbnail__frame", children: frameContent }), removeButton] }));
+});
+Thumbnail.displayName = 'Thumbnail';
+export default Thumbnail;
+//# sourceMappingURL=Thumbnail.js.map

package/dist/esm/components/Thumbnail/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../../components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Thumbnail/index.js

@@ -0,0 +1,2 @@
+export { Thumbnail } from './Thumbnail';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Thumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Thumbnail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC"}

package/dist/esm/components/Toggle/Toggle.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
+import React, { useId } from 'react';
 import './Toggle.css';
 /**
  * Toggle Component
@@ -20,7 +20,7 @@ import './Toggle.css';
  * - text.label.lg.* (for label)
  * - text.body.base.regular (for caption)
  */
-export const Toggle = ({ checked, defaultChecked, onChange, label, caption, showDivider = false, icon, disabled = false, name, className = '', id, ...props }) => {
+export const Toggle = React.forwardRef(function Toggle({ checked, defaultChecked, onChange, label, caption, showDivider = false, icon, disabled = false, name, className = '', id, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputId = id || generatedId;
     const wrapperClasses = [
@@ -30,7 +30,7 @@ export const Toggle = ({ checked, defaultChecked, onChange, label, caption, show
         caption && 'muka-toggle--with-caption',
         className
     ].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: wrapperClasses, children: [icon && _jsx("span", { className: "muka-toggle__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "muka-toggle__content", children: [label && (_jsx("label", { className: "muka-toggle__label", htmlFor: inputId, children: label })), caption && (_jsx("span", { className: "muka-toggle__caption", children: caption }))] }), _jsxs("label", { className: "muka-toggle__switch", htmlFor: inputId, children: [_jsx("input", { type: "checkbox", role: "switch", id: inputId, className: "muka-toggle__input", checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, "aria-checked": checked, ...props }), _jsx("span", { className: "muka-toggle__track", children: _jsx("span", { className: "muka-toggle__knob" }) })] }), showDivider && _jsx("div", { className: "muka-toggle__divider" })] }));
-};
+    return (_jsxs("div", { className: wrapperClasses, children: [icon && _jsx("span", { className: "muka-toggle__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "muka-toggle__content", children: [label && (_jsx("label", { className: "muka-toggle__label", htmlFor: inputId, children: label })), caption && (_jsx("span", { className: "muka-toggle__caption", children: caption }))] }), _jsxs("label", { className: "muka-toggle__switch", htmlFor: inputId, children: [_jsx("input", { ref: forwardedRef, type: "checkbox", role: "switch", id: inputId, className: "muka-toggle__input", checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, "aria-checked": checked, ...props }), _jsx("span", { className: "muka-toggle__track", children: _jsx("span", { className: "muka-toggle__knob" }) })] }), showDivider && _jsx("div", { className: "muka-toggle__divider" })] }));
+});
 export default Toggle;
 //# sourceMappingURL=Toggle.js.map

package/dist/esm/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,cAAc,CAAC;AAqCtB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG;QACrB,aAAa;QACb,QAAQ,IAAI,uBAAuB;QACnC,WAAW,IAAI,2BAA2B;QAC1C,OAAO,IAAI,2BAA2B;QACtC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC3B,IAAI,IAAI,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YAAE,IAAI,GAAQ,EAE7E,eAAK,SAAS,EAAC,sBAAsB,aAClC,KAAK,IAAI,CACR,gBAAO,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,OAAO,YACnD,KAAK,GACA,CACT,EACA,OAAO,IAAI,CACV,eAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,CACxD,IACG,EAEN,iBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,OAAO,aACrD,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,kBACI,OAAO,KACjB,KAAK,GACT,EACF,eAAM,SAAS,EAAC,oBAAoB,YAClC,eAAM,SAAS,EAAC,mBAAmB,GAAG,GACjC,IACD,EAEP,WAAW,IAAI,cAAK,SAAS,EAAC,sBAAsB,GAAG,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,cAAc,CAAC;AAqCtB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAgC,SAAS,MAAM,CACnF,EACE,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EACD,YAAY;IAEZ,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,cAAc,GAAG;QACrB,aAAa;QACb,QAAQ,IAAI,uBAAuB;QACnC,WAAW,IAAI,2BAA2B;QAC1C,OAAO,IAAI,2BAA2B;QACtC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC3B,IAAI,IAAI,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YAAE,IAAI,GAAQ,EAE7E,eAAK,SAAS,EAAC,sBAAsB,aAClC,KAAK,IAAI,CACR,gBAAO,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,OAAO,YACnD,KAAK,GACA,CACT,EACA,OAAO,IAAI,CACV,eAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,CACxD,IACG,EAEN,iBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,OAAO,aACrD,gBACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,kBACI,OAAO,KACjB,KAAK,GACT,EACF,eAAM,SAAS,EAAC,oBAAoB,YAClC,eAAM,SAAS,EAAC,mBAAmB,GAAG,GACjC,IACD,EAEP,WAAW,IAAI,cAAK,SAAS,EAAC,sBAAsB,GAAG,IACpD,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/esm/components/index.js

@@ -2,6 +2,7 @@
 export { Button } from './Button';
 export { ListItem } from './ListItem';
 export { Input } from './Input';
+export { Form, useForm, } from './Form';
 export { NumberInput } from './NumberInput';
 export { Card } from './Card';
 export { Label } from './Label';
@@ -71,4 +72,6 @@ export { Combobox, } from './Combobox';
 export { SwipeActions, } from './SwipeActions';
 export { PullToRefresh } from './PullToRefresh';
 export { LicensePlateInput, } from './LicensePlateInput';
+export { Thumbnail } from './Thumbnail';
+export { PhotoUploader, } from './PhotoUploader';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}

package/dist/styles/components/Alert.css

@@ -109,6 +109,13 @@
   height: 100%;
 }
 
+/* The leading icon and the dismiss (×) icon inherit the variant accent set on
+   their container, overriding the Icon component's default color. */
+.muka-alert__icon .muka-icon,
+.muka-alert__dismiss .muka-icon {
+  color: inherit;
+}
+
 /* Content */
 .muka-alert__content {
   flex: 1;

package/dist/styles/components/Button.css

@@ -200,6 +200,35 @@
   opacity: 1;
 }
 
+/* Muted variant - same as ghost but resting foreground is subtle, darkens on interaction */
+.muka-button--muted {
+  background-color: var(--button-color-muted-background-default);
+  color: var(--button-color-muted-foreground-default);
+  border: 1px solid var(--button-color-muted-border-default);
+}
+
+.muka-button--muted:hover:not(:disabled) {
+  background-color: var(--button-color-muted-background-hover);
+  color: var(--button-color-muted-foreground-hover);
+  border-color: var(--button-color-muted-border-hover);
+}
+
+.muka-button--muted:active:not(:disabled),
+.muka-button--muted.muka-button--pressed:not(:disabled),
+.muka-button--muted[data-state="open"]:not(:disabled) {
+  background-color: var(--button-color-muted-background-pressed);
+  color: var(--button-color-muted-foreground-pressed);
+  border-color: var(--button-color-muted-border-pressed);
+}
+
+.muka-button--muted:disabled {
+  background-color: var(--button-color-muted-background-disabled);
+  color: var(--button-color-muted-foreground-disabled);
+  border-color: var(--button-color-muted-border-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
 /* General disabled state - fallback */
 .muka-button:disabled {
   cursor: not-allowed;

package/dist/styles/components/DataPieChart.css

@@ -27,6 +27,35 @@
   transition: stroke-dasharray 0.3s ease;
 }
 
+/* ─── Indeterminate (spinner) ─────────────────────────── */
+/* A masked ring filled with an angular (conic) gradient that rotates. The mask
+   band matches the donut geometry (r=40, strokeWidth=16 → 64%–96% of radius) so
+   it swaps seamlessly with the value-based progress donut. */
+.muka-data-pie-chart__spinner-track,
+.muka-data-pie-chart__spinner {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 65%, #000 95%, transparent 97%);
+  mask: radial-gradient(farthest-side, transparent 63%, #000 65%, #000 95%, transparent 97%);
+}
+
+.muka-data-pie-chart__spinner {
+  animation: muka-data-pie-chart-spin 0.9s linear infinite;
+}
+
+@keyframes muka-data-pie-chart-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-data-pie-chart__spinner {
+    animation-duration: 2.5s;
+  }
+}
+
 .muka-data-pie-chart__value {
   position: absolute;
   inset: 0;

package/dist/styles/components/Form.css

@@ -0,0 +1,17 @@
+.muka-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.muka-form--gap-sm {
+  gap: var(--size-sm);
+}
+
+.muka-form--gap-md {
+  gap: var(--size-md);
+}
+
+.muka-form--gap-lg {
+  gap: var(--size-lg);
+}