@auronui/styles 1.2.2 → 1.4.0

package/components/context-menu.css

@@ -0,0 +1,44 @@
+/* ==========================================================================
+   ContextMenu
+
+   Right-click menu. Item/section-level styling (.menu, .menu-item,
+   .menu-section) is reused directly from the shared Dropdown/menu styles —
+   see menu.css, menu-item.css, menu-section.css. Only content positioning/
+   animation is specific to ContextMenu, adapted verbatim from
+   .dropdown__popover since floating-ui behavior is identical; the only
+   difference between Dropdown and ContextMenu is how each is triggered
+   (click vs. right-click), not how the resulting menu is positioned/styled.
+   ========================================================================== */
+
+.context-menu {
+  @apply contents;
+}
+
+.context-menu__trigger {
+  @apply inline-block;
+}
+
+/* Positioning, sizing, and open/close animations — visuals come from card classes */
+.context-menu__popover {
+  z-index: var(--z-popover);
+  @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain md:min-w-55;
+  @apply will-change-[opacity,transform];
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  &[data-state="open"] {
+    @apply animate-in duration-200 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; }
+  }
+
+  &[data-state="closed"] {
+    @apply animate-out duration-150 ease-smooth zoom-out-95 fade-out;
+  }
+}

package/components/editable.css

@@ -0,0 +1,136 @@
+/* =============================================================================
+ * Editable Component Styles
+ *
+ * Click/double-click-to-edit inline text. Preview state visually matches
+ * Text's base treatment (readable text, no box). Edit state visually matches
+ * Input's field-box treatment (border-field, bg-field, focus ring), applied
+ * directly to the bare <input> element since Editable has no separate
+ * wrapper box the way Input does.
+ * ============================================================================= */
+
+.editable {
+  @apply inline-flex items-center gap-1.5;
+}
+
+.editable__area {
+  @apply relative inline-flex items-center;
+}
+
+/* -----------------------------------------------------------------------------
+ * Preview (read-only text display)
+ * -------------------------------------------------------------------------- */
+.editable__preview {
+  @apply inline-block rounded-md px-1 py-0.5 text-sm text-foreground outline-none;
+  cursor: var(--cursor-interactive);
+
+  transition:
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover {
+      @apply bg-default;
+    }
+  }
+
+  &:focus-visible {
+    @apply status-focused;
+  }
+
+  &[data-empty] {
+    @apply text-muted;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Input (edit-mode field)
+ * -------------------------------------------------------------------------- */
+.editable__input {
+  @apply rounded-field border bg-field px-2 py-0.5 text-sm text-field-foreground shadow-field outline-none;
+
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  transition:
+    background-color 300ms var(--ease-smooth),
+    border-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &:focus {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+
+  &[data-readonly] {
+    background-color: var(--color-default-100);
+    cursor: default;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Triggers (edit / submit / cancel)
+ * -------------------------------------------------------------------------- */
+.editable__edit-trigger,
+.editable__submit-trigger,
+.editable__cancel-trigger {
+  @apply relative isolate inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-default text-muted no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  transition:
+    transform 300ms var(--ease-out-quart),
+    color 300ms var(--ease-out),
+    background-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover {
+      @apply bg-default-hover;
+    }
+  }
+
+  &:active {
+    transform: scale(0.93);
+  }
+
+  &:focus-visible {
+    @apply status-focused;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+
+  & svg {
+    @apply pointer-events-none size-3.5 shrink-0;
+  }
+}
+
+.editable__submit-trigger {
+  @apply text-success;
+
+  @media (hover: hover) {
+    &:hover {
+      @apply bg-success/10;
+    }
+  }
+}
+
+.editable__cancel-trigger {
+  @apply text-danger;
+
+  @media (hover: hover) {
+    &:hover {
+      @apply bg-danger/10;
+    }
+  }
+}

package/components/hover-card.css

@@ -0,0 +1,68 @@
+/* HoverCard component styles */
+
+/* Base hover card styles */
+.hover-card {
+  @apply origin-(--trigger-anchor-point) rounded-3xl bg-overlay p-0 text-sm;
+  z-index: var(--z-popover);
+  box-shadow: var(--shadow-overlay);
+
+  /* Entering animations */
+  &[data-state="open"] {
+    @apply animate-in duration-300 ease-smooth fade-in-0 zoom-in-90;
+
+    /* Placement-specific translations (Reka sets data-side, not data-placement) */
+    &[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 animations */
+  &[data-state="closed"] {
+    @apply animate-out duration-300 ease-smooth zoom-out-95 fade-out;
+  }
+
+  &,
+  & {
+    @apply will-change-[opacity,transform];
+  }
+
+  /* Arrow styling */
+  & [data-slot="hover-card-overlay-arrow"] {
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement (Reka sets data-side, not data-placement) */
+  &[data-side="bottom"] [data-slot="hover-card-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-side="left"] [data-slot="hover-card-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-side="right"] [data-slot="hover-card-overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+.hover-card__trigger {
+  @apply inline-block;
+  cursor: var(--cursor-interactive);
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}

package/components/index.css

@@ -28,6 +28,7 @@
 @import "./collapsible-group.css";
 @import "./collapsible.css";
 @import "./link.css";
+@import "./navigation-menu.css";
 @import "./pagination.css";
 @import "./tabs.css";
 
@@ -43,6 +44,8 @@
 /* ------------------------------------------------------------------------------------------------
  * Collections
  * ------------------------------------------------------------------------------------------------ */
+@import "./context-menu.css";
+@import "./menubar.css";
 @import "./dropdown.css";
 @import "./list-box-item.css";
 @import "./list-box-section.css";
@@ -95,6 +98,7 @@
  * ------------------------------------------------------------------------------------------------ */
 @import "./checkbox-group.css";
 @import "./checkbox.css";
+@import "./editable.css";
 @import "./fieldset.css";
 @import "./input-otp.css";
 @import "./input.css";
@@ -108,10 +112,14 @@
 * ------------------------------------------------------------------------------------------------ */
 @import "./calendar.css";
 @import "./range-calendar.css";
+@import "./month-range-picker.css";
+@import "./year-range-picker.css";
 @import "./calendar-year-picker.css";
 @import "./date-input.css";
 @import "./date-range-field.css";
 @import "./time-field.css";
+@import "./time-picker.css";
+@import "./time-range-field.css";
 @import "./date-picker.css";
 @import "./date-range-picker.css";
 @import "./date-time-picker.css";
@@ -134,6 +142,7 @@
  * ------------------------------------------------------------------------------------------------ */
 @import "./alert-dialog.css";
 @import "./drawer.css";
+@import "./hover-card.css";
 @import "./modal.css";
 @import "./popover.css";
 @import "./tooltip.css";

package/components/input.css

@@ -18,8 +18,8 @@
   @apply motion-reduce:transition-none;
 
   @media (hover: hover) {
-    &:has(> input:hover):not(:focus-within),
-    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+    &:has(> input:hover):not(:focus-within):not(:has(> input:-webkit-autofill)),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]):not(:has(> input:-webkit-autofill)) {
       @apply bg-field-hover;
       border-color: var(--color-field-border-hover);
     }
@@ -65,6 +65,29 @@
     background-color: var(--color-default-100);
     cursor: default;
   }
+
+  /*
+   * Autofilled state — browsers only ever apply :-webkit-autofill styling to
+   * the <input> itself, never to sibling elements like the clear/password
+   * toggle buttons (whose own background is transparent, see .input__clear-button
+   * / .input__password-toggle below). Mirroring the same tint here on the
+   * wrapper — using the same :has(> input:pseudo) idiom as every other state
+   * above — makes it spread across the entire bordered box, icons included,
+   * instead of stopping at the text portion.
+   */
+  &:has(> input:-webkit-autofill) {
+    /*
+     * srgb, not oklch: --color-field resolves to a fully achromatic white
+     * (oklch(100% 0 0)) in the default theme, and mixing a saturated
+     * chromatic color into a chroma-0 endpoint in a polar space like oklch
+     * is a known cross-browser gotcha — at low percentages the result's hue
+     * can drift unpredictably (observed rendering pink instead of blue)
+     * depending on how each engine handles "powerless hue" and gamut
+     * mapping. Plain per-channel srgb blending has no hue component to
+     * drift, so the result is a predictable pale blue everywhere.
+     */
+    background-color: color-mix(in srgb, #006fee 8%, var(--color-field, white));
+  }
 }
 
 /* ─── Variant modifiers ─────────────────────────────────────────────────────── */
@@ -75,8 +98,8 @@
   border-color: transparent;
 
   @media (hover: hover) {
-    &:has(> input:hover):not(:focus-within),
-    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+    &:has(> input:hover):not(:focus-within):not(:has(> input:-webkit-autofill)),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]):not(:has(> input:-webkit-autofill)) {
       @apply bg-transparent;
     }
   }
@@ -96,8 +119,8 @@
   border-color: var(--border);
 
   @media (hover: hover) {
-    &:has(> input:hover):not(:focus-within),
-    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+    &:has(> input:hover):not(:focus-within):not(:has(> input:-webkit-autofill)),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]):not(:has(> input:-webkit-autofill)) {
       background-color: transparent;
       border-color: color-mix(in oklab, var(--border) 80%, var(--foreground) 20%);
     }
@@ -133,8 +156,8 @@
   border-bottom-color: var(--border);
 
   @media (hover: hover) {
-    &:has(> input:hover):not(:focus-within),
-    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+    &:has(> input:hover):not(:focus-within):not(:has(> input:-webkit-autofill)),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]):not(:has(> input:-webkit-autofill)) {
       background-color: transparent;
       border-bottom-color: color-mix(in oklab, var(--border) 80%, var(--foreground) 20%);
     }
@@ -156,8 +179,8 @@
   border-color: transparent;
 
   @media (hover: hover) {
-    &:has(> input:hover):not(:focus-within),
-    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+    &:has(> input:hover):not(:focus-within):not(:has(> input:-webkit-autofill)),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]):not(:has(> input:-webkit-autofill)) {
       @apply shadow-lg;
       background-color: var(--background);
       border-color: transparent;
@@ -316,6 +339,26 @@
     outline: none;
     box-shadow: none;
   }
+
+  /*
+   * Autofill indicator tint — light-blue accent, matching the .input
+   * wrapper's :has(> input:-webkit-autofill) rule above so the whole
+   * bordered box (icons included) shows one consistent color instead of
+   * stopping at the text portion. srgb, not oklch: --color-field resolves
+   * to a fully achromatic white in the default theme, and color-mix in a
+   * polar space like oklch with a chroma-0 endpoint is a known cross-browser
+   * gotcha — the resulting hue can drift unpredictably at low percentages
+   * (observed rendering pink instead of blue). Plain srgb blending has no
+   * hue component to drift.
+   */
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, #006fee 8%, var(--color-field, white)) inset;
+    box-shadow: 0 0 0px 1000px color-mix(in srgb, #006fee 8%, var(--color-field, white)) inset;
+    -webkit-text-fill-color: var(--color-field-foreground);
+    caret-color: var(--color-field-foreground);
+  }
 }
 
 /* Underlined: no horizontal padding on the input — underline spans edge-to-edge */

package/components/menubar.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   Menubar
+
+   App-style top menu bar (File/Edit/View...). Item/section-level styling
+   (.menu, .menu-item, .menu-section) is reused directly from the shared
+   Dropdown/ContextMenu styles — see menu.css, menu-item.css, menu-section.css.
+   `root` adapts Toolbar's horizontal bar layout; `popover` is adapted
+   verbatim from context-menu.css/dropdown.css (identical floating-ui
+   behavior — the only difference between these three components is how
+   each is triggered, not how the resulting menu is positioned/styled);
+   `trigger` is genuinely new since Menubar triggers render real, visible
+   buttons by default (unlike Dropdown/ContextMenu, whose Auron wrappers
+   apply no class to their own — typically asChild-wrapped — triggers).
+   ========================================================================== */
+
+.menubar {
+  @apply flex w-fit items-center gap-1 rounded-lg bg-surface p-1;
+}
+
+/* -----------------------------------------------------------------------------
+ * Trigger
+ * -------------------------------------------------------------------------- */
+.menubar__trigger {
+  @apply inline-flex h-8 items-center rounded-md px-3 text-sm font-medium text-foreground outline-none select-none;
+
+  cursor: var(--cursor-interactive);
+
+  transition:
+    background-color 300ms var(--ease-smooth),
+    color 300ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover {
+      @apply bg-default;
+    }
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &[data-state="open"],
+  &[data-highlighted] {
+    @apply bg-default;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Content positioning, sizing, and open/close animations
+ * -------------------------------------------------------------------------- */
+.menubar__popover {
+  z-index: var(--z-popover);
+  @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain md:min-w-55;
+  @apply will-change-[opacity,transform];
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  &[data-state="open"] {
+    @apply animate-in duration-200 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; }
+  }
+
+  &[data-state="closed"] {
+    @apply animate-out duration-150 ease-smooth zoom-out-95 fade-out;
+  }
+}

package/components/month-range-picker.css

@@ -0,0 +1,154 @@
+/* =============================================================================
+ * MonthRangePicker Component Styles
+ *
+ * A single 3x4 month grid for contiguous month-range selection.
+ * Density, typography, and cell layout mirror `.calendar__month-cell`
+ * (Calendar's month drill-up view) so this looks visually consistent with
+ * Calendar/MonthPicker outside of range-specific track/cap styling, which is
+ * adapted from `.range-calendar__cell`'s day-range treatment (simplified:
+ * month cells are single self-contained elements, not a <td>-wrapped circle,
+ * so no `:has()` targeting or row-wraparound corner-smoothing is needed —
+ * every row is always a full row of 3 months, unlike day grids which have
+ * partial weeks and "outside view" spillover).
+ * ============================================================================= */
+
+.month-range-picker {
+  @apply w-64 max-w-full text-xs;
+
+  container-type: inline-size;
+}
+
+/* -----------------------------------------------------------------------------
+ * Header
+ * -------------------------------------------------------------------------- */
+.month-range-picker__header {
+  @apply flex items-center justify-between px-0.5 pb-1;
+}
+
+.month-range-picker__heading {
+  @apply flex flex-1 items-center justify-center text-center text-xs font-medium;
+}
+
+.month-range-picker__nav-button {
+  @apply flex size-6 items-center justify-center rounded-full text-accent;
+
+  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;
+
+  cursor: var(--cursor-interactive);
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default text-accent;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.95);
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}
+
+.month-range-picker__nav-button-icon {
+  @apply size-3.5;
+}
+
+/* -----------------------------------------------------------------------------
+ * Grid
+ * -------------------------------------------------------------------------- */
+.month-range-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  border-collapse: collapse;
+  @apply aspect-[7/6] w-full;
+}
+
+.month-range-picker__grid-body {
+  display: contents;
+
+  & > tr {
+    display: contents;
+    place-items: center;
+
+    & > td {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem;
+    }
+  }
+}
+
+.month-range-picker__grid-row {
+  display: contents;
+}
+
+/* -----------------------------------------------------------------------------
+ * Cell
+ * -------------------------------------------------------------------------- */
+.month-range-picker__cell {
+  @apply relative m-0.5 flex size-auto items-center justify-center rounded-lg text-center text-xs font-medium outline-none no-highlight;
+  will-change: scale;
+  transition:
+    transform 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out),
+    background-color 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+  cursor: var(--cursor-interactive);
+
+  @media (hover: hover) {
+    &:hover:not([data-selected]),
+    &[data-hovered="true"]:not([data-selected]) {
+      @apply bg-default;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.95);
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Range track (middle segment) — any month within the range, including caps */
+  &[data-selected] {
+    @apply rounded-none bg-accent-soft;
+  }
+
+  /* Range caps (start/end) — solid accent fill, rounded */
+  &[data-selection-start],
+  &[data-selection-end] {
+    @apply rounded-lg bg-accent text-accent-foreground;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    @apply status-disabled;
+
+    text-decoration: line-through;
+  }
+
+  &[data-unavailable] {
+    @apply status-disabled;
+  }
+}