@revikornmann/muka-ui 0.2.1

package/dist/styles/components/Popover.css

@@ -0,0 +1,28 @@
+/* Popover Component Styles */
+
+.muka-popover__content {
+  background-color: var(--color-surface-level3);
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-level3);
+  max-width: 20rem;
+  z-index: 50;
+  animation: muka-popover-fade-in 150ms ease;
+}
+
+@keyframes muka-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Arrow */
+.muka-popover__arrow {
+  fill: var(--color-surface-level3);
+}

package/dist/styles/components/PriceTag.css

@@ -0,0 +1,94 @@
+/* PriceTag Component Styles - Using Muka Design Tokens */
+
+.muka-price-tag {
+  display: flex;
+  flex-shrink: 0;
+}
+
+/* Medium: stacked layout (price on top, unit below) */
+.muka-price-tag--md {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+/* Small: inline layout */
+.muka-price-tag--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: 3px;
+}
+
+/* Amount row: currency + numbers */
+.muka-price-tag__amount {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+}
+
+.muka-price-tag--sm .muka-price-tag__amount {
+  align-items: center;
+}
+
+/* Numbers group: whole + decimal + cents */
+.muka-price-tag__numbers {
+  display: flex;
+  align-items: baseline;
+}
+
+/* ─── Medium size typography ──────────────────────────── */
+
+.muka-price-tag--md .muka-price-tag__currency {
+  font-family: var(--text-subheading-md-fontFamily);
+  font-weight: var(--text-subheading-md-fontWeight);
+  font-size: var(--text-subheading-md-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-price-tag--md .muka-price-tag__whole {
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-price-tag--md .muka-price-tag__decimal,
+.muka-price-tag--md .muka-price-tag__cents {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Small size typography ───────────────────────────── */
+
+.muka-price-tag--sm .muka-price-tag__currency {
+  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-label-md-bold-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-price-tag--sm .muka-price-tag__whole,
+.muka-price-tag--sm .muka-price-tag__decimal,
+.muka-price-tag--sm .muka-price-tag__cents {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Unit label (same for both sizes) ────────────────── */
+
+.muka-price-tag__unit {
+  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);
+}

package/dist/styles/components/ProfileBadge.css

@@ -0,0 +1,68 @@
+/* ProfileBadge Component Styles - Using Muka Design Tokens */
+
+.muka-profile-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--text-body-base-regular-fontFamily);
+}
+
+/* Size variants */
+.muka-profile-badge--lg {
+  gap: var(--spacing-4); /* 16px */
+}
+
+.muka-profile-badge--md {
+  gap: var(--spacing-3); /* 12px */
+}
+
+.muka-profile-badge__avatar {
+  flex-shrink: 0;
+}
+
+/* Text stack */
+.muka-profile-badge__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.muka-profile-badge__name {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-profile-badge__email {
+  font-family: var(--text-body-xs-regular-fontFamily);
+  font-size: var(--text-body-xs-regular-fontSize);
+  font-weight: var(--text-body-xs-regular-fontWeight);
+  line-height: var(--text-body-xs-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Clickable state */
+.muka-profile-badge--clickable {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: opacity 0.2s ease;
+}
+
+.muka-profile-badge--clickable:hover {
+  opacity: 0.9;
+}
+
+.muka-profile-badge--clickable:active {
+  opacity: 0.8;
+}
+
+.muka-profile-badge--clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}

package/dist/styles/components/Progress.css

@@ -0,0 +1,169 @@
+/* Progress Component Styles - Using Muka Design Tokens */
+
+/* ========================================
+   BAR VARIANT
+   ======================================== */
+
+.muka-progress--bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+}
+
+.muka-progress--bar .muka-progress__track {
+  flex: 1;
+  background-color: var(--color-surface-level1);
+  border-radius: var(--border-radius-full);
+  overflow: hidden;
+}
+
+.muka-progress--bar.muka-progress--sm .muka-progress__track {
+  height: var(--progress-size-bar-height-sm);
+}
+
+.muka-progress--bar.muka-progress--md .muka-progress__track {
+  height: var(--progress-size-bar-height-md);
+}
+
+.muka-progress--bar.muka-progress--lg .muka-progress__track {
+  height: var(--progress-size-bar-height-lg);
+}
+
+.muka-progress--bar .muka-progress__fill {
+  height: 100%;
+  background-color: var(--color-action-default);
+  border-radius: var(--border-radius-full);
+  transition: width 0.3s ease;
+}
+
+.muka-progress--bar .muka-progress__label {
+  flex-shrink: 0;
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  color: var(--color-text-default-default);
+  min-width: 3ch;
+  text-align: right;
+}
+
+/* Indeterminate animation for bar */
+.muka-progress--bar.muka-progress--indeterminate .muka-progress__fill {
+  width: 40%;
+  animation: muka-progress-bar-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes muka-progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+
+/* ========================================
+   CIRCLE VARIANT
+   ======================================== */
+
+.muka-progress--circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.muka-progress--circle.muka-progress--sm {
+  width: var(--progress-size-circle-diameter-sm);
+  height: var(--progress-size-circle-diameter-sm);
+}
+
+.muka-progress--circle.muka-progress--md {
+  width: var(--progress-size-circle-diameter-md);
+  height: var(--progress-size-circle-diameter-md);
+}
+
+.muka-progress--circle.muka-progress--lg {
+  width: var(--progress-size-circle-diameter-lg);
+  height: var(--progress-size-circle-diameter-lg);
+}
+
+.muka-progress__circle {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.muka-progress--circle .muka-progress__track {
+  fill: none;
+  stroke: var(--color-surface-level1);
+}
+
+.muka-progress--circle.muka-progress--sm .muka-progress__track,
+.muka-progress--circle.muka-progress--sm .muka-progress__fill {
+  stroke-width: var(--progress-size-circle-strokeWidth-sm);
+}
+
+.muka-progress--circle.muka-progress--md .muka-progress__track,
+.muka-progress--circle.muka-progress--md .muka-progress__fill {
+  stroke-width: var(--progress-size-circle-strokeWidth-md);
+}
+
+.muka-progress--circle.muka-progress--lg .muka-progress__track,
+.muka-progress--circle.muka-progress--lg .muka-progress__fill {
+  stroke-width: var(--progress-size-circle-strokeWidth-lg);
+}
+
+.muka-progress--circle .muka-progress__fill {
+  fill: none;
+  stroke: var(--color-action-default);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.muka-progress--circle .muka-progress__label {
+  position: absolute;
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-progress--circle.muka-progress--sm .muka-progress__label {
+  font-size: var(--text-label-sm-semibold-fontSize);
+}
+
+.muka-progress--circle.muka-progress--md .muka-progress__label {
+  font-size: var(--text-label-md-semibold-fontSize);
+}
+
+.muka-progress--circle.muka-progress--lg .muka-progress__label {
+  font-size: var(--text-label-lg-semibold-fontSize);
+}
+
+/* Indeterminate animation for circle */
+.muka-progress--circle.muka-progress--indeterminate .muka-progress__circle {
+  animation: muka-progress-circle-rotate 2s linear infinite;
+}
+
+.muka-progress--circle.muka-progress--indeterminate .muka-progress__fill {
+  animation: muka-progress-circle-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes muka-progress-circle-rotate {
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes muka-progress-circle-dash {
+  0% {
+    stroke-dashoffset: 220;
+  }
+  50% {
+    stroke-dashoffset: 70;
+  }
+  100% {
+    stroke-dashoffset: 220;
+  }
+}

package/dist/styles/components/PullToRefresh.css

@@ -0,0 +1,44 @@
+/* PullToRefresh Component Styles */
+
+.muka-pull-to-refresh {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.muka-pull-to-refresh__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.muka-pull-to-refresh__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.16s ease;
+}
+
+.muka-pull-to-refresh__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+  will-change: transform;
+}

package/dist/styles/components/Radio.css

@@ -0,0 +1,141 @@
+/* Radio Component Styles - Using Muka Design Tokens */
+
+/* Wrapper - clickable label container */
+.muka-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Control container */
+.muka-radio__control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Hidden native input */
+.muka-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Visual indicator (circle) */
+.muka-radio__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--radio-size-default);
+  height: var(--radio-size-default);
+  border-radius: var(--border-radius-full);
+  background-color: var(--radio-color-default-background);
+  border: var(--border-width-regular) solid var(--radio-color-default-border);
+  transition: all 0.15s ease;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.15);
+}
+
+/* Size variants */
+.muka-radio--sm .muka-radio__indicator {
+  width: var(--radio-size-sm);
+  height: var(--radio-size-sm);
+}
+
+.muka-radio--lg .muka-radio__indicator {
+  width: var(--radio-size-lg);
+  height: var(--radio-size-lg);
+}
+
+/* Inner dot (shown when checked) */
+.muka-radio__dot {
+  width: var(--radio-dot-size-default);
+  height: var(--radio-dot-size-default);
+  border-radius: var(--border-radius-full);
+  background-color: var(--radio-color-default-dot);
+  transform: scale(0);
+  transition: transform 0.15s ease;
+}
+
+.muka-radio--sm .muka-radio__dot {
+  width: var(--radio-dot-size-sm);
+  height: var(--radio-dot-size-sm);
+}
+
+.muka-radio--lg .muka-radio__dot {
+  width: var(--radio-dot-size-lg);
+  height: var(--radio-dot-size-lg);
+}
+
+/* Hover state - removed per design */
+
+/* Focus state */
+.muka-radio__input:focus-visible + .muka-radio__indicator {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Checked state */
+.muka-radio__input:checked + .muka-radio__indicator {
+  background-color: var(--radio-color-checked-background);
+  border-width: var(--border-width-bold);
+  border-color: var(--radio-color-checked-border);
+  box-shadow: none;
+}
+
+.muka-radio__input:checked + .muka-radio__indicator .muka-radio__dot {
+  background-color: var(--radio-color-checked-dot);
+  transform: scale(1);
+}
+
+/* Disabled state */
+.muka-radio--disabled .muka-radio__indicator {
+  background-color: var(--radio-color-disabled-background);
+  border-color: var(--radio-color-disabled-border);
+  box-shadow: none;
+}
+
+.muka-radio__input:disabled:checked + .muka-radio__indicator .muka-radio__dot {
+  background-color: var(--radio-color-disabled-dot);
+}
+
+/* Label text */
+.muka-radio__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);
+}
+
+.muka-radio--sm .muka-radio__label {
+  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);
+}
+
+.muka-radio--lg .muka-radio__label {
+  font-family: var(--text-label-xl-regular-fontFamily);
+  font-weight: var(--text-label-xl-regular-fontWeight);
+  font-size: var(--text-label-xl-regular-fontSize);
+  line-height: var(--text-label-xl-regular-lineHeight);
+}
+
+.muka-radio--disabled .muka-radio__label {
+  color: var(--color-text-subtle-default);
+}

package/dist/styles/components/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);
+}