@aortl/admin-css 0.17.0 → 0.18.1

package/src/components/number-input.css

@@ -0,0 +1,64 @@
+@layer components {
+  /* React's Base UI Root is a transparent wrapper; the visual group is `.number-input`. */
+  .number-input-root {
+    display: contents;
+  }
+
+  /* Connected group: − | input | +, mirroring .input-group's look. */
+  .number-input {
+    @apply inline-flex w-full items-stretch
+           rounded-lg border border-border bg-surface
+           transition-colors duration-150
+           focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-focus;
+  }
+  .number-input:hover {
+    @apply border-border-strong;
+  }
+
+  /* Borderless field: right-aligned tabular digits, native spinners hidden. */
+  .number-input-field {
+    @apply flex-1 min-w-0 w-full px-3 py-2
+           bg-transparent text-sm leading-none text-text text-right tabular-nums
+           border-0 outline-none
+           placeholder:text-text-muted
+           disabled:opacity-50 disabled:cursor-not-allowed;
+    -moz-appearance: textfield;
+  }
+  .number-input-field::-webkit-inner-spin-button,
+  .number-input-field::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Stepper buttons. */
+  .number-input-step {
+    @apply inline-flex items-center justify-center shrink-0
+           w-8 text-text-muted bg-transparent
+           cursor-pointer select-none border-0
+           hover:bg-surface-muted hover:text-text
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  .number-input-step:first-child {
+    @apply border-r border-border rounded-l-lg;
+  }
+  .number-input-step:last-child {
+    @apply border-l border-border rounded-r-lg;
+  }
+  .number-input-step > :is(i, svg) {
+    font-size: 0.875rem;
+  }
+
+  /* Sizes */
+  .number-input-sm .number-input-field {
+    @apply text-xs px-2.5 py-1.5;
+  }
+  .number-input-sm .number-input-step {
+    @apply w-7;
+  }
+  .number-input-lg .number-input-field {
+    @apply text-base px-4 py-2.5;
+  }
+  .number-input-lg .number-input-step {
+    @apply w-9;
+  }
+}

package/src/components/stat-card.css

@@ -21,6 +21,39 @@
     @apply text-sm text-text-muted;
   }
 
+  /* Trend delta — caret drawn from borders (no icon dependency) plus a value.
+     `data-trend` rotates the caret; `data-intent` colors it, kept independent
+     because up is not always good (a rising error rate is bad). */
+  .stat-card-trend {
+    @apply inline-flex items-center gap-1 text-sm font-medium tabular-nums text-text-muted;
+  }
+  .stat-card-trend::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-inline: 0.3em solid transparent;
+    border-block-end: 0.42em solid currentColor;
+  }
+  .stat-card-trend[data-trend="down"]::before {
+    border-block-end: 0;
+    border-block-start: 0.42em solid currentColor;
+  }
+  .stat-card-trend[data-trend="flat"]::before {
+    width: 0.55em;
+    border-inline: 0;
+    border-block-end: 0;
+    border-block-start: 0.16em solid currentColor;
+  }
+  .stat-card-trend[data-intent="positive"] {
+    @apply text-success;
+  }
+  .stat-card-trend[data-intent="negative"] {
+    @apply text-danger;
+  }
+  .stat-card-trend[data-intent="neutral"] {
+    @apply text-text-muted;
+  }
+
   /* `.card-compact` targets `.card-body`; with no body, step the root instead. */
   .card-compact.stat-card {
     @apply p-3 gap-0.5;

package/src/components/table.css

@@ -121,4 +121,48 @@
   .table-row-link:focus-within {
     @apply outline-2 -outline-offset-2 outline-focus;
   }
+
+  /* Compact density — mirrors table-relaxed at the tight end. */
+  .table-compact :where(th, td),
+  .table-compact .table-cell,
+  .table-compact .table-header-cell {
+    @apply px-2 py-1 text-xs;
+  }
+
+  /* Empty state — a centered, muted message row (author sets colspan). */
+  .table :where(td).table-empty,
+  .table-empty {
+    @apply text-center text-text-muted py-8;
+  }
+  /* No hover affordance on the empty-state row. */
+  .table tbody tr:has(> .table-empty):hover :where(td) {
+    background-color: transparent;
+  }
+
+  /* Pinned first column — sticky against horizontal scroll. Requires an
+     overflow-x ancestor (the table adds no wrapper, same stance as table-sticky).
+     Each row state repaints the cell so scrolled content doesn't bleed through. */
+  .table-pin-col :where(thead th, tbody td, tfoot :is(td, th)):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+  }
+  .table-pin-col tbody td:first-child {
+    z-index: 1;
+    background-color: var(--color-surface);
+  }
+  /* Header corner sits above the body column and the sticky header row. */
+  .table-pin-col :where(thead th):first-child {
+    z-index: 11;
+  }
+  .table-pin-col.table-striped tbody tr:nth-child(even) td:first-child {
+    background-color: var(--color-surface-muted);
+  }
+  .table-pin-col tbody tr:hover td:first-child {
+    background-color: var(--color-surface-muted);
+  }
+  .table-pin-col tbody tr:has(input[type="checkbox"]:checked) td:first-child,
+  .table-pin-col tbody tr:has(.checkbox[data-checked]) td:first-child,
+  .table-pin-col tbody tr[data-selected] td:first-child {
+    background-color: var(--color-primary-muted);
+  }
 }

package/src/components/timeline.css

@@ -0,0 +1,113 @@
+@layer components {
+  /* Vertical event rail: an indicator gutter and a content column per <li>, with
+     a connector line drawn down the gutter that stops at the last item. */
+  .timeline {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .timeline-item {
+    display: grid;
+    grid-template-columns: 1.5rem 1fr;
+    column-gap: 0.75rem;
+    padding-bottom: 1rem;
+    position: relative;
+  }
+  .timeline-item:last-child {
+    padding-bottom: 0;
+  }
+
+  /* Connector — vertical line centred in the gutter, hidden on the last item. */
+  .timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    inset-block: 0.75rem 0;
+    inset-inline-start: 0.75rem;
+    width: 2px;
+    transform: translateX(-50%);
+    background-color: var(--color-border);
+  }
+
+  .timeline-indicator {
+    grid-column: 1;
+    align-self: start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    position: relative;
+    z-index: 1;
+  }
+  .timeline-dot {
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background-color: var(--color-border-strong);
+    box-shadow: 0 0 0 3px var(--color-surface);
+  }
+  /* Surface backing masks the connector running behind an icon indicator. */
+  .timeline-indicator > :is(i, svg) {
+    font-size: 1rem;
+    color: var(--color-text-muted);
+    background-color: var(--color-surface);
+    border-radius: 9999px;
+  }
+
+  .timeline-content {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+    padding-block: 0.125rem 0;
+  }
+  .timeline-title {
+    @apply text-sm font-medium text-text leading-tight;
+  }
+  .timeline-time {
+    @apply text-xs text-text-muted tabular-nums;
+  }
+  .timeline-description {
+    @apply text-sm text-text-muted;
+    text-wrap: pretty;
+  }
+
+  /* Status accents on the dot. */
+  .timeline-item-info .timeline-dot {
+    background-color: var(--color-info);
+  }
+  .timeline-item-success .timeline-dot {
+    background-color: var(--color-success);
+  }
+  .timeline-item-warning .timeline-dot {
+    background-color: var(--color-warning);
+  }
+  .timeline-item-danger .timeline-dot {
+    background-color: var(--color-danger);
+  }
+
+  /* Numbered variant — the gutter holds a numbered/checked marker (steps rail). */
+  .timeline-numbered .timeline-item {
+    grid-template-columns: 1.75rem 1fr;
+  }
+  .timeline-numbered .timeline-item:not(:last-child)::before {
+    inset-inline-start: 0.875rem;
+    inset-block: 1.75rem 0;
+  }
+  .timeline-numbered .timeline-indicator {
+    height: 1.75rem;
+  }
+  .timeline-marker {
+    @apply inline-flex items-center justify-center
+           size-7 rounded-full text-xs font-semibold tabular-nums
+           bg-surface-strong text-text-muted;
+    box-shadow: 0 0 0 3px var(--color-surface);
+  }
+  /* Completed and current steps fill with the primary ink. */
+  .timeline-item-success .timeline-marker,
+  .timeline-item-current .timeline-marker {
+    @apply bg-primary text-primary-content;
+  }
+}