@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/RadioTile/RadioTile.css

@@ -0,0 +1,140 @@
+/* RadioTile Component Styles - Using Muka Design Tokens */
+
+/* Base tile styles - horizontal */
+.muka-radio-tile {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  background-color: var(--color-surface-level3);
+  cursor: pointer;
+  transition: border-color 0.15s ease, border-width 0.15s ease;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.muka-radio-tile--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Selected state */
+.muka-radio-tile[data-checked] {
+  border-width: var(--border-width-bold);
+  border-color: var(--color-action-default);
+}
+
+/* Vertical layout */
+.muka-radio-tile--vertical {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  width: 160px;
+}
+
+/* Radio container */
+.muka-radio-tile__radio {
+  flex-shrink: 0;
+}
+
+/* Corner-positioned radio for vertical */
+.muka-radio-tile__radio--corner {
+  position: absolute;
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+/* Adjust corner position when selected (border is thicker) */
+.muka-radio-tile[data-checked] .muka-radio-tile__radio--corner {
+  top: calc(var(--spacing-4) - 1px);
+  left: calc(var(--spacing-4) - 1px);
+}
+
+/* Icon */
+.muka-radio-tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+  color: var(--color-text-default-default);
+}
+
+.muka-radio-tile__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Image */
+.muka-radio-tile__image {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-radio-tile__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Horizontal image sizing */
+.muka-radio-tile__image--horizontal {
+  width: 40px;
+  height: 40px;
+}
+
+/* Vertical image sizing */
+.muka-radio-tile--vertical .muka-radio-tile__image {
+  width: 100%;
+  aspect-ratio: 4/3;
+}
+
+/* Content container */
+.muka-radio-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
+}
+
+/* Label */
+.muka-radio-tile__label {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-radio-tile__label--bold {
+  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-radio-tile__label--center {
+  text-align: center;
+}
+
+/* Caption */
+.muka-radio-tile__caption {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Disabled states */
+.muka-radio-tile--disabled .muka-radio-tile__label,
+.muka-radio-tile--disabled .muka-radio-tile__icon {
+  color: var(--color-text-subtle-default);
+}

package/dist/cjs/components/RadioTile/RadioTile.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioTile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Radio_1 = require("../Radio");
+require("./RadioTile.css");
+/**
+ * RadioTile Component
+ *
+ * A tile-style radio button with support for icons, images, and vertical layouts.
+ * Built using the Muka design token system.
+ *
+ * Variants:
+ * - Default: Radio with label
+ * - With icon: Radio with icon and label/caption
+ * - With image: Radio with image and label/caption
+ * - Vertical: Icon or image at top, label below, radio in corner
+ */
+const RadioTile = ({ checked, defaultChecked, onChange, label, caption, icon, image, imageAlt = '', orientation = 'horizontal', disabled = false, name, value, className = '', id, ...props }) => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const isVertical = orientation === 'vertical';
+    const wrapperClasses = [
+        'muka-radio-tile',
+        isVertical && 'muka-radio-tile--vertical',
+        disabled && 'muka-radio-tile--disabled',
+        className
+    ].filter(Boolean).join(' ');
+    // For vertical layout, we use data attribute to control checked styling via CSS
+    const tileProps = {
+        className: wrapperClasses,
+        'data-checked': checked || undefined,
+    };
+    if (isVertical) {
+        return ((0, jsx_runtime_1.jsxs)("label", { ...tileProps, htmlFor: inputId, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-radio-tile__radio muka-radio-tile__radio--corner", children: (0, jsx_runtime_1.jsx)(Radio_1.Radio, { id: inputId, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }) }), icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-radio-tile__icon", "aria-hidden": "true", children: icon })), image && ((0, jsx_runtime_1.jsx)("div", { className: "muka-radio-tile__image", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt }) })), label && ((0, jsx_runtime_1.jsx)("span", { className: "muka-radio-tile__label muka-radio-tile__label--center", children: label }))] }));
+    }
+    // Horizontal layout
+    return ((0, jsx_runtime_1.jsxs)("label", { ...tileProps, htmlFor: inputId, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-radio-tile__radio", children: (0, jsx_runtime_1.jsx)(Radio_1.Radio, { id: inputId, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }) }), icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-radio-tile__icon", "aria-hidden": "true", children: icon })), image && ((0, jsx_runtime_1.jsx)("div", { className: "muka-radio-tile__image muka-radio-tile__image--horizontal", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt }) })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-radio-tile__content", children: [label && ((0, jsx_runtime_1.jsx)("span", { className: `muka-radio-tile__label ${caption ? 'muka-radio-tile__label--bold' : ''}`, children: label })), caption && ((0, jsx_runtime_1.jsx)("span", { className: "muka-radio-tile__caption", children: caption }))] })] }));
+};
+exports.RadioTile = RadioTile;
+exports.default = exports.RadioTile;
+//# sourceMappingURL=RadioTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioTile.js","sourceRoot":"","sources":["../../../../components/RadioTile/RadioTile.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqC;AACrC,oCAAiC;AACjC,2BAAyB;AA8CzB;;;;;;;;;;;GAWG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,OAAO,EACP,cAAc,EACd,QAAQ,EACR,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,EAAE,EACb,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAElC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAE9C,MAAM,cAAc,GAAG;QACrB,iBAAiB;QACjB,UAAU,IAAI,2BAA2B;QACzC,QAAQ,IAAI,2BAA2B;QACvC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,gFAAgF;IAChF,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,cAAc;QACzB,cAAc,EAAE,OAAO,IAAI,SAAS;KACrC,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,sCAAW,SAAS,EAAE,OAAO,EAAE,OAAO,aACpC,gCAAK,SAAS,EAAC,uDAAuD,YACpE,uBAAC,aAAK,IACJ,EAAE,EAAE,OAAO,EACX,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,GACE,EAEL,IAAI,IAAI,CACP,iCAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,IAAI,GACA,CACR,EAEA,KAAK,IAAI,CACR,gCAAK,SAAS,EAAC,wBAAwB,YACrC,gCAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,GAAI,GAC9B,CACP,EAEA,KAAK,IAAI,CACR,iCAAM,SAAS,EAAC,uDAAuD,YACpE,KAAK,GACD,CACR,IACK,CACT,CAAC;IACJ,CAAC;IAED,oBAAoB;IACpB,OAAO,CACL,sCAAW,SAAS,EAAE,OAAO,EAAE,OAAO,aACpC,gCAAK,SAAS,EAAC,wBAAwB,YACrC,uBAAC,aAAK,IACJ,EAAE,EAAE,OAAO,EACX,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,GACE,EAEL,IAAI,IAAI,CACP,iCAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,IAAI,GACA,CACR,EAEA,KAAK,IAAI,CACR,gCAAK,SAAS,EAAC,2DAA2D,YACxE,gCAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,GAAI,GAC9B,CACP,EAED,iCAAK,SAAS,EAAC,0BAA0B,aACtC,KAAK,IAAI,CACR,iCAAM,SAAS,EAAE,0BAA0B,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,EAAE,YACvF,KAAK,GACD,CACR,EACA,OAAO,IAAI,CACV,iCAAM,SAAS,EAAC,0BAA0B,YACvC,OAAO,GACH,CACR,IACG,IACA,CACT,CAAC;AACJ,CAAC,CAAC;AAlHW,QAAA,SAAS,aAkHpB;AAEF,kBAAe,iBAAS,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/RadioTile/index.ts"],"names":[],"mappings":";;;AAAA,yCAA6D;AAApD,sGAAA,SAAS,OAAA;AAClB,yCAAmD;AAA1C,oGAAA,SAAS,OAAW"}

package/dist/cjs/components/RangeSlider/RangeSlider.css

@@ -0,0 +1,213 @@
+/* RangeSlider Component Styles - Using Muka Design Tokens */
+
+.muka-range-slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
+}
+
+/* ========================================
+   HEADER: label group (label + info + optional) and value readout
+   ======================================== */
+
+.muka-range-slider__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-height: 24px;
+}
+
+.muka-range-slider__label-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.muka-range-slider__label {
+  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);
+  color: var(--color-text-default-default);
+}
+
+.muka-range-slider__info {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-range-slider__optional {
+  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);
+}
+
+.muka-range-slider__value {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+  color: var(--color-text-default-default);
+  font-variant-numeric: tabular-nums;
+}
+
+.muka-range-slider__helper {
+  margin: 0;
+  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);
+  color: var(--color-text-subtle-default);
+}
+
+/* ========================================
+   TRACK + THUMB
+   Native range input, restyled. A thick sunken track holds an accent fill up to
+   the current value, with a circular grip handle. The filled portion is driven
+   by the inline --muka-range-fill custom property (set from the component value).
+   ======================================== */
+
+/* Size variants: track height, thumb diameter and grip geometry */
+.muka-range-slider--sm {
+  --muka-range-track-h: 12px;
+  --muka-range-thumb: 24px;
+  --muka-range-grip-h: 9px;
+}
+.muka-range-slider--md {
+  --muka-range-track-h: 16px;
+  --muka-range-thumb: 32px;
+  --muka-range-grip-h: 12px;
+}
+.muka-range-slider--lg {
+  --muka-range-track-h: 20px;
+  --muka-range-thumb: 40px;
+  --muka-range-grip-h: 15px;
+}
+
+.muka-range-slider__bar {
+  /* Reserve the full thumb height so the handle never clips the layout. */
+  display: flex;
+  align-items: center;
+  height: var(--muka-range-thumb);
+}
+
+.muka-range-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--muka-range-thumb);
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+
+  /* Grip handle fill + two vertical grip bars, all theme-aware. */
+  --muka-range-grip-color: var(--color-text-subtle-default);
+  --muka-range-grip-w: 2px;
+  --muka-range-grip-gap: 3px;
+
+  /* The track fill: action colour up to the value, sunken surface beyond it. */
+  --muka-range-track-fill: linear-gradient(
+    to right,
+    var(--color-action-default) 0,
+    var(--color-action-default) var(--muka-range-fill, 0%),
+    var(--color-surface-sunken) var(--muka-range-fill, 0%),
+    var(--color-surface-sunken) 100%
+  );
+}
+
+.muka-range-slider__input:focus {
+  outline: none;
+}
+
+/* WebKit / Blink track */
+.muka-range-slider__input::-webkit-slider-runnable-track {
+  height: var(--muka-range-track-h);
+  border-radius: var(--border-radius-full);
+  background-image: var(--muka-range-track-fill);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-sunken);
+}
+
+/* Firefox track + progress */
+.muka-range-slider__input::-moz-range-track {
+  height: var(--muka-range-track-h);
+  border-radius: var(--border-radius-full);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-sunken);
+}
+.muka-range-slider__input::-moz-range-progress {
+  height: var(--muka-range-track-h);
+  border-radius: var(--border-radius-full);
+  background: var(--color-action-default);
+}
+
+/* WebKit / Blink thumb (vertically centred over the track) */
+.muka-range-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--muka-range-thumb);
+  height: var(--muka-range-thumb);
+  margin-top: calc((var(--muka-range-track-h) - var(--muka-range-thumb)) / 2);
+  border-radius: var(--border-radius-full);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-level2);
+  background-color: var(--color-surface-level1);
+  background-image:
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color)),
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color));
+  background-repeat: no-repeat;
+  background-size: var(--muka-range-grip-w) var(--muka-range-grip-h), var(--muka-range-grip-w) var(--muka-range-grip-h);
+  background-position:
+    calc(50% - var(--muka-range-grip-gap)) center,
+    calc(50% + var(--muka-range-grip-gap)) center;
+  transition: box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+/* Firefox thumb */
+.muka-range-slider__input::-moz-range-thumb {
+  width: var(--muka-range-thumb);
+  height: var(--muka-range-thumb);
+  border-radius: var(--border-radius-full);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-level2);
+  background-color: var(--color-surface-level1);
+  background-image:
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color)),
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color));
+  background-repeat: no-repeat;
+  background-size: var(--muka-range-grip-w) var(--muka-range-grip-h), var(--muka-range-grip-w) var(--muka-range-grip-h);
+  background-position:
+    calc(50% - var(--muka-range-grip-gap)) center,
+    calc(50% + var(--muka-range-grip-gap)) center;
+  transition: box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+/* Hover */
+.muka-range-slider__input:hover::-webkit-slider-thumb {
+  background-color: var(--color-surface-level1);
+  box-shadow: var(--shadow-level3);
+}
+.muka-range-slider__input:hover::-moz-range-thumb {
+  background-color: var(--color-surface-level1);
+  box-shadow: var(--shadow-level3);
+}
+
+/* Focus ring */
+.muka-range-slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--shadow-level2), 0 0 0 3px var(--color-border-focus);
+}
+.muka-range-slider__input:focus-visible::-moz-range-thumb {
+  box-shadow: var(--shadow-level2), 0 0 0 3px var(--color-border-focus);
+}
+
+/* Disabled */
+.muka-range-slider--disabled {
+  opacity: 0.5;
+}
+.muka-range-slider--disabled .muka-range-slider__input {
+  cursor: not-allowed;
+}

package/dist/cjs/components/RangeSlider/RangeSlider.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("../Icon");
+require("./RangeSlider.css");
+/**
+ * RangeSlider Component
+ *
+ * A labelled slider built on the native range input, styled with Muka design
+ * tokens. A thick sunken track holds an accent-coloured fill up to the current
+ * value, topped by a circular grip handle. The fill width is driven by a CSS
+ * custom property so it renders identically on WebKit and Firefox.
+ *
+ * Sizes: sm, md, lg
+ * Features: optional label, info tooltip, "Optional" hint, formatted value
+ * readout, helper text, disabled state
+ *
+ * @accessibility
+ * - Wraps a native <input type="range">, so keyboard and screen-reader support
+ *   come for free. Provide a visible `label` or an `aria-label`.
+ */
+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, }) => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id ?? generatedId;
+    const helperId = helperText ? `${inputId}-helper` : undefined;
+    // Clamp into range before computing fill so an out-of-range value never
+    // produces a negative or >100% track fill.
+    const clamped = Math.min(Math.max(value, min), max);
+    const range = max - min;
+    const fillPct = range > 0 ? ((clamped - min) / range) * 100 : 0;
+    const showHeader = label || (showValue && !ariaLabel);
+    const rootClasses = [
+        'muka-range-slider',
+        `muka-range-slider--${size}`,
+        disabled ? 'muka-range-slider--disabled' : '',
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, children: [showHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-range-slider__header", children: [(0, jsx_runtime_1.jsxs)("span", { className: "muka-range-slider__label-group", children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "muka-range-slider__label", children: label })), tooltip && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "information", variant: "line", size: "sm", colorVariant: "subtle", label: tooltip, className: "muka-range-slider__info" })), optional && ((0, jsx_runtime_1.jsx)("span", { className: "muka-range-slider__optional", children: "Optional" }))] }), showValue && ((0, jsx_runtime_1.jsx)("span", { className: "muka-range-slider__value", children: formatValue ? formatValue(value) : value }))] })), (0, jsx_runtime_1.jsx)("div", { className: "muka-range-slider__bar", children: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("p", { id: helperId, className: "muka-range-slider__helper", children: helperText }))] }));
+};
+exports.RangeSlider = RangeSlider;
+exports.default = exports.RangeSlider;
+//# sourceMappingURL=RangeSlider.js.map

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

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

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

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

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

package/dist/cjs/components/SearchInput/SearchInput.css

@@ -0,0 +1,166 @@
+/* SearchInput Component Styles */
+
+.muka-search-input {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+/* ─── Field wrapper ───────────────────────────────────── */
+
+.muka-search-input__field {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-md);
+  padding: 0 var(--input-field-padding-x);
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+}
+
+.muka-search-input--focused .muka-search-input__field {
+  border-color: var(--input-field-color-focus-border, var(--color-action-default));
+}
+
+/* ─── Sizes ───────────────────────────────────────────── */
+
+.muka-search-input--sm .muka-search-input__field {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-search-input--md .muka-search-input__field {
+  min-height: var(--input-field-height-default);
+}
+
+.muka-search-input--lg .muka-search-input__field {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* ─── Embedded variant (e.g. inside TopBar) ───────────── */
+
+.muka-search-input--embedded .muka-search-input__field {
+  background-color: var(--color-surface-level1);
+  border-color: transparent;
+}
+
+.muka-search-input--embedded.muka-search-input--focused .muka-search-input__field {
+  border-color: transparent;
+  background-color: var(--color-surface-level2);
+}
+
+/* ─── Disabled ────────────────────────────────────────── */
+
+.muka-search-input--disabled .muka-search-input__field {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Leading icon ────────────────────────────────────── */
+
+.muka-search-input__leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-subtle-default);
+}
+
+/* ─── Input element ───────────────────────────────────── */
+
+.muka-search-input__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  padding: 0;
+  color: var(--color-text-default-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);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.muka-search-input__input::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+/* Hide the browser-supplied clear button (WebKit + Edge) */
+.muka-search-input__input::-webkit-search-cancel-button,
+.muka-search-input__input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.muka-search-input__input::-ms-clear {
+  display: none;
+}
+
+/* ─── Trailing slot (loading spinner) ─────────────────── */
+
+.muka-search-input__trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ─── Clear button ────────────────────────────────────── */
+
+.muka-search-input__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--color-text-subtle-default);
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-search-input__clear:hover {
+  color: var(--color-text-default-default);
+}
+
+.muka-search-input__clear:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+/* ─── Cancel button ───────────────────────────────────── */
+
+.muka-search-input__cancel {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: var(--spacing-1) var(--spacing-2);
+  cursor: pointer;
+  color: var(--color-action-default);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-search-input__cancel:hover {
+  color: var(--color-action-hover);
+}
+
+.muka-search-input__cancel:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}