@revikornmann/muka-ui 0.2.1

package/dist/styles/components/Select.css

@@ -0,0 +1,191 @@
+/* Select Component Styles - Aligned with Input for consistency */
+
+.muka-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-select--full-width {
+  width: 100%;
+}
+
+/* Label */
+.muka-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-select__label--sm {
+  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);
+}
+
+.muka-select__label--md {
+  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);
+}
+
+.muka-select__label--lg {
+  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-select__required {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-select__label--sm + .muka-select__field--disabled,
+.muka-select__label--md + .muka-select__field--disabled,
+.muka-select__label--lg + .muka-select__field--disabled {
+  cursor: not-allowed;
+}
+
+/* Field container — same as Input: 1px border, radius, padding, inset shadow */
+.muka-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-md);
+  padding: var(--input-field-padding-y) var(--input-field-padding-x);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* Inset shadow — same as Input (single subtle line) */
+.muka-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+/* Size variants — same radius/height as Input */
+.muka-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Hover — no visual change (same as Input) */
+
+/* Focus (active) — same as Input: 2px border, padding compensation */
+.muka-select__field--focused:not(.muka-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Error — same as Input: 2px border, padding compensation */
+.muka-select__field--error:not(.muka-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Disabled — same as Input */
+.muka-select__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
+}
+
+.muka-select__field--disabled::after {
+  display: none;
+}
+
+/* Native select — padding on field so native has 0 + right space for chevron */
+.muka-select__native {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  padding: 0;
+  padding-right: calc(var(--input-field-padding-x) + 1.5rem);
+  cursor: pointer;
+  min-width: 0;
+  width: 100%;
+}
+
+.muka-select__field--sm .muka-select__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-select__field--lg .muka-select__native {
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+.muka-select__field--disabled .muka-select__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Chevron — aligned with field padding */
+.muka-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  right: var(--input-field-padding-x);
+  pointer-events: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-select__field--disabled .muka-select__chevron {
+  color: var(--input-field-color-disabled-foreground);
+}
+
+/* Helper text — same as Input */
+.muka-select__helper {
+  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);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message — same as Input */
+.muka-select__error {
+  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);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}

package/dist/styles/components/Sheet.css

@@ -0,0 +1,77 @@
+/* Sheet Component Styles */
+
+/* ─── Backdrop ────────────────────────────────────────── */
+
+.muka-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-surface-backdrop);
+  z-index: 50;
+}
+
+/* ─── Surface ─────────────────────────────────────────── */
+
+.muka-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 51;
+
+  display: flex;
+  flex-direction: column;
+
+  max-height: 96dvh;
+
+  background-color: var(--color-surface-level3);
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+  box-shadow: var(--shadow-level5);
+
+  outline: none;
+}
+
+/* Safe-area bottom inset for the iPhone home indicator. */
+.muka-sheet:not(.muka-sheet--no-safe-area) {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* ─── Drag handle ─────────────────────────────────────── */
+
+.muka-sheet__handle-container {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-3) 0;
+}
+
+.muka-sheet__handle {
+  width: var(--dialog-drag-handle-width);
+  height: var(--dialog-drag-handle-height);
+  background-color: var(--dialog-drag-handle-color);
+  border-radius: var(--dialog-drag-handle-radius);
+}
+
+/* ─── Body (scrollable) ───────────────────────────────── */
+
+.muka-sheet__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+/* ─── Visually-hidden title (a11y) ────────────────────── */
+
+.muka-sheet__sr-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/styles/components/Skeleton.css

@@ -0,0 +1,72 @@
+/* Skeleton Component Styles */
+
+.muka-skeleton {
+  background-color: var(--color-surface-level1);
+  display: block;
+}
+
+/* Variants */
+.muka-skeleton--text {
+  height: 1em;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+.muka-skeleton--circular {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+}
+
+.muka-skeleton--rectangular {
+  height: 7.5rem;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+/* Last line in multi-line text is shorter */
+.muka-skeleton--last-line {
+  width: 80%;
+}
+
+/* Lines container */
+.muka-skeleton__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Shimmer animation */
+@keyframes muka-skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.muka-skeleton--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-level1) 25%,
+    var(--color-surface-level2) 50%,
+    var(--color-surface-level1) 75%
+  );
+  background-size: 200% 100%;
+  animation: muka-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Pulse animation */
+@keyframes muka-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.muka-skeleton--pulse {
+  animation: muka-skeleton-pulse 1.5s ease-in-out infinite;
+}

package/dist/styles/components/SmsOtpField.css

@@ -0,0 +1,189 @@
+/* SmsOtpField Component Styles - Using Muka Design Tokens */
+
+/* Wrapper */
+.muka-sms-otp-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-sms-otp-field__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-sms-otp-field__label--sm {
+  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);
+}
+
+.muka-sms-otp-field__label--md {
+  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);
+}
+
+.muka-sms-otp-field__label--lg {
+  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-sms-otp-field__required {
+  color: var(--color-state-error-foreground);
+}
+
+/* Hidden input for browser autofill */
+.muka-sms-otp-field__hidden-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Digits container */
+.muka-sms-otp-field__digits {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Separator */
+.muka-sms-otp-field__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  font-size: 1.25rem;
+  padding: 0 var(--spacing-1);
+  user-select: none;
+}
+
+/* Individual digit box */
+.muka-sms-otp-field__digit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  color: var(--input-field-color-default-foreground);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  box-sizing: border-box;
+  caret-color: var(--input-field-color-focus-border);
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove spinner buttons */
+.muka-sms-otp-field__digit::-webkit-inner-spin-button,
+.muka-sms-otp-field__digit::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Size variants */
+.muka-sms-otp-field__digit--sm {
+  width: 36px;
+  height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-sms-otp-field__digit--md {
+  width: 44px;
+  height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-sms-otp-field__digit--lg {
+  width: 52px;
+  height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+/* Inset shadow (matches Input component) */
+.muka-sms-otp-field__digit::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+/* Focus state */
+.muka-sms-otp-field__digit--focused:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  outline: none;
+}
+
+/* Also handle native :focus for keyboard navigation */
+.muka-sms-otp-field__digit:focus {
+  outline: none;
+}
+
+/* Error state */
+.muka-sms-otp-field__digit--error:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+/* Disabled state */
+.muka-sms-otp-field__digit--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Filled state — slightly bolder text */
+.muka-sms-otp-field__digit--filled {
+  color: var(--input-field-color-default-foreground);
+}
+
+/* Helper text */
+.muka-sms-otp-field__helper {
+  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);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message */
+.muka-sms-otp-field__error {
+  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);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}

package/dist/styles/components/SpecList.css

@@ -0,0 +1,69 @@
+/* SpecList Component Styles */
+
+.muka-spec-list {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-surface-level1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ─── Row ─────────────────────────────────────────────── */
+
+.muka-spec-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-spec-row:first-child {
+  border-top: none;
+}
+
+/* ─── Label ───────────────────────────────────────────── */
+
+.muka-spec-row__label {
+  flex: 0 0 auto;
+  min-width: 40%;
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
+}
+
+/* ─── Value ───────────────────────────────────────────── */
+
+.muka-spec-row__value {
+  flex: 1 1 auto;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+  color: var(--color-text-default-default);
+}
+
+.muka-spec-row__value-text {
+  font-family: var(--text-body-md-medium-fontFamily);
+  font-weight: var(--text-body-md-medium-fontWeight);
+  font-size: var(--text-body-md-medium-fontSize);
+  line-height: var(--text-body-md-medium-lineHeight);
+}
+
+.muka-spec-row__hint {
+  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);
+}
+
+/* ─── Compact density ─────────────────────────────────── */
+
+.muka-spec-list--compact .muka-spec-row {
+  padding: var(--spacing-2) var(--spacing-4);
+}

package/dist/styles/components/Spinner.css

@@ -0,0 +1,75 @@
+/* Spinner Component Styles */
+
+.muka-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-default-default);
+  line-height: 0;
+}
+
+.muka-spinner--subtle {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-spinner--inverse {
+  color: var(--color-text-inverse-default);
+}
+
+.muka-spinner__circle {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+  animation: muka-spinner-rotate 0.7s linear infinite;
+  box-sizing: border-box;
+}
+
+/* ─── Sizes ───────────────────────────────────────────── */
+
+.muka-spinner--sm .muka-spinner__circle {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.muka-spinner--md .muka-spinner__circle {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.muka-spinner--lg .muka-spinner__circle {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
+/* ─── Visually-hidden label ───────────────────────────── */
+
+.muka-spinner__sr-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+
+@keyframes muka-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-spinner__circle {
+    animation-duration: 2.5s;
+  }
+}