@auronui/styles 1.0.21 → 1.0.23

package/components/color-slider.css

@@ -53,17 +53,9 @@
   }
 
   .color-slider__track {
-    @apply relative rounded-full;
+    @apply relative;
 
     grid-area: track;
-    /* Edge cap pseudo-elements */
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      z-index: 0;
-      pointer-events: none;
-    }
   }
 
   .color-slider__thumb {
@@ -118,44 +110,12 @@
     flex-direction: column;
 
     .color-slider__track {
-      @apply h-5 justify-self-center rounded-none;
-      width: calc(100% - 1.25rem);
+      @apply h-5 w-full;
 
       /* Default border for visibility against similar backgrounds */
       box-shadow:
         inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
         inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-
-      /* Edge caps for horizontal orientation */
-      &::before,
-      &::after {
-        @apply top-0 h-full;
-        width: 0.625rem; /* Half thumb width + 2px gap */
-      }
-
-      &::before {
-        left: -0.625rem;
-        border-top-left-radius: 999px;
-        border-bottom-left-radius: 999px;
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background:
-          linear-gradient(var(--track-start-color, transparent)),
-          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
-      }
-
-      &::after {
-        right: -0.625rem;
-        border-top-right-radius: 999px;
-        border-bottom-right-radius: 999px;
-        box-shadow:
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background-color: var(--track-end-color, transparent);
-      }
     }
 
     .color-slider__thumb {
@@ -213,46 +173,12 @@
     }
 
     .color-slider__track {
-      @apply w-5 justify-self-center rounded-none;
-      height: calc(100% - 1.25rem);
+      @apply w-5 h-full justify-self-center;
 
       /* Left and right borders for vertical track */
       box-shadow:
         inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
         inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
-
-      /* Edge caps for vertical orientation */
-      &::before,
-      &::after {
-        @apply left-0 w-full;
-        height: 0.625rem; /* Half thumb height + 2px gap */
-      }
-
-      &::before {
-        bottom: -0.625rem;
-        border-bottom-left-radius: 999px;
-        border-bottom-right-radius: 999px;
-        /* Left, right, and bottom borders for bottom cap */
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background:
-          linear-gradient(var(--track-start-color, transparent)),
-          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
-      }
-
-      &::after {
-        top: -0.625rem;
-        border-top-left-radius: 999px;
-        border-top-right-radius: 999px;
-        /* Left, right, and top borders for top cap */
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
-        background-color: var(--track-end-color, transparent);
-      }
     }
 
     .color-slider__thumb {

package/components/date-time-picker.css

@@ -53,7 +53,7 @@
 .date-time-picker__popover {
   z-index: var(--z-popover);
   @apply origin-(--trigger-anchor-point) overflow-hidden bg-overlay p-0;
-  min-width: 17rem;
+  min-width: 24rem;
   box-shadow: var(--shadow-overlay);
   border-radius: calc(var(--radius) * 2.5);
 
@@ -88,107 +88,77 @@
   }
 }
 
-/* ─── Step header ─────────────────────────────────────────────────────────── */
+/* ─── Side-by-side panel (calendar + time) ───────────────────────────────── */
 
-.date-time-picker__step-header {
-  @apply flex items-center justify-between px-3 pt-3 pb-1;
+.date-time-picker__panel {
+  @apply flex items-stretch;
 }
 
-.date-time-picker__step-title {
-  @apply flex flex-1 items-center justify-center text-center text-xs font-medium select-none;
+/* Pad the calendar to match the standalone DatePicker's popover padding (p-3),
+   so the calendar inside the side-by-side panel has the same breathing room. */
+.date-time-picker__calendar-pane {
+  @apply p-3;
 }
 
-.date-time-picker__nav-button {
-  @apply flex size-6 items-center justify-center rounded-full bg-transparent text-accent outline-none no-highlight;
-  appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  padding: 0;
-  cursor: var(--cursor-interactive);
-  will-change: scale;
-  transition:
-    transform 300ms var(--ease-out),
-    background-color 300ms var(--ease-out),
-    box-shadow 300ms var(--ease-out),
-    opacity 300ms var(--ease-out);
-  @apply transform-gpu motion-reduce:transition-none;
-
-  @media (hover: hover) {
-    &:hover {
-      @apply bg-default text-accent;
-    }
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus-visible {
-    @apply status-focused;
-  }
-
-  &[data-hidden="true"] {
-    @apply invisible pointer-events-none;
-  }
+/* Time column = wheels stacked above the Done button. The pane stretches to the
+   calendar height (panel items-stretch); mt-auto pins Done to the bottom so it
+   lines up with the calendar's bottom edge — no full-width footer row needed. */
+.date-time-picker__time-pane {
+  @apply flex flex-col;
 }
 
-.date-time-picker__done-label {
-  @apply text-xs font-medium px-1;
-  color: var(--color-accent);
+.date-time-picker__time-done {
+  @apply flex justify-end px-3 pb-3 pt-1 mt-auto;
 }
 
-/* ─── Panel wrap (clips sliding panels) ──────────────────────────────────── */
-
-.date-time-picker__panel-wrap {
-  @apply relative overflow-hidden;
-  min-height: 16rem;
+.date-time-picker__divider {
+  @apply w-px self-stretch my-3;
+  background-color: var(--color-border);
 }
 
-/* ─── Time scroller ───────────────────────────────────────────────────────── */
+/* ─── Time scroller (infinite circular wheels, tap to select) ─────────────── */
 
 .date-time-picker__scroller-wrap {
-  @apply flex items-stretch justify-center gap-0 px-3 pb-4;
-  position: relative;
-
-  &::before {
-    content: '';
-    @apply absolute inset-x-3 rounded-lg bg-default pointer-events-none;
-    height: 2.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 0;
-  }
+  /* flex-none so it keeps its intrinsic column width and never collapses
+     when sitting next to the calendar in the side-by-side panel.
+     items-center vertically centers the fixed-height wheels against the
+     (usually taller) calendar. */
+  @apply flex flex-none items-center justify-center gap-1 px-3 py-3;
 }
 
 .date-time-picker__scroller-column {
-  @apply flex-1 relative z-10;
-  overflow-y: scroll;
+  /* Fixed width AND a definite height — the height bounds the scroll
+     viewport so the repeated items overflow-scroll instead of expanding
+     the whole popover. ~matches the calendar block height. */
+  @apply flex-none w-12;
+  height: 14rem;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   touch-action: pan-y;
-  scroll-snap-type: y mandatory;
   overscroll-behavior: contain;
-  height: 10rem;
-  padding-top: calc((10rem - 2.5rem) / 2);
-  padding-bottom: calc((10rem - 2.5rem) / 2);
 
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;
   }
+
+  &:focus-visible {
+    @apply outline-none;
+  }
 }
 
 .date-time-picker__scroller-item {
-  scroll-snap-align: center;
   height: 2.5rem;
-  @apply flex items-center justify-center text-sm select-none cursor-pointer;
+  @apply flex items-center justify-center text-sm select-none cursor-pointer rounded-lg;
   color: var(--color-muted-foreground);
-  transition: color 150ms var(--ease-smooth);
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
   &[data-selected="true"] {
-    @apply font-medium;
-    color: var(--color-foreground);
+    @apply bg-accent text-accent-foreground font-medium;
   }
 
   &[data-disabled="true"] {
@@ -197,7 +167,7 @@
 
   @media (hover: hover) {
     &:hover:not([data-selected="true"]) {
-      color: var(--color-foreground);
+      @apply bg-default text-foreground;
     }
   }
 }

package/components/progress-bar.css

@@ -35,8 +35,10 @@
   }
 
   .progress-bar__fill {
-    @apply absolute top-0 left-0 h-full rounded-full w-full;
+    @apply absolute top-0 left-0 h-full rounded-full;
 
+    /* Width is driven by the CSS custom property set from JS */
+    width: var(--progress-bar-value, 0%);
     background-color: var(--progress-bar-fill);
 
     /**
@@ -47,9 +49,10 @@
     @apply motion-reduce:transition-none;
   }
 
-  /* Indeterminate state - when no aria-valuenow is set */
-  .progress-bar__fill[data-state="indeterminate"] {
-    @apply w-2/5;
+  /* Indeterminate state — Reka sets data-state="indeterminate" when modelValue is null */
+  .progress-bar__fill[data-state="indeterminate"],
+  .progress-bar__fill--indeterminate {
+    width: 40%;
 
     animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 
@@ -109,6 +112,14 @@
   --progress-bar-fill: var(--color-default-foreground);
 }
 
+.progress-bar--primary {
+  --progress-bar-fill: var(--color-primary);
+}
+
+.progress-bar--secondary {
+  --progress-bar-fill: var(--color-secondary);
+}
+
 .progress-bar--accent {
   --progress-bar-fill: var(--color-accent);
 }

package/components/slider.css

@@ -27,7 +27,7 @@
   }
 
   .slider__fill {
-    @apply pointer-events-none absolute rounded-full bg-accent;
+    @apply pointer-events-none absolute bg-accent;
   }
 
   .slider__thumb {
@@ -91,7 +91,8 @@
     flex-direction: column;
 
     .slider__track {
-      @apply h-5 w-full overflow-visible;
+      /* overflow-hidden clips the fill to the rounded track shape; thumb is a sibling so it is unaffected */
+      @apply h-5 w-full overflow-hidden;
     }
 
     .slider__fill {
@@ -132,7 +133,7 @@
     }
 
     .slider__track {
-      @apply h-full w-5 overflow-visible;
+      @apply h-full w-5 overflow-hidden;
       justify-self: center;
     }
 

package/package.json

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

package/src/components/date-time-picker/date-time-picker.styles.ts

@@ -8,11 +8,11 @@ export const dateTimePickerVariants = tv({
     popover: "date-time-picker__popover",
     trigger: "date-time-picker__trigger",
     triggerIndicator: "date-time-picker__trigger-indicator",
-    stepHeader: "date-time-picker__step-header",
-    navButton: "date-time-picker__nav-button",
-    stepTitle: "date-time-picker__step-title",
-    doneLabel: "date-time-picker__done-label",
-    panelWrap: "date-time-picker__panel-wrap",
+    panel: "date-time-picker__panel",
+    calendarPane: "date-time-picker__calendar-pane",
+    divider: "date-time-picker__divider",
+    timePane: "date-time-picker__time-pane",
+    timeDone: "date-time-picker__time-done",
     scrollerWrap: "date-time-picker__scroller-wrap",
     scrollerColumn: "date-time-picker__scroller-column",
     scrollerItem: "date-time-picker__scroller-item",

package/src/components/progress-bar/progress-bar.styles.ts

@@ -17,30 +17,30 @@ export const progressBarVariants = tv({
     label: "progress-bar__label text-sm font-medium text-foreground",
     value: "progress-bar__value text-sm font-medium text-foreground",
     track: "progress-bar__track",
-    indicator: "progress-bar__indicator transition-transform duration-300 ease-out",
+    indicator: "progress-bar__fill",
   },
   variants: {
     color: {
       default: {
-        indicator: "bg-default-400 progress-bar--default",
+        base: "progress-bar--default",
       },
       primary: {
-        indicator: "bg-primary progress-bar--primary",
+        base: "progress-bar--primary",
       },
       secondary: {
-        indicator: "bg-secondary progress-bar--secondary",
+        base: "progress-bar--secondary",
       },
       success: {
-        indicator: "bg-success progress-bar--success",
+        base: "progress-bar--success",
       },
       warning: {
-        indicator: "bg-warning progress-bar--warning",
+        base: "progress-bar--warning",
       },
       danger: {
-        indicator: "bg-danger progress-bar--danger",
+        base: "progress-bar--danger",
       },
       accent: {
-        indicator: "bg-primary progress-bar--accent",
+        base: "progress-bar--accent",
       },
     },
     size: {
@@ -78,12 +78,13 @@ export const progressBarVariants = tv({
     },
     isStriped: {
       true: {
-        indicator: "progress-bar__indicator--striped",
+        indicator: "progress-bar__fill--striped",
       },
     },
     isIndeterminate: {
       true: {
-        indicator: "progress-bar__indicator--indeterminate animate-indeterminate",
+        // data-state="indeterminate" (set by Reka) drives the CSS animation
+        indicator: "progress-bar__fill--indeterminate",
       },
     },
     isDisabled: {

package/themes/default/variables.css

@@ -61,6 +61,12 @@
     --default: oklch(94% 0.001 286.375);
     --default-foreground: var(--eclipse);
 
+    --primary: oklch(0.55 0.2 262);
+    --primary-foreground: var(--snow);
+
+    --secondary: oklch(0.55 0.22 305);
+    --secondary-foreground: var(--snow);
+
     --accent: oklch(0.6204 0.195 253.83);
     --accent-foreground: var(--snow);
 

package/themes/shared/theme.css

@@ -17,6 +17,12 @@
 
   --color-muted: var(--muted);
 
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);