@auronui/styles 1.0.2 → 1.0.4

package/components/autocomplete.css

@@ -301,7 +301,7 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .autocomplete__input {
-  @apply flex-1 bg-transparent outline-none border-0 p-0 h-auto text-inherit;
+  @apply flex-1 bg-transparent outline-none border-0 p-0 h-auto text-inherit w-full min-w-4;
   @apply placeholder:text-field-placeholder;
 
   &:focus,
@@ -360,6 +360,7 @@
 /* Push the input caret/text down so it doesn't sit under the floated label.
    Applied statically (not only in up-state) to keep the input box stable. */
 .autocomplete__trigger--label-inside .autocomplete__input {
+  @apply w-full;
   padding-top: 1rem;
   padding-bottom: 0;
 }
@@ -600,6 +601,19 @@
   }
 }
 
+/* ─── Item text ──────────────────────────────────────────────────────────── */
+
+/* By default, item text truncates with an ellipsis when the dropdown is
+   constrained to the trigger width. The wrapper span is needed because the
+   item itself is a flex row (checkmark + text + end-content). */
+.autocomplete-item__text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ─── Popover (listbox content) ─────────────────────────────────────────── */
 /* Similar to popover content styles */
 .autocomplete__popover {
@@ -682,4 +696,18 @@
   [data-slot="search-field"] {
     @apply px-3 py-1 outline-none;
   }
+
+  /* truncateItems=false: widen the popover to fit full text instead of clipping */
+  &[data-truncate-items="false"] {
+    width: max-content;
+    min-width: var(--trigger-width);
+    max-width: min(90vw, 40rem);
+
+    .autocomplete-item__text {
+      overflow: visible;
+      text-overflow: unset;
+      white-space: nowrap;
+      flex: none;
+    }
+  }
 }

package/components/calendar.css

@@ -194,14 +194,21 @@
     @apply bg-default;
   }
 
-  /* Unavailable dates */
-  &[data-unavailable="true"] {
+  /* Unavailable dates — Reka places data-unavailable="" on the inner CalendarCellTrigger
+     button, not the outer td. Use :has() to match the parent cell when its child trigger
+     carries the attribute (consistent with :has([data-today]) and :has([data-outside-view])
+     patterns used above). */
+  &:has([data-unavailable]) {
     @apply status-disabled;
   }
 
-  /* Disabled state */
+  /* Disabled state — Reka places data-disabled="" on CalendarCell (td) only for
+     isDateDisabled() and disableDaysOutsideCurrentView. For minValue/maxValue out-of-range
+     dates Reka sets data-disabled="" on CalendarCellTrigger (inner button), so we also
+     match via :has() to ensure out-of-range dates are visually disabled. */
   &:disabled:not([data-outside-month="true"]),
-  &[data-disabled]:not([data-outside-month="true"]) {
+  &[data-disabled]:not([data-outside-month="true"]),
+  &:has([data-disabled]):not([data-outside-month="true"]) {
     @apply status-disabled;
 
     text-decoration: line-through;

package/components/date-time-picker.css

@@ -0,0 +1,239 @@
+/* ==========================================================================
+   DateTimePicker — three-step date + time + timezone picker
+   ========================================================================== */
+
+.date-time-picker {
+  @apply inline-flex flex-col gap-1;
+}
+
+.date-time-picker--full-width {
+  @apply w-full;
+}
+
+.date-time-picker--invalid {
+  /* invalid state propagated to child DateInput via isInvalid prop */
+}
+
+.date-time-picker--disabled {
+  @apply opacity-60 cursor-not-allowed pointer-events-none;
+}
+
+/* ─── Trigger (calendar icon button) ─────────────────────────────────────── */
+
+.date-time-picker__trigger {
+  @apply inline-flex items-center justify-center rounded-field p-1 no-highlight bg-transparent border-0 cursor-pointer outline-none shrink-0;
+  color: var(--color-field-placeholder);
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.date-time-picker__trigger-indicator {
+  @apply inline-flex size-4 items-center justify-center text-field-placeholder;
+}
+
+/* ─── Popover shell ───────────────────────────────────────────────────────── */
+
+.date-time-picker__popover {
+  @apply origin-(--trigger-anchor-point) overflow-hidden bg-overlay p-0;
+  min-width: 17rem;
+  box-shadow: var(--shadow-overlay);
+  border-radius: calc(var(--radius) * 2.5);
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  & {
+    @apply animate-in duration-300 ease-smooth fade-in-0 zoom-in-95;
+
+    &[data-placement^="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement^="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement^="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement^="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  &,
+  & {
+    @apply will-change-[opacity,transform];
+  }
+}
+
+/* ─── Step header ─────────────────────────────────────────────────────────── */
+
+.date-time-picker__step-header {
+  @apply flex items-center justify-between px-3 pt-3 pb-1;
+}
+
+.date-time-picker__step-title {
+  @apply flex flex-1 items-center justify-center text-center text-xs font-medium select-none;
+}
+
+.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;
+  }
+}
+
+.date-time-picker__done-label {
+  @apply text-xs font-medium px-1;
+  color: var(--color-accent);
+}
+
+/* ─── Panel wrap (clips sliding panels) ──────────────────────────────────── */
+
+.date-time-picker__panel-wrap {
+  @apply relative overflow-hidden;
+  min-height: 16rem;
+}
+
+/* ─── Time scroller ───────────────────────────────────────────────────────── */
+
+.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;
+  }
+}
+
+.date-time-picker__scroller-column {
+  @apply flex-1 relative z-10;
+  overflow-y: scroll;
+  -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;
+  }
+}
+
+.date-time-picker__scroller-item {
+  scroll-snap-align: center;
+  height: 2.5rem;
+  @apply flex items-center justify-center text-sm select-none cursor-pointer;
+  color: var(--color-muted-foreground);
+  transition: color 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  &[data-selected="true"] {
+    @apply font-medium;
+    color: var(--color-foreground);
+  }
+
+  &[data-disabled="true"] {
+    @apply opacity-40 cursor-not-allowed pointer-events-none;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-selected="true"]) {
+      color: var(--color-foreground);
+    }
+  }
+}
+
+/* ─── Timezone panel ──────────────────────────────────────────────────────── */
+
+.date-time-picker__tz-search {
+  @apply w-full bg-transparent border-0 border-b outline-none px-3 py-2 text-sm;
+  border-color: var(--color-border);
+  color: var(--color-foreground);
+
+  &::placeholder {
+    color: var(--color-field-placeholder);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-field-border-focus);
+  }
+}
+
+.date-time-picker__tz-list {
+  @apply overflow-y-auto p-1;
+  max-height: 14rem;
+  scrollbar-width: thin;
+}
+
+.date-time-picker__tz-item {
+  @apply list-item min-h-8 gap-2 rounded-lg text-sm;
+
+  &[aria-selected="true"] {
+    @apply bg-default font-medium text-foreground;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([aria-selected="true"]) {
+      @apply bg-default-hover;
+    }
+  }
+}

package/components/index.css

@@ -114,6 +114,7 @@
 @import "./time-field.css";
 @import "./date-picker.css";
 @import "./date-range-picker.css";
+@import "./date-time-picker.css";
 
 /* ------------------------------------------------------------------------------------------------
  * Layout

package/components/input.css

@@ -47,7 +47,6 @@
   }
 
   /* Invalid state */
-  &:has(> input:invalid),
   &[data-invalid="true"] {
     @apply status-invalid-field;
     background-color: var(--color-field-focus);
@@ -451,7 +450,6 @@
 }
 
 /* Invalid state — label color flips to danger */
-.input--label-inside:has(> input:invalid) .input__label,
 .input--label-inside[data-invalid="true"] .input__label {
   color: var(--color-danger);
 }

package/package.json

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

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

@@ -0,0 +1,44 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const dateTimePickerVariants = tv({
+  slots: {
+    base: "date-time-picker",
+    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",
+    scrollerWrap: "date-time-picker__scroller-wrap",
+    scrollerColumn: "date-time-picker__scroller-column",
+    scrollerItem: "date-time-picker__scroller-item",
+    tzSearch: "date-time-picker__tz-search",
+    tzList: "date-time-picker__tz-list",
+    tzItem: "date-time-picker__tz-item",
+  },
+  defaultVariants: {
+    isInvalid: false,
+    isDisabled: false,
+    fullWidth: false,
+  },
+  variants: {
+    isInvalid: {
+      true: {base: "date-time-picker--invalid"},
+      false: {},
+    },
+    isDisabled: {
+      true: {base: "date-time-picker--disabled"},
+      false: {},
+    },
+    fullWidth: {
+      true: {base: "date-time-picker--full-width"},
+      false: {},
+    },
+  },
+});
+
+export type DateTimePickerVariants = VariantProps<typeof dateTimePickerVariants>;

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

@@ -0,0 +1 @@
+export * from "./date-time-picker.styles";

package/src/components/index.ts

@@ -28,6 +28,7 @@ export * from "./date-input";
 export * from "./date-picker";
 export * from "./date-range-field";
 export * from "./date-range-picker";
+export * from "./date-time-picker";
 export * from "./description";
 export * from "./drawer";
 export * from "./collapsible";