@auronui/styles 1.0.0

package/components/avatar.css

@@ -0,0 +1,78 @@
+/* Base avatar styles */
+.avatar {
+  @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-default;
+}
+
+/* Avatar fallback element */
+.avatar__fallback {
+  @apply flex size-full items-center justify-center bg-default text-sm font-medium;
+}
+
+/* Avatar image element */
+.avatar__image {
+  @apply absolute inset-0 aspect-square size-full;
+
+  /**
+   * Transitions
+   */
+  @apply transition-opacity duration-300 motion-reduce:transition-none;
+}
+
+/* Size modifiers */
+.avatar--sm {
+  @apply size-8;
+}
+
+.avatar--md {
+  /* No styles as this is the default size */
+}
+
+.avatar--lg {
+  @apply size-12;
+
+  .avatar__fallback {
+    @apply text-base;
+  }
+}
+
+/* Color modifiers for fallback */
+.avatar__fallback--accent {
+  @apply text-accent;
+}
+
+.avatar__fallback--default {
+  @apply text-default-foreground;
+}
+
+.avatar__fallback--success {
+  @apply text-success;
+}
+
+.avatar__fallback--warning {
+  @apply text-warning;
+}
+
+.avatar__fallback--danger {
+  @apply text-danger;
+}
+
+/* Variant modifiers */
+.avatar--soft {
+  @apply bg-transparent;
+}
+
+.avatar--soft .avatar__fallback--accent {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--success {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--warning {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--danger {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}

package/components/badge.css

@@ -0,0 +1,186 @@
+/* ==========================================================================
+   Badge - Small informational badges for displaying labels, statuses, and categories.
+   ========================================================================== */
+
+/* Base styles */
+.badge {
+  @apply inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap leading-none;
+
+  /* Default size (matches --md) */
+  @apply h-5 min-w-5 px-1 text-xs rounded-full;
+
+  /* Default tokens */
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+  --badge-border: var(--color-background);
+
+  box-sizing: border-box;
+  background-color: var(--badge-bg);
+  color: var(--badge-fg);
+  border: 2px solid var(--badge-border);
+}
+
+.badge__label {
+  @apply inline-flex items-center justify-center;
+}
+
+.badge-anchor {
+  @apply relative inline-flex shrink-0;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.badge--lg {
+  @apply h-6 min-w-6 px-1.5 text-sm;
+}
+
+.badge--md {
+  /* No styles as this is the default size */
+}
+
+.badge--sm {
+  @apply h-4 min-w-4 px-1 text-[10px];
+  border-width: 1px;
+}
+
+.badge--xs {
+  @apply h-2.5 min-w-2.5 p-0 text-[0px];
+  border-width: 1px;
+}
+
+.badge--xs .badge__label {
+  display: none;
+}
+
+/* ==========================================================================
+   Color variants - set foreground color
+   ========================================================================== */
+
+.badge--accent {
+  --badge-fg: var(--color-accent);
+}
+
+.badge--default {
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--success {
+  --badge-fg: var(--color-success);
+}
+
+.badge--warning {
+  --badge-fg: var(--color-warning);
+}
+
+.badge--danger {
+  --badge-fg: var(--color-danger);
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.badge--primary {
+  /* Solid background - compound variants below handle bg/fg per color */
+}
+
+.badge--secondary {
+  /* Default background with colored text - base behavior */
+}
+
+.badge--soft {
+  /* Soft/muted background - compound variants below handle bg/fg per color */
+}
+
+/* ==========================================================================
+   Placement variants
+   ========================================================================== */
+
+.badge--top-right {
+  @apply absolute top-0 right-0 z-10;
+  transform: translate(35%, -35%);
+}
+
+.badge--top-left {
+  @apply absolute top-0 left-0 z-10;
+  transform: translate(-35%, -35%);
+}
+
+.badge--bottom-right {
+  @apply absolute right-0 bottom-0 z-10;
+  transform: translate(35%, 35%);
+}
+
+.badge--bottom-left {
+  @apply absolute bottom-0 left-0 z-10;
+  transform: translate(-35%, 35%);
+}
+
+/* xs dots sit at the bounding-box corner with no outward translate,
+   landing right on a circular anchor's edge rather than floating beside it. */
+.badge--xs.badge--top-right,
+.badge--xs.badge--top-left,
+.badge--xs.badge--bottom-right,
+.badge--xs.badge--bottom-left {
+  transform: none;
+}
+
+/* ==========================================================================
+   Compound variants - Primary (solid background)
+   ========================================================================== */
+
+.badge--primary.badge--accent {
+  --badge-bg: var(--color-accent);
+  --badge-fg: var(--color-accent-foreground);
+}
+
+.badge--primary.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--primary.badge--success {
+  --badge-bg: var(--color-success);
+  --badge-fg: var(--color-success-foreground);
+}
+
+.badge--primary.badge--warning {
+  --badge-bg: var(--color-warning);
+  --badge-fg: var(--color-warning-foreground);
+}
+
+.badge--primary.badge--danger {
+  --badge-bg: var(--color-danger);
+  --badge-fg: var(--color-danger-foreground);
+}
+
+/* ==========================================================================
+   Compound variants - Soft (muted background)
+   ========================================================================== */
+
+.badge--soft.badge--accent {
+  --badge-bg: var(--color-accent-soft);
+  --badge-fg: var(--color-accent-soft-foreground);
+}
+
+.badge--soft.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--soft.badge--success {
+  --badge-bg: var(--color-success-soft);
+  --badge-fg: var(--color-success-soft-foreground);
+}
+
+.badge--soft.badge--warning {
+  --badge-bg: var(--color-warning-soft);
+  --badge-fg: var(--color-warning-soft-foreground);
+}
+
+.badge--soft.badge--danger {
+  --badge-bg: var(--color-danger-soft);
+  --badge-fg: var(--color-danger-soft-foreground);
+}

package/components/breadcrumbs.css

@@ -0,0 +1,76 @@
+/* Base breadcrumbs container */
+.breadcrumbs {
+  @apply flex flex-wrap items-center gap-0;
+
+  /* Breadcrumb item wrapper */
+  .breadcrumbs__item {
+    @apply flex shrink-0 items-center justify-center;
+  }
+
+  /* Breadcrumb link */
+  .breadcrumbs__link {
+    @apply relative inline-flex items-center rounded-md px-2 py-1 text-sm leading-5 font-medium text-muted no-underline outline-none;
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      color 200ms var(--ease-smooth),
+      background-color 200ms var(--ease-smooth),
+      opacity 200ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* Cursor */
+    cursor: var(--cursor-interactive);
+
+    /* Hover: brighten to foreground and show a subtle background */
+    @media (hover: hover) {
+      &:hover,
+      &[data-hovered="true"] {
+        @apply bg-surface-hover text-foreground;
+      }
+    }
+
+    /* Active / pressed */
+    &:active,
+    &[data-pressed="true"] {
+      @apply opacity-80;
+    }
+
+    /* Focus ring */
+    &:focus-visible:not(:focus),
+    &[data-focus-visible="true"] {
+      @apply status-focused;
+    }
+
+    /* Disabled */
+    &[aria-disabled="true"],
+    &:disabled {
+      @apply status-disabled;
+    }
+  }
+
+  /* Current page — applied to the <li> carrying aria-current="page" */
+  .breadcrumbs__item[aria-current="page"] .breadcrumbs__link {
+    @apply text-foreground font-semibold;
+    cursor: default;
+
+    @media (hover: hover) {
+      &:hover,
+      &[data-hovered="true"] {
+        @apply bg-transparent;
+      }
+    }
+  }
+
+  /* Separator icon */
+  .breadcrumbs__separator {
+    @apply inline-flex shrink-0 items-center justify-center text-muted/60 rtl:rotate-180 select-none;
+
+    /* Default chevron SVG sizing */
+    & > svg {
+      @apply size-3.5;
+    }
+  }
+}

package/components/button-group.css

@@ -0,0 +1,126 @@
+/* ==========================================================================
+   ButtonGroup - Groups related buttons together
+
+   Design model: the GROUP container owns the rounded silhouette and (for
+   outline variants) the single continuous outer border. Children buttons
+   drop their own border + radius and fill their slice. `overflow-hidden`
+   clips each button's hover/active background to the group's rounded
+   corners, so the long edges (left/right vertical, top/bottom horizontal)
+   render as one uninterrupted line on every button.
+   ========================================================================== */
+
+/* Base group: rounded container that clips children to its silhouette */
+.button-group {
+  @apply inline-flex h-auto w-fit items-center justify-center gap-0 overflow-hidden rounded-3xl;
+}
+
+/* ==========================================================================
+   Orientation variants
+   ========================================================================== */
+
+.button-group--horizontal {
+  @apply flex-row items-stretch;
+}
+
+.button-group--vertical {
+  @apply flex-col items-stretch rounded-xl;
+}
+
+/* Stretch each child across the group's cross axis so every button shares
+   the same width (vertical) or height (horizontal) as the widest/tallest one. */
+.button-group--vertical .button {
+  @apply w-full;
+}
+
+/* Children fill their slice with no individual radius — the group clips them.
+   Override the base button's 300ms transitions so press/hover feedback feels
+   snappy in both directions and doesn't leave the button looking "stuck"
+   selected for a third of a second after release. */
+.button-group .button {
+  @apply rounded-none;
+  transition:
+    background-color 100ms var(--ease-out),
+    box-shadow 100ms var(--ease-out);
+}
+
+/* ==========================================================================
+   Outline variant — group owns the single outer border
+   ========================================================================== */
+
+.button-group:has(.button--outline) {
+  @apply border border-border;
+}
+
+.button-group .button--outline {
+  @apply border-0;
+}
+
+/* ==========================================================================
+   Press feedback
+
+   Scale would leave a visible gap inside the clipped group, so use an
+   immediate inset darken overlay instead. The button base's bg-color
+   transition is 300ms (too slow to register on a quick click), so we
+   short-circuit it here for a snappy press.
+   ========================================================================== */
+
+   
+.button-group .button:active,
+.button-group .button[data-pressed="true"],
+.button-group .button[data-selected="true"],
+.button-group .button[aria-pressed="true"] {
+  transform: none;
+  box-shadow: inset 0 0 0 999px rgb(0 0 0 / 0.08);
+  transition: box-shadow 80ms var(--ease-out);
+}
+
+/* Override focus ring to use inset style so it stays within button bounds
+   and isn't clipped by the group's overflow-hidden */
+.button-group .button:focus-visible:not(:focus),
+.button-group .button:focus-visible {
+  --tw-ring-offset-width: 0px;
+  @apply ring-inset;
+}
+
+/* ==========================================================================
+   Separator (compound component)
+   ========================================================================== */
+
+.button-group__separator {
+  @apply bg-current opacity-15;
+
+  border-radius: 4px;
+  position: absolute;
+  pointer-events: none;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: opacity 300ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Horizontal orientation - vertical divider */
+  .button-group--horizontal & {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical orientation - horizontal divider */
+  .button-group--vertical & {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.button-group--full-width {
+  @apply w-full;
+}