@auronui/styles 1.0.0

package/components/color-swatch-picker.css

@@ -0,0 +1,247 @@
+/* ==========================================================================
+   ColorSwatchPicker - A list of color swatches for selection
+   ========================================================================== */
+
+/* Base styles */
+.color-swatch-picker {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+/* ==========================================================================
+   Item - Individual swatch picker item
+   ========================================================================== */
+
+.color-swatch-picker__item {
+  @apply relative flex size-8 items-center justify-center rounded-full border-2 border-transparent outline-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    border-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+
+  /* Selected state */
+  &[data-state="checked"] {
+    border-color: var(--reka-color-swatch-picker-item-color);
+    box-shadow: var(--field-shadow);
+    /* Shrink the swatch to reveal the white gap */
+    .color-swatch-picker__swatch {
+      transform: scale(0.77);
+    }
+  }
+}
+
+/* ==========================================================================
+   Swatch - The color swatch visual
+   ========================================================================== */
+
+.color-swatch-picker__swatch {
+  @apply block size-full;
+
+  /* Inherit border-radius from item */
+  border-radius: inherit;
+
+  /* Paint the swatch color on top of a checker pattern so transparent colors
+     show the underlying grid. Reka's inner ColorSwatch sets
+     --reka-color-swatch-color on this element. */
+  background:
+    linear-gradient(var(--reka-color-swatch-color), var(--reka-color-swatch-color)),
+    repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+
+  /**
+  * Transitions
+  * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+  */
+  transition: transform 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+/* ==========================================================================
+   Indicator - Checkmark indicator for selected state
+   ========================================================================== */
+
+.color-swatch-picker__indicator {
+  @apply pointer-events-none absolute inset-0 z-10 flex items-center justify-center;
+
+  /* Checkmark SVG styles - default to white for dark backgrounds */
+  & > * {
+    @apply size-1/3 text-white;
+
+    /* Start scaled down - use translateZ(0) for GPU acceleration */
+    transform: scale(0) translateZ(0);
+
+    /**
+     * Transitions
+     */
+    transition: transform 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Use black checkmark on light backgrounds */
+  &[data-light-color="true"] & > * {
+    @apply text-black;
+  }
+
+  /* Scale up when parent item is selected */
+  .color-swatch-picker__item[data-state="checked"] & > * {
+    transform: scale(1) translateZ(0);
+  }
+}
+
+/* ==========================================================================
+   Layout variants
+   ========================================================================== */
+
+.color-swatch-picker--grid {
+  /* Default is already grid (flex-wrap) - no additional styles needed */
+}
+
+.color-swatch-picker--stack {
+  @apply flex-col;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.color-swatch-picker--xs {
+  .color-swatch-picker__item {
+    @apply size-4 border;
+  }
+}
+
+.color-swatch-picker--sm {
+  .color-swatch-picker__item {
+    @apply size-6 border-2;
+  }
+}
+
+.color-swatch-picker--md {
+  .color-swatch-picker__item {
+    /* No styles as this is the default size */
+  }
+}
+
+.color-swatch-picker--lg {
+  .color-swatch-picker__item {
+    @apply size-9 border-3;
+  }
+}
+
+.color-swatch-picker--xl {
+  .color-swatch-picker__item {
+    @apply size-10 border-3;
+  }
+}
+
+/* ==========================================================================
+   Shape variants
+   ========================================================================== */
+
+/* Circle variant (default) - no additional styles needed */
+.color-swatch-picker--circle .color-swatch-picker__item {
+  /* Default is already circle (border-radius: 9999px) */
+}
+
+/* Square variant */
+.color-swatch-picker--square {
+  .color-swatch-picker__item {
+    @apply rounded-xl;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-state="checked"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-lg;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for xs */
+.color-swatch-picker--square.color-swatch-picker--xs {
+  .color-swatch-picker__item {
+    @apply rounded-md;
+    .color-swatch-picker__swatch {
+      @apply rounded-md;
+    }
+    &[data-state="checked"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-md;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for sm */
+.color-swatch-picker--square.color-swatch-picker--sm {
+  .color-swatch-picker__item {
+    @apply rounded-lg;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-state="checked"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-md;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for md (default) */
+.color-swatch-picker--square.color-swatch-picker--md {
+  /* No styles as this is the default size */
+}
+
+/* Square variant - item radius for lg */
+.color-swatch-picker--square.color-swatch-picker--lg {
+  .color-swatch-picker__item {
+    @apply rounded-xl;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-state="checked"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-lg;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for xl */
+.color-swatch-picker--square.color-swatch-picker--xl {
+  .color-swatch-picker__item {
+    @apply rounded-xl;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-state="checked"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-lg;
+      }
+    }
+  }
+}

package/components/color-swatch.css

@@ -0,0 +1,42 @@
+/* Base color-swatch styles */
+.color-swatch {
+  @apply relative box-border size-8 shrink-0;
+
+  /* Checkered background pattern for transparency */
+  background:
+    linear-gradient(var(--reka-color-swatch-color), var(--reka-color-swatch-color)),
+    repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+
+  /* Default border for visibility against similar backgrounds */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+/* Shape variants */
+.color-swatch--circle {
+  @apply rounded-full;
+}
+
+.color-swatch--square {
+  @apply rounded-md;
+}
+
+/* Size variants */
+.color-swatch--xs {
+  @apply size-4;
+}
+
+.color-swatch--sm {
+  @apply size-6;
+}
+
+.color-swatch--md {
+  /* No styles as this is the default size */
+}
+
+.color-swatch--lg {
+  @apply size-9;
+}
+
+.color-swatch--xl {
+  @apply size-10;
+}

package/components/combo-box.css

@@ -0,0 +1,203 @@
+/* ─── ComboBox ─────────────────────────────────────────────────────────────── */
+
+.combo-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* ─── Field container (the visible bordered box) ───────────────────────────── */
+
+.combo-box__input-group {
+  @apply relative inline-flex items-center gap-2 rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  height: 2.25rem;
+  padding-left: 0.75rem;
+  /* Right padding reserves room for the absolute-positioned trigger button */
+  padding-right: 2rem;
+
+  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;
+
+  @media (hover: hover) {
+    &:has(> input:hover):not(:focus-within),
+    &[data-hovered="true"]:not([data-focused="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focused="true"] {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  &:has(> input:disabled),
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Invalid state — propagated from the root aria-invalid attribute */
+.combo-box[aria-invalid="true"] .combo-box__input-group {
+  @apply status-invalid-field;
+  border-color: var(--color-field-border-invalid);
+}
+
+/* ─── Full width ────────────────────────────────────────────────────────────── */
+
+.combo-box--full-width {
+  @apply w-full;
+}
+
+.combo-box__input-group--full-width {
+  @apply w-full;
+}
+
+/* ─── Input element (transparent, borderless inside the container) ─────────── */
+
+.combo-box__input {
+  @apply flex-1 min-w-0 bg-transparent border-0 outline-none p-0 h-auto text-inherit;
+  @apply placeholder:text-field-placeholder;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+/* ─── Clear button ──────────────────────────────────────────────────────────── */
+
+.combo-box__clear-button {
+  @apply relative isolate inline-flex h-5 w-5 shrink-0 origin-center items-center justify-center rounded-full text-muted select-none no-highlight bg-transparent;
+  cursor: var(--cursor-interactive);
+  @apply transform-gpu;
+
+  transition: opacity 300ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  &[data-empty="true"] {
+    @apply pointer-events-none opacity-0;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default-hover text-default-foreground;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.93);
+  }
+
+  svg {
+    @apply size-2.5;
+  }
+}
+
+/* ─── Trigger (chevron dropdown button) ─────────────────────────────────────── */
+
+.combo-box__trigger {
+  @apply absolute top-1/2 right-0 flex h-full shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center pr-2 text-field-placeholder transition duration-300 no-highlight;
+  @apply border-none bg-transparent outline-none;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply text-field-foreground;
+    }
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply rounded ring-2 ring-focus ring-offset-2 ring-offset-background outline-none;
+  }
+
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  [data-slot="combo-box-trigger-default-icon"] {
+    @apply size-4 transition-transform duration-300 motion-reduce:transition-none;
+  }
+
+  &[data-state="open"] [data-slot="combo-box-trigger-default-icon"] {
+    @apply rotate-180;
+  }
+}
+
+/* ─── Label ─────────────────────────────────────────────────────────────────── */
+
+.combo-box [data-slot="label"] {
+  @apply text-sm font-medium w-fit select-none;
+  color: var(--color-foreground);
+}
+
+.combo-box[aria-invalid="true"] [data-slot="label"] {
+  color: var(--color-danger);
+}
+
+/* ─── Helper wrapper + text ─────────────────────────────────────────────────── */
+
+.combo-box [data-slot="helper-wrapper"] { @apply picker-helper-wrapper; }
+.combo-box [data-slot="description"] { @apply picker-description; }
+.combo-box[aria-invalid="true"] [data-slot="description"] { @apply hidden; }
+.combo-box [data-slot="error-message"] { @apply picker-error-message; }
+
+/* ─── Popover (dropdown listbox content) ───────────────────────────────────── */
+
+.combo-box__popover {
+  /* Alias Reka UI CSS variables to design-system names used by the layout below */
+  --trigger-width: var(--reka-combobox-trigger-width);
+  --trigger-anchor-point: var(--reka-combobox-content-transform-origin);
+
+  @apply scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm;
+  width: var(--trigger-width);
+  transform-origin: var(--trigger-anchor-point);
+  box-shadow: var(--shadow-overlay);
+
+  max-height: min(var(--reka-combobox-content-available-height, 20rem), 20rem);
+  scroll-behavior: smooth;
+
+  @apply overlay-popover-scrollbar;
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  [data-slot="list-box"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply px-2.5;
+    scroll-margin-block: 0.25rem;
+
+    &[data-highlighted],
+    &[data-highlighted="true"] {
+      @apply bg-default;
+    }
+  }
+
+  [data-slot="list-box-item-indicator"],
+  [data-slot="list-box-item-indicator"] [data-slot="list-box-item-indicator--checkmark"] {
+    @apply transition-none;
+  }
+
+  [data-slot="empty-content"] {
+    @apply text-center text-sm text-overlay-foreground/60;
+  }
+}

package/components/date-input-group.css

@@ -0,0 +1,125 @@
+/* Date input group styles — mirror .input so DateInput visually matches Input */
+.date-input-group {
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-smooth),
+    border-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not(:focus-within):not([data-focus-within="true"]),
+    &[data-hovered="true"]:not(:focus-within):not([data-focus-within="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"]:not(
+      :has(
+        [data-slot="date-picker-trigger"]:focus,
+        [data-slot="date-picker-trigger"]:focus,
+        [data-slot="date-range-picker-trigger"]:focus,
+        [data-slot="date-range-picker-trigger"]:focus
+      )
+    ),
+  &:focus-within:not(
+      :has(
+        [data-slot="date-picker-trigger"]:focus,
+        [data-slot="date-picker-trigger"]:focus,
+        [data-slot="date-range-picker-trigger"]:focus,
+        [data-slot="date-range-picker-trigger"]:focus
+      )
+    ) {
+    @apply status-focused-field;
+  }
+
+  /* Invalid state */
+  &[aria-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+    border-color: var(--color-field-border-invalid);
+  }
+
+  /* Disabled state */
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.date-input-group__input {
+  @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent text-sm shadow-none outline-none sm:text-sm;
+
+  .date-input-group:has(.date-range-picker__range-separator) & {
+    &[slot="start"] {
+      @apply flex-none pr-0;
+    }
+    &[slot="end"] {
+      @apply pl-0;
+    }
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+.date-input-group__input-container {
+  @apply flex flex-1 items-center;
+  width: fit-content;
+  overflow-x: auto;
+  overflow-y: clip;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.date-input-group__segment {
+  @apply inline-block rounded-md px-0.5 text-end text-nowrap outline-none;
+
+  /* Segment separators styling "/" */
+  &[data-type="literal"] {
+    @apply p-0 text-muted;
+  }
+
+  /* Placeholder styling */
+  &[data-placeholder="true"] {
+    @apply text-field-placeholder;
+  }
+
+  /* Focused segment */
+  &:focus,
+  &[data-focused="true"] {
+    @apply bg-accent-soft text-accent-soft-foreground;
+  }
+
+  /* Disabled segment */
+  &[data-disabled] {
+    @apply opacity-50;
+  }
+
+  /* Invalid segment */
+  &[aria-invalid="true"] {
+    @apply text-danger;
+
+    /* Focused segment */
+    &:focus,
+    &[data-focused="true"] {
+      @apply bg-danger-soft text-danger-soft-foreground;
+    }
+  }
+}