@revikornmann/muka-ui 0.25.0 → 0.27.0

package/dist/styles/components/InputCounter.css

@@ -0,0 +1,175 @@
+/* InputCounter — numeric field + joined decrement/increment buttons.
+   Label, helper and error text reuse Input.css (../Input/Input.css).
+   Field and button group share one radius per size:
+   sm/md → input.field.radius.md, lg → input.field.radius.lg. */
+
+.muka-inputcounter {
+  --muka-inputcounter-radius: var(--input-field-radius-md);
+  --muka-inputcounter-height: var(--input-field-height-default);
+  --muka-inputcounter-pad: calc(var(--spacing-2) + var(--spacing-1));
+  --muka-inputcounter-min: var(--size-3xl);
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-inputcounter--sm {
+  --muka-inputcounter-height: var(--input-field-height-sm);
+  --muka-inputcounter-pad: calc(var(--spacing-1) + var(--spacing-1));
+  --muka-inputcounter-min: var(--size-2xl);
+}
+
+.muka-inputcounter--lg {
+  --muka-inputcounter-radius: var(--input-field-radius-lg);
+  --muka-inputcounter-height: var(--input-field-height-lg);
+}
+
+/* Label row — label, info tooltip trigger, optional hint */
+.muka-inputcounter__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-xl);
+}
+
+.muka-inputcounter__info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.muka-inputcounter__info .muka-icon {
+  color: var(--color-action-default);
+}
+
+.muka-inputcounter__info:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-inputcounter__optional {
+  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);
+}
+
+/* Field + button group */
+.muka-inputcounter__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+/* Field — grows with the value (in ch), never narrower than the Figma width.
+   Padding sits on the native input so the 2px focus/error border doesn't
+   need compensating: content is centred in a fixed box. */
+.muka-inputcounter__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--muka-inputcounter-height);
+  width: calc(
+    max(var(--muka-inputcounter-min), calc(var(--muka-inputcounter-chars, 1) * 1ch)) +
+      2 * var(--muka-inputcounter-pad) + 2 * var(--border-width-regular)
+  );
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--muka-inputcounter-radius);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.muka-inputcounter__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--shadow-sunken);
+  pointer-events: none;
+}
+
+.muka-inputcounter__field--focused:not(.muka-inputcounter__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+}
+
+.muka-inputcounter__field--error:not(.muka-inputcounter__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+.muka-inputcounter__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+}
+
+.muka-inputcounter__field--disabled::after {
+  display: none;
+}
+
+.muka-inputcounter__native {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(var(--muka-inputcounter-pad) - var(--border-width-regular));
+  border: none;
+  outline: none;
+  background: transparent;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  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);
+}
+
+.muka-inputcounter--sm .muka-inputcounter__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-inputcounter__field--disabled .muka-inputcounter__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Button group — secondary icon-only Buttons joined by a divider.
+   Only the outer corners are rounded. */
+.muka-inputcounter__group {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.muka-inputcounter__group .muka-button {
+  border-radius: 0;
+}
+
+.muka-inputcounter__group .muka-button:first-child {
+  border-start-start-radius: var(--muka-inputcounter-radius);
+  border-end-start-radius: var(--muka-inputcounter-radius);
+}
+
+.muka-inputcounter__group .muka-button:last-child {
+  border-start-end-radius: var(--muka-inputcounter-radius);
+  border-end-end-radius: var(--muka-inputcounter-radius);
+}
+
+.muka-inputcounter__divider {
+  flex: none;
+  width: var(--border-width-regular);
+  background-color: var(--color-border-default);
+}

package/dist/styles/components/Tabs.css

@@ -28,12 +28,17 @@
   border-bottom: 1px solid var(--tabs-trigger-color-default-border);
 }
 
+/* Padding: inset the tabs; the divider (border) still spans the full width */
+.muka-tabs--padding-default .muka-tabs__list {
+  padding-inline: var(--tabs-list-padding-x);
+}
+
 /* Tab Trigger — clean underline style */
 .muka-tabs__trigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-2, 8px);
+  gap: var(--spacing-1);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -46,8 +51,8 @@
   color: var(--tabs-trigger-color-default-foreground);
 
   /* Default MD size values */
-  height: 48px;
-  padding: 0 var(--spacing-3, 12px);
+  min-height: var(--tabs-trigger-min-height-md);
+  padding: var(--spacing-3);
   font-family: var(--text-label-md-regular-fontFamily);
   font-weight: var(--text-label-md-regular-fontWeight);
   font-size: var(--text-label-md-regular-fontSize);
@@ -56,8 +61,8 @@
 
 /* Size Variants */
 .muka-tabs--size-sm .muka-tabs__trigger {
-  height: 36px;
-  padding: 0 var(--spacing-2, 8px);
+  min-height: var(--tabs-trigger-min-height-sm);
+  padding: 0 var(--spacing-2);
   font-family: var(--text-label-sm-regular-fontFamily);
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
@@ -65,8 +70,8 @@
 }
 
 .muka-tabs--size-lg .muka-tabs__trigger {
-  height: 56px;
-  padding: 0 var(--spacing-4, 16px);
+  min-height: var(--tabs-trigger-min-height-lg);
+  padding: var(--spacing-4);
   font-family: var(--text-label-lg-regular-fontFamily);
   font-weight: var(--text-label-lg-regular-fontWeight);
   font-size: var(--text-label-lg-regular-fontSize);
@@ -90,8 +95,8 @@
   bottom: -1px; /* Overlap the 1px border */
   left: 0;
   right: 0;
-  height: 3px;
-  background-color: var(--tabs-trigger-color-current-foreground);
+  height: var(--tabs-indicator-height-md);
+  background-color: var(--tabs-indicator-color);
   border-bottom-left-radius: 1px;
   border-bottom-right-radius: 1px;
   border-top-left-radius: 3px;
@@ -99,6 +104,13 @@
   z-index: 3;
 }
 
+.muka-tabs--size-sm .muka-tabs__trigger--current::after {
+  height: var(--tabs-indicator-height-sm);
+}
+.muka-tabs--size-lg .muka-tabs__trigger--current::after {
+  height: var(--tabs-indicator-height-lg);
+}
+
 .muka-tabs__trigger--disabled {
   color: var(--tabs-trigger-color-disabled-foreground);
   cursor: not-allowed;
@@ -109,18 +121,29 @@
   outline-offset: -2px;
 }
 
-/* Icons */
-.muka-tabs__icon {
+/* Label: Figma pads the label 8px either side, so with the 4px gap a leading
+   item sits 12px from the text */
+.muka-tabs__label {
+  padding: 0 var(--spacing-2);
+}
+
+/* Leading item: icon, avatar, avatar group or data pie chart */
+.muka-tabs__leading {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 .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; }
+/* Icon sizes only: avatars and pie charts are sized through their size prop */
+.muka-tabs--size-sm .muka-tabs__leading > svg,
+.muka-tabs--size-sm .muka-tabs__leading > .muka-icon svg { width: 16px; height: 16px; }
+.muka-tabs--size-md .muka-tabs__leading > svg,
+.muka-tabs--size-md .muka-tabs__leading > .muka-icon svg { width: 20px; height: 20px; }
+.muka-tabs--size-lg .muka-tabs__leading > svg,
+.muka-tabs--size-lg .muka-tabs__leading > .muka-icon svg { width: 24px; height: 24px; }
 
 /* Responsive Scroll behavior on small screens */
 @media (max-width: 768px) {