@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Tile/Tile.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import './Tile.css';
+export const Tile = ({ heading, subheading, description, image = 'top', size = 'lg', images, imageAlt = '', showThumbnails = true, price, favourite, action, onClick, as = 'article', href, className = '', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const isInteractive = Boolean(onClick) || as === 'a';
+    const isSmall = size === 'sm';
+    const hasThumbnails = showThumbnails && !isSmall && images && images.length > 1;
+    const Element = as;
+    const handleClick = () => {
+        if (isInteractive && onClick) {
+            onClick();
+        }
+    };
+    const handleMouseDown = () => {
+        if (isInteractive)
+            setIsPressed(true);
+    };
+    const handleMouseUp = () => setIsPressed(false);
+    const handleMouseLeave = () => setIsPressed(false);
+    const handleKeyDown = (e) => {
+        if (isInteractive && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    const tileClasses = [
+        'muka-tile',
+        `muka-tile--image-${image}`,
+        `muka-tile--${size}`,
+        isInteractive && 'muka-tile--interactive',
+        isPressed && 'muka-tile--pressed',
+        className,
+    ].filter(Boolean).join(' ');
+    const interactiveProps = isInteractive
+        ? {
+            onClick: handleClick,
+            onMouseDown: handleMouseDown,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseLeave,
+            onKeyDown: handleKeyDown,
+            tabIndex: 0,
+            role: as === 'a' ? undefined : 'button',
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+        }
+        : {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+        };
+    const linkProps = as === 'a' ? { href } : {};
+    const mainImage = images?.[0];
+    const thumbnailImages = images?.slice(1);
+    // Determine if favourite should overlay the photo or be inline
+    const favouriteOnPhoto = favourite && !isSmall && mainImage;
+    const favouriteInline = favourite && isSmall;
+    // For right layout, content comes first in DOM
+    const isRight = image === 'right';
+    const photosSection = mainImage && (_jsxs("div", { className: "muka-tile__photos", children: [favouriteOnPhoto && (_jsx("div", { className: "muka-tile__favourite", children: favourite })), _jsx("div", { className: "muka-tile__photo-main", children: _jsx("img", { src: mainImage, alt: imageAlt }) }), hasThumbnails && thumbnailImages && (_jsx("div", { className: "muka-tile__thumbnails", children: thumbnailImages.map((src, index) => (_jsx("div", { className: "muka-tile__thumbnail", children: _jsx("img", { src: src, alt: "" }) }, index))) }))] }));
+    // Small + left/right: header has heading/subheading/price in row with action
+    const isSmallHorizontal = isSmall && image !== 'top';
+    const contentSection = (_jsxs("div", { className: "muka-tile__content", children: [_jsxs("div", { className: "muka-tile__header", children: [_jsxs("div", { className: "muka-tile__text", children: [_jsx("p", { className: "muka-tile__heading", children: heading }), subheading && (_jsx("p", { className: "muka-tile__subheading", children: subheading })), isSmall && price && (_jsx("div", { className: "muka-tile__price", children: price }))] }), !isSmall && price && (_jsx("div", { className: "muka-tile__price", children: price })), isSmallHorizontal && (favouriteInline || action) && (_jsx("div", { className: "muka-tile__action", children: action || favourite }))] }), description && (_jsx("p", { className: "muka-tile__description", children: description })), isSmall && image === 'top' && favouriteInline && !action && (_jsx("div", { className: "muka-tile__action", children: favourite }))] }));
+    return (_jsx(Element, { className: tileClasses, ...interactiveProps, ...linkProps, children: isRight ? (_jsxs(_Fragment, { children: [contentSection, photosSection] })) : (_jsxs(_Fragment, { children: [photosSection, contentSection] })) }));
+};
+export default Tile;
+//# sourceMappingURL=Tile.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Tile/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/esm/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/esm/components/Toast/Toast.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback } from 'react';
+import './Toast.css';
+import { Icon } from '../Icon';
+// Default icons per variant (Remix Icon)
+const defaultIcons = {
+    info: _jsx(Icon, { name: "information", variant: "fill", size: "md" }),
+    success: _jsx(Icon, { name: "check", variant: "fill", size: "md" }),
+    warning: _jsx(Icon, { name: "error-warning", variant: "fill", size: "md" }),
+    error: _jsx(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/
+ */
+export const Toast = ({ children, variant = 'info', title, icon, hideIcon = false, duration = 5000, open = true, onClose, action, className = '', position = 'bottom-right', ...props }) => {
+    const [isVisible, setIsVisible] = useState(open);
+    const [isPaused, setIsPaused] = useState(false);
+    const handleClose = useCallback(() => {
+        setIsVisible(false);
+        onClose?.();
+    }, [onClose]);
+    // Auto-dismiss timer
+    useEffect(() => {
+        if (!open || duration === 0 || isPaused)
+            return;
+        const timer = setTimeout(() => {
+            handleClose();
+        }, duration);
+        return () => clearTimeout(timer);
+    }, [open, duration, isPaused, handleClose]);
+    // Sync with open prop
+    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 (_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 && (_jsx("span", { className: "muka-toast__icon", "aria-hidden": "true", children: displayIcon })), _jsxs("div", { className: "muka-toast__content", children: [title && _jsx("div", { className: "muka-toast__title", children: title }), _jsx("div", { className: "muka-toast__message", children: children })] }), action && _jsx("div", { className: "muka-toast__action", children: action }), _jsx("button", { type: "button", className: "muka-toast__dismiss", onClick: handleClose, "aria-label": "Dismiss notification", children: _jsx(Icon, { name: "close", variant: "line", size: "sm" }) })] }));
+};
+export default Toast;
+//# sourceMappingURL=Toast.js.map

package/dist/esm/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/esm/components/Toast/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/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/esm/components/Toggle/Toggle.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './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)
+ */
+export const Toggle = ({ checked, defaultChecked, onChange, label, caption, showDivider = false, icon, disabled = false, name, className = '', id, ...props }) => {
+    const generatedId = 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 (_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" })] }));
+};
+export default Toggle;
+//# sourceMappingURL=Toggle.js.map

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

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

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

@@ -0,0 +1,3 @@
+export { Toggle } from './Toggle';
+export { Toggle as default } from './Toggle';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/esm/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/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import './Tooltip.css';
+export const Tooltip = ({ children, content, side = 'top', align = 'center', delayDuration = 400, disabled = false, open, onOpenChange, className = '', }) => {
+    if (disabled) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const contentClasses = ['muka-tooltip__content', className].filter(Boolean).join(' ');
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, children: _jsxs(TooltipPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { className: contentClasses, side: side, align: align, sideOffset: 6, children: [content, _jsx("div", { className: "muka-tooltip__arrow-wrapper", children: _jsx(TooltipPrimitive.Arrow, { className: "muka-tooltip__arrow", width: 12, height: 6 }) })] }) })] }) }));
+};
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,eAAe,CAAC;AAuBvB,MAAM,CAAC,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,4BAAG,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,KAAC,gBAAgB,CAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,YACrD,MAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,aAC3D,KAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,kBAC9B,QAAQ,GACgB,EAC3B,KAAC,gBAAgB,CAAC,MAAM,cACtB,MAAC,gBAAgB,CAAC,OAAO,IACvB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,aAEZ,OAAO,EACR,cAAK,SAAS,EAAC,6BAA6B,YAC1C,KAAC,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;AAEF,eAAe,OAAO,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}