@auronui/styles 1.0.0

package/components/toast.css

@@ -0,0 +1,267 @@
+/* -------------------------------------------------------------------------------------------------
+ * Toast Component Styles
+ * Block: toast
+ * ------------------------------------------------------------------------------------------------- */
+
+/* Toast Region - Fixed container that stacks toasts along Y axis */
+.toast-region {
+  @apply pointer-events-none fixed z-50 outline-none;
+  @apply w-[calc(100vw-2rem)] sm:w-auto;
+
+  display: flex;
+  gap: 0.5rem;
+}
+
+.toast-region:focus-visible {
+  @apply outline-2 outline-offset-2 outline-focus;
+}
+
+/*
+ * Bottom positions: column
+ * Newest is last in DOM → visual bottom → nearest to screen edge
+ */
+.toast-region--bottom {
+  @apply bottom-4 left-1/2 -translate-x-1/2;
+  flex-direction: column;
+}
+
+.toast-region--bottom-start {
+  @apply bottom-4 left-4;
+  flex-direction: column;
+}
+
+.toast-region--bottom-end {
+  @apply right-4 bottom-4;
+  flex-direction: column;
+}
+
+/*
+ * Top positions: column-reverse
+ * Newest is last in DOM → visually first → nearest to top edge
+ */
+.toast-region--top {
+  @apply top-4 left-1/2 -translate-x-1/2;
+  flex-direction: column-reverse;
+}
+
+.toast-region--top-start {
+  @apply top-4 left-4;
+  flex-direction: column-reverse;
+}
+
+.toast-region--top-end {
+  @apply top-4 right-4;
+  flex-direction: column-reverse;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Block: toast
+ * ------------------------------------------------------------------------------------------------- */
+
+.toast {
+  --toast-width: 360px;
+
+  @apply relative pointer-events-auto flex w-full items-start gap-3;
+  @apply rounded-2xl border border-border bg-overlay px-4 py-3.5 shadow-overlay;
+
+  /* Clamp to viewport on mobile, fixed width on sm+ */
+  min-width: min(calc(100vw - 2rem), var(--toast-width));
+  max-width: var(--toast-width);
+}
+
+.toast:focus-visible {
+  @apply outline-2 outline-offset-2 outline-focus;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Elements
+ * ------------------------------------------------------------------------------------------------- */
+
+.toast__content {
+  @apply flex min-w-0 flex-1 flex-col gap-0.5;
+}
+
+.toast__indicator {
+  @apply mt-0.5 flex shrink-0 items-center justify-center select-none;
+  @apply size-5 rounded-full;
+
+  [data-slot="toast-default-icon"] {
+    @apply size-3.5;
+  }
+}
+
+.toast__title {
+  @apply text-sm font-semibold leading-5 text-overlay-foreground;
+}
+
+.toast__description {
+  @apply text-xs leading-[1.125rem] text-muted;
+}
+
+.toast__close-button {
+  @apply -mr-1 -mt-0.5 shrink-0 opacity-40;
+
+  transition: opacity 200ms ease;
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+.toast__action {
+  @apply shrink-0;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Variant modifiers
+ * ------------------------------------------------------------------------------------------------- */
+
+.toast--default {
+  /* uses base bg-overlay + border-border */
+}
+
+.toast--accent {
+  background-color: color-mix(in oklab, var(--accent) 8%, var(--overlay));
+  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
+}
+
+.toast--accent .toast__title {
+  @apply text-accent;
+}
+
+.toast--accent .toast__indicator {
+  background-color: color-mix(in oklab, var(--accent) 15%, transparent);
+  @apply text-accent;
+}
+
+.toast--success {
+  background-color: color-mix(in oklab, var(--success) 8%, var(--overlay));
+  border-color: color-mix(in oklab, var(--success) 28%, transparent);
+}
+
+.toast--success .toast__title {
+  @apply text-success;
+}
+
+.toast--success .toast__indicator {
+  background-color: color-mix(in oklab, var(--success) 15%, transparent);
+  @apply text-success;
+}
+
+.toast--warning {
+  background-color: color-mix(in oklab, var(--warning) 9%, var(--overlay));
+  border-color: color-mix(in oklab, var(--warning) 30%, transparent);
+}
+
+.toast--warning .toast__title {
+  @apply text-warning;
+}
+
+.toast--warning .toast__indicator {
+  background-color: color-mix(in oklab, var(--warning) 15%, transparent);
+  @apply text-warning;
+}
+
+.toast--danger {
+  background-color: color-mix(in oklab, var(--danger) 8%, var(--overlay));
+  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
+}
+
+.toast--danger .toast__title {
+  @apply text-danger;
+}
+
+.toast--danger .toast__indicator {
+  background-color: color-mix(in oklab, var(--danger) 15%, transparent);
+  @apply text-danger;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Enter/exit animations
+ * Reka sets data-state="open"/"closed" on ToastRoot.
+ * Corner toasts slide from the nearest screen edge.
+ * Center toasts slide from top or bottom.
+ * ------------------------------------------------------------------------------------------------- */
+
+.toast--bottom-end[data-state="open"],
+.toast--top-end[data-state="open"] {
+  animation: toast-enter-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast--bottom-end[data-state="closed"],
+.toast--top-end[data-state="closed"] {
+  animation: toast-exit-right 0.2s ease-in forwards;
+}
+
+.toast--bottom-start[data-state="open"],
+.toast--top-start[data-state="open"] {
+  animation: toast-enter-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast--bottom-start[data-state="closed"],
+.toast--top-start[data-state="closed"] {
+  animation: toast-exit-left 0.2s ease-in forwards;
+}
+
+.toast--bottom[data-state="open"] {
+  animation: toast-enter-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast--bottom[data-state="closed"] {
+  animation: toast-exit-bottom 0.2s ease-in forwards;
+}
+
+.toast--top[data-state="open"] {
+  animation: toast-enter-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.toast--top[data-state="closed"] {
+  animation: toast-exit-top 0.2s ease-in forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [class*="toast--"][data-state="open"],
+  [class*="toast--"][data-state="closed"] {
+    animation: none;
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Keyframes
+ * ------------------------------------------------------------------------------------------------- */
+
+@keyframes toast-enter-right {
+  from { translate: calc(100% + 1rem) 0; opacity: 0; }
+  to   { translate: 0 0; opacity: 1; }
+}
+
+@keyframes toast-exit-right {
+  to { translate: calc(100% + 1rem) 0; opacity: 0; }
+}
+
+@keyframes toast-enter-left {
+  from { translate: calc(-100% - 1rem) 0; opacity: 0; }
+  to   { translate: 0 0; opacity: 1; }
+}
+
+@keyframes toast-exit-left {
+  to { translate: calc(-100% - 1rem) 0; opacity: 0; }
+}
+
+@keyframes toast-enter-bottom {
+  from { translate: 0 calc(100% + 1rem); opacity: 0; }
+  to   { translate: 0 0; opacity: 1; }
+}
+
+@keyframes toast-exit-bottom {
+  to { translate: 0 calc(100% + 1rem); opacity: 0; }
+}
+
+@keyframes toast-enter-top {
+  from { translate: 0 calc(-100% - 1rem); opacity: 0; }
+  to   { translate: 0 0; opacity: 1; }
+}
+
+@keyframes toast-exit-top {
+  to { translate: 0 calc(-100% - 1rem); opacity: 0; }
+}

package/components/toggle-button-group.css

@@ -0,0 +1,174 @@
+/* ==========================================================================
+   ToggleButtonGroup - Groups multiple ToggleButtons into a unified control
+   ========================================================================== */
+
+/* Base styles */
+.toggle-button-group {
+  @apply inline-flex h-auto w-fit items-center justify-center gap-0;
+}
+
+/* ==========================================================================
+   Orientation variants
+   ========================================================================== */
+
+.toggle-button-group--horizontal {
+  @apply flex-row rounded-3xl;
+}
+
+.toggle-button-group--vertical {
+  @apply flex-col rounded-lg;
+
+  & .toggle-button {
+    @apply w-full;
+  }
+
+  & .toggle-button:first-child {
+    @apply !rounded-t-lg rounded-b-none;
+  }
+  & .toggle-button:last-child {
+    @apply !rounded-b-lg rounded-t-none;
+  }
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.toggle-button-group--full-width {
+  @apply w-full;
+}
+
+/* ==========================================================================
+   Attached mode (default) - unified group border with dividers between buttons
+   ========================================================================== */
+
+/*
+ * The GROUP container owns the outer border (via ring/box-shadow).
+ * Individual buttons suppress their own background so the group background
+ * shows through. A thin divider renders between adjacent siblings.
+ */
+
+/* Group container: outer ring acts as the shared border for all contained buttons */
+.toggle-button-group:not(.toggle-button-group--detached) {
+  box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 20%, transparent);
+}
+
+/* Suppress individual button backgrounds inside attached group so the
+   group background shows through as a single unified surface */
+.toggle-button-group:not(.toggle-button-group--detached) .toggle-button {
+  --toggle-button-bg: transparent;
+  --toggle-button-bg-hover: color-mix(in oklab, currentColor 8%, transparent);
+  --toggle-button-bg-pressed: color-mix(in oklab, currentColor 12%, transparent);
+  @apply rounded-none;
+}
+
+/* Divider between adjacent buttons — horizontal group: vertical line */
+.toggle-button-group--horizontal:not(.toggle-button-group--detached) .toggle-button + .toggle-button {
+  border-inline-start: 1px solid color-mix(in oklab, currentColor 20%, transparent);
+}
+
+/* Divider between adjacent buttons — vertical group: horizontal line */
+.toggle-button-group--vertical:not(.toggle-button-group--detached) .toggle-button + .toggle-button {
+  border-block-start: 1px solid color-mix(in oklab, currentColor 20%, transparent);
+}
+
+/* Apply border radius to first button (start edge) */
+.toggle-button-group--horizontal .toggle-button:first-child {
+  @apply rounded-s-3xl;
+}
+
+/* Apply border radius to last button (end edge) */
+.toggle-button-group--horizontal .toggle-button:last-child {
+  @apply rounded-e-3xl;
+}
+
+/* If only one button, apply both rounded edges */
+.toggle-button-group--horizontal .toggle-button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Apply border radius to first button (top edge) in vertical */
+.toggle-button-group--vertical .toggle-button:first-child {
+  @apply rounded-t-3xl;
+}
+
+/* Apply border radius to last button (bottom edge) in vertical */
+.toggle-button-group--vertical .toggle-button:last-child {
+  @apply rounded-b-3xl;
+}
+
+/* If only one button in vertical, apply all rounded edges */
+.toggle-button-group--vertical .toggle-button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Remove scale transform on active/pressed state for buttons in group */
+.toggle-button-group .toggle-button:active,
+.toggle-button-group .toggle-button:active {
+  transform: none;
+}
+
+/* Override focus ring to use inset style so it stays within button bounds */
+.toggle-button-group .toggle-button:focus-visible:not(:focus),
+.toggle-button-group .toggle-button:focus-visible {
+  --tw-ring-offset-width: 0px;
+  @apply ring-inset;
+}
+
+/* Full width: stretch each toggle button */
+.toggle-button-group--full-width .toggle-button {
+  @apply flex-1;
+}
+
+/* ==========================================================================
+   Separator (compound component)
+   ========================================================================== */
+
+.toggle-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 */
+  .toggle-button-group--horizontal & {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical orientation - horizontal divider */
+  .toggle-button-group--vertical & {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+}
+
+/* ==========================================================================
+   Detached mode - buttons separated with gaps
+   ========================================================================== */
+
+.toggle-button-group--detached {
+  @apply gap-1;
+}
+
+/* Restore border radius in detached mode */
+.toggle-button-group--detached .toggle-button {
+  @apply rounded-3xl;
+}
+
+/* Hide separators in detached mode */
+.toggle-button-group--detached .toggle-button-group__separator {
+  display: none;
+}

package/components/toggle-button.css

@@ -0,0 +1,149 @@
+/* ==========================================================================
+   ToggleButton - Interactive toggle control for on/off states
+   ========================================================================== */
+
+/* Base styles */
+.toggle-button {
+  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+
+  /**
+   * 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;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens (unselected state) */
+  --toggle-button-bg: var(--color-default);
+  --toggle-button-bg-hover: var(--color-default-hover);
+  --toggle-button-bg-pressed: var(--color-default-hover);
+  --toggle-button-fg: currentColor;
+
+  /* Selected state tokens */
+  --toggle-button-bg-selected: var(--color-accent-soft);
+  --toggle-button-bg-selected-hover: var(--color-accent-soft-hover);
+  --toggle-button-bg-selected-pressed: var(--color-accent-soft-hover);
+  --toggle-button-fg-selected: var(--color-accent-soft-foreground);
+
+  background-color: var(--toggle-button-bg);
+  color: var(--toggle-button-fg);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--toggle-button-bg-hover);
+    }
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--toggle-button-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Selected state */
+  &[data-state="on"] {
+    background-color: var(--toggle-button-bg-selected);
+    color: var(--toggle-button-fg-selected);
+
+    @media (hover: hover) {
+      &:hover,
+      &[data-hovered="true"] {
+        background-color: var(--toggle-button-bg-selected-hover);
+      }
+    }
+
+    &:active,
+    &[data-pressed="true"] {
+      background-color: var(--toggle-button-bg-selected-pressed);
+    }
+  }
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.toggle-button--sm {
+  @apply h-9 px-3 md:h-8;
+
+  & svg {
+    @apply size-4;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+}
+
+.toggle-button--md {
+  /* No styles as this is the default size */
+}
+
+.toggle-button--lg {
+  @apply h-11 text-base md:h-10;
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.96);
+  }
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.toggle-button--default {
+  --toggle-button-bg: var(--color-default);
+  --toggle-button-bg-hover: var(--color-default-hover);
+  --toggle-button-bg-pressed: var(--color-default-hover);
+}
+
+.toggle-button--ghost {
+  --toggle-button-bg: transparent;
+  --toggle-button-bg-hover: var(--color-default);
+  --toggle-button-bg-pressed: var(--color-default);
+  --toggle-button-fg: var(--color-default-foreground);
+}
+
+/* ==========================================================================
+   Icon-only modifier
+   ========================================================================== */
+
+.toggle-button--icon-only {
+  @apply w-10 p-0 md:w-9;
+}
+
+.toggle-button--icon-only.toggle-button--sm {
+  @apply w-9 md:w-8;
+}
+
+.toggle-button--icon-only.toggle-button--lg {
+  @apply w-11 md:w-10;
+}

package/components/toolbar.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   Toolbar - Container for interactive controls with arrow key navigation
+   ========================================================================== */
+
+/* Base styles */
+.toolbar {
+  @apply grid w-fit grid-flow-col items-center gap-2;
+
+  .separator--vertical {
+    @apply h-1/2 self-center;
+  }
+
+  .separator--horizontal {
+    @apply w-1/2 justify-center justify-self-center;
+  }
+}
+
+/* Orientation variants */
+.toolbar--horizontal {
+}
+
+.toolbar--vertical {
+  @apply grid-flow-row items-start justify-start;
+  .button-group {
+    @apply justify-start;
+  }
+}
+
+/* Attached variant */
+.toolbar--attached {
+  @apply rounded-full bg-surface p-1 shadow-overlay;
+}

package/components/tooltip.css

@@ -0,0 +1,47 @@
+/* Tooltip component styles */
+
+/* Base tooltip styles */
+.tooltip {
+  @apply max-w-xs text-xs break-all;
+  /* box-shadow: var(--shadow-overlay); */
+  will-change: opacity, transform;
+
+  /* Arrow styling */
+  & [data-slot="overlay-arrow"] {
+    @apply stroke-border/40;
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+/* Tooltip trigger */
+.tooltip__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;
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}