@auronui/styles 1.1.0 → 1.2.0

package/components/checkbox-group.css

@@ -5,3 +5,21 @@
     @apply mt-4;
   }
 }
+
+.checkbox-group__label {
+  @apply text-sm font-medium text-foreground;
+}
+
+.checkbox-group[aria-invalid="true"] .checkbox-group__label {
+  color: var(--color-danger);
+}
+
+.checkbox-group__description {
+  @apply text-xs mt-1;
+  color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+}
+
+.checkbox-group__error-message {
+  @apply text-xs mt-1;
+  color: var(--color-danger);
+}

package/components/checkbox.css

@@ -17,12 +17,8 @@
     @apply items-start;
   }
 
-  [data-slot="label"] {
-    @apply select-none;
-  }
-
-  [data-slot="description"] {
-    @apply text-wrap select-none;
+  .checkbox__content {
+    @apply text-sm select-none;
   }
 
   /* Disabled state */
@@ -55,6 +51,11 @@
     transition: stroke-dashoffset 300ms linear 300ms;
   }
 
+  /* Invalid: label color */
+  &[aria-invalid="true"] .checkbox__content {
+    color: var(--color-danger);
+  }
+
   /* Invalid + Selected: checkmark icon color */
   &[aria-invalid="true"][data-state="checked"] [data-slot="checkbox-default-indicator--checkmark"],
   &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"],

package/components/date-input.css

@@ -437,7 +437,7 @@
 }
 
 /* Invalid state — label color flips to danger */
-.date-input--label-inside[data-invalid="true"] .date-input__label {
+.date-input--label-inside.date-input--invalid .date-input__label {
   color: var(--color-danger);
 }
 

package/components/date-range-field.css

@@ -270,6 +270,10 @@
   gap: 0.05rem;
 }
 
+.date-range-field__segment-list[data-type="end"] {
+  flex: 1;
+}
+
 .date-range-field__separator {
   @apply inline-flex items-center justify-center shrink-0 select-none px-1;
   color: var(--color-field-placeholder);
@@ -446,7 +450,7 @@
 }
 
 /* Invalid state — label color flips to danger */
-.date-range-field--label-inside[data-invalid="true"] .date-range-field__label {
+.date-range-field--label-inside.date-range-field--invalid .date-range-field__label {
   color: var(--color-danger);
 }
 

package/components/input.css

@@ -305,7 +305,7 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .input__input {
-  @apply flex-1 bg-transparent outline-none border-0 text-inherit;
+  @apply flex-1 bg-transparent outline-none border-0 text-inherit !min-w-4;
   @apply placeholder:text-field-placeholder;
   align-self: stretch;
   padding: 0.5rem 0.75rem;
@@ -349,6 +349,11 @@
   @apply size-4;
 }
 
+.input--sm .input__start-content svg,
+.input--sm .input__end-content svg {
+  @apply size-3.5;
+}
+
 /* ─── Label slot ─────────────────────────────────────────────────────────────── */
 
 .input__label {
@@ -482,7 +487,7 @@
 }
 
 /* Invalid state — label color flips to danger */
-.input--label-inside[data-invalid="true"] .input__label {
+.input--label-inside.input--invalid .input__label {
   color: var(--color-danger);
 }
 
@@ -494,6 +499,10 @@
   gap: 0.375rem;
 }
 
+.input-root--sm {
+  gap: 0.25rem;
+}
+
 .input-root--full-width {
   @apply w-full;
 }
@@ -504,6 +513,10 @@
   gap: 0.75rem;
 }
 
+.input-root--sm.input-root--label-outside-left {
+  gap: 0.5rem;
+}
+
 .input__main-wrapper {
   display: flex;
   flex-direction: column;
@@ -525,6 +538,17 @@
   color: var(--color-foreground);
 }
 
+/* Scale outside label font with size variant */
+.input-root--sm.input-root--label-outside > .input__label,
+.input-root--sm.input-root--label-outside-left > .input__label {
+  font-size: var(--text-xs);
+}
+
+.input-root--lg.input-root--label-outside > .input__label,
+.input-root--lg.input-root--label-outside-left > .input__label {
+  font-size: var(--text-base);
+}
+
 /* Align outside-left label with input text baseline; defaults tuned for md. */
 .input-root--label-outside-left > .input__label {
   padding-top: 0.5rem;
@@ -532,6 +556,15 @@
   flex-shrink: 0;
 }
 
+/* Adjust outside-left label vertical alignment for sm/lg input heights */
+.input-root--sm.input-root--label-outside-left > .input__label {
+  padding-top: 0.3rem;
+}
+
+.input-root--lg.input-root--label-outside-left > .input__label {
+  padding-top: 0.7rem;
+}
+
 .input-root--label-outside[data-invalid="true"] > .input__label,
 .input-root--label-outside-left[data-invalid="true"] > .input__label {
   color: var(--color-danger);

package/components/popover.css

@@ -10,20 +10,20 @@
   &[data-state="open"] {
     @apply animate-in duration-300 ease-smooth fade-in-0 zoom-in-90;
 
-    /* Placement-specific translations */
-    &[data-placement="top"] {
+    /* Placement-specific translations (Reka sets data-side, not data-placement) */
+    &[data-side="top"] {
       @apply slide-in-from-bottom-1;
     }
 
-    &[data-placement="bottom"] {
+    &[data-side="bottom"] {
       @apply slide-in-from-top-1;
     }
 
-    &[data-placement="left"] {
+    &[data-side="left"] {
       @apply slide-in-from-right-1;
     }
 
-    &[data-placement="right"] {
+    &[data-side="right"] {
       @apply slide-in-from-left-1;
     }
   }
@@ -43,16 +43,16 @@
     fill: var(--overlay);
   }
 
-  /* Arrow rotation based on placement */
-  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+  /* Arrow rotation based on placement (Reka sets data-side, not data-placement) */
+  &[data-side="bottom"] [data-slot="popover-overlay-arrow"] {
     rotate: 180deg;
   }
 
-  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+  &[data-side="left"] [data-slot="popover-overlay-arrow"] {
     rotate: -90deg;
   }
 
-  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+  &[data-side="right"] [data-slot="popover-overlay-arrow"] {
     rotate: 90deg;
   }
 }

package/components/radio-group.css

@@ -1,3 +1,21 @@
+.radio-group__label {
+  @apply text-sm font-medium text-foreground;
+}
+
+.radio-group[aria-invalid="true"] .radio-group__label {
+  color: var(--color-danger);
+}
+
+.radio-group__description {
+  @apply text-xs mt-1;
+  color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+}
+
+.radio-group__error-message {
+  @apply text-xs mt-1;
+  color: var(--color-danger);
+}
+
 /* Radio Group base styles */
 .radio-group {
   @apply flex flex-col;

package/components/radio.css

@@ -7,12 +7,8 @@
 
   cursor: var(--cursor-interactive);
 
-  [data-slot="label"] {
-    @apply select-none;
-  }
-
-  [data-slot="description"] {
-    @apply text-wrap select-none;
+  .radio__content {
+    @apply text-sm select-none;
   }
 
   /* Disabled state */
@@ -21,6 +17,11 @@
   &[aria-disabled="true"] {
     @apply status-disabled;
   }
+
+  /* Invalid: label color */
+  &[aria-invalid="true"] .radio__content {
+    color: var(--color-danger);
+  }
 }
 
 /* ==========================================================================

package/components/switch-group.css

@@ -3,6 +3,23 @@
   @apply flex flex-col gap-6;
 }
 
+.switch-group__label {
+  @apply text-sm font-medium text-foreground;
+}
+
+.switch-group[aria-invalid="true"] .switch-group__label {
+  color: var(--color-danger);
+}
+
+.switch-group__description {
+  @apply text-xs text-muted mt-1;
+}
+
+.switch-group__error-message {
+  @apply text-xs mt-1;
+  color: var(--color-danger);
+}
+
 .switch-group__items {
   @apply flex gap-4;
 }

package/components/switch.css

@@ -190,5 +190,16 @@
 
 /* Switch content */
 .switch__content {
-  @apply flex flex-col gap-0;
+  @apply flex flex-col gap-0 text-sm select-none;
+}
+
+/* Invalid: label color */
+.switch[aria-invalid="true"] .switch__content {
+  color: var(--color-danger);
+}
+
+/* Invalid: red outline on unchecked track only; checked track stays accent */
+.switch[aria-invalid="true"]:not([data-state="checked"]):not([aria-checked="true"]) .switch__control {
+  outline: 2px solid var(--color-danger);
+  outline-offset: 1px;
 }

package/components/textarea.css

@@ -439,7 +439,7 @@
 
 /* Invalid state — label color flips to danger */
 .textarea--label-inside:has(> textarea:invalid) .textarea__label,
-.textarea--label-inside[data-invalid="true"] .textarea__label {
+.textarea--label-inside.textarea--invalid .textarea__label {
   color: var(--color-danger);
 }
 

package/components/time-field.css

@@ -438,7 +438,7 @@
 }
 
 /* Invalid state — label color flips to danger */
-.time-field--label-inside[data-invalid="true"] .time-field__label {
+.time-field--label-inside.time-field--invalid .time-field__label {
   color: var(--color-danger);
 }
 

package/components/tooltip.css

@@ -7,22 +7,38 @@
   /* box-shadow: var(--shadow-overlay); */
   will-change: opacity, transform;
 
+  /* Entering animations */
+  &[data-state="delayed-open"],
+  &[data-state="instant-open"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95;
+
+    &[data-side="top"] { @apply slide-in-from-bottom-1; }
+    &[data-side="bottom"] { @apply slide-in-from-top-1; }
+    &[data-side="left"] { @apply slide-in-from-right-1; }
+    &[data-side="right"] { @apply slide-in-from-left-1; }
+  }
+
+  /* Exiting animation */
+  &[data-state="closed"] {
+    @apply animate-out duration-100 ease-smooth fade-out zoom-out-95;
+  }
+
   /* Arrow styling */
   & [data-slot="overlay-arrow"] {
     @apply stroke-border/40;
     fill: var(--overlay);
   }
 
-  /* Arrow rotation based on placement */
-  &[data-placement="bottom"] [data-slot="overlay-arrow"] {
+  /* Arrow rotation based on placement (Reka sets data-side, not data-placement) */
+  &[data-side="bottom"] [data-slot="overlay-arrow"] {
     rotate: 180deg;
   }
 
-  &[data-placement="left"] [data-slot="overlay-arrow"] {
+  &[data-side="left"] [data-slot="overlay-arrow"] {
     rotate: -90deg;
   }
 
-  &[data-placement="right"] [data-slot="overlay-arrow"] {
+  &[data-side="right"] [data-slot="overlay-arrow"] {
     rotate: 90deg;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",

package/src/components/input/input.styles.ts

@@ -37,9 +37,9 @@ export const inputVariants = tv({
       raised:     { inputWrapper: "input--raised" },
     },
     size: {
-      sm: { inputWrapper: "input--sm" },
+      sm: { base: "input-root--sm", inputWrapper: "input--sm" },
       md: {},
-      lg: { inputWrapper: "input--lg" },
+      lg: { base: "input-root--lg", inputWrapper: "input--lg" },
     },
     color: {
       default:   { inputWrapper: "input--default" },