@auronui/styles 1.0.0

package/components/skeleton.css

@@ -0,0 +1,48 @@
+.skeleton {
+  @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
+}
+
+/* TODO: Skeleton with parent are not visible */
+
+/* Animation types */
+.skeleton--shimmer {
+  &::after {
+    @apply absolute inset-0 -translate-x-full animate-skeleton bg-linear-to-r from-transparent via-surface-tertiary to-transparent content-[''];
+  }
+
+  /* When applied to a parent container with multiple skeletons */
+  &:has(.skeleton) {
+    &::after {
+      content: none;
+    }
+
+    /* Single synchronized shimmer that passes over all children */
+    &::before {
+      @apply absolute inset-0 -translate-x-full animate-skeleton content-[''];
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.5) 50%,
+        transparent 100%
+      );
+      z-index: 10;
+      pointer-events: none;
+      /* Use mix-blend-mode to only show over skeleton elements */
+      mix-blend-mode: overlay;
+    }
+
+    /* Ensure children don't have their own shimmer */
+    & .skeleton {
+      &::after {
+        content: none;
+      }
+    }
+  }
+}
+
+.skeleton--pulse {
+  @apply animate-pulse;
+}
+
+.skeleton--none {
+}

package/components/slider.css

@@ -0,0 +1,155 @@
+/* Slider styles */
+
+.slider {
+  @apply grid w-full gap-1;
+
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .slider__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .slider__track {
+    @apply relative rounded-full bg-default;
+
+    grid-area: track;
+  }
+
+  .slider__fill {
+    @apply pointer-events-none absolute rounded-full bg-accent;
+  }
+
+  .slider__thumb {
+    /* Flex container for centering pseudo-elements */
+    @apply absolute flex cursor-grab items-center justify-center rounded-full bg-accent no-highlight;
+
+    /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+    transition:
+      background-color 300ms var(--ease-smooth),
+      transform 300ms var(--ease-out),
+      box-shadow 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* after: Visible thumb element */
+    &::after {
+      @apply relative z-10 rounded-full bg-accent-foreground text-black shadow-field;
+      content: "";
+
+      /**
+       * Transitions
+       */
+      @apply origin-center transition-all motion-reduce:transition-none;
+    }
+
+    /* Dragging state - cursor changes and thumb scales down */
+    &[data-dragging="true"] {
+      @apply cursor-grabbing;
+
+      &::after {
+        @apply scale-[0.9] motion-reduce:scale-100;
+      }
+    }
+
+    /* Focus state - increase z-index */
+    &:focus {
+      @apply z-10 status-focused;
+    }
+
+    /* Disabled state */
+    &[data-disabled] {
+      @apply cursor-default;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    flex-direction: column;
+
+    .slider__track {
+      @apply h-5 w-full overflow-visible;
+    }
+
+    .slider__fill {
+      @apply h-full;
+    }
+
+    .slider__thumb {
+      @apply top-1/2 h-full;
+
+      width: 1.25rem;
+      --reka-slider-thumb-transform: translate(-50%, -50%);
+
+      &::after {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+    }
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply h-full gap-2;
+
+    flex-direction: row;
+    grid-template-areas:
+      "output"
+      "track"
+      "label";
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+
+    .slider__output {
+      text-align: center;
+    }
+
+    [data-slot="label"] {
+      text-align: center;
+    }
+
+    .slider__track {
+      @apply h-full w-5 overflow-visible;
+      justify-self: center;
+    }
+
+    .slider__fill {
+      @apply w-full;
+    }
+
+    .slider__thumb {
+      @apply left-1/2 w-full;
+
+      height: 1.25rem;
+      --reka-slider-thumb-transform: translate(-50%, 50%);
+
+      &::after {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+    }
+  }
+}

package/components/spinner.css

@@ -0,0 +1,42 @@
+/* Base spinner styles */
+.spinner {
+  @apply pointer-events-none relative size-6 origin-center animate-spin-fast;
+}
+
+/* Size variants */
+.spinner--sm {
+  @apply size-4;
+}
+
+.spinner--md {
+  /* No styles as this is the default size */
+}
+
+.spinner--lg {
+  @apply size-8;
+}
+
+.spinner--xl {
+  @apply size-10;
+}
+
+/* Color variants */
+.spinner--current {
+  color: inherit;
+}
+
+.spinner--accent {
+  color: var(--accent);
+}
+
+.spinner--danger {
+  color: var(--danger);
+}
+
+.spinner--success {
+  color: var(--success);
+}
+
+.spinner--warning {
+  color: var(--warning);
+}

package/components/splitter.css

@@ -0,0 +1,74 @@
+/* Splitter component styles */
+.splitter-group {
+  @apply flex size-full overflow-hidden;
+}
+
+.splitter-group--horizontal {
+  @apply flex-row;
+}
+
+.splitter-group--vertical {
+  @apply flex-col;
+}
+
+.splitter-panel {
+  @apply overflow-hidden;
+}
+
+/* Resize handle */
+.splitter-handle {
+  @apply relative flex shrink-0 items-center justify-center focus-visible:outline-none;
+
+  /* Focus ring */
+  &:focus-visible {
+    @apply status-focused;
+  }
+
+  /* Active/dragging cursor */
+  &[data-state="drag"] {
+    @apply opacity-100;
+  }
+}
+
+.splitter-handle--horizontal {
+  @apply cursor-col-resize;
+  width: 1px;
+  margin-inline: 1px;
+
+  &::before {
+    @apply absolute inset-y-0 -inset-x-1.5 content-[''];
+  }
+}
+
+.splitter-handle--vertical {
+  @apply cursor-row-resize;
+  height: 1px;
+  margin-block: 1px;
+
+  &::before {
+    @apply absolute inset-x-0 -inset-y-1.5 content-[''];
+  }
+}
+
+/* Visual bar inside the handle */
+.splitter-handle__bar {
+  @apply rounded-full bg-default transition-colors;
+
+  .splitter-handle--horizontal & {
+    @apply h-8 w-px;
+  }
+
+  .splitter-handle--vertical & {
+    @apply h-px w-8;
+  }
+
+  @media (hover: hover) {
+    .splitter-handle:hover & {
+      @apply bg-default-hover;
+    }
+  }
+
+  .splitter-handle[data-state="drag"] & {
+    @apply bg-accent;
+  }
+}

package/components/stepper.css

@@ -0,0 +1,160 @@
+/* Stepper component styles */
+
+/* -------------------------------------------------- Container -------------------------------------------------- */
+.stepper {
+  @apply flex;
+}
+
+.stepper--horizontal {
+  @apply flex-row items-start;
+}
+
+.stepper--vertical {
+  @apply flex-col;
+}
+
+/* -------------------------------------------------- Item -------------------------------------------------- */
+.stepper__item {
+  @apply relative flex;
+}
+
+.stepper__item--horizontal {
+  @apply flex-1 flex-col items-center;
+
+  &:last-child {
+    @apply flex-none;
+  }
+}
+
+.stepper__item--vertical {
+  @apply flex-row gap-3;
+
+  &:last-child .stepper__separator--vertical {
+    @apply hidden;
+  }
+}
+
+/* -------------------------------------------------- Indicator -------------------------------------------------- */
+.stepper__indicator {
+  @apply relative z-10 flex shrink-0 items-center justify-center rounded-full font-semibold transition-colors;
+}
+
+/* Size variants */
+.stepper__indicator--sm {
+  @apply size-6 text-xs;
+}
+
+.stepper__indicator--md {
+  @apply size-8 text-sm;
+}
+
+.stepper__indicator--lg {
+  @apply size-10 text-base;
+}
+
+/* Color: pending (default gray) */
+.stepper__indicator {
+  @apply bg-default text-default-foreground;
+}
+
+/* Completed state — neutral green-ish using accent */
+.stepper__item[data-status="completed"] .stepper__indicator {
+  @apply bg-success text-success-foreground;
+}
+
+/* Error state */
+.stepper__item[data-status="error"] .stepper__indicator {
+  @apply bg-danger text-danger-foreground;
+}
+
+/* Current (active) step */
+.stepper__item[data-status="current"] .stepper__indicator--default {
+  @apply bg-default text-default-foreground ring-2 ring-default;
+}
+
+.stepper__item[data-status="current"] .stepper__indicator--accent {
+  @apply bg-accent text-accent-foreground ring-2 ring-accent/30;
+}
+
+.stepper__item[data-status="current"] .stepper__indicator--success {
+  @apply bg-success text-success-foreground ring-2 ring-success/30;
+}
+
+.stepper__item[data-status="current"] .stepper__indicator--warning {
+  @apply bg-warning text-warning-foreground ring-2 ring-warning/30;
+}
+
+.stepper__item[data-status="current"] .stepper__indicator--danger {
+  @apply bg-danger text-danger-foreground ring-2 ring-danger/30;
+}
+
+/* -------------------------------------------------- Content (title + description) -------------------------------------------------- */
+.stepper__content {
+  @apply flex flex-col;
+
+  .stepper__item--horizontal & {
+    @apply mt-2 items-center text-center;
+  }
+
+  .stepper__item--vertical & {
+    @apply pb-6;
+  }
+}
+
+.stepper__title {
+  @apply font-medium text-foreground;
+}
+
+.stepper__title--sm {
+  @apply text-xs;
+}
+
+.stepper__title--md {
+  @apply text-sm;
+}
+
+.stepper__title--lg {
+  @apply text-base;
+}
+
+.stepper__item[data-status="pending"] .stepper__title {
+  @apply text-muted;
+}
+
+.stepper__description {
+  @apply text-xs text-muted;
+}
+
+/* -------------------------------------------------- Separator -------------------------------------------------- */
+.stepper__separator {
+  @apply bg-default transition-colors;
+}
+
+/* Horizontal separator fills the space between the step indicator and next one */
+.stepper__separator--horizontal {
+  @apply mt-4 h-px flex-1;
+
+  .stepper__item--horizontal:last-child & {
+    @apply hidden;
+  }
+}
+
+/* Vertical separator is a line on the left side running down */
+.stepper__separator--vertical {
+  @apply absolute left-4 top-8 -translate-x-1/2 w-px;
+  bottom: 0;
+
+  .stepper__indicator--sm ~ & {
+    @apply left-3 top-6;
+  }
+
+  .stepper__indicator--lg ~ & {
+    @apply left-5 top-10;
+  }
+}
+
+/* Completed separator takes accent color */
+.stepper__item[data-status="completed"] .stepper__separator,
+.stepper__item[data-status="current"] .stepper__separator {
+  @apply bg-accent;
+}

package/components/surface.css

@@ -0,0 +1,23 @@
+/* Surface component styles */
+
+/* Block */
+.surface {
+  @apply relative text-foreground;
+}
+
+/* Modifier - variant */
+.surface--transparent {
+  @apply bg-transparent;
+}
+
+.surface--default {
+  @apply bg-surface text-surface-foreground;
+}
+
+.surface--secondary {
+  @apply bg-surface-secondary text-surface-secondary-foreground;
+}
+
+.surface--tertiary {
+  @apply bg-surface-tertiary text-surface-tertiary-foreground;
+}

package/components/switch-group.css

@@ -0,0 +1,17 @@
+/* Switch Group styles */
+.switch-group {
+  @apply flex flex-col gap-6;
+}
+
+.switch-group__items {
+  @apply flex gap-4;
+}
+
+/* Orientation modifiers */
+.switch-group--horizontal .switch-group__items {
+  @apply flex-row;
+}
+
+.switch-group--vertical .switch-group__items {
+  @apply flex-col;
+}

package/components/switch.css

@@ -0,0 +1,194 @@
+/* Switch base styles */
+.switch {
+  @apply inline-flex items-center gap-3 no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens for switch control states */
+  --switch-control-bg: var(--color-default);
+  --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
+  --switch-control-bg-pressed: var(--switch-control-bg-hover);
+  --switch-control-bg-checked: var(--color-accent);
+  --switch-control-bg-checked-hover: var(--color-accent-hover);
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    .switch__thumb {
+      @apply bg-default-foreground/20;
+    }
+  }
+
+  /* Disabled + Selected state */
+  &:disabled[aria-checked="true"],
+  &:disabled[data-state="checked"],
+  &[data-disabled][aria-checked="true"],
+  &[data-disabled][data-state="checked"],
+  &[aria-disabled="true"][aria-checked="true"],
+  &[aria-disabled="true"][data-state="checked"] {
+    .switch__thumb {
+      opacity: 0.4;
+    }
+  }
+}
+
+/* Size variants - default is medium */
+.switch--sm {
+  /* Small size modifier */
+}
+
+.switch--md {
+  /* Medium size - no styles as this is the default */
+}
+
+.switch--lg {
+  /* Large size modifier */
+}
+
+/* Switch control (track) */
+.switch__control {
+  /* Default size (medium) */
+  @apply relative flex shrink-0 items-center overflow-hidden rounded-full;
+  height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */
+  width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */
+
+  background-color: var(--switch-control-bg);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus states */
+  .switch:focus-visible &,
+  .switch:focus-visible & {
+    @apply status-focused;
+  }
+
+  /* Hover states */
+  .switch:hover &,
+  .switch:hover & {
+    background-color: var(--switch-control-bg-hover);
+  }
+
+  /* Pressed states */
+  .switch:active &,
+  .switch:active & {
+    background-color: var(--switch-control-bg-pressed);
+    @apply motion-reduce:transform-none;
+  }
+
+  /* Checked states */
+  .switch[aria-checked="true"] &,
+  .switch[data-state="checked"] & {
+    background-color: var(--switch-control-bg-checked);
+  }
+
+  /* Checked + Hover states */
+  .switch[aria-checked="true"]:hover &,
+  .switch[data-state="checked"]:hover &,
+  .switch[aria-checked="true"]:hover &,
+  .switch[data-state="checked"]:hover & {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+
+  /* Checked + Pressed states */
+  .switch[aria-checked="true"]:active &,
+  .switch[data-state="checked"]:active &,
+  .switch[aria-checked="true"]:active &,
+  .switch[data-state="checked"]:active & {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+}
+
+/* Size-specific control dimensions */
+.switch--sm .switch__control {
+  height: 1rem; /* ~14px on desktop, ~16px on mobile */
+  width: 2rem; /* ~32px on desktop, ~36px on mobile */
+}
+
+.switch--md .switch__control {
+  /* No styles as this is the default size */
+}
+
+.switch--lg .switch__control {
+  height: 1.5rem; /* ~21px on desktop, ~24px on mobile */
+  width: 3rem; /* ~48px on desktop, ~56px on mobile */
+}
+
+/* Switch thumb */
+.switch__thumb {
+  /* Default size (medium) - circular thumb */
+  @apply ms-0.5 flex origin-center rounded-full bg-white text-black shadow-field;
+  height: 1rem; /* 16px - matches width for circle */
+  width: 1rem;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    margin 300ms var(--ease-out),
+    background-color 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Selected/checked state - use margin instead of translate */
+  .switch[aria-checked="true"] &,
+  .switch[data-state="checked"] & {
+    @apply ms-[calc(100%-1.125rem)] bg-accent-foreground text-accent;
+    box-shadow:
+      0px 0px 5px 0px rgb(0 0 0 / 0.02),
+      0px 2px 10px 0px rgb(0 0 0 / 0.06),
+      0px 0px 1px 0px rgb(0 0 0 / 0.3);
+  }
+
+  .switch:active &,
+  .switch:active & {
+  }
+}
+
+/* Size-specific thumb dimensions */
+.switch--sm .switch__thumb {
+  height: 0.75rem; /* 12px circle */
+  width: 0.75rem;
+
+  /* Small selected state positioning */
+  .switch[aria-checked="true"] &,
+  .switch[data-state="checked"] & {
+    @apply ms-[calc(100%-0.875rem)];
+  }
+}
+
+.switch--lg .switch__thumb {
+  height: 1.25rem; /* 20px circle */
+  width: 1.25rem;
+
+  /* Large selected state positioning */
+  .switch[aria-checked="true"] &,
+  .switch[data-state="checked"] & {
+    @apply ms-[calc(100%-1.375rem)];
+  }
+}
+
+/* Switch thumb content container */
+.switch__thumb > * {
+  @apply flex size-full items-center justify-center;
+}
+
+/* Switch label */
+.switch__label {
+  @apply text-sm font-medium text-foreground;
+}
+
+/* Switch content */
+.switch__content {
+  @apply flex flex-col gap-0;
+}