@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/Toast/Toast.css

@@ -0,0 +1,187 @@
+/* Toast Component Styles - Using Muka Design Tokens */
+
+.muka-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--toast-gap);
+  padding: var(--toast-padding-y) var(--toast-padding-x);
+  border-radius: var(--toast-radius);
+  box-shadow: var(--toast-shadow);
+  min-width: var(--toast-width-min);
+  max-width: var(--toast-width-max);
+  pointer-events: auto;
+  animation: muka-toast-slide-in 0.2s ease-out;
+}
+
+/* Entry animation */
+@keyframes muka-toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Position variants (for standalone use - typically managed by ToastProvider) */
+.muka-toast--top-right,
+.muka-toast--top-left,
+.muka-toast--top-center,
+.muka-toast--bottom-right,
+.muka-toast--bottom-left,
+.muka-toast--bottom-center {
+  position: fixed;
+  z-index: 9999;
+}
+
+.muka-toast--top-right {
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.muka-toast--top-left {
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+.muka-toast--top-center {
+  top: var(--spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.muka-toast--bottom-right {
+  bottom: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.muka-toast--bottom-left {
+  bottom: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+.muka-toast--bottom-center {
+  bottom: var(--spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Variant: Info */
+.muka-toast--info {
+  background-color: var(--toast-color-info-background);
+  color: var(--toast-color-info-foreground);
+}
+
+.muka-toast--info .muka-toast__icon {
+  color: var(--toast-color-info-accent);
+}
+
+/* Variant: Success */
+.muka-toast--success {
+  background-color: var(--toast-color-success-background);
+  color: var(--toast-color-success-foreground);
+}
+
+.muka-toast--success .muka-toast__icon {
+  color: var(--toast-color-success-accent);
+}
+
+/* Variant: Warning */
+.muka-toast--warning {
+  background-color: var(--toast-color-warning-background);
+  color: var(--toast-color-warning-foreground);
+}
+
+.muka-toast--warning .muka-toast__icon {
+  color: var(--toast-color-warning-accent);
+}
+
+/* Variant: Error */
+.muka-toast--error {
+  background-color: var(--toast-color-error-background);
+  color: var(--toast-color-error-foreground);
+}
+
+.muka-toast--error .muka-toast__icon {
+  color: var(--toast-color-error-accent);
+}
+
+/* Icon */
+.muka-toast__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--toast-icon-size);
+  height: var(--toast-icon-size);
+}
+
+.muka-toast__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content */
+.muka-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.muka-toast__title {
+  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);
+  margin-bottom: var(--spacing-1);
+}
+
+.muka-toast__message {
+  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);
+}
+
+/* Action slot */
+.muka-toast__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Dismiss button */
+.muka-toast__dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: -2px -4px -2px 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.muka-toast__dismiss:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.muka-toast__dismiss:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+.muka-toast__dismiss svg {
+  width: 16px;
+  height: 16px;
+}

package/dist/cjs/components/Toast/Toast.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Toast.css");
+const Icon_1 = require("../Icon");
+// Default icons per variant (Remix Icon)
+const defaultIcons = {
+    info: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "information", variant: "fill", size: "md" }),
+    success: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", variant: "fill", size: "md" }),
+    warning: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "error-warning", variant: "fill", size: "md" }),
+    error: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "error-warning", variant: "fill", size: "md" }),
+};
+/**
+ * Toast Component
+ *
+ * A non-blocking notification that appears temporarily.
+ * Used for success confirmations, error notifications, and status updates.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses role="status" with aria-live="polite" for non-intrusive announcements
+ * - Error toasts use role="alert" with aria-live="assertive"
+ * - Dismiss button has accessible label
+ * - Supports keyboard navigation
+ * - Pause on hover/focus to prevent dismissal while user is interacting
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+const Toast = ({ children, variant = 'info', title, icon, hideIcon = false, duration = 5000, open = true, onClose, action, className = '', position = 'bottom-right', ...props }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(open);
+    const [isPaused, setIsPaused] = (0, react_1.useState)(false);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setIsVisible(false);
+        onClose?.();
+    }, [onClose]);
+    // Auto-dismiss timer
+    (0, react_1.useEffect)(() => {
+        if (!open || duration === 0 || isPaused)
+            return;
+        const timer = setTimeout(() => {
+            handleClose();
+        }, duration);
+        return () => clearTimeout(timer);
+    }, [open, duration, isPaused, handleClose]);
+    // Sync with open prop
+    (0, react_1.useEffect)(() => {
+        setIsVisible(open);
+    }, [open]);
+    if (!isVisible)
+        return null;
+    const toastClasses = [
+        'muka-toast',
+        `muka-toast--${variant}`,
+        `muka-toast--${position}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const displayIcon = hideIcon ? null : (icon ?? defaultIcons[variant]);
+    // Determine role: error uses 'alert' for immediate announcement
+    const role = variant === 'error' ? 'alert' : 'status';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: toastClasses, role: role, "aria-live": role === 'alert' ? 'assertive' : 'polite', onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), ...props, children: [displayIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-toast__icon", "aria-hidden": "true", children: displayIcon })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-toast__content", children: [title && (0, jsx_runtime_1.jsx)("div", { className: "muka-toast__title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "muka-toast__message", children: children })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "muka-toast__action", children: action }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-toast__dismiss", onClick: handleClose, "aria-label": "Dismiss notification", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: "sm" }) })] }));
+};
+exports.Toast = Toast;
+exports.default = exports.Toast;
+//# sourceMappingURL=Toast.js.map

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

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

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

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

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

package/dist/cjs/components/Toggle/Toggle.css

@@ -0,0 +1,160 @@
+/* Toggle Component Styles - Using Muka Design Tokens */
+
+/* Wrapper container */
+.muka-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  padding: var(--spacing-4) 0;
+}
+
+.muka-toggle--with-caption {
+  padding: var(--spacing-5) 0;
+}
+
+.muka-toggle--disabled {
+  opacity: 0.6;
+}
+
+/* Icon */
+.muka-toggle__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-toggle__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content area (label + caption) */
+.muka-toggle__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
+}
+
+/* Label */
+.muka-toggle__label {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-toggle--with-caption .muka-toggle__label {
+  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-toggle--disabled .muka-toggle__label {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
+}
+
+/* Caption */
+.muka-toggle__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);
+}
+
+/* Switch container */
+.muka-toggle__switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.muka-toggle--disabled .muka-toggle__switch {
+  cursor: not-allowed;
+}
+
+/* Hidden native input */
+.muka-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Track (background pill) */
+.muka-toggle__track {
+  display: flex;
+  align-items: center;
+  width: var(--toggle-track-width);
+  height: var(--toggle-track-height);
+  border-radius: var(--toggle-track-radius);
+  background-color: var(--toggle-track-color-off);
+  transition: background-color 0.2s ease;
+  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.16);
+  position: relative;
+}
+
+/* Knob (sliding circle) */
+.muka-toggle__knob {
+  position: absolute;
+  width: var(--toggle-knob-size);
+  height: var(--toggle-knob-size);
+  border-radius: var(--border-radius-full);
+  background-color: var(--toggle-knob-color-default);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+  left: var(--toggle-knob-offset);
+  transition: left 0.2s ease, transform 0.2s ease;
+}
+
+/* Focus state */
+.muka-toggle__input:focus-visible + .muka-toggle__track {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Checked (on) state */
+.muka-toggle__input:checked + .muka-toggle__track {
+  background-color: var(--toggle-track-color-on);
+}
+
+.muka-toggle__input:checked + .muka-toggle__track .muka-toggle__knob {
+  left: calc(var(--toggle-track-width) - var(--toggle-knob-size) - var(--toggle-knob-offset));
+}
+
+/* Disabled state */
+.muka-toggle--disabled .muka-toggle__track {
+  background-color: var(--toggle-track-color-disabled);
+  box-shadow: none;
+}
+
+.muka-toggle--disabled .muka-toggle__knob {
+  background-color: var(--toggle-knob-color-disabled);
+  box-shadow: none;
+}
+
+/* Divider */
+.muka-toggle__divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--color-border-muted);
+}

package/dist/cjs/components/Toggle/Toggle.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Toggle.css");
+/**
+ * Toggle Component
+ *
+ * A switch control for binary on/off states.
+ * Built using the Muka design token system with support for:
+ * - On/Off states with smooth animation
+ * - Optional label, caption, and icon
+ * - Optional divider for list layouts
+ * - Disabled state
+ * - Multi-brand theming through design tokens
+ *
+ * Tokens used:
+ * - toggle.track.{width|height|radius|color.*}
+ * - toggle.knob.{size|offset|color.*}
+ * - color.border.muted (for divider)
+ * - text.label.lg.* (for label)
+ * - text.body.base.regular (for caption)
+ */
+const Toggle = ({ checked, defaultChecked, onChange, label, caption, showDivider = false, icon, disabled = false, name, className = '', id, ...props }) => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const wrapperClasses = [
+        'muka-toggle',
+        disabled && 'muka-toggle--disabled',
+        showDivider && 'muka-toggle--with-divider',
+        caption && 'muka-toggle--with-caption',
+        className
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "muka-toggle__icon", "aria-hidden": "true", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "muka-toggle__content", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: "muka-toggle__label", htmlFor: inputId, children: label })), caption && ((0, jsx_runtime_1.jsx)("span", { className: "muka-toggle__caption", children: caption }))] }), (0, jsx_runtime_1.jsxs)("label", { className: "muka-toggle__switch", htmlFor: inputId, children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsx)("span", { className: "muka-toggle__track", children: (0, jsx_runtime_1.jsx)("span", { className: "muka-toggle__knob" }) })] }), showDivider && (0, jsx_runtime_1.jsx)("div", { className: "muka-toggle__divider" })] }));
+};
+exports.Toggle = Toggle;
+exports.default = exports.Toggle;
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../components/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqC;AACrC,wBAAsB;AAqCtB;;;;;;;;;;;;;;;;;GAiBG;AACI,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,IAAA,aAAK,GAAE,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,iCAAK,SAAS,EAAE,cAAc,aAC3B,IAAI,IAAI,iCAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YAAE,IAAI,GAAQ,EAE7E,iCAAK,SAAS,EAAC,sBAAsB,aAClC,KAAK,IAAI,CACR,kCAAO,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,OAAO,YACnD,KAAK,GACA,CACT,EACA,OAAO,IAAI,CACV,iCAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,CACxD,IACG,EAEN,mCAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,OAAO,aACrD,kCACE,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,iCAAM,SAAS,EAAC,oBAAoB,YAClC,iCAAM,SAAS,EAAC,mBAAmB,GAAG,GACjC,IACD,EAEP,WAAW,IAAI,gCAAK,SAAS,EAAC,sBAAsB,GAAG,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AA9DW,QAAA,MAAM,UA8DjB;AAEF,kBAAe,cAAM,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Toggle/index.ts"],"names":[],"mappings":";;;AAAA,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,mCAA6C;AAApC,iGAAA,MAAM,OAAW"}

package/dist/cjs/components/Tooltip/Tooltip.css

@@ -0,0 +1,33 @@
+/* Tooltip Component Styles */
+
+.muka-tooltip__content {
+  background-color: var(--color-surface-inverse);
+  color: var(--color-text-default-inverse);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2) var(--spacing-3);
+  box-shadow: var(--shadow-level2);
+  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);
+  max-width: 16rem;
+  z-index: 50;
+  user-select: none;
+  animation: muka-tooltip-fade-in 150ms ease;
+}
+
+@keyframes muka-tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Arrow */
+.muka-tooltip__arrow {
+  fill: var(--color-surface-inverse);
+}

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TooltipPrimitive = __importStar(require("@radix-ui/react-tooltip"));
+require("./Tooltip.css");
+const Tooltip = ({ children, content, side = 'top', align = 'center', delayDuration = 400, disabled = false, open, onOpenChange, className = '', }) => {
+    if (disabled) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    const contentClasses = ['muka-tooltip__content', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Provider, { delayDuration: delayDuration, children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(TooltipPrimitive.Trigger, { asChild: true, children: children }), (0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, { className: contentClasses, side: side, align: align, sideOffset: 6, children: [content, (0, jsx_runtime_1.jsx)("div", { className: "muka-tooltip__arrow-wrapper", children: (0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { className: "muka-tooltip__arrow", width: 12, height: 6 }) })] }) })] }) }));
+};
+exports.Tooltip = Tooltip;
+exports.default = exports.Tooltip;
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,0EAA4D;AAC5D,yBAAuB;AAuBhB,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,QAAQ,EAChB,aAAa,GAAG,GAAG,EACnB,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,YAAY,EACZ,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,2DAAG,QAAQ,GAAI,CAAC;IACzB,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,uBAAuB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtF,OAAO,CACL,uBAAC,gBAAgB,CAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,YACrD,wBAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,aAC3D,uBAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,kBAC9B,QAAQ,GACgB,EAC3B,uBAAC,gBAAgB,CAAC,MAAM,cACtB,wBAAC,gBAAgB,CAAC,OAAO,IACvB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,aAEZ,OAAO,EACR,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,uBAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,GAAI,GAC5E,IACmB,GACH,IACJ,GACE,CAC7B,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,OAAO,WAuClB;AAEF,kBAAe,eAAO,CAAC"}

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

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

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

package/dist/cjs/components/TopBar/ControlBar.css

@@ -0,0 +1,72 @@
+/* ControlBar Component Styles */
+
+/*
+ * Sizing is driven by `--cb-*` custom properties set per tier. Base (small)
+ * values live on `.muka-controlbar`; the large tier flips them — either
+ * responsively (no `size` prop, scoped with `:not([data-size])`, large at
+ * 1024px+ to track the TopBar large tier) or forced via `[data-size="…"]`.
+ * Size affects the bar's own box only; `--controlbar-content-radius` is exposed
+ * for consumers to apply to nested fields.
+ */
+.muka-controlbar {
+  display: flex;
+  justify-content: center;
+  background-color: var(--controlbar-color-background);
+  width: 100%;
+
+  /* ─── Small tier (base) ─── */
+  --cb-padding-x: var(--controlbar-padding-x-sm);
+  --cb-padding-bottom: var(--controlbar-padding-bottom-sm);
+  --cb-max-width: var(--controlbar-max-width-sm);
+  --cb-gap: var(--controlbar-gap-sm);
+  --controlbar-content-radius: var(--controlbar-content-radius-sm);
+
+  padding: 0 var(--cb-padding-x) var(--cb-padding-bottom);
+}
+
+/* ─── Large tier ─── */
+@media (min-width: 1024px) {
+  .muka-controlbar:not([data-size]) {
+    --cb-padding-x: var(--controlbar-padding-x-lg);
+    --cb-padding-bottom: var(--controlbar-padding-bottom-lg);
+    --cb-max-width: var(--controlbar-max-width-lg);
+    --cb-gap: var(--controlbar-gap-lg);
+    --controlbar-content-radius: var(--controlbar-content-radius-lg);
+  }
+}
+
+.muka-controlbar[data-size='lg'] {
+  --cb-padding-x: var(--controlbar-padding-x-lg);
+  --cb-padding-bottom: var(--controlbar-padding-bottom-lg);
+  --cb-max-width: var(--controlbar-max-width-lg);
+  --cb-gap: var(--controlbar-gap-lg);
+  --controlbar-content-radius: var(--controlbar-content-radius-lg);
+}
+
+/* Contents are capped at the tier max-width and centered, so they don't
+   stretch full-width on larger viewports while the bar background stays edge-to-edge. */
+.muka-controlbar__content {
+  display: flex;
+  align-items: center;
+  gap: var(--cb-gap);
+  width: 100%;
+  max-width: var(--cb-max-width);
+}
+
+/* ─── Justification variants ─────────────────────────── */
+
+.muka-controlbar--justify-start .muka-controlbar__content {
+  justify-content: flex-start;
+}
+
+.muka-controlbar--justify-center .muka-controlbar__content {
+  justify-content: center;
+}
+
+.muka-controlbar--justify-end .muka-controlbar__content {
+  justify-content: flex-end;
+}
+
+.muka-controlbar--justify-between .muka-controlbar__content {
+  justify-content: space-between;
+}