@svadmin/ui 0.76.0 → 0.77.0

package/dist/app.css

@@ -5530,6 +5530,8 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
@@ -5764,6 +5766,11 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
@@ -5931,6 +5938,10 @@
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -5946,6 +5957,10 @@
   .text-\[0\.8125rem\] {
     font-size: 0.8125rem;
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -6684,7 +6699,8 @@
     --card-foreground: oklch(0.205 0.012 264);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.205 0.012 264);
-    --primary: oklch(0.558 0.22 278);
+    /* Stripe is the default when no persisted or explicit preset exists. */
+    --primary: oklch(0.54 0.24 293);
     --primary-foreground: oklch(0.99 0 0);
     --secondary: oklch(0.95 0.006 264);
     --secondary-foreground: oklch(0.265 0.014 264);
@@ -6696,8 +6712,8 @@
     --destructive-foreground: oklch(0.99 0 0);
     --border: oklch(0.925 0.003 264);
     --input: oklch(0.84 0.01 264);
-    --ring: oklch(0.558 0.22 278);
-    --chart-1: oklch(0.558 0.22 278);
+    --ring: oklch(0.54 0.24 293);
+    --chart-1: oklch(0.54 0.24 293);
     --chart-2: oklch(0.57 0.12 196);
     --chart-3: oklch(0.56 0.13 244);
     --chart-4: oklch(0.72 0.15 78);
@@ -6710,12 +6726,12 @@
     --info-foreground: oklch(0.99 0 0);
     --sidebar: oklch(1 0 0);
     --sidebar-foreground: oklch(0.265 0.014 264);
-    --sidebar-primary: oklch(0.558 0.22 278);
+    --sidebar-primary: oklch(0.54 0.24 293);
     --sidebar-primary-foreground: oklch(0.99 0 0);
     --sidebar-accent: oklch(0.962 0.012 278);
     --sidebar-accent-foreground: oklch(0.34 0.105 278);
     --sidebar-border: var(--border);
-    --sidebar-ring: oklch(0.558 0.22 278);
+    --sidebar-ring: oklch(0.54 0.24 293);
     --svadmin-shadow-control: 0 1px 2px rgb(15 23 42 / 0.04);
     --svadmin-shadow-surface: 0 1px 2px rgb(15 23 42 / 0.035);
     --svadmin-shadow-surface-hover: 0 2px 5px rgb(15 23 42 / 0.06);
@@ -6729,8 +6745,8 @@
     --card-foreground: oklch(0.96 0.004 264);
     --popover: oklch(0.195 0.012 264);
     --popover-foreground: oklch(0.96 0.004 264);
-    --primary: oklch(0.68 0.18 278);
-    --primary-foreground: oklch(0.15 0.03 278);
+    --primary: oklch(0.72 0.19 293);
+    --primary-foreground: oklch(0.16 0.02 270);
     --secondary: oklch(0.235 0.012 264);
     --secondary-foreground: oklch(0.94 0.004 264);
     --muted: oklch(0.235 0.012 264);
@@ -6741,8 +6757,8 @@
     --destructive-foreground: oklch(0.98 0 0);
     --border: oklch(0.3 0.012 264);
     --input: oklch(0.335 0.014 264);
-    --ring: oklch(0.68 0.18 278);
-    --chart-1: oklch(0.68 0.18 278);
+    --ring: oklch(0.72 0.19 293);
+    --chart-1: oklch(0.72 0.19 293);
     --chart-2: oklch(0.7 0.13 177);
     --chart-3: oklch(0.72 0.13 230);
     --chart-4: oklch(0.78 0.14 83);
@@ -6755,12 +6771,12 @@
     --info-foreground: oklch(0.15 0.03 244);
     --sidebar: oklch(0.17 0.01 264);
     --sidebar-foreground: oklch(0.9 0.006 264);
-    --sidebar-primary: oklch(0.68 0.18 278);
-    --sidebar-primary-foreground: oklch(0.15 0.03 278);
+    --sidebar-primary: oklch(0.72 0.19 293);
+    --sidebar-primary-foreground: oklch(0.16 0.02 270);
     --sidebar-accent: oklch(0.245 0.035 278);
     --sidebar-accent-foreground: oklch(0.84 0.09 278);
     --sidebar-border: oklch(0.3 0.012 264);
-    --sidebar-ring: oklch(0.68 0.18 278);
+    --sidebar-ring: oklch(0.72 0.19 293);
     --svadmin-shadow-control: 0 1px 2px rgb(0 0 0 / 0.24), 0 0 0 1px rgb(255 255 255 / 0.025);
     --svadmin-shadow-surface: 0 1px 2px rgb(0 0 0 / 0.22), 0 1px 3px rgb(0 0 0 / 0.16);
     --svadmin-shadow-surface-hover: 0 2px 5px rgb(0 0 0 / 0.28), 0 1px 2px rgb(0 0 0 / 0.2);
@@ -6795,7 +6811,7 @@
     --chart-1: oklch(0.68 0.18 278);
   }
 
-  /* Indigo (default) */
+  /* Indigo (compatibility preset) */
   [data-theme="indigo"] {
     --primary: oklch(0.558 0.22 278);
     --primary-foreground: oklch(0.985 0 0);
@@ -6816,6 +6832,28 @@
     --chart-1: oklch(0.68 0.18 278);
   }
 
+  /* Stripe-inspired preset (matches @svadmin/core builtinPresets.stripe). */
+  [data-theme="stripe"] {
+    --primary: oklch(0.54 0.24 293);
+    --primary-foreground: oklch(0.99 0 0);
+    --ring: oklch(0.54 0.24 293);
+    --sidebar-primary: oklch(0.54 0.24 293);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-ring: oklch(0.54 0.24 293);
+    --chart-1: oklch(0.54 0.24 293);
+  }
+  .dark[data-theme="stripe"],
+  .dark [data-theme="stripe"],
+  [data-theme="stripe"][data-theme-mode="dark"] {
+    --primary: oklch(0.72 0.19 293);
+    --primary-foreground: oklch(0.16 0.02 270);
+    --ring: oklch(0.72 0.19 293);
+    --sidebar-primary: oklch(0.72 0.19 293);
+    --sidebar-primary-foreground: oklch(0.16 0.02 270);
+    --sidebar-ring: oklch(0.72 0.19 293);
+    --chart-1: oklch(0.72 0.19 293);
+  }
+
   /* Blue */
   [data-theme="blue"] {
     --primary: oklch(0.546 0.245 262.881);
@@ -6947,7 +6985,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 0.875rem;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -9107,6 +9145,10 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   --svadmin-surface-shadow: var(--shadow-surface);
   --svadmin-surface-hover-shadow: var(--shadow-surface-hover);
   --svadmin-floating-shadow: var(--shadow-overlay);
+  --svadmin-motion-fast: 150ms;
+  --svadmin-motion-standard: 200ms;
+  --svadmin-motion-slow: 900ms;
+  --svadmin-focus-offset: 2px;
 }
 
 .layout-clean-flat [data-svadmin-main] {
@@ -9447,14 +9489,6 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   min-height: 4.25rem;
 }
 
-.layout-clean-flat [data-svadmin-content-page] > :is(div, section, form) {
-  margin-bottom: 1.25rem;
-}
-
-.layout-clean-flat [data-svadmin-content-page] > :is(div, section, form):last-child {
-  margin-bottom: 0;
-}
-
 .layout-clean-flat [data-svadmin-content-page] > div:first-child,
 .layout-clean-flat [data-svadmin-content-page] > .flex:first-child,
 .layout-clean-flat [data-svadmin-content-page] > .relative:first-child {
@@ -9955,6 +9989,319 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   }
 }
 
+/* --- Stripe-inspired visual refinement ---------------------
+ * The existing clean-flat preset owns the shell geometry. This layer keeps
+ * that contract intact while giving the example a single neutral canvas,
+ * restrained elevation, and one deliberate interaction accent.
+ */
+.layout-clean-flat[data-theme="stripe"] {
+  --background: #f6f9fc;
+  --foreground: #0a2540;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.5rem;
+  --card: #ffffff;
+  --card-foreground: #0a2540;
+  --popover: #ffffff;
+  --popover-foreground: #0a2540;
+  --secondary: #eef2f7;
+  --secondary-foreground: #425466;
+  --muted: #f1f4f8;
+  --muted-foreground: #425466;
+  --accent: #eef0ff;
+  --accent-foreground: #5147d9;
+  --border: #e6ebf1;
+  --input: #cbd5e1;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #425466;
+  --sidebar-accent: #f3f5ff;
+  --sidebar-accent-foreground: #0a2540;
+  --sidebar-border: #e6ebf1;
+  --svadmin-shadow-control: 0 1px 2px rgb(15 23 42 / 0.04), 0 0 0 1px rgb(15 23 42 / 0.02);
+  --svadmin-shadow-surface: 0 2px 4px rgb(15 23 42 / 0.04), 0 8px 16px rgb(15 23 42 / 0.08);
+  --svadmin-shadow-surface-hover: 0 4px 8px rgb(15 23 42 / 0.06), 0 16px 32px rgb(15 23 42 / 0.1);
+  --svadmin-control-shadow: var(--svadmin-shadow-control);
+  --svadmin-surface-shadow: var(--svadmin-shadow-surface);
+  --svadmin-surface-hover-shadow: var(--svadmin-shadow-surface-hover);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  letter-spacing: 0;
+}
+
+.layout-clean-flat[data-theme="stripe"].svadmin-theme-dark,
+.dark.layout-clean-flat[data-theme="stripe"] {
+  --background: #0f172a;
+  --foreground: #f1f5f9;
+  --card: #111c2e;
+  --card-foreground: #f1f5f9;
+  --popover: #111c2e;
+  --popover-foreground: #f1f5f9;
+  --secondary: #1e293b;
+  --secondary-foreground: #cbd5e1;
+  --muted: #18263b;
+  --muted-foreground: #9aa9bd;
+  --accent: #25224f;
+  --accent-foreground: #c6c2ff;
+  --border: #26364c;
+  --input: #3a4a60;
+  --sidebar: #101b2d;
+  --sidebar-foreground: #cbd5e1;
+  --sidebar-accent: #1a2740;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: #26364c;
+  --svadmin-shadow-control: 0 1px 2px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(255 255 255 / 0.02);
+  --svadmin-shadow-surface: 0 2px 4px rgb(0 0 0 / 0.22), 0 8px 18px rgb(0 0 0 / 0.18);
+  --svadmin-shadow-surface-hover: 0 4px 10px rgb(0 0 0 / 0.3), 0 16px 32px rgb(0 0 0 / 0.22);
+  --svadmin-control-shadow: var(--svadmin-shadow-control);
+  --svadmin-surface-shadow: var(--svadmin-shadow-surface);
+  --svadmin-surface-hover-shadow: var(--svadmin-shadow-surface-hover);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-main] {
+  background: var(--background);
+  color: var(--foreground);
+  background-image:
+    linear-gradient(to right, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px);
+  background-size: var(--svadmin-grid-size) var(--svadmin-grid-size);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-sidebar] {
+  border-inline-end: 1px solid var(--sidebar-border);
+  background: var(--sidebar);
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-sidebar] > div:first-child {
+  border-bottom: 1px solid var(--sidebar-border);
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item {
+  min-height: 2.25rem;
+  margin-block: 0.125rem;
+  border-radius: 0.375rem;
+  color: var(--sidebar-foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  transition: background-color 180ms ease-out, color 180ms ease-out;
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item:hover {
+  background: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active {
+  background: color-mix(in oklch, var(--primary) 9%, var(--sidebar));
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active::before {
+  content: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active svg {
+  color: var(--primary);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-sidebar] nav > * > button:not(.sidebar-menu-item) {
+  color: var(--muted-foreground);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-topbar] {
+  min-height: 4rem;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in oklch, var(--card) 96%, transparent);
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-topbar] .svadmin-header-search {
+  min-width: 10rem;
+  border-color: var(--border);
+  border-radius: 0.5rem;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-content-page] {
+  padding-block: 1.5rem 3rem;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-auth-page] {
+  background: var(--background);
+  background-image:
+    linear-gradient(to right, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in oklch, var(--primary) 4%, transparent) 1px, transparent 1px);
+  background-size: var(--svadmin-grid-size) var(--svadmin-grid-size);
+  color: var(--foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-page-header] h1,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-list-header] h1,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-form-header] h1,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-resource-operations] h1 {
+  color: var(--foreground);
+  font-size: 1.5rem;
+  font-weight: 650;
+  letter-spacing: 0;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-page-header] p,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-list-header] p,
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-form-header] p {
+  color: var(--muted-foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="card"] {
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="card"][data-interactive="true"] {
+  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="card"][data-interactive="true"]:hover {
+  transform: translateY(-0.25rem);
+  box-shadow: var(--svadmin-surface-hover-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-metric-card] {
+  min-height: 7rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-metric-card] [data-svadmin-metric-value] {
+  font-variant-numeric: tabular-nums;
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button) {
+  border-radius: 0.5rem;
+  box-shadow: var(--svadmin-control-shadow);
+  font-weight: 600;
+  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):is([data-variant="ghost"], [data-variant="link"], .svadmin-button--ghost, .svadmin-button--link) {
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button)[data-variant="default"],
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button).svadmin-button--default {
+  box-shadow:
+    0 2px 5px color-mix(in oklch, var(--primary) 40%, transparent),
+    inset 0 1px 0 rgb(255 255 255 / 0.2);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):active {
+  transform: translateY(0) scale(0.98);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):is([data-variant="default"], [data-variant="outline"], .svadmin-button--default, .svadmin-button--outline):active {
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.18);
+}
+
+.layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="input"]:focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="textarea"]:focus-visible,
+.layout-clean-flat[data-theme="stripe"] [data-slot="select-trigger"]:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--ring) 78%, transparent);
+  outline-offset: 2px;
+}
+
+.layout-clean-flat[data-theme="stripe"] :is(.transition, .transition-all, .transition-colors, .transition-transform, .transition-opacity) {
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-slot="input"],
+.layout-clean-flat[data-theme="stripe"] [data-slot="textarea"],
+.layout-clean-flat[data-theme="stripe"] [data-slot="select-trigger"] {
+  min-height: 2.5rem;
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-control-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-head] [data-slot="table-head"] {
+  height: 2.75rem;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row] [data-slot="table-cell"] {
+  height: 3.25rem;
+  background: var(--card);
+  color: var(--foreground);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row] {
+  transition: background-color 160ms ease-out;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-row]:hover [data-slot="table-cell"] {
+  background: color-mix(in oklch, var(--primary) 3%, var(--card));
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-table-toolbar] {
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--card);
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-form-actions] {
+  border-top: 1px solid var(--border);
+  background: color-mix(in oklch, var(--card) 96%, var(--background));
+  box-shadow: none;
+}
+
+.layout-clean-flat[data-theme="stripe"] [data-svadmin-auth-page] > main > div > section {
+  border-radius: 0.5rem;
+  box-shadow: var(--svadmin-surface-shadow);
+}
+
+@media (max-width: 48rem) {
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-content-page] {
+    padding-block: 1rem 2rem;
+  }
+
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-page-header] h1,
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-list-header] h1,
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-form-header] h1,
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-resource-operations] h1 {
+    font-size: 1.25rem;
+  }
+
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-topbar] .svadmin-header-search {
+    min-width: 0;
+  }
+
+  .layout-clean-flat[data-theme="stripe"] [data-svadmin-metric-card] {
+    min-height: 6.25rem;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .layout-clean-flat[data-theme="stripe"] :is([data-slot="button"], .svadmin-button):is([data-variant="default"], [data-variant="outline"], .svadmin-button--default, .svadmin-button--outline):hover {
+    transform: translateY(-0.125rem);
+  }
+}
+
 :root,
 .svadmin-theme{
   --color-background: var(--background);