@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/Button/Button.css

@@ -0,0 +1,270 @@
+/* Button Component Styles - Using Muka Design Tokens */
+
+/* Base button styles */
+.muka-button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Typography - using semantic tokens */
+  font-family: var(--alias-font-brand-family);
+  font-weight: var(--alias-font-brand-weight-semibold);
+  text-decoration: none;
+  
+  /* Interaction */
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  
+  /* Accessibility */
+  outline: none;
+  position: relative;
+}
+
+/* Focus styles for accessibility */
+.muka-button:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Size variants
+   Height is driven by min-height; vertical padding is 0 and the label carries
+   tight (Figma) line-height. Horizontal spacing matches Figma's nested model:
+   the button's padding is the outer container inset, and the label's own
+   padding is the icon-to-text gap (so text-only buttons keep both insets). */
+.muka-button--sm {
+  padding: 0 var(--button-padding-sm-x);
+  border-radius: var(--button-radius-sm);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  min-height: 32px;
+}
+
+.muka-button--sm .muka-button__label {
+  padding: 0 var(--button-gap-sm);
+}
+
+.muka-button--md {
+  padding: 0 var(--button-padding-md-x);
+  border-radius: var(--button-radius-md);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  min-height: 40px;
+}
+
+.muka-button--md .muka-button__label {
+  padding: 0 var(--button-gap-md);
+}
+
+.muka-button--lg {
+  padding: 0 var(--button-padding-lg-x);
+  border-radius: var(--button-radius-lg);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+  min-height: 48px;
+}
+
+.muka-button--lg .muka-button__label {
+  padding: 0 var(--button-gap-lg);
+}
+
+.muka-button--xl {
+  padding: 0 var(--button-padding-xl-x);
+  border-radius: var(--button-radius-xl);
+  font-size: var(--text-label-2xl-semibold-fontSize);
+  line-height: var(--text-label-2xl-semibold-lineHeight);
+  min-height: 64px;
+}
+
+.muka-button--xl .muka-button__label {
+  padding: 0 var(--button-gap-xl);
+}
+
+/* Primary variant - your main CTA button */
+.muka-button--primary {
+  background-color: var(--button-color-primary-background-default);
+  color: var(--button-color-primary-foreground-default);
+  box-shadow: var(--button-color-primary-shadow-default);
+}
+
+.muka-button--primary:hover:not(:disabled) {
+  background-color: var(--button-color-primary-background-hover);
+  color: var(--button-color-primary-foreground-hover);
+  box-shadow: var(--button-color-primary-shadow-hover);
+}
+
+.muka-button--primary:active:not(:disabled),
+.muka-button--primary.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-primary-background-pressed);
+  color: var(--button-color-primary-foreground-pressed);
+  box-shadow: var(--button-color-primary-shadow-pressed);
+}
+
+.muka-button--primary:disabled {
+  background-color: var(--button-color-primary-background-disabled);
+  color: var(--button-color-primary-foreground-disabled);
+  box-shadow: var(--button-color-primary-shadow-disabled);
+  cursor: not-allowed;
+  opacity: 1; /* Remove opacity since we have proper disabled tokens */
+}
+
+/* Secondary variant - supporting actions, no border, only bottom inner shadow */
+.muka-button--secondary {
+  background-color: var(--button-color-secondary-background-default);
+  color: var(--button-color-secondary-foreground-default);
+  box-shadow: var(--button-color-secondary-shadow-default);
+}
+
+.muka-button--secondary:hover:not(:disabled) {
+  background-color: var(--button-color-secondary-background-hover);
+  color: var(--button-color-secondary-foreground-hover);
+  box-shadow: var(--button-color-secondary-shadow-hover);
+}
+
+.muka-button--secondary:active:not(:disabled),
+.muka-button--secondary.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-secondary-background-pressed);
+  color: var(--button-color-secondary-foreground-pressed);
+  box-shadow: var(--button-color-secondary-shadow-pressed);
+}
+
+.muka-button--secondary:disabled {
+  background-color: var(--button-color-secondary-background-disabled);
+  color: var(--button-color-secondary-foreground-disabled);
+  box-shadow: var(--button-color-secondary-shadow-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Tertiary variant - tinted background with accent text and border */
+.muka-button--tertiary {
+  background-color: var(--button-color-tertiary-background-default);
+  color: var(--button-color-tertiary-foreground-default);
+  border: 1px solid var(--button-color-tertiary-border-default);
+}
+
+.muka-button--tertiary:hover:not(:disabled) {
+  background-color: var(--button-color-tertiary-background-hover);
+  color: var(--button-color-tertiary-foreground-hover);
+  border-color: var(--button-color-tertiary-border-hover);
+}
+
+.muka-button--tertiary:active:not(:disabled),
+.muka-button--tertiary.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-tertiary-background-pressed);
+  color: var(--button-color-tertiary-foreground-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
+}
+
+.muka-button--tertiary:disabled {
+  background-color: var(--button-color-tertiary-background-disabled);
+  color: var(--button-color-tertiary-foreground-disabled);
+  border-color: var(--button-color-tertiary-border-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Ghost variant - minimal styling, border appears on hover */
+.muka-button--ghost {
+  background-color: var(--button-color-ghost-background-default);
+  color: var(--button-color-ghost-foreground-default);
+  border: 1px solid var(--button-color-ghost-border-default);
+}
+
+.muka-button--ghost:hover:not(:disabled) {
+  background-color: var(--button-color-ghost-background-hover);
+  color: var(--button-color-ghost-foreground-hover);
+  border-color: var(--button-color-ghost-border-hover);
+}
+
+.muka-button--ghost:active:not(:disabled),
+.muka-button--ghost.muka-button--pressed:not(:disabled) {
+  background-color: var(--button-color-ghost-background-pressed);
+  color: var(--button-color-ghost-foreground-pressed);
+  border-color: var(--button-color-ghost-border-pressed);
+}
+
+.muka-button--ghost:disabled {
+  background-color: var(--button-color-ghost-background-disabled);
+  color: var(--button-color-ghost-foreground-disabled);
+  border-color: var(--button-color-ghost-border-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* General disabled state - fallback */
+.muka-button:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Full width modifier */
+.muka-button--full-width {
+  width: 100%;
+}
+
+/* Icons - forced to the Figma per-size dimension regardless of the icon passed */
+.muka-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Make the icon content (raw <svg> or a nested Icon span) fill the wrapper.
+   Scoped under .muka-button to outrank Icon.css's own `.muka-icon--{size}`
+   rule, so the button's size wins even when the icon hardcodes its own size. */
+.muka-button .muka-button__icon > *,
+.muka-button .muka-button__icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.muka-button--sm .muka-button__icon {
+  width: var(--button-icon-sm);
+  height: var(--button-icon-sm);
+}
+
+.muka-button--md .muka-button__icon {
+  width: var(--button-icon-md);
+  height: var(--button-icon-md);
+}
+
+.muka-button--lg .muka-button__icon {
+  width: var(--button-icon-lg);
+  height: var(--button-icon-lg);
+}
+
+.muka-button--xl .muka-button__icon {
+  width: var(--button-icon-xl);
+  height: var(--button-icon-xl);
+}
+
+.muka-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Icon-only buttons - square, sized to the button height per size */
+.muka-button--icon-only {
+  padding: 0;
+}
+
+.muka-button--icon-only.muka-button--sm {
+  width: 32px;
+}
+
+.muka-button--icon-only.muka-button--md {
+  width: 40px;
+}
+
+.muka-button--icon-only.muka-button--lg {
+  width: 48px;
+}
+
+.muka-button--icon-only.muka-button--xl {
+  width: 64px;
+}

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const accessibility_1 = require("../../utils/accessibility");
+require("./Button.css");
+/**
+ * Button Component
+ *
+ * Built using the Muka design token system with support for:
+ * - 4 variants: primary, secondary, tertiary, ghost
+ * - 3 sizes: sm, md, lg
+ * - Interactive states: default, hover, pressed, disabled
+ * - Icons with flexible positioning (left, right, or both)
+ * - Icon-only buttons (label can be hidden)
+ * - Consistent spacing distribution
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses native <button> element for full keyboard support
+ * - Focus indicator meets WCAG 2.4.7 (visible focus)
+ * - When iconOnly=true, aria-label is required (dev warning if missing)
+ * - Supports aria-pressed for toggle buttons
+ * - Supports aria-expanded/aria-controls for menu buttons
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ */
+exports.Button = (0, react_1.forwardRef)(({ children, variant = 'primary', size = 'md', disabled = false, onClick, type = 'button', iconLeft, iconRight, iconOnly = false, fullWidth = false, className = '', onMouseDown, onMouseUp, onMouseLeave, ...props }, ref) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    // Warn in development if icon-only button lacks aria-label
+    (0, accessibility_1.warnMissingA11yProp)('Button', iconOnly && !props['aria-label'], 'Icon-only buttons require an aria-label for accessibility');
+    const handleClick = (e) => {
+        if (!disabled && onClick) {
+            onClick(e);
+        }
+    };
+    const handleMouseDown = (e) => {
+        if (!disabled) {
+            setIsPressed(true);
+        }
+        onMouseDown?.(e);
+    };
+    const handleMouseUp = (e) => {
+        setIsPressed(false);
+        onMouseUp?.(e);
+    };
+    const handleMouseLeave = (e) => {
+        setIsPressed(false);
+        onMouseLeave?.(e);
+    };
+    // Generate CSS classes for the button
+    const buttonClasses = [
+        'muka-button',
+        `muka-button--${variant}`,
+        `muka-button--${size}`,
+        disabled && 'muka-button--disabled',
+        fullWidth && 'muka-button--full-width',
+        iconOnly && 'muka-button--icon-only',
+        isPressed && 'muka-button--pressed',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Consistent spacing: button padding matches label padding for balanced distribution
+    const hasLeftIcon = Boolean(iconLeft);
+    const hasRightIcon = Boolean(iconRight);
+    const showLabel = !iconOnly;
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, className: buttonClasses, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, disabled: disabled, type: type, ...props, children: [hasLeftIcon && ((0, jsx_runtime_1.jsx)("span", { className: `muka-button__icon ${showLabel ? 'muka-button__icon--left' : ''}`, children: iconLeft })), iconOnly && !hasLeftIcon && !hasRightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-button__icon", children: children })), showLabel && (0, jsx_runtime_1.jsx)("span", { className: "muka-button__label", children: children }), hasRightIcon && ((0, jsx_runtime_1.jsx)("span", { className: `muka-button__icon ${showLabel ? 'muka-button__icon--right' : ''}`, children: iconRight }))] }));
+});
+exports.Button.displayName = 'Button';
+exports.default = exports.Button;
+//# sourceMappingURL=Button.js.map

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

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

package/dist/cjs/components/Button/Button.simple.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Simple Button Component for testing
+ */
+const SimpleButton = ({ children, variant = 'primary', size = 'md', disabled = false, onClick, ...props }) => {
+    const baseStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: 'none',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontWeight: 600,
+        textDecoration: 'none',
+        transition: 'all 0.2s ease',
+        opacity: disabled ? 0.6 : 1,
+    };
+    const variantStyles = {
+        primary: {
+            backgroundColor: '#8d8d8d',
+            color: '#ffffff',
+        },
+        secondary: {
+            backgroundColor: '#f0f0f0',
+            color: '#646464',
+            border: '1px solid #e8e8e8',
+        },
+        ghost: {
+            backgroundColor: 'transparent',
+            color: '#8d8d8d',
+        },
+    };
+    const sizeStyles = {
+        sm: {
+            padding: '0.5rem 0.5rem',
+            borderRadius: '4px',
+            fontSize: '0.875rem',
+            minHeight: '32px',
+        },
+        md: {
+            padding: '0.75rem 0.75rem',
+            borderRadius: '6px',
+            fontSize: '1rem',
+            minHeight: '40px',
+        },
+        lg: {
+            padding: '1rem 1rem',
+            borderRadius: '6px',
+            fontSize: '1.125rem',
+            minHeight: '48px',
+        },
+    };
+    const combinedStyles = {
+        ...baseStyles,
+        ...variantStyles[variant],
+        ...sizeStyles[size],
+    };
+    return ((0, jsx_runtime_1.jsx)("button", { style: combinedStyles, onClick: onClick, disabled: disabled, ...props, children: children }));
+};
+exports.SimpleButton = SimpleButton;
+exports.default = exports.SimpleButton;
+//# sourceMappingURL=Button.simple.js.map

package/dist/cjs/components/Button/Button.simple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.simple.js","sourceRoot":"","sources":["../../../../components/Button/Button.simple.tsx"],"names":[],"mappings":";;;;AAUA;;GAEG;AACI,MAAM,YAAY,GAA0B,CAAC,EAClD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAwB;QACtC,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QAC5C,UAAU,EAAE,mEAAmE;QAC/E,UAAU,EAAE,GAAG;QACf,cAAc,EAAE,MAAM;QACtB,UAAU,EAAE,eAAe;QAC3B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC;IAEF,MAAM,aAAa,GAAwC;QACzD,OAAO,EAAE;YACP,eAAe,EAAE,SAAS;YAC1B,KAAK,EAAE,SAAS;SACjB;QACD,SAAS,EAAE;YACT,eAAe,EAAE,SAAS;YAC1B,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,mBAAmB;SAC5B;QACD,KAAK,EAAE;YACL,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,SAAS;SACjB;KACF,CAAC;IAEF,MAAM,UAAU,GAAwC;QACtD,EAAE,EAAE;YACF,OAAO,EAAE,eAAe;YACxB,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,MAAM;SAClB;QACD,EAAE,EAAE;YACF,OAAO,EAAE,iBAAiB;YAC1B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,MAAM;SAClB;QACD,EAAE,EAAE;YACF,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,MAAM;SAClB;KACF,CAAC;IAEF,MAAM,cAAc,GAAG;QACrB,GAAG,UAAU;QACb,GAAG,aAAa,CAAC,OAAO,CAAC;QACzB,GAAG,UAAU,CAAC,IAAI,CAAC;KACpB,CAAC;IAEF,OAAO,CACL,mCACE,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,KACd,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC;AA1EW,QAAA,YAAY,gBA0EvB;AAEF,kBAAe,oBAAY,CAAC"}

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

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

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

package/dist/cjs/components/Card/Card.css

@@ -0,0 +1,108 @@
+/* Card Component Styles - Using Muka Design Tokens */
+
+.muka-card {
+  background-color: var(--card-color-default-background);
+  color: var(--card-color-default-foreground);
+  border: var(--border-width-regular) solid var(--card-color-default-border);
+  box-shadow: var(--card-shadow-default);
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  overflow: hidden;
+}
+
+/* Padding variants */
+.muka-card--padding-none {
+  padding: 0;
+}
+
+.muka-card--padding-sm {
+  padding: var(--card-padding-sm);
+}
+
+.muka-card--padding-md {
+  padding: var(--card-padding-md);
+}
+
+.muka-card--padding-lg {
+  padding: var(--card-padding-lg);
+}
+
+/* Radius variants */
+.muka-card--radius-sm {
+  border-radius: var(--card-radius-sm);
+}
+
+.muka-card--radius-md {
+  border-radius: var(--card-radius-md);
+}
+
+.muka-card--radius-lg {
+  border-radius: var(--card-radius-lg);
+}
+
+/* Interactive variant */
+.muka-card--interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-card--interactive:hover {
+  background-color: var(--card-color-hover-background);
+  border-color: var(--card-color-hover-border);
+  box-shadow: var(--card-shadow-hover);
+}
+
+.muka-card--interactive:active,
+.muka-card--interactive.muka-card--pressed {
+  background-color: var(--card-color-pressed-background);
+  border-color: var(--card-color-pressed-border);
+  box-shadow: var(--card-shadow-pressed);
+}
+
+.muka-card--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Selected variant */
+.muka-card--selected {
+  background-color: var(--card-color-selected-background);
+  border-color: var(--card-color-selected-border);
+  border-width: var(--border-width-bold);
+  box-shadow: var(--card-shadow-selected);
+}
+
+/* Optional header (title + description) */
+.muka-card__header {
+  margin-bottom: var(--spacing-4);
+}
+
+.muka-card__title {
+  margin: 0;
+  color: var(--color-text-default-default);
+  font-family: var(--text-heading-xs-fontFamily);
+  font-weight: var(--text-heading-xs-fontWeight);
+  font-size: var(--text-heading-xs-fontSize);
+  line-height: var(--text-heading-xs-lineHeight);
+  letter-spacing: var(--text-heading-xs-letterSpacing);
+}
+
+.muka-card__description {
+  margin: var(--spacing-1) 0 0;
+  color: var(--color-text-subtle-default);
+  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);
+}
+
+/* Hide divider on last list item inside card */
+.muka-card > .muka-listitem:last-child > .muka-listitem__divider {
+  display: none;
+}
+
+/* Disabled state */
+.muka-card--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/dist/cjs/components/Card/Card.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Card.css");
+/**
+ * Card Component
+ *
+ * Built using the Muka design token system with support for:
+ * - 3 variants: default, interactive, selected
+ * - 3 padding sizes: sm, md, lg (plus none)
+ * - 3 border radius sizes: sm, md, lg
+ * - Interactive states: default, hover, pressed, selected, disabled
+ * - Semantic HTML element support
+ * - Multi-brand theming through design tokens
+ *
+ * @usage When containing ListItem components, use `padding="none"` to avoid
+ * double padding since ListItems have their own internal padding.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Interactive cards have role="button" for assistive technology
+ * - Keyboard support: Enter and Space keys activate the card
+ * - Focus indicator meets WCAG 2.4.7 (visible focus)
+ * - aria-pressed indicates selected state for toggle behavior
+ * - aria-disabled and tabIndex management for disabled state
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ */
+const Card = ({ children, title, description, variant = 'default', padding = 'md', radius = 'lg', as = 'div', onClick, selected = false, disabled = false, className = '', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const isInteractive = (variant === 'interactive' || Boolean(onClick)) && !disabled;
+    const isSelected = variant === 'selected' || selected;
+    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 cardClasses = [
+        'muka-card',
+        `muka-card--padding-${padding}`,
+        `muka-card--radius-${radius}`,
+        isInteractive && 'muka-card--interactive',
+        isSelected && 'muka-card--selected',
+        isPressed && 'muka-card--pressed',
+        disabled && 'muka-card--disabled',
+        className,
+    ].filter(Boolean).join(' ');
+    // Determine if this card should have interactive role (even if disabled)
+    const hasInteractiveIntent = variant === 'interactive' || Boolean(onClick);
+    const interactiveProps = hasInteractiveIntent
+        ? {
+            onClick: isInteractive ? handleClick : undefined,
+            onMouseDown: isInteractive ? handleMouseDown : undefined,
+            onMouseUp: isInteractive ? handleMouseUp : undefined,
+            onMouseLeave: isInteractive ? handleMouseLeave : undefined,
+            onKeyDown: isInteractive ? handleKeyDown : undefined,
+            tabIndex: disabled ? -1 : 0,
+            role: 'button',
+            'aria-pressed': isSelected || undefined,
+            'aria-disabled': disabled || undefined,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            'aria-describedby': ariaDescribedby,
+        }
+        : {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            'aria-describedby': ariaDescribedby,
+        };
+    return ((0, jsx_runtime_1.jsxs)(Element, { className: cardClasses, ...interactiveProps, ...props, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-card__header", children: [(0, jsx_runtime_1.jsx)("h3", { className: "muka-card__title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "muka-card__description", children: description })] })), children] }));
+};
+exports.Card = Card;
+exports.default = exports.Card;
+//# sourceMappingURL=Card.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Card/index.ts"],"names":[],"mappings":";;;;;;AAAA,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,+BAAiC;AAAxB,gHAAA,OAAO,OAAA"}