@revikornmann/muka-ui 0.2.1

package/dist/styles/components/Tile.css

@@ -0,0 +1,358 @@
+/* Tile Component Styles - Using Muka Design Tokens */
+
+/* ─── Base ────────────────────────────────────────────── */
+
+.muka-tile {
+  display: flex;
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-tile--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-lg);
+}
+
+/* ─── Image position variants ─────────────────────────── */
+
+.muka-tile--image-top {
+  flex-direction: column;
+}
+
+.muka-tile--image-left {
+  flex-direction: row;
+}
+
+.muka-tile--image-right {
+  flex-direction: row;
+}
+
+/* ─── Gap by size (top) ───────────────────────────────── */
+
+.muka-tile--image-top.muka-tile--lg {
+  gap: var(--spacing-6);
+}
+
+.muka-tile--image-top.muka-tile--md {
+  gap: var(--spacing-6);
+  width: 320px;
+}
+
+.muka-tile--image-top.muka-tile--sm {
+  gap: var(--spacing-4);
+  min-width: 120px;
+}
+
+/* ─── Gap by size (left/right) ────────────────────────── */
+
+.muka-tile--image-left.muka-tile--lg,
+.muka-tile--image-right.muka-tile--lg {
+  gap: var(--spacing-6);
+  align-items: center;
+}
+
+.muka-tile--image-left.muka-tile--md,
+.muka-tile--image-right.muka-tile--md {
+  gap: var(--spacing-6);
+  align-items: center;
+}
+
+.muka-tile--image-left.muka-tile--sm,
+.muka-tile--image-right.muka-tile--sm {
+  gap: var(--spacing-4);
+  align-items: flex-start;
+}
+
+/* ─── Photos container ────────────────────────────────── */
+
+.muka-tile__photos {
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+}
+
+/* Photos border radius by size */
+.muka-tile--lg .muka-tile__photos,
+.muka-tile--md .muka-tile__photos {
+  border-radius: var(--border-radius-lg);
+}
+
+.muka-tile--sm .muka-tile__photos {
+  border-radius: var(--border-radius-md);
+}
+
+/* Photos sizing: top layout */
+.muka-tile--image-top .muka-tile__photos {
+  width: 100%;
+}
+
+/* Photos sizing: left/right large */
+.muka-tile--image-left.muka-tile--lg .muka-tile__photos,
+.muka-tile--image-right.muka-tile--lg .muka-tile__photos {
+  width: 520px;
+}
+
+/* Photos sizing: left/right medium */
+.muka-tile--image-left.muka-tile--md .muka-tile__photos,
+.muka-tile--image-right.muka-tile--md .muka-tile__photos {
+  width: 320px;
+}
+
+/* Photos sizing: left/right small (single 80x80 thumbnail) */
+.muka-tile--image-left.muka-tile--sm .muka-tile__photos,
+.muka-tile--image-right.muka-tile--sm .muka-tile__photos {
+  width: 80px;
+  align-self: stretch;
+}
+
+/* ─── Main photo ──────────────────────────────────────── */
+
+.muka-tile__photo-main {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* 16:9 aspect for lg and md */
+.muka-tile--lg .muka-tile__photo-main,
+.muka-tile--md .muka-tile__photo-main {
+  aspect-ratio: 1280 / 720;
+}
+
+/* 1:1 aspect for top + sm */
+.muka-tile--image-top.muka-tile--sm .muka-tile__photo-main {
+  aspect-ratio: 1 / 1;
+}
+
+/* Fixed size for left/right + sm */
+.muka-tile--image-left.muka-tile--sm .muka-tile__photo-main,
+.muka-tile--image-right.muka-tile--sm .muka-tile__photo-main {
+  width: 80px;
+  height: 80px;
+  aspect-ratio: auto;
+}
+
+.muka-tile__photo-main img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ─── Favourite overlay ───────────────────────────────── */
+
+.muka-tile__favourite {
+  position: absolute;
+  z-index: 3;
+}
+
+.muka-tile--lg .muka-tile__favourite,
+.muka-tile--md .muka-tile__favourite {
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.muka-tile--image-top.muka-tile--sm .muka-tile__favourite {
+  top: var(--spacing-1);
+  right: var(--spacing-1);
+}
+
+/* ─── Thumbnails ──────────────────────────────────────── */
+
+.muka-tile__thumbnails {
+  display: flex;
+  gap: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+  height: 80px;
+}
+
+.muka-tile__thumbnail {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.muka-tile__thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Gap between main photo and thumbnails */
+.muka-tile__photos > .muka-tile__photo-main + .muka-tile__thumbnails {
+  margin-top: 2px;
+}
+
+/* ─── Content section ─────────────────────────────────── */
+
+.muka-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Top layout: content has horizontal padding */
+.muka-tile--image-top.muka-tile--lg .muka-tile__content {
+  padding: 0 var(--spacing-3);
+  gap: var(--spacing-1);
+}
+
+.muka-tile--image-top.muka-tile--md .muka-tile__content {
+  padding: 0 var(--spacing-3);
+  gap: var(--spacing-2);
+}
+
+.muka-tile--image-top.muka-tile--sm .muka-tile__content {
+  gap: var(--spacing-2);
+}
+
+/* Left/right layout: content grows to fill space */
+.muka-tile--image-left .muka-tile__content,
+.muka-tile--image-right .muka-tile__content {
+  gap: var(--spacing-3);
+}
+
+.muka-tile--image-left.muka-tile--lg .muka-tile__content,
+.muka-tile--image-right.muka-tile--lg .muka-tile__content {
+  padding: 0 var(--spacing-3);
+}
+
+.muka-tile--image-left.muka-tile--md .muka-tile__content,
+.muka-tile--image-right.muka-tile--md .muka-tile__content {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.muka-tile--image-left.muka-tile--sm .muka-tile__content,
+.muka-tile--image-right.muka-tile--sm .muka-tile__content {
+  gap: var(--spacing-2);
+}
+
+/* ─── Header (heading row + price) ────────────────────── */
+
+.muka-tile__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+/* Small horizontal: row with text and action */
+.muka-tile--sm:not(.muka-tile--image-top) .muka-tile__header {
+  gap: var(--spacing-2);
+  align-items: center;
+  padding-top: var(--spacing-1);
+}
+
+/* ─── Text group ──────────────────────────────────────── */
+
+.muka-tile__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-2);
+}
+
+/* ─── Heading typography ──────────────────────────────── */
+
+.muka-tile__heading {
+  margin: 0;
+}
+
+.muka-tile--lg .muka-tile__heading {
+  font-family: var(--text-label-2xl-semibold-fontFamily);
+  font-weight: var(--text-label-2xl-semibold-fontWeight);
+  font-size: var(--text-label-2xl-semibold-fontSize);
+  line-height: var(--text-label-2xl-semibold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--md .muka-tile__heading {
+  font-family: var(--text-label-xl-semibold-fontFamily);
+  font-weight: var(--text-label-xl-semibold-fontWeight);
+  font-size: var(--text-label-xl-semibold-fontSize);
+  line-height: var(--text-label-xl-semibold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--sm .muka-tile__heading {
+  font-family: var(--text-label-lg-bold-fontFamily);
+  font-weight: var(--text-label-lg-bold-fontWeight);
+  font-size: var(--text-label-lg-bold-fontSize);
+  line-height: var(--text-label-lg-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Subheading typography ───────────────────────────── */
+
+.muka-tile__subheading {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-tile--lg .muka-tile__subheading {
+  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-subheading-md-lineHeight);
+}
+
+.muka-tile--md .muka-tile__subheading,
+.muka-tile--sm .muka-tile__subheading {
+  font-family: var(--text-subheading-sm-fontFamily);
+  font-weight: var(--text-subheading-sm-fontWeight);
+  font-size: var(--text-subheading-sm-fontSize);
+  line-height: var(--text-subheading-sm-lineHeight);
+}
+
+/* ─── Description typography ──────────────────────────── */
+
+.muka-tile__description {
+  margin: 0;
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--lg .muka-tile__description {
+  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);
+}
+
+.muka-tile--md .muka-tile__description,
+.muka-tile--sm .muka-tile__description {
+  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);
+}
+
+/* Description overflow for medium */
+.muka-tile--md .muka-tile__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Price slot ──────────────────────────────────────── */
+
+.muka-tile__price {
+  flex-shrink: 0;
+}
+
+/* ─── Action slot ─────────────────────────────────────── */
+
+.muka-tile__action {
+  flex-shrink: 0;
+}

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