@auronui/styles 1.0.0

package/components/calendar.css

@@ -0,0 +1,332 @@
+/* =============================================================================
+ * Calendar Component Styles
+ *
+ * A compound component for date selection.
+ * Uses BEM naming convention: calendar, calendar__element, calendar--modifier
+ * ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+ * Base Calendar Styles
+ * -------------------------------------------------------------------------- */
+.calendar {
+  @apply w-64 max-w-full text-xs;
+
+  container-type: inline-size;
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Header
+ * -------------------------------------------------------------------------- */
+.calendar__header {
+  @apply flex items-center justify-between px-0.5 pb-1;
+
+  &:has(.calendar-year-picker__trigger[data-state="open"]) {
+    .calendar__nav-button {
+      @apply pointer-events-none opacity-0;
+    }
+  }
+}
+
+.calendar__heading {
+  @apply flex flex-1 items-center justify-center text-center text-xs font-medium;
+}
+
+.calendar__nav-button {
+  @apply flex size-6 items-center justify-center rounded-full text-accent;
+
+  will-change: scale;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 300ms var(--ease-out),
+    background-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out),
+    opacity 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Hover state – only on devices that support hover (avoids false triggers on touch) */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default text-accent;
+    }
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.95);
+  }
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}
+
+.calendar__nav-button-icon {
+  @apply size-3.5;
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Grid
+ * -------------------------------------------------------------------------- */
+.calendar__grid {
+  /* Override table display with CSS Grid for easier customization */
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-collapse: collapse;
+  @apply w-full pt-2;
+
+  &[aria-readonly="true"] {
+    .calendar__cell {
+      @apply pointer-events-none;
+    }
+  }
+}
+
+.calendar__grid-header {
+  /* Grid header (thead) styles */
+  display: contents;
+
+  & > tr {
+    display: contents;
+  }
+}
+
+.calendar__grid-body {
+  /* Grid body (tbody) styles */
+  display: contents;
+
+  & > tr {
+    display: contents;
+  }
+
+  /* Add top spacing between header and first body row */
+  & > tr:first-child > td {
+    @apply mt-1;
+  }
+}
+
+.calendar__grid-row {
+  /* Use 'contents' so cells participate directly in grid */
+  /* Note: This class can be used for custom row styling if needed */
+  display: contents;
+}
+
+.calendar__header-cell {
+  /* Header cell (th - weekday names) styles */
+  @apply flex items-center justify-center pb-1 text-[10px] font-medium text-muted;
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Cells
+ * -------------------------------------------------------------------------- */
+.calendar__cell {
+  /* Cell (td) wrapper styles - margins now work with grid layout */
+  @apply relative flex aspect-square items-center justify-center rounded-full text-center text-xs leading-none font-normal outline-none no-highlight;
+
+  will-change: scale;
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Today indicator (data-today lives on the trigger) */
+  &:has([data-today]) {
+    @apply text-accent;
+  }
+
+  /* Selected state (reka-ui: CalendarCell gets aria-selected; CellTrigger gets data-selected) */
+  &[aria-selected="true"] {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    @apply bg-default;
+    transform: scale(0.95);
+
+    &[aria-selected="true"] {
+      @apply bg-accent-hover;
+    }
+  }
+
+  /* Hover state – only on devices that support hover (avoids false triggers on touch) */
+  @media (hover: hover) {
+    &:hover:not([aria-selected="true"]),
+    &[data-hovered="true"]:not([aria-selected="true"]) {
+      @apply bg-default;
+    }
+  }
+
+  /* Outside month / outside view (previous/next month days) — data-outside-view lives on the trigger */
+  &:has([data-outside-view]) {
+    @apply text-muted opacity-50;
+  }
+
+  &[aria-selected="true"]:has([data-outside-view]) {
+    @apply bg-default;
+  }
+
+  /* Unavailable dates */
+  &[data-unavailable="true"] {
+    @apply status-disabled;
+  }
+
+  /* Disabled state */
+  &:disabled:not([data-outside-month="true"]),
+  &[data-disabled]:not([data-outside-month="true"]) {
+    @apply status-disabled;
+
+    text-decoration: line-through;
+  }
+}
+
+/* Cell trigger - full-cell hit target inside the cell's circle */
+.calendar__cell-button {
+  @apply absolute inset-0 flex items-center justify-center rounded-full outline-none no-highlight;
+  cursor: var(--cursor-interactive);
+
+  /* Suppress browser default focus ring on pointer interaction;
+     the keyboard focus state is drawn by `.calendar__cell` via status-focused. */
+  &:focus {
+    @apply outline-none;
+  }
+}
+
+/* Cell indicator - small dot at bottom center of cell */
+.calendar__cell-indicator {
+  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-full bg-muted;
+
+  /* Indicator color changes when cell is selected */
+  [data-state="checked"] > & {
+    @apply bg-accent-foreground;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Heading Button (clickable heading for view switching)
+ * -------------------------------------------------------------------------- */
+.calendar__heading-button {
+  @apply inline-flex items-center justify-center rounded-md bg-transparent px-2 py-0.5 text-center text-xs font-medium outline-none;
+  cursor: var(--cursor-interactive);
+  transition:
+    background-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Month / Year Grids (view switcher bodies)
+ * -------------------------------------------------------------------------- */
+.calendar__month-grid,
+.calendar__year-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  border-collapse: collapse;
+  @apply aspect-[7/6] w-full;
+}
+
+.calendar__month-grid-body,
+.calendar__year-grid-body {
+  display: contents;
+  
+  & > tr {
+    display: contents;
+    place-items: center;
+    
+    & > td {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem;
+    }
+  }
+}
+
+.calendar__month-grid-row,
+.calendar__year-grid-row {
+  display: contents;
+}
+
+.calendar__month-cell,
+.calendar__year-cell {
+  @apply relative m-0.5 flex size-auto items-center justify-center rounded-lg text-center text-xs font-medium outline-none no-highlight;
+  will-change: scale;
+  transition:
+    transform 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out),
+    background-color 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+  cursor: var(--cursor-interactive);
+
+  @media (hover: hover) {
+    &:hover:not([data-selected]),
+    &[data-hovered="true"]:not([data-selected]) {
+      @apply bg-default;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.95);
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &[data-selected] {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}
+
+.calendar__month-cell-label,
+.calendar__year-cell-label {
+  @apply pointer-events-none;
+}

package/components/card.css

@@ -0,0 +1,225 @@
+/* ==========================================================================
+   Card — Surface container with header / body / footer composition
+   ========================================================================== */
+
+/* Block */
+.card {
+  @apply relative flex flex-col overflow-hidden;
+  @apply rounded-3xl;
+
+  /* Tokens — overridden by variant/shadow modifiers */
+  --card-bg: var(--color-surface);
+  --card-fg: var(--color-surface-foreground);
+  --card-border: transparent;
+  --card-shadow: var(--surface-shadow);
+  --card-gap: 0;
+
+  background-color: var(--card-bg);
+  color: var(--card-fg);
+  border: 1px solid var(--card-border);
+  box-shadow: var(--card-shadow);
+
+  transition:
+    transform 300ms var(--ease-smooth),
+    background-color 300ms var(--ease-out),
+    box-shadow 300ms var(--ease-out),
+    border-color 300ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+}
+
+/* ==========================================================================
+   Element — header
+   ========================================================================== */
+
+.card__header {
+  @apply flex shrink-0 flex-col gap-0.5 px-5 pt-5 pb-3;
+}
+
+.card__header--divided {
+  @apply border-b border-border pb-4;
+}
+
+/* Element — title */
+.card__title {
+  @apply text-sm leading-6 font-semibold tracking-tight text-foreground;
+}
+
+/* Element — description */
+.card__description {
+  @apply text-sm leading-5 text-muted;
+}
+
+/* ==========================================================================
+   Element — body / content
+   ========================================================================== */
+
+.card__content {
+  @apply flex flex-1 flex-col gap-2 px-5 py-4 text-sm leading-6 text-foreground;
+}
+
+/* Body as the only child (no header/footer) tightens to comfortable padding */
+.card__content:only-child {
+  @apply p-5;
+}
+
+/* ==========================================================================
+   Element — footer
+   ========================================================================== */
+
+.card__footer {
+  @apply flex shrink-0 flex-row items-center gap-2 px-5 pt-3 pb-5;
+}
+
+.card__footer--divided {
+  @apply border-t border-border pt-4;
+}
+
+/* ==========================================================================
+   Variants — surface color
+   ========================================================================== */
+
+.card--default {
+  --card-bg: var(--color-surface);
+  --card-fg: var(--color-surface-foreground);
+}
+
+.card--secondary {
+  --card-bg: var(--color-surface-secondary);
+  --card-fg: var(--color-surface-secondary-foreground);
+}
+
+.card--tertiary {
+  --card-bg: var(--color-surface-tertiary);
+  --card-fg: var(--color-surface-tertiary-foreground);
+}
+
+.card--transparent {
+  --card-bg: transparent;
+  --card-shadow: none;
+}
+
+.card--bordered {
+  --card-bg: var(--color-surface);
+  --card-border: var(--color-border);
+  --card-shadow: none;
+}
+
+/* Frosted glass — sits over imagery / gradients. Host must allow bg bleed. */
+.card--blurred {
+  --card-bg: color-mix(in oklab, var(--color-surface) 60%, transparent);
+  backdrop-filter: saturate(160%) blur(16px);
+  -webkit-backdrop-filter: saturate(160%) blur(16px);
+}
+
+/* ==========================================================================
+   Shadow scale
+   ========================================================================== */
+
+.card--shadow-none {
+  --card-shadow: none;
+}
+
+.card--shadow-sm {
+  --card-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.04),
+    0 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+
+.card--shadow-md {
+  --card-shadow:
+    0 4px 12px -2px rgba(0, 0, 0, 0.08),
+    0 2px 4px -1px rgba(0, 0, 0, 0.04),
+    0 0 1px 0 rgba(0, 0, 0, 0.08);
+}
+
+.card--shadow-lg {
+  --card-shadow:
+    0 20px 40px -12px rgba(0, 0, 0, 0.18),
+    0 8px 16px -6px rgba(0, 0, 0, 0.08),
+    0 0 1px 0 rgba(0, 0, 0, 0.08);
+}
+
+/* ==========================================================================
+   Radius scale
+   ========================================================================== */
+
+.card.card--radius-none {
+  @apply rounded-none;
+}
+.card.card--radius-sm {
+  @apply rounded-md;
+}
+.card.card--radius-md {
+  @apply rounded-xl;
+}
+.card.card--radius-lg {
+  @apply rounded-2xl;
+}
+
+/* ==========================================================================
+   Interactive — hoverable
+   ========================================================================== */
+
+.card--hoverable {
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      --card-shadow:
+        0 16px 32px -12px rgba(0, 0, 0, 0.18),
+        0 4px 8px -2px rgba(0, 0, 0, 0.06),
+        0 0 1px 0 rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+    }
+  }
+}
+
+/* ==========================================================================
+   Interactive — pressable (fully clickable card)
+   ========================================================================== */
+
+.card--pressable {
+  cursor: var(--cursor-interactive);
+  @apply outline-none select-none;
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.985);
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      --card-bg: var(--color-surface-hover);
+    }
+  }
+}
+
+/* Pressable + hoverable combined: preserve lift + keep press scale */
+.card--pressable.card--hoverable:active,
+.card--pressable.card--hoverable[data-pressed="true"] {
+  transform: translateY(-2px) scale(0.985);
+}
+
+/* ==========================================================================
+   Disabled
+   ========================================================================== */
+
+.card--disabled,
+.card[aria-disabled="true"],
+.card[data-disabled="true"] {
+  @apply status-disabled;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   Full width
+   ========================================================================== */
+
+.card--full-width {
+  @apply w-full;
+}

package/components/checkbox-group.css

@@ -0,0 +1,7 @@
+.checkbox-group {
+  @apply flex flex-col;
+
+  [data-slot="checkbox"] {
+    @apply mt-4;
+  }
+}