@auronui/styles 1.0.0

package/components/pagination.css

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   Pagination - Page navigation component
+   ==========================================================================
+
+   Reka UI data-attribute mapping (Phase 8 audit):
+   - PaginationListItem[data-selected="true"] ← was React Aria [data-active="true"]/[data-pressed="true"]
+     Dual selectors kept so styles work with both React Aria and Reka UI attributes.
+   - :hover paired with [data-hovered="true"] (pointer-device fallback for React Aria compat)
+   - :focus-visible paired with [data-focus-visible="true"] (Reka does not emit data-focus-visible)
+   - :active paired with [data-pressed="true"] (Reka does not emit data-pressed on list items)
+   ========================================================================== */
+
+/* Base styles */
+.pagination {
+  @apply flex w-full flex-col items-center justify-between gap-4 sm:flex-row;
+}
+
+/* Summary - left side info container */
+.pagination__summary {
+  @apply flex items-center gap-2 self-start text-sm text-muted sm:self-center;
+}
+
+/* Content - container for pagination items */
+.pagination__content {
+  @apply flex items-center gap-1 self-start sm:self-center;
+}
+
+/* Item - list item wrapper */
+.pagination__item {
+  @apply inline-flex;
+}
+
+/* Link - page number button (ghost button style) */
+.pagination__link {
+  @apply relative isolate inline-flex size-9 origin-center items-center justify-center rounded-3xl text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:size-8;
+
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 300ms var(--ease-smooth),
+    background-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Ghost button tokens */
+  --pagination-link-bg: transparent;
+  --pagination-link-bg-hover: var(--color-default-hover);
+  --pagination-link-bg-pressed: var(--color-default-hover);
+  --pagination-link-fg: var(--color-default-foreground);
+
+  background-color: var(--pagination-link-bg);
+  color: var(--pagination-link-fg);
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--pagination-link-bg-hover);
+    }
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--pagination-link-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Active page - tertiary button style */
+  /* data-active="true" = React Aria; data-selected="true" = Reka UI PaginationListItem */
+  &[data-active="true"],
+  &[data-selected="true"] {
+    --pagination-link-bg: var(--color-default);
+    --pagination-link-bg-hover: var(--color-default-hover);
+    --pagination-link-bg-pressed: var(--color-default-hover);
+  }
+}
+
+/* Ellipsis */
+.pagination__ellipsis {
+  @apply inline-flex size-9 items-center justify-center text-sm text-muted select-none md:size-8;
+}
+
+/* Navigation buttons (Previous / Next) */
+.pagination__link--nav {
+  @apply w-auto gap-1.5 px-2.5;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.pagination--sm {
+  .pagination__link {
+    @apply size-8 text-xs md:size-7;
+
+    &:active,
+    &[data-pressed="true"] {
+      transform: scale(0.98);
+    }
+  }
+
+  .pagination__link--nav {
+    @apply w-auto px-2;
+  }
+
+  .pagination__ellipsis {
+    @apply size-8 text-xs md:size-7;
+  }
+
+  .pagination__summary {
+    @apply text-xs;
+  }
+}
+
+.pagination--md {
+  /* No styles as this is the default size */
+}
+
+.pagination--lg {
+  .pagination__link {
+    @apply size-10 text-base md:size-9;
+
+    &:active,
+    &[data-pressed="true"] {
+      transform: scale(0.96);
+    }
+  }
+
+  .pagination__link--nav {
+    @apply w-auto px-3;
+  }
+
+  .pagination__ellipsis {
+    @apply size-10 text-base md:size-9;
+  }
+
+  .pagination__summary {
+    @apply text-base;
+  }
+}

package/components/popover.css

@@ -0,0 +1,96 @@
+/* Popover component styles */
+
+/* Base popover styles */
+.popover {
+  @apply origin-(--trigger-anchor-point) rounded-3xl bg-overlay p-0 text-sm;
+  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 */
+    &[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;
+    }
+  }
+
+  /* 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="popover-overlay-arrow"] {
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+/* Popover dialog */
+.popover__dialog {
+  @apply p-4 outline-none;
+}
+
+/* Popover heading */
+.popover__heading {
+  @apply font-medium;
+}
+
+/* Popover trigger */
+.popover__trigger {
+  @apply inline-block;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 300ms var(--ease-smooth),
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}

package/components/progress-bar.css

@@ -0,0 +1,126 @@
+/* ==========================================================================
+   ProgressBar - Shows determinate or indeterminate progress
+   ========================================================================== */
+
+/* Base styles */
+.progress-bar {
+  @apply grid w-full gap-1;
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  /* Default color token (accent) */
+  --progress-bar-fill: var(--color-accent);
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .progress-bar__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .progress-bar__track {
+    @apply relative overflow-hidden rounded-full bg-default;
+
+    grid-area: track;
+
+    /* Default height (matches --md) */
+    @apply h-2;
+  }
+
+  .progress-bar__fill {
+    @apply absolute top-0 left-0 h-full rounded-full w-full;
+
+    background-color: var(--progress-bar-fill);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: width 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Indeterminate state - when no aria-valuenow is set */
+  .progress-bar__fill[data-state="indeterminate"] {
+    @apply w-2/5;
+
+    animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+
+    @apply motion-reduce:animate-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+/* ==========================================================================
+   Indeterminate animation
+   ========================================================================== */
+
+@keyframes progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-bar--sm {
+  .progress-bar__track {
+    @apply h-1;
+  }
+}
+
+.progress-bar--md {
+  /* No styles as this is the default size */
+}
+
+.progress-bar--lg {
+  .progress-bar__track {
+    @apply h-3;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-bar--default {
+  --progress-bar-fill: var(--color-default-foreground);
+}
+
+.progress-bar--accent {
+  --progress-bar-fill: var(--color-accent);
+}
+
+.progress-bar--success {
+  --progress-bar-fill: var(--color-success);
+}
+
+.progress-bar--warning {
+  --progress-bar-fill: var(--color-warning);
+}
+
+.progress-bar--danger {
+  --progress-bar-fill: var(--color-danger);
+}

package/components/progress-circle.css

@@ -0,0 +1,82 @@
+/* ==========================================================================
+   ProgressCircle - Circular progress indicator
+   ========================================================================== */
+
+/* Base styles */
+.progress-circle {
+  @apply inline-flex items-center justify-center;
+
+  --progress-circle-stroke: var(--color-accent);
+  --progress-circle-track-stroke: var(--color-default);
+
+  .progress-circle__track {
+    stroke: var(--progress-circle-track-stroke);
+  }
+
+  .progress-circle__indicator {
+    stroke: var(--progress-circle-stroke);
+    transition: stroke-dashoffset 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-circle--sm {
+  .progress-circle__svg {
+    @apply size-12;
+  }
+}
+
+.progress-circle--md {
+  .progress-circle__svg {
+    @apply size-16;
+  }
+}
+
+.progress-circle--lg {
+  .progress-circle__svg {
+    @apply size-24;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-circle--default {
+  --progress-circle-stroke: var(--color-default-foreground);
+}
+
+.progress-circle--primary {
+  --progress-circle-stroke: var(--color-accent);
+}
+
+.progress-circle--secondary {
+  --progress-circle-stroke: var(--color-default-foreground);
+}
+
+.progress-circle--accent {
+  --progress-circle-stroke: var(--color-accent);
+}
+
+.progress-circle--success {
+  --progress-circle-stroke: var(--color-success);
+}
+
+.progress-circle--warning {
+  --progress-circle-stroke: var(--color-warning);
+}
+
+.progress-circle--danger {
+  --progress-circle-stroke: var(--color-danger);
+}

package/components/radio-group.css

@@ -0,0 +1,47 @@
+/* Radio Group base styles */
+.radio-group {
+  @apply flex flex-col;
+
+  /* Default orientation */
+  &[data-orientation="vertical"] {
+    [data-slot="radio"] {
+      @apply mt-4;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    @apply flex-row flex-wrap gap-4;
+  }
+}
+
+/* Variant property definitions */
+.radio-group--primary {
+  /* Default styles */
+}
+
+.radio-group--secondary .radio__control {
+  @apply shadow-none;
+  background-color: var(--radio-control-bg);
+
+  --radio-control-bg: var(--color-default);
+  --radio-control-bg-hover: var(--color-default-hover);
+
+  /* Hover state */
+  .radio:hover &,
+  .radio:hover & {
+    @apply border-field-border-hover;
+  }
+
+  /* Default indicator color (unselected) */
+  .radio:not([aria-checked="true"]):not([data-state="checked"]) & .radio__indicator:empty::before {
+    background-color: var(--radio-control-bg);
+  }
+
+  /* Hover indicator color (unselected) */
+  .radio:hover:not([aria-checked="true"]):not([data-state="checked"]) &,
+  .radio:hover:not([aria-checked="true"]):not([data-state="checked"]) & {
+    .radio__indicator:empty::before {
+      background-color: var(--radio-control-bg-hover);
+    }
+  }
+}

package/components/radio.css

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   Base radio styles
+   ========================================================================== */
+
+.radio {
+  @apply relative flex items-start gap-3 outline-none no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  [data-slot="label"] {
+    @apply select-none;
+  }
+
+  [data-slot="description"] {
+    @apply text-wrap select-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Radio control (the circular button)
+   ========================================================================== */
+
+.radio__control {
+  @apply relative mt-[3px] inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-border-secondary bg-field shadow-field outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-out),
+    border-color 300ms var(--ease-out),
+    transform 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Interactive states */
+  /* Focus */
+  .radio:focus-visible &,
+  .radio:focus-visible & {
+    @apply status-focused;
+  }
+
+  /* Hover */
+  .radio:hover &,
+  .radio:hover & {
+    @apply border-field-border-hover;
+  }
+
+  /* Hover - only when not selected */
+  .radio:hover:not([aria-checked="true"]):not([data-state="checked"]) &,
+  .radio:hover:not([aria-checked="true"]):not([data-state="checked"]) & {
+    .radio__indicator:empty::before {
+      @apply bg-field-hover;
+    }
+  }
+
+  /* Pressed */
+  .radio:active &,
+  .radio:active & {
+    @apply scale-95;
+  }
+
+  /* Selection states */
+  /* Selected */
+  .radio[aria-checked="true"] &,
+  .radio[data-state="checked"] & {
+    @apply border-transparent bg-accent;
+  }
+
+  /* Selected + Pressed */
+  .radio:active[data-state="checked"] &,
+  .radio:active[data-state="checked"] & {
+    @apply bg-accent-hover;
+  }
+
+  /* Validation states */
+  /* Invalid */
+  .radio[aria-invalid="true"] &,
+  .radio[aria-invalid="true"] & {
+    @apply status-invalid-field;
+  }
+
+  /* Invalid + Selected */
+  .radio[aria-invalid="true"][aria-checked="true"] &,
+  .radio[aria-invalid="true"][data-state="checked"] &,
+  .radio[aria-invalid="true"][aria-checked="true"] &,
+  .radio[aria-invalid="true"][data-state="checked"] & {
+    @apply status-invalid-field;
+  }
+}
+
+/* ==========================================================================
+   Radio indicator (the inner dot)
+   ========================================================================== */
+
+.radio__indicator {
+  @apply absolute inset-0 flex items-center justify-center;
+
+  pointer-events: none;
+}
+
+/* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
+   (e.g., custom icon). When custom content is present, these default dot styles are not applied. */
+.radio__indicator:empty::before {
+  content: "";
+  @apply rounded-full bg-field;
+
+  width: 100%;
+  height: 100%;
+  scale: 1;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    scale 300ms var(--ease-out),
+    background-color 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+}
+
+/* Selected state */
+.radio[aria-checked="true"] .radio__indicator:empty::before,
+.radio[data-state="checked"] .radio__indicator:empty::before {
+  @apply bg-accent-foreground;
+  scale: 0.4286; /* 6px */
+}
+
+/* Selected + Pressed state */
+.radio[data-state="checked"]:active .radio__indicator:empty::before {
+  scale: 0.5714; /* 8px */
+}
+
+/* ==========================================================================
+   Radio content wrapper
+   ========================================================================== */
+
+.radio__content {
+  @apply flex flex-col gap-0;
+}
+
+/* ==========================================================================
+   Disabled modifier
+   ========================================================================== */
+
+.radio--disabled {
+  @apply status-disabled;
+}