@auronui/styles 1.0.22 → 1.1.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "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",