@aortl/admin-css 0.0.1 → 0.1.0

package/src/components/button-group.css

@@ -0,0 +1,73 @@
+@layer components {
+  .btn-group {
+    @apply inline-flex;
+  }
+
+  .btn-group > .btn {
+    @apply rounded-none relative focus-visible:z-10;
+  }
+
+  .btn-group > .btn:not(:first-child) {
+    @apply -ml-px;
+  }
+
+  .btn-group > .btn:first-child {
+    @apply rounded-l-lg;
+  }
+
+  .btn-group > .btn:last-child {
+    @apply rounded-r-lg;
+  }
+
+  /* Split-button support: a <details class="menu"> child sits in the strip
+     alongside .btn children, with its .menu-trigger getting the same edge
+     treatment as the buttons around it. inline-flex on the details makes
+     the <summary> stretch vertically to match sibling .btn heights, so an
+     icon-only trigger doesn't end up shorter than its neighbours. */
+  .btn-group > .menu {
+    @apply relative focus-visible:z-10;
+    display: inline-flex;
+  }
+
+  .btn-group > .menu:not(:first-child) {
+    @apply -ml-px;
+  }
+
+  .btn-group > .menu > .menu-trigger {
+    @apply rounded-none;
+  }
+
+  .btn-group > .menu:first-child > .menu-trigger {
+    @apply rounded-l-lg;
+  }
+
+  .btn-group > .menu:last-child > .menu-trigger {
+    @apply rounded-r-lg;
+  }
+
+  /* Divider between adjacent items so same-coloured siblings (e.g. a
+     split button) read as separate actions. currentColor + color-mix
+     means the divider works across every .btn variant — light on
+     coloured buttons, dark on ghost/secondary — without per-variant
+     rules. */
+  .btn-group > .btn:not(:first-child),
+  .btn-group > .menu:not(:first-child) > .menu-trigger {
+    border-left-color: color-mix(in srgb, currentColor 25%, transparent);
+  }
+
+  .btn-group-vertical {
+    @apply inline-flex flex-col;
+  }
+
+  .btn-group-vertical > .btn:not(:first-child) {
+    @apply -mt-px ml-0;
+  }
+
+  .btn-group-vertical > .btn:first-child {
+    @apply rounded-t-lg rounded-bl-none;
+  }
+
+  .btn-group-vertical > .btn:last-child {
+    @apply rounded-b-lg rounded-tr-none;
+  }
+}

package/src/components/button.css

@@ -36,7 +36,56 @@
   }
 
   /* Modifiers */
-  .btn-block {
+  .btn-full-width {
     @apply w-full;
   }
+
+  /* Icon-only — equalises padding so the button reads as a square. The React
+     wrapper adds this automatically when `.btn` has an icon but no text
+     children; vanilla callers add it themselves. Pair with `aria-label`. */
+  .btn-square {
+    @apply px-2;
+  }
+
+  .btn-sm.btn-square {
+    @apply px-1.5;
+  }
+
+  .btn-lg.btn-square {
+    @apply px-2.5;
+  }
+
+  /* Loading state — paints a spinner via ::before, so no extra markup is
+     required. Sized in `em` so it tracks btn-sm / btn-lg. Pair with the
+     `disabled` attribute (or the React wrapper, which sets it for you) for
+     keyboard a11y; the visual disable lives here so vanilla still feels right
+     without it. */
+  .btn-loading {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
+
+  .btn-loading::before {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    border: 0.125em solid color-mix(in oklab, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    animation: spinner-spin 0.6s linear infinite;
+  }
+
+  /* Suppress a leading icon while loading so we don't show two glyphs.
+     Trailing icons stay visible — they may convey structural meaning
+     (e.g. a dropdown chevron on a split-button trigger). */
+  .btn-loading > :is(i, svg):first-child {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .btn-loading::before {
+      animation-duration: 2s;
+    }
+  }
 }

package/src/components/card.css

@@ -13,7 +13,7 @@
   }
 
   .card-title {
-    @apply text-lg font-semibold leading-tight;
+    @apply flex items-center gap-2 text-lg font-semibold leading-tight;
   }
 
   .card-description {

package/src/components/checkbox.css

@@ -0,0 +1,38 @@
+@layer components {
+  .checkbox {
+    @apply inline-flex items-center justify-center size-4 shrink-0
+           rounded-sm border bg-surface
+           cursor-pointer
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .checkbox[data-unchecked] {
+    @apply border-border-strong hover:border-text-muted;
+  }
+
+  .checkbox[data-checked],
+  .checkbox[data-indeterminate] {
+    @apply bg-primary border-primary hover:bg-primary-hover;
+  }
+
+  .checkbox[data-disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .checkbox-indicator {
+    @apply inline-flex items-center justify-center size-3 text-primary-content;
+  }
+
+  /* A <label> wrapping a checkbox + text lays out inline with a small gap.
+     Covers both the vanilla input.checkbox and Base UI's button.checkbox. */
+  label:has(> .checkbox) {
+    @apply inline-flex items-center gap-2 cursor-pointer;
+  }
+
+  label:has(> .checkbox:disabled),
+  label:has(> .checkbox[data-disabled]) {
+    @apply opacity-60 cursor-not-allowed;
+  }
+}

package/src/components/field.css

@@ -3,10 +3,25 @@
     @apply flex flex-col gap-1.5;
   }
 
+  /* Horizontal layout — pairs a control (typically a switch) with its label
+     on one row. Use when the label belongs beside the control, not above it. */
+  .field-row {
+    @apply flex-row items-center gap-3;
+  }
+
   .field-label {
     @apply text-sm font-medium text-text leading-none;
   }
 
+  .field-label[data-required]::after {
+    content: " *";
+    @apply text-danger;
+  }
+
+  .asteriskField {
+    @apply text-danger;
+  }
+
   .field-description {
     @apply text-xs text-text-muted leading-relaxed;
   }
@@ -15,9 +30,21 @@
     @apply text-xs text-danger leading-relaxed;
   }
 
-  /* When the field is in an invalid state, tint the contained input.
+  /* When the field is in an invalid state, tint the contained control.
      Base UI applies data-invalid on the Field root once validation fails. */
-  .field[data-invalid] .input {
+  .field[data-invalid] .input,
+  .field[data-invalid] .textarea,
+  .field[data-invalid] .select,
+  .field[data-invalid] .file-input {
     @apply border-danger;
   }
+
+  .field[data-invalid] .checkbox[data-unchecked],
+  .field[data-invalid] .radio[data-unchecked] {
+    @apply border-danger;
+  }
+
+  .field[data-invalid] .switch[data-unchecked] {
+    @apply ring-1 ring-danger;
+  }
 }

package/src/components/file-input.css

@@ -0,0 +1,36 @@
+@layer components {
+  .file-input {
+    @apply inline-flex items-center w-full pr-3 text-sm leading-none
+           bg-surface text-text
+           border border-transparent rounded-lg overflow-hidden
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           disabled:opacity-50 disabled:cursor-not-allowed
+           file:px-3 file:py-2 file:mr-3
+           file:text-sm file:font-medium file:leading-none
+           file:bg-surface-muted file:text-text hover:file:bg-surface-strong
+           file:border-0 file:border-r file:border-border
+           file:cursor-pointer;
+  }
+
+  .file-input-bordered {
+    @apply border-border hover:border-border-strong;
+  }
+
+  .file-input-ghost {
+    @apply bg-transparent hover:bg-surface-muted;
+  }
+
+  .file-input-danger {
+    @apply border-danger focus-visible:outline-danger;
+  }
+
+  /* Sizes */
+  .file-input-sm {
+    @apply text-xs file:text-xs file:px-2.5 file:py-1.5 file:mr-2.5;
+  }
+
+  .file-input-lg {
+    @apply text-base file:text-base file:px-4 file:py-2.5 file:mr-4;
+  }
+}

package/src/components/footer.css

@@ -0,0 +1,26 @@
+@layer components {
+  /* 2px top stripe mirrors the navbar's bottom stripe — both default to
+     a neutral gray via `--color-system-accent` and brand-shift together
+     when the consuming app overrides that variable at :root. */
+  .footer {
+    @apply flex flex-wrap items-center justify-between gap-3 px-4 py-3
+           bg-surface-muted text-text-muted
+           border-t-2 border-system-accent
+           text-xs;
+  }
+
+  .footer-links {
+    @apply flex flex-wrap items-center gap-3;
+  }
+
+  .footer-link {
+    @apply text-text-muted no-underline
+           hover:text-text hover:underline
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           rounded-sm;
+  }
+
+  .footer-meta {
+    @apply text-text-muted;
+  }
+}

package/src/components/index.css

@@ -1,4 +1,27 @@
+@import "./accordion.css";
+@import "./alert.css";
+@import "./app-shell.css";
+@import "./badge.css";
+@import "./brand-tile.css";
+@import "./spinner.css";
+@import "./progress.css";
+@import "./breadcrumbs.css";
+@import "./pagination.css";
 @import "./button.css";
+@import "./button-group.css";
 @import "./input.css";
+@import "./input-group.css";
+@import "./textarea.css";
+@import "./checkbox.css";
+@import "./radio.css";
+@import "./switch.css";
+@import "./select.css";
 @import "./card.css";
 @import "./field.css";
+@import "./file-input.css";
+@import "./footer.css";
+@import "./menu.css";
+@import "./navbar.css";
+@import "./sidebar.css";
+@import "./tabs.css";
+@import "./table.css";

package/src/components/input-group.css

@@ -0,0 +1,38 @@
+@layer components {
+  .input-group {
+    @apply inline-flex w-full;
+  }
+
+  /* Clear all corners, then re-apply the outer ones on the first/last
+     child. Equal-specificity rules win because input-group.css imports
+     after input.css. */
+  .input-group > * {
+    @apply rounded-none;
+  }
+
+  .input-group > :first-child {
+    @apply rounded-l-lg;
+  }
+
+  .input-group > :last-child {
+    @apply rounded-r-lg;
+  }
+
+  /* Collapse the shared edge between adjacent children. */
+  .input-group > :not(:first-child) {
+    margin-left: -1px;
+  }
+
+  /* Float the focused element so its outline ring and accented border
+     can't be clipped by its neighbour's overlapping edge. */
+  .input-group > :focus,
+  .input-group > :focus-within {
+    @apply relative z-10;
+  }
+
+  .input-group-addon {
+    @apply inline-flex items-center px-3 text-sm leading-none whitespace-nowrap
+           bg-surface-muted text-text-muted
+           border border-border;
+  }
+}

package/src/components/input.css

@@ -30,4 +30,11 @@
   .input-lg {
     @apply text-base px-4 py-2.5;
   }
+
+  /* Native date/time picker glyph. The browser handles dark-mode coloring
+     via the inherited `color-scheme` set on [data-theme]; we just tone the
+     glyph down at rest and brighten it on hover so it reads as interactive. */
+  .input::-webkit-calendar-picker-indicator {
+    @apply opacity-60 cursor-pointer hover:opacity-100;
+  }
 }

package/src/components/menu.css

@@ -0,0 +1,88 @@
+@layer components {
+  /* Native <details> drives open state — no JS needed. The popup is a
+     position: absolute child of the relative .menu root. */
+  .menu {
+    @apply relative inline-block;
+  }
+
+  /* Behaviour — applied always so the trigger works regardless of
+     additional visual classes (e.g. `btn btn-primary` for a split button). */
+  .menu-trigger {
+    @apply inline-flex items-center gap-1.5
+           cursor-pointer select-none
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+    list-style: none;
+  }
+
+  .menu-trigger::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Default appearance — bows out when `.btn` is also on the trigger so
+     button classes (bg, hover, padding, text colour) take over cleanly. */
+  .menu-trigger:not(.btn) {
+    @apply px-2.5 py-1.5 rounded-md text-sm leading-none
+           text-text bg-transparent
+           hover:bg-surface-strong;
+  }
+
+  /* Chevron uses currentColor so it tracks the trigger's text colour —
+     muted text on the default trigger, content colour on a btn-primary
+     split button, etc. Sized in em so it scales with btn-sm / btn-lg. */
+  .menu-trigger::after {
+    content: "";
+    width: 0.5em;
+    height: 0.5em;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 150ms ease;
+    flex-shrink: 0;
+  }
+
+  /* Icon-only triggers (e.g. the dropdown half of a split button) center
+     their chevron instead of letting it sit at the start. */
+  .menu-trigger:empty {
+    @apply justify-center;
+  }
+
+  .menu[open] > .menu-trigger::after {
+    transform: rotate(-135deg);
+  }
+
+  .menu-popup {
+    @apply absolute top-full left-0 z-30 mt-1
+           min-w-44 max-h-72 overflow-auto
+           py-1
+           bg-surface text-text
+           border border-border rounded-lg shadow-md;
+  }
+
+  .menu-item {
+    @apply flex items-center gap-2 w-full px-3 py-1.5 text-sm leading-none
+           text-text bg-transparent
+           border-0
+           text-left no-underline
+           cursor-pointer select-none
+           hover:bg-surface-muted
+           focus-visible:bg-surface-muted focus-visible:outline-none
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .menu-item[aria-disabled="true"] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .menu-separator {
+    @apply h-px my-1 bg-border border-0;
+  }
+
+  .menu-group {
+    @apply flex flex-col;
+  }
+
+  .menu-group-label {
+    @apply px-3 pt-2 pb-1 text-xs uppercase tracking-wide text-text-muted;
+  }
+}

package/src/components/navbar.css

@@ -0,0 +1,66 @@
+@layer components {
+  /* 2px bottom stripe is always rendered — defaults to a neutral gray via
+     `--color-system-accent` and brand-shifts when the consuming app overrides
+     that variable at :root (see also `.footer` and `.brand-tile`). */
+  .navbar {
+    @apply flex items-center gap-3 px-4 h-12
+           bg-surface-muted text-text
+           border-b-2 border-system-accent;
+  }
+
+  .navbar-brand {
+    @apply flex items-center gap-2 font-semibold text-sm shrink-0 text-text;
+  }
+
+  .navbar-items {
+    @apply flex items-center gap-0.5;
+  }
+
+  .navbar-item {
+    @apply inline-flex items-center gap-1.5 px-2.5 py-1.5
+           rounded-md text-sm leading-none
+           text-text bg-transparent
+           hover:bg-surface-strong
+           cursor-pointer select-none
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+  }
+
+  .navbar-item[aria-current="page"],
+  .navbar-item[data-active] {
+    @apply bg-primary-muted text-primary;
+  }
+
+  /* Right-aligned slot for actions: shop selector, user menu, etc. */
+  .navbar-actions {
+    @apply flex items-center gap-2 ml-auto;
+  }
+
+  /* Hamburger; hidden above the md breakpoint. The three lines are drawn
+     with one element + two box-shadow strokes — no SVG needed. */
+  .navbar-mobile-toggle {
+    @apply inline-flex items-center justify-center size-9 -ml-2
+           rounded-md text-text bg-transparent
+           hover:bg-surface-strong
+           cursor-pointer
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+  }
+
+  .navbar-mobile-toggle::before {
+    content: "";
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: currentColor;
+    border-radius: 1px;
+    box-shadow:
+      0 -6px 0 currentColor,
+      0 6px 0 currentColor;
+  }
+
+  @media (min-width: 48rem) {
+    .navbar-mobile-toggle {
+      display: none;
+    }
+  }
+}

package/src/components/pagination.css

@@ -0,0 +1,43 @@
+@layer components {
+  .pagination > ol,
+  .pagination > ul {
+    @apply inline-flex items-center gap-1 m-0 p-0 list-none;
+  }
+
+  .page-item {
+    @apply inline-flex;
+  }
+
+  /* Square button shared by number, prev/next, and ellipsis containers. */
+  .page-link {
+    @apply inline-flex items-center justify-center
+           min-w-8 h-8 px-2
+           rounded-md
+           text-sm font-medium leading-none
+           text-text bg-transparent
+           border border-transparent
+           hover:bg-surface-muted
+           cursor-pointer select-none no-underline
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
+  }
+
+  /* Current page — same surface as a sidebar's active item so the visual
+     metaphor is consistent. */
+  .page-link.active,
+  .page-link[aria-current="page"] {
+    @apply bg-primary-muted text-primary border-primary-muted;
+  }
+
+  .page-link[aria-disabled="true"] {
+    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  }
+
+  /* Ellipsis — non-interactive placeholder between groups of pages. */
+  .page-ellipsis {
+    @apply inline-flex items-center justify-center
+           min-w-8 h-8 px-2
+           text-sm text-text-muted select-none;
+  }
+}

package/src/components/progress.css

@@ -0,0 +1,97 @@
+@layer components {
+  /* Native <progress> styled across engines. `appearance: none` strips the
+     platform default; the track is the element itself, the fill comes from
+     ::-webkit-progress-value / ::-moz-progress-bar. */
+  .progress {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    height: 0.375rem;
+    border: 0;
+    border-radius: 9999px;
+    overflow: hidden;
+    background-color: var(--color-surface-strong);
+    color: var(--color-primary);
+  }
+
+  .progress::-webkit-progress-bar {
+    background-color: var(--color-surface-strong);
+    border-radius: 9999px;
+  }
+
+  .progress::-webkit-progress-value {
+    background-color: currentColor;
+    border-radius: 9999px;
+    transition: inline-size 200ms ease;
+  }
+
+  .progress::-moz-progress-bar {
+    background-color: currentColor;
+    border-radius: 9999px;
+    transition: inline-size 200ms ease;
+  }
+
+  /* Sizes */
+  .progress-sm {
+    height: 0.25rem;
+  }
+
+  .progress-lg {
+    height: 0.5rem;
+  }
+
+  /* Variants — recolour the fill via currentColor */
+  .progress-success {
+    color: var(--color-success);
+  }
+
+  .progress-warning {
+    color: var(--color-warning);
+  }
+
+  .progress-danger {
+    color: var(--color-danger);
+  }
+
+  /* Indeterminate — no value attribute. WebKit hides the value pseudo, Firefox
+     draws it full-width; in both cases we paint an animated gradient on the
+     bar itself. */
+  .progress:indeterminate {
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-strong) 0%,
+      var(--color-surface-strong) 40%,
+      currentColor 50%,
+      var(--color-surface-strong) 60%,
+      var(--color-surface-strong) 100%
+    );
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+    animation: progress-indeterminate 1.2s linear infinite;
+  }
+
+  .progress:indeterminate::-webkit-progress-bar {
+    background-color: transparent;
+  }
+
+  .progress:indeterminate::-webkit-progress-value,
+  .progress:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress:indeterminate {
+      animation-duration: 3s;
+    }
+  }
+
+  @keyframes progress-indeterminate {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}