@aortl/admin-css 0.0.1 → 0.2.0

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;
+    }
+  }
+}

package/src/components/radio.css

@@ -0,0 +1,45 @@
+@layer components {
+  .radio {
+    @apply inline-flex items-center justify-center size-4 shrink-0
+           rounded-full 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;
+  }
+
+  .radio[data-unchecked] {
+    @apply border-border-strong hover:border-text-muted;
+  }
+
+  .radio[data-checked] {
+    @apply bg-primary border-primary hover:bg-primary-hover;
+  }
+
+  .radio[data-disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .radio-indicator {
+    @apply inline-flex size-1.5 rounded-full bg-primary-content;
+  }
+
+  .radio-group {
+    @apply inline-flex flex-wrap gap-4;
+  }
+
+  .radio-group-vertical {
+    @apply flex-col gap-2 items-start;
+  }
+
+  /* A <label> wrapping a radio + text lays out inline with a small gap.
+     Covers both the vanilla input.radio and Base UI's span.radio. */
+  label:has(> .radio) {
+    @apply inline-flex items-center gap-2 cursor-pointer;
+  }
+
+  label:has(> .radio:disabled),
+  label:has(> .radio[data-disabled]) {
+    @apply opacity-60 cursor-not-allowed;
+  }
+}

package/src/components/select.css

@@ -0,0 +1,114 @@
+@layer components {
+  .select {
+    @apply inline-flex items-center justify-between gap-2 w-full px-3 py-2
+           rounded-lg text-sm leading-none text-left
+           bg-surface text-text
+           border border-transparent
+           cursor-pointer select-none
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .select[data-popup-open] {
+    @apply outline-2 outline-offset-2 outline-primary;
+  }
+
+  .select[data-placeholder] {
+    @apply text-text-muted;
+  }
+
+  .select-bordered {
+    @apply border-border hover:border-border-strong;
+  }
+
+  .select-ghost {
+    @apply bg-transparent hover:bg-surface-muted;
+  }
+
+  .select-danger {
+    @apply border-danger focus-visible:outline-danger;
+  }
+
+  /* Sizes */
+  .select-sm {
+    @apply text-xs px-2.5 py-1.5;
+  }
+
+  .select-lg {
+    @apply text-base px-4 py-2.5;
+  }
+
+  /* Native <select> usage: same class, but suppress the native chevron and
+     supply our own via background-image so the look matches the Base UI
+     trigger. Chevron stroke uses Flexoki base-500, which reads as neutral
+     in both light and dark mode. */
+  select.select {
+    appearance: none;
+    padding-right: 2rem;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1rem;
+  }
+
+  select.select-sm {
+    padding-right: 1.75rem;
+    background-size: 0.875rem;
+  }
+
+  select.select-lg {
+    padding-right: 2.25rem;
+  }
+
+  .select-icon {
+    @apply inline-flex items-center justify-center size-4 shrink-0
+           text-text-muted transition-transform duration-150;
+  }
+
+  .select[data-popup-open] .select-icon {
+    @apply rotate-180;
+  }
+
+  .select-popup {
+    @apply min-w-[var(--anchor-width)] max-h-72 overflow-auto
+           py-1 outline-none
+           bg-surface text-text
+           border border-border rounded-lg shadow-md
+           transition-[opacity,transform] duration-100;
+  }
+
+  .select-popup[data-starting-style],
+  .select-popup[data-ending-style] {
+    @apply opacity-0;
+  }
+
+  .select-popup[data-starting-style] {
+    @apply -translate-y-1;
+  }
+
+  .select-item {
+    @apply flex items-center gap-2 px-3 py-1.5 text-sm
+           cursor-pointer select-none outline-none;
+  }
+
+  .select-item[data-highlighted] {
+    @apply bg-surface-muted;
+  }
+
+  .select-item[data-selected] {
+    @apply font-medium;
+  }
+
+  .select-item[data-disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .select-item-indicator {
+    @apply inline-flex items-center justify-center size-4 ml-auto text-primary;
+  }
+
+  .select-group-label {
+    @apply px-3 pt-2 pb-1 text-xs uppercase tracking-wide text-text-muted;
+  }
+}

package/src/components/sidebar.css

@@ -0,0 +1,225 @@
+@layer components {
+  .sidebar {
+    @apply flex flex-col shrink-0
+           bg-surface-muted text-text
+           border-r border-border;
+    width: var(--app-shell-sidebar-w, 240px);
+    transition: width 150ms ease;
+  }
+
+  /* Hidden checkbox that drives the collapsed state via :has(). Lives inside
+     <Sidebar.CollapseToggle>, but :has() finds it from anywhere in .sidebar. */
+  .sidebar-toggle {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .sidebar:has(.sidebar-toggle:checked) {
+    width: var(--app-shell-sidebar-w-collapsed, 56px);
+  }
+
+  /* Hide labels, group headings, badges, and tree panels in collapsed mode. */
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-label,
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-group-label,
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-badge,
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-panel,
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger::after {
+    display: none;
+  }
+
+  /* Center the icon in collapsed mode. */
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-item,
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-subitem,
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger {
+    @apply justify-center px-1;
+  }
+
+  .sidebar-header {
+    @apply flex items-center gap-2 px-3 h-12 shrink-0 border-b border-border;
+  }
+
+  .sidebar-nav {
+    @apply flex flex-col gap-0.5 px-2 py-2 flex-1 overflow-auto;
+  }
+
+  .sidebar-group {
+    @apply flex flex-col gap-0.5;
+  }
+
+  .sidebar-group + .sidebar-group {
+    @apply mt-2;
+  }
+
+  .sidebar-group-label {
+    @apply px-2 pt-2 pb-1 text-xs uppercase tracking-wide text-text-muted;
+  }
+
+  .sidebar-item {
+    @apply flex items-center gap-2 px-2 py-1.5
+           rounded-md text-sm leading-none text-text
+           bg-transparent hover:bg-surface-strong
+           cursor-pointer select-none no-underline
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+  }
+
+  .sidebar-item[aria-current="page"],
+  .sidebar-item[data-active] {
+    @apply bg-primary-muted text-primary font-medium;
+  }
+
+  .sidebar-icon {
+    @apply inline-flex items-center justify-center size-4 shrink-0 text-text-muted;
+  }
+
+  .sidebar-item[aria-current="page"] .sidebar-icon,
+  .sidebar-item[data-active] .sidebar-icon {
+    @apply text-primary;
+  }
+
+  .sidebar-label {
+    @apply truncate min-w-0 flex-1;
+  }
+
+  .sidebar-badge {
+    @apply ml-auto inline-flex items-center justify-center min-w-5 px-1.5 h-5
+           rounded-full text-xs font-medium
+           bg-surface-strong text-text-muted;
+  }
+
+  /* Native <details> for tree groups. */
+  .sidebar-collapsible {
+    @apply flex flex-col;
+    interpolate-size: allow-keywords;
+  }
+
+  .sidebar-collapsible-trigger {
+    @apply flex items-center gap-2 w-full px-2 py-1.5
+           rounded-md text-sm leading-none text-text text-left
+           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;
+    list-style: none;
+  }
+
+  .sidebar-collapsible-trigger::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Chevron — points right when closed, down when open. */
+  .sidebar-collapsible-trigger::after {
+    content: "";
+    margin-left: auto;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    color: var(--color-text-muted);
+    transform: rotate(-45deg);
+    transition: transform 150ms ease;
+    flex-shrink: 0;
+  }
+
+  .sidebar-collapsible[open] > .sidebar-collapsible-trigger::after {
+    transform: rotate(45deg);
+  }
+
+  .sidebar-collapsible-panel {
+    @apply flex flex-col gap-0.5 pl-4 mt-0.5;
+    overflow: hidden;
+  }
+
+  /* Smooth panel expansion via ::details-content (modern browsers).
+     Older browsers degrade to the native instant toggle. */
+  .sidebar-collapsible::details-content {
+    opacity: 0;
+    height: 0;
+    overflow: clip;
+    transition:
+      opacity 150ms ease,
+      height 150ms ease,
+      content-visibility 150ms;
+    transition-behavior: allow-discrete;
+  }
+
+  .sidebar-collapsible[open]::details-content {
+    opacity: 1;
+    height: auto;
+  }
+
+  .sidebar-subitem {
+    @apply flex items-center gap-2 px-2 py-1
+           rounded-md text-sm leading-none text-text
+           bg-transparent hover:bg-surface-strong
+           cursor-pointer select-none no-underline
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+  }
+
+  .sidebar-subitem[aria-current="page"],
+  .sidebar-subitem[data-active] {
+    @apply bg-primary-muted text-primary font-medium;
+  }
+
+  .sidebar-footer {
+    @apply flex flex-col gap-1 px-2 py-2 border-t border-border;
+  }
+
+  /* Label that toggles the hidden checkbox inside it. */
+  .sidebar-collapse-toggle {
+    @apply relative inline-flex items-center justify-center size-7
+           rounded-md text-text-muted bg-transparent
+           hover:bg-surface-strong hover:text-text
+           cursor-pointer select-none
+           transition-colors duration-150;
+  }
+
+  .sidebar-collapse-toggle:has(.sidebar-toggle:focus-visible) {
+    @apply outline-2 outline-offset-2 outline-primary;
+  }
+
+  /* Chevron-left when expanded; flips to chevron-right when collapsed. */
+  .sidebar-collapse-toggle::before {
+    content: "";
+    width: 0.5rem;
+    height: 0.5rem;
+    border-left: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 150ms ease;
+  }
+
+  .sidebar:has(.sidebar-toggle:checked) .sidebar-collapse-toggle::before {
+    transform: rotate(-135deg);
+  }
+
+  /* Mobile drawer surface (rendered inside a Base UI Dialog) */
+  .sidebar-drawer-backdrop {
+    @apply fixed inset-0 z-40 bg-black/40
+           transition-opacity duration-150;
+  }
+
+  .sidebar-drawer-backdrop[data-starting-style],
+  .sidebar-drawer-backdrop[data-ending-style] {
+    @apply opacity-0;
+  }
+
+  .sidebar-drawer {
+    @apply fixed inset-y-0 left-0 z-50 flex flex-col
+           bg-surface-muted text-text border-r border-border
+           transition-transform duration-150;
+    width: min(var(--app-shell-sidebar-w, 240px), 80vw);
+  }
+
+  .sidebar-drawer[data-starting-style],
+  .sidebar-drawer[data-ending-style] {
+    @apply -translate-x-full;
+  }
+}

package/src/components/spinner.css

@@ -0,0 +1,40 @@
+@layer components {
+  /* Border-driven spinner — the top edge takes the host's `currentColor` while
+     the rest stays muted, producing a visible rotating arc. Inline-block so it
+     drops into `.btn`, `.field-label`, etc., without disturbing flow layout. */
+  .spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    animation: spinner-spin 0.6s linear infinite;
+  }
+
+  .spinner-sm {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-width: 1.5px;
+  }
+
+  .spinner-lg {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-width: 3px;
+  }
+
+  /* Honour reduced-motion — pause rather than spin frantically. */
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation-duration: 2s;
+    }
+  }
+
+  @keyframes spinner-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/components/switch.css

@@ -0,0 +1,62 @@
+@layer components {
+  .switch {
+    @apply relative inline-flex items-center w-9 h-5 shrink-0 p-0.5
+           rounded-full border border-transparent
+           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;
+  }
+
+  /* Base UI button variant: state is driven by data-* attributes. */
+  .switch[data-unchecked] {
+    @apply bg-border-strong;
+  }
+
+  .switch[data-checked] {
+    @apply bg-primary;
+  }
+
+  .switch[data-disabled] {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .switch-thumb {
+    @apply size-4 rounded-full bg-paper shadow-sm
+           transition-transform duration-150;
+  }
+
+  .switch[data-checked] .switch-thumb {
+    @apply translate-x-4;
+  }
+
+  /* Native input variant: state is driven by :checked, thumb is ::before. */
+  input.switch {
+    @apply appearance-none bg-border-strong m-0;
+  }
+
+  input.switch:checked {
+    @apply bg-primary;
+  }
+
+  input.switch::before {
+    content: "";
+    @apply size-4 rounded-full bg-paper shadow-sm
+           transition-transform duration-150;
+  }
+
+  input.switch:checked::before {
+    @apply translate-x-4;
+  }
+
+  /* A <label> wrapping a switch + text lays out inline.
+     Switches are wider than checkboxes/radios so the gap is a touch larger. */
+  label:has(> .switch) {
+    @apply inline-flex items-center gap-3 cursor-pointer;
+  }
+
+  label:has(> .switch:disabled),
+  label:has(> .switch[data-disabled]) {
+    @apply opacity-60 cursor-not-allowed;
+  }
+}

package/src/components/table.css

@@ -0,0 +1,124 @@
+@layer components {
+  .table {
+    @apply w-full text-sm text-text border-collapse;
+  }
+
+  /* Default cell padding/alignment/divider — applied via descendant selectors
+     for hand-written markup AND via explicit classes for cases where the
+     consumer renders a non-<td>/<th> element. :where() keeps specificity at 0
+     so authored utilities and modifiers can win without !important. Covers
+     thead/tbody/tfoot uniformly so a hand-written `<tfoot> <td>` lands on
+     the same padding as the React `.table-cell`. */
+  .table :where(th, td),
+  .table-cell,
+  .table-header-cell {
+    @apply px-3 py-1.5 text-left align-middle border-b border-border;
+  }
+
+  .table :where(thead th),
+  .table-header-cell {
+    @apply font-medium text-text-muted bg-surface-muted border-b-border-strong whitespace-nowrap;
+  }
+
+  /* Drop the divider on the very last row, whether it lives in tbody (no
+     tfoot present) or in tfoot — so the table doesn't double-border against
+     a surrounding container. `.table > :last-child` resolves to the final
+     section element (browsers wrap a loose `<tr>` in an implicit <tbody>). */
+  .table > :last-child > tr:last-child :where(td),
+  .table > :last-child > tr:last-child .table-cell {
+    @apply border-b-0;
+  }
+
+  /* Alignment — `data-align` works equally for hand-written
+     `<td data-align="right">` and for React's `<Table.Cell align="right">`,
+     so consumers never need a Tailwind utility in their markup. */
+  .table :where(th, td)[data-align="right"] {
+    @apply text-right;
+  }
+  .table :where(th, td)[data-align="center"] {
+    @apply text-center;
+  }
+
+  /* Right-aligned with tabular-nums so currency/totals columns don't shimmy. */
+  .table-cell-numeric {
+    @apply text-right tabular-nums;
+  }
+
+  /* Narrow first-column gutter for row-level status icons. The inline icon
+     rule normalizes Tabler webfont (`<i class="ti …">`) against React's
+     `<IconCircleCheck size={16}>` SVG so both deliveries land at the same
+     16px box and the same vertical baseline. */
+  .table-cell-gutter {
+    @apply w-6 px-0 text-center text-text-muted;
+  }
+  .table-cell-gutter > :is(i, svg) {
+    font-size: 1rem;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  /* Modifiers compose independently — striped + sticky + relaxed is valid. */
+  .table-striped tbody tr:nth-child(even) :where(td) {
+    @apply bg-surface-muted;
+  }
+
+  .table-bordered {
+    @apply border border-border;
+  }
+  .table-bordered :where(th, td) {
+    @apply border border-border;
+  }
+
+  .table-relaxed :where(th, td) {
+    @apply px-4 py-3;
+  }
+
+  /* Sticky header — requires a scrolling ancestor (e.g.
+     `<div class="overflow-auto" style="max-height: …">`). The wrapper isn't
+     added by the component; it would have no vanilla equivalent and would
+     break compositions like `<details><table>…`. */
+  .table-sticky thead :where(th) {
+    @apply sticky top-0 z-10 bg-surface-muted;
+  }
+
+  /* Hover — always on. Admin tables expect a row-scan affordance. */
+  .table tbody tr {
+    @apply transition-colors duration-75;
+  }
+  .table tbody tr:hover :where(td) {
+    @apply bg-surface-muted;
+  }
+
+  /* Selection — pure CSS via :has(). Fires for native checkboxes,
+     Base UI's checkbox via [data-checked], and the explicit
+     [data-selected] hook for programmatic selection without a checkbox. */
+  .table tbody tr:has(input[type="checkbox"]:checked),
+  .table tbody tr:has(.checkbox[data-checked]),
+  .table tbody tr[data-selected] {
+    @apply bg-primary-muted;
+  }
+  .table tbody tr:has(input[type="checkbox"]:checked):hover :where(td),
+  .table tbody tr:has(.checkbox[data-checked]):hover :where(td),
+  .table tbody tr[data-selected]:hover :where(td) {
+    @apply bg-primary-muted;
+  }
+
+  /* Whole-row link — the first <a> in the row gets its hit-area expanded to
+     fill the row via ::after. Consumer still writes the actual anchor
+     (preserves <Link>, plain <a href>, etc.). Other in-row anchors/buttons
+     should sit above the spanning pseudo-element with `relative` + non-auto
+     z-index; `.btn` already qualifies. */
+  .table-row-link {
+    @apply relative cursor-pointer;
+  }
+  .table-row-link:hover :where(td) {
+    @apply bg-surface-muted;
+  }
+  .table-row-link a:first-of-type::after {
+    content: "";
+    @apply absolute inset-0;
+  }
+  .table-row-link:focus-within {
+    @apply outline-2 -outline-offset-2 outline-primary;
+  }
+}