@revikornmann/muka-ui 0.2.1

package/dist/styles/components/SwipeActions.css

@@ -0,0 +1,105 @@
+/* SwipeActions Component Styles */
+
+.muka-swipe-actions {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: var(--color-surface-level3);
+}
+
+.muka-swipe-actions--disabled {
+  touch-action: auto;
+}
+
+/* ─── Row that holds the actual content ────────────────── */
+
+.muka-swipe-actions__row {
+  position: relative;
+  z-index: 1;
+  background-color: inherit;
+  will-change: transform;
+}
+
+/* ─── Action panels — sit beneath the row ──────────────── */
+
+.muka-swipe-actions__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: stretch;
+  z-index: 0;
+}
+
+.muka-swipe-actions__panel--left {
+  left: 0;
+}
+
+.muka-swipe-actions__panel--right {
+  right: 0;
+}
+
+/* ─── Single action button ─────────────────────────────── */
+
+.muka-swipe-actions__button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-2);
+  background-color: var(--color-surface-level2);
+  color: var(--color-text-default-default);
+  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);
+  -webkit-tap-highlight-color: transparent;
+  transition: filter 0.12s ease;
+}
+
+.muka-swipe-actions__button:hover {
+  filter: brightness(0.95);
+}
+
+.muka-swipe-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+.muka-swipe-actions__button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Color variants ───────────────────────────────────── */
+
+.muka-swipe-actions__button--neutral {
+  background-color: var(--color-surface-level2);
+  color: var(--color-text-default-default);
+}
+
+.muka-swipe-actions__button--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-inverse-default, #fff);
+}
+
+.muka-swipe-actions__button--success {
+  background-color: var(--color-state-success-default, var(--color-action-default));
+  color: var(--color-text-inverse-default, #fff);
+}
+
+.muka-swipe-actions__button--warning {
+  background-color: var(--color-state-warning-default, var(--color-action-default));
+  color: var(--color-text-default-default);
+}
+
+.muka-swipe-actions__button--destructive {
+  background-color: var(--color-state-error-default, #c0392b);
+  color: var(--color-text-inverse-default, #fff);
+}

package/dist/styles/components/Table.css

@@ -0,0 +1,173 @@
+/* Table Component Styles - Using Muka Design Tokens */
+
+/* ========================================
+   TABLE WRAPPER (Responsive)
+   ======================================== */
+
+.muka-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ========================================
+   TABLE BASE
+   ======================================== */
+
+.muka-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  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);
+  background-color: var(--color-surface-level3);
+}
+
+.muka-table--fixed {
+  table-layout: fixed;
+}
+
+.muka-table__caption {
+  padding: var(--spacing-3);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  text-align: left;
+  color: var(--color-text-default-default);
+  caption-side: top;
+}
+
+/* ========================================
+   TABLE HEAD
+   ======================================== */
+
+.muka-table__head {
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-table__head .muka-table__row {
+  background-color: var(--color-surface-level0);
+}
+
+/* ========================================
+   TABLE BODY
+   ======================================== */
+
+.muka-table__body .muka-table__row {
+  border-bottom: var(--border-width-regular) solid var(--color-border-subtle);
+}
+
+.muka-table__body .muka-table__row:last-child {
+  border-bottom: none;
+}
+
+.muka-table__body .muka-table__row:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-table__body .muka-table__row--selected {
+  background-color: var(--table-row-selected-background, var(--color-action-background));
+}
+
+.muka-table__body .muka-table__row--selected:hover {
+  background-color: var(--table-row-selected-background, var(--color-action-background));
+}
+
+.muka-table__row--clickable {
+  cursor: pointer;
+}
+
+/* ========================================
+   TABLE CELLS
+   ======================================== */
+
+.muka-table__cell,
+.muka-table__header-cell {
+  vertical-align: middle;
+}
+
+/* Size: Small */
+.muka-table--sm .muka-table__cell,
+.muka-table--sm .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-sm) var(--table-cell-padding-x-sm);
+}
+
+/* Size: Medium */
+.muka-table--md .muka-table__cell,
+.muka-table--md .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-md) var(--table-cell-padding-x-md);
+}
+
+/* Size: Large */
+.muka-table--lg .muka-table__cell,
+.muka-table--lg .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-lg) var(--table-cell-padding-x-lg);
+}
+
+/* Alignment */
+.muka-table__cell--left,
+.muka-table__header-cell--left {
+  text-align: left;
+}
+
+.muka-table__cell--center,
+.muka-table__header-cell--center {
+  text-align: center;
+}
+
+.muka-table__cell--right,
+.muka-table__header-cell--right {
+  text-align: right;
+}
+
+/* ========================================
+   HEADER CELLS
+   ======================================== */
+
+.muka-table__header-cell {
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+  white-space: nowrap;
+}
+
+.muka-table__header-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+/* Sortable */
+.muka-table__header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-table__header-cell--sortable:hover {
+  color: var(--color-text-default-default);
+}
+
+.muka-table__header-cell--sortable:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+/* Sort icon */
+.muka-table__sort-icon {
+  width: 1em;
+  height: 1em;
+  opacity: 0.4;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.muka-table__header-cell--sortable:hover .muka-table__sort-icon {
+  opacity: 0.7;
+}
+
+.muka-table__sort-icon--asc,
+.muka-table__sort-icon--desc {
+  opacity: 1;
+}

package/dist/styles/components/Tabs.css

@@ -0,0 +1,164 @@
+/* Tabs Component Styles - Clean underline style tabs matching Figma */
+
+.muka-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Alignment Variants */
+.muka-tabs--align-left .muka-tabs__list {
+  justify-content: flex-start;
+}
+.muka-tabs--align-center .muka-tabs__list {
+  justify-content: center;
+}
+.muka-tabs--align-fill .muka-tabs__list {
+  justify-content: space-between;
+}
+.muka-tabs--align-fill .muka-tabs__trigger {
+  flex: 1;
+}
+
+/* Tab List — strip container */
+.muka-tabs__list {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  border-bottom: 1px solid var(--color-border-default, #e0e0e0);
+}
+
+/* Tab Trigger — clean underline style */
+.muka-tabs__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2, 8px);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  outline: none;
+  white-space: nowrap;
+  position: relative;
+  z-index: 2;
+  color: var(--color-text-subtle-default, #838383);
+
+  /* Default MD size values */
+  height: 48px;
+  padding: 0 var(--spacing-3, 12px);
+  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);
+}
+
+/* Size Variants */
+.muka-tabs--size-sm .muka-tabs__trigger {
+  height: 36px;
+  padding: 0 var(--spacing-2, 8px);
+  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);
+}
+
+.muka-tabs--size-lg .muka-tabs__trigger {
+  height: 56px;
+  padding: 0 var(--spacing-4, 16px);
+  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);
+}
+
+/* Hover state */
+.muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
+  color: var(--color-text-neutral-default, #202020);
+}
+
+/* Current tab */
+.muka-tabs__trigger--current {
+  color: var(--color-text-action-default, #202020);
+}
+
+/* Active bottom border (underline) */
+.muka-tabs__trigger--current::after {
+  content: '';
+  position: absolute;
+  bottom: -1px; /* Overlap the 1px border */
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: var(--color-text-action-default, #202020);
+  border-bottom-left-radius: 1px;
+  border-bottom-right-radius: 1px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  z-index: 3;
+}
+
+.muka-tabs__trigger--disabled {
+  color: var(--color-text-disabled-foreground, #a0a0a0);
+  cursor: not-allowed;
+}
+
+.muka-tabs__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* Icons */
+.muka-tabs__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.muka-tabs__trigger .muka-icon {
+  color: inherit;
+}
+.muka-tabs--size-sm .muka-tabs__icon svg { width: 16px; height: 16px; }
+.muka-tabs--size-md .muka-tabs__icon svg { width: 20px; height: 20px; }
+.muka-tabs--size-lg .muka-tabs__icon svg { width: 24px; height: 24px; }
+
+/* Responsive Scroll behavior on small screens */
+@media (max-width: 768px) {
+  .muka-tabs__list {
+    /* Make scrollable */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Force left alignment on mobile to prevent clipping when scrolling */
+    justify-content: flex-start !important;
+    max-width: 100vw;
+    -webkit-overflow-scrolling: touch;
+    /* Hide scrollbar for cleaner look */
+    scrollbar-width: none;
+  }
+  .muka-tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+  /* Remove flex: 1 behavior for Fill tabs on mobile so they map correctly */
+  .muka-tabs--align-fill .muka-tabs__trigger {
+    flex: 0 0 auto;
+  }
+}
+
+/* Tab Panel — content area */
+.muka-tabs__panel {
+  background-color: var(--tabs-panel-background);
+  /* border-top: var(--border-width-regular) solid var(--tabs-panel-border); removed in favor of the new tablist border */
+  border-bottom: var(--border-width-regular) solid var(--tabs-panel-border);
+  padding: var(--spacing-4);
+  position: relative;
+  z-index: 1;
+  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);
+}
+
+.muka-tabs__panel:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}

package/dist/styles/components/Textarea.css

@@ -0,0 +1,161 @@
+/* Textarea Component Styles - Using Muka Design Tokens */
+
+.muka-textarea {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-textarea__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-textarea__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-textarea__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-textarea__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-textarea__required {
+  color: var(--color-state-error-foreground);
+}
+
+/* Field container */
+.muka-textarea__field {
+  display: flex;
+  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;
+  box-sizing: border-box;
+}
+
+.muka-textarea__field--sm {
+  min-height: var(--input-textarea-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-textarea__field--md {
+  min-height: var(--input-textarea-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-textarea__field--lg {
+  min-height: var(--input-textarea-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Focus state */
+.muka-textarea__field--focused:not(.muka-textarea__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 state */
+.muka-textarea__field--error:not(.muka-textarea__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 state */
+.muka-textarea__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
+}
+
+/* Native textarea */
+.muka-textarea__native {
+  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;
+  width: 100%;
+  min-width: 0;
+}
+
+.muka-textarea__field--sm .muka-textarea__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-textarea__field--lg .muka-textarea__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-textarea__native::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-textarea__field--disabled .muka-textarea__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Footer (helper/error + count) */
+.muka-textarea__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.muka-textarea__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;
+}
+
+.muka-textarea__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;
+}
+
+.muka-textarea__count {
+  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-left: auto;
+}