@auronui/styles 1.0.0

package/components/drawer.css

@@ -0,0 +1,222 @@
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Component Styles
+ * Block: drawer
+ * -----------------------------------------------------------------------------------------------*/
+
+/* Panel enter/exit keyframes — Reka's Presence waits for animationend before unmounting */
+@keyframes drawer-slide-in-right  { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes drawer-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes drawer-slide-in-left   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes drawer-slide-out-left  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes drawer-slide-in-top    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes drawer-slide-out-top   { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+@keyframes drawer-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes drawer-slide-out-bottom{ from { transform: translateY(0); } to { transform: translateY(100%); } }
+
+/* Backdrop fade keyframes */
+@keyframes drawer-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
+@keyframes drawer-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+
+/**
+ * Element: trigger - the element that opens the drawer
+ */
+.drawer__trigger {
+  @apply inline-block cursor-(--cursor-interactive);
+
+  transition:
+    transform 300ms var(--ease-out-quart),
+    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;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/**
+ * Element: backdrop - the overlay behind the drawer panel
+ * Reka sets data-state="open"/"closed" on DialogOverlay.
+ * Reka's Presence component waits for animationend before unmounting.
+ */
+.drawer__backdrop {
+  @apply fixed inset-0 z-50;
+  @apply h-(--visual-viewport-height) w-full;
+
+  &[data-state="open"] {
+    animation: drawer-backdrop-in 0.2s ease forwards;
+  }
+
+  &[data-state="closed"] {
+    animation: drawer-backdrop-out 0.2s ease forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+    opacity: 1;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.drawer__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.drawer__backdrop--opaque {
+  @apply bg-backdrop;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.drawer__backdrop--blur {
+  @apply bg-backdrop backdrop-blur-md;
+}
+
+/**
+ * Element: dialog - the drawer panel (applied directly to DialogContent).
+ * Reka sets data-state="open"/"closed" on DialogContent; Presence waits for
+ * animationend on this element before unmounting on close.
+ */
+.drawer__dialog {
+  @apply fixed z-50;
+  @apply flex flex-col;
+  @apply bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+/**
+ * Modifier: dialog--right
+ * Panel anchored to the right edge, full viewport height.
+ */
+.drawer__dialog--right {
+  @apply top-0 right-0 bottom-0;
+  @apply w-80 max-w-[85vw] sm:w-96;
+  @apply rounded-none;
+
+  &[data-state="open"]   { animation: drawer-slide-in-right  0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+  &[data-state="closed"] { animation: drawer-slide-out-right 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+}
+
+/**
+ * Modifier: dialog--left
+ * Panel anchored to the left edge, full viewport height.
+ */
+.drawer__dialog--left {
+  @apply top-0 left-0 bottom-0;
+  @apply w-80 max-w-[85vw] sm:w-96;
+  @apply rounded-none;
+
+  &[data-state="open"]   { animation: drawer-slide-in-left  0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+  &[data-state="closed"] { animation: drawer-slide-out-left 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+}
+
+/**
+ * Modifier: dialog--top
+ * Panel anchored to the top edge, full viewport width.
+ */
+.drawer__dialog--top {
+  @apply top-0 left-0 right-0;
+  @apply w-full max-h-[85vh];
+  @apply rounded-b-2xl pb-2;
+
+  &[data-state="open"]   { animation: drawer-slide-in-top  0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+  &[data-state="closed"] { animation: drawer-slide-out-top 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+}
+
+/**
+ * Modifier: dialog--bottom
+ * Panel anchored to the bottom edge, full viewport width.
+ */
+.drawer__dialog--bottom {
+  @apply bottom-0 left-0 right-0;
+  @apply w-full max-h-[85vh];
+  @apply rounded-t-2xl;
+
+  &[data-state="open"]   { animation: drawer-slide-in-bottom  0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+  &[data-state="closed"] { animation: drawer-slide-out-bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
+}
+
+/**
+ * Element: header
+ */
+.drawer__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+}
+
+/**
+ * Element: heading
+ */
+.drawer__heading {
+  @apply align-middle;
+  @apply text-sm font-medium text-foreground;
+}
+
+/**
+ * Element: body
+ */
+.drawer__body {
+  @apply min-h-0 flex-1;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply -m-[3px] my-0 p-[3px];
+  @apply overflow-y-auto overscroll-contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Element: footer
+ */
+.drawer__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: handle
+ */
+.drawer__handle {
+  @apply flex items-center justify-center;
+  @apply pb-2;
+
+  & > [data-slot="drawer-handle-bar"] {
+    @apply h-1 w-9 rounded-full;
+    @apply bg-separator;
+  }
+}
+
+/**
+ * Element: close-trigger
+ */
+.drawer__close-trigger {
+  @apply cursor-pointer;
+}
+
+/**
+ * Spacing between elements
+ */
+.drawer__header + .drawer__body  { @apply mt-2; }
+.drawer__header + .drawer__footer { @apply mt-5; }
+.drawer__body + .drawer__footer  { @apply mt-5; }
+.drawer__handle + .drawer__header { @apply mt-0; }
+.drawer__handle + .drawer__body  { @apply mt-0; }

package/components/dropdown.css

@@ -0,0 +1,67 @@
+/* ==========================================================================
+   Dropdown
+   ========================================================================== */
+
+.dropdown {
+  @apply flex flex-col gap-1;
+}
+
+.dropdown__trigger {
+  @apply inline-block outline-none;
+
+  transition:
+    transform 300ms var(--ease-out-quart),
+    background-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  &[data-pending="true"] {
+    @apply status-pending;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/* Positioning, sizing, and open/close animations — visuals come from card classes */
+.dropdown__popover {
+  @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain md:min-w-55;
+  @apply will-change-[opacity,transform];
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  &[data-state="open"] {
+    @apply animate-in duration-200 ease-smooth fade-in-0 zoom-in-95;
+
+    &[data-side="top"] { @apply slide-in-from-bottom-1; }
+    &[data-side="bottom"] { @apply slide-in-from-top-1; }
+    &[data-side="left"] { @apply slide-in-from-right-1; }
+    &[data-side="right"] { @apply slide-in-from-left-1; }
+  }
+
+  &[data-state="closed"] {
+    @apply animate-out duration-150 ease-smooth zoom-out-95 fade-out;
+  }
+}
+
+/* Inner list — shares list-container base */
+.dropdown__menu {
+  @apply list-container gap-0.5;
+}

package/components/empty-state.css

@@ -0,0 +1,4 @@
+/* Base empty-state styles */
+.empty-state {
+  @apply p-2 text-sm text-muted;
+}

package/components/error-message.css

@@ -0,0 +1,13 @@
+/* Base error message styles */
+.error-message {
+  @apply h-auto text-xs wrap-break-word text-danger;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    opacity 300ms var(--ease-out),
+    height 350ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+}

package/components/field-error.css

@@ -0,0 +1,19 @@
+/* Field error styles */
+.field-error {
+  @apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-[visible=true]:h-auto data-[visible=true]:opacity-100;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    opacity 300ms var(--ease-out),
+    height 350ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+}
+
+/* ─── Icon slot ──────────────────────────────────────────────────────────────── */
+
+.field-error__icon {
+  @apply inline-flex size-4 shrink-0 align-middle;
+}

package/components/fieldset.css

@@ -0,0 +1,39 @@
+/* Base component styles */
+.fieldset {
+  @apply flex flex-col gap-6;
+  /* fix flexbox issue in Safari when fieldset with legend is inside a flexbox */
+  @apply shrink grow basis-0;
+}
+
+.fieldset__legend {
+  @apply text-sm font-medium text-foreground;
+}
+
+.fieldset__description {
+  @apply text-sm text-foreground/60;
+}
+
+/* ─── Field group slots ───────────────────────────────────────────────────────── */
+
+.fieldset__field-group {
+  @apply w-full;
+}
+
+.fieldset__field-group--vertical {
+  @apply flex flex-col gap-4;
+}
+
+.fieldset__field-group--horizontal {
+  @apply flex flex-row flex-wrap gap-4;
+}
+
+.fieldset__actions {
+  @apply flex items-center gap-2 pt-1;
+}
+
+/* ─── State modifiers ────────────────────────────────────────────────────────── */
+
+.fieldset--disabled,
+.fieldset[data-disabled="true"] {
+  @apply opacity-60 pointer-events-none;
+}

package/components/header.css

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   Base header styles
+   ========================================================================== */
+
+.header {
+  @apply w-full px-2 pt-1.5 pb-1 text-left text-xs font-medium text-muted;
+}

package/components/index.css

@@ -0,0 +1,164 @@
+/* ------------------------------------------------------------------------------------------------
+ * Component Styles
+ * ------------------------------------------------------------------------------------------------
+ * CRITICAL: Import order matters for CSS specificity and style overrides.
+ *
+ * General Rule: Shared/primitive components MUST be imported FIRST, before components that use them.
+ * This ensures that parent component styles can properly override shared component defaults.
+ *
+ * Organization: Components are grouped by their Storybook categories (Components/Category/Name)
+ * to maintain consistency between documentation and implementation.
+ * ------------------------------------------------------------------------------------------------ */
+
+/* ------------------------------------------------------------------------------------------------
+ * Shared Components - MUST Import FIRST
+ * ------------------------------------------------------------------------------------------------
+ * These are used by multiple components and must be imported early to allow proper overrides.
+ * ------------------------------------------------------------------------------------------------ */
+@import "./close-button.css";
+@import "./description.css";
+@import "./error-message.css";
+@import "./label.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Navigation
+ * ------------------------------------------------------------------------------------------------ */
+@import "./accordion.css";
+@import "./breadcrumbs.css";
+@import "./collapsible-group.css";
+@import "./collapsible.css";
+@import "./link.css";
+@import "./pagination.css";
+@import "./tabs.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Buttons
+ * ------------------------------------------------------------------------------------------------ */
+@import "./button.css";
+@import "./button-group.css";
+@import "./toggle-button.css";
+@import "./toggle-button-group.css";
+@import "./toolbar.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Collections
+ * ------------------------------------------------------------------------------------------------ */
+@import "./dropdown.css";
+@import "./list-box-item.css";
+@import "./list-box-section.css";
+@import "./list-box.css";
+@import "./menu-item.css";
+@import "./menu-section.css";
+@import "./menu.css";
+@import "./tag-group.css";
+@import "./tag.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Colors
+ * ------------------------------------------------------------------------------------------------ */
+@import "./color-area.css";
+@import "./color-picker.css";
+@import "./color-slider.css";
+@import "./color-swatch.css";
+@import "./color-swatch-picker.css";
+@import "./color-field.css";
+@import "./color-input-group.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Controls
+ * ------------------------------------------------------------------------------------------------ */
+@import "./slider.css";
+@import "./switch.css";
+@import "./switch-group.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * DataDisplay
+ * ------------------------------------------------------------------------------------------------ */
+@import "./badge.css";
+@import "./chip.css";
+@import "./table.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Feedback
+ * ------------------------------------------------------------------------------------------------ */
+@import "./alert.css";
+@import "./empty-state.css";
+@import "./skeleton.css";
+@import "./meter.css";
+@import "./progress-bar.css";
+@import "./progress-circle.css";
+@import "./spinner.css";
+@import "./toast.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Forms
+ * ------------------------------------------------------------------------------------------------ */
+@import "./checkbox-group.css";
+@import "./checkbox.css";
+@import "./fieldset.css";
+@import "./input-otp.css";
+@import "./input.css";
+@import "./number-field.css";
+@import "./radio-group.css";
+@import "./radio.css";
+@import "./textarea.css";
+
+/* ------------------------------------------------------------------------------------------------
+* Date & Time
+* ------------------------------------------------------------------------------------------------ */
+@import "./calendar.css";
+@import "./range-calendar.css";
+@import "./calendar-year-picker.css";
+@import "./date-input.css";
+@import "./date-range-field.css";
+@import "./time-field.css";
+@import "./date-picker.css";
+@import "./date-range-picker.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Layout
+ * ------------------------------------------------------------------------------------------------ */
+@import "./card.css";
+@import "./header.css";
+@import "./separator.css";
+@import "./surface.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Media
+ * ------------------------------------------------------------------------------------------------ */
+@import "./avatar.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Overlays
+ * ------------------------------------------------------------------------------------------------ */
+@import "./alert-dialog.css";
+@import "./drawer.css";
+@import "./modal.css";
+@import "./popover.css";
+@import "./tooltip.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Pickers
+ * ------------------------------------------------------------------------------------------------ */
+@import "./combo-box.css";
+@import "./select.css";
+@import "./autocomplete.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Typography
+ * ------------------------------------------------------------------------------------------------ */
+@import "./kbd.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Utilities
+ * ------------------------------------------------------------------------------------------------ */
+@import "./scroll-shadow.css";
+@import "./scroll-area.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Extended (Auron UI extras)
+ * ------------------------------------------------------------------------------------------------ */
+@import "./aspect-ratio.css";
+@import "./splitter.css";
+@import "./stepper.css";
+@import "./tree.css";

package/components/input-otp.css

@@ -0,0 +1,124 @@
+/* Base container */
+.input-otp {
+  @apply relative flex items-center gap-2;
+
+  &[data-disabled] {
+    @apply cursor-not-allowed opacity-50;
+  }
+}
+
+/* Group - slots separated with gap */
+.input-otp__group {
+  @apply flex items-center gap-2;
+}
+
+/* Individual slot box - fully rounded, standalone */
+.input-otp__slot {
+  @apply relative flex h-10 w-9.5 flex-1 items-center justify-center text-center;
+  @apply border bg-field text-field-foreground shadow-field;
+  @apply rounded-field text-sm font-semibold outline-none;
+
+  border-width: 1px;
+  border-color: color-mix(in oklab, var(--foreground) 12%, transparent);
+
+  /**
+   * 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 */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Active/Focus */
+  &[data-active="true"] {
+    @apply z-10 bg-field-focus status-focused-field;
+  }
+
+  /* Filled */
+  &[data-filled="true"] {
+    @apply bg-field-focus;
+  }
+
+  /* Disabled */
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+
+  /* Invalid */
+  &[aria-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+  }
+}
+
+/* Slot value */
+.input-otp__slot-value {
+  @apply text-lg leading-6 tracking-[-0.27px];
+
+  /**
+   * Animations
+   * CRITICAL: motion-reduce must be AFTER animation for correct override specificity
+   */
+  animation: slot-value-in 300ms var(--ease-smooth) both;
+  transform-origin: bottom center;
+  @apply motion-reduce:animate-none;
+}
+
+/* Caret */
+.input-otp__caret {
+  @apply absolute h-4 w-[2px] animate-caret-blink rounded-[4px] bg-field-placeholder;
+}
+
+/* Separator */
+.input-otp__separator {
+  @apply h-[2px] w-[6px] shrink-0 rounded-[4px] bg-separator;
+}
+
+/* Variant property definitions */
+.input-otp--primary {
+  /* Default styles */
+}
+
+.input-otp--secondary .input-otp__slot {
+  @apply shadow-none;
+  background-color: var(--input-otp-slot-bg);
+
+  --input-otp-slot-bg: var(--color-default);
+  --input-otp-slot-bg-hover: var(--color-default-hover);
+  --input-otp-slot-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--input-otp-slot-bg-hover);
+    }
+  }
+
+  &[data-active="true"],
+  &[data-filled="true"] {
+    background-color: var(--input-otp-slot-bg-focus);
+  }
+}
+
+/* Animations */
+@keyframes slot-value-in {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}