@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/styles/themes/stripe.css

@@ -6,15 +6,15 @@
  * that subtree.
  */
 @layer base {
-  [data-sprout-theme="stripe"] {
+  [data-sprout-theme='stripe'] {
     --sprout-font: ui-sans-serif, system-ui, sans-serif;
     --sprout-radius-control: 0.375rem;
     --sprout-radius-panel: 0.5rem;
   }
 
-  [data-sprout-theme="stripe"],
-  .light[data-sprout-theme="stripe"],
-  .light [data-sprout-theme="stripe"] {
+  [data-sprout-theme='stripe'],
+  .light[data-sprout-theme='stripe'],
+  .light [data-sprout-theme='stripe'] {
     --sprout-canvas: #f6f9fc;
     --sprout-surface: #ffffff;
     --sprout-hover: #f0f2f4;
@@ -40,17 +40,13 @@
     --sprout-success-subtle: #e8f4eb;
     --sprout-warning: #8a4b08;
     --sprout-warning-subtle: #fdf1dc;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 10%,
-      var(--sprout-surface)
-    );
+    --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 10%, var(--sprout-surface));
     --sprout-secondary: #eef0f2;
     --sprout-overlay: rgb(18 18 18 / 0.35);
   }
 
-  .dark[data-sprout-theme="stripe"],
-  .dark [data-sprout-theme="stripe"] {
+  .dark[data-sprout-theme='stripe'],
+  .dark [data-sprout-theme='stripe'] {
     --sprout-canvas: #0a1929;
     --sprout-surface: #112640;
     --sprout-hover: #23374f;
@@ -76,18 +72,14 @@
     --sprout-success-subtle: #1c3223;
     --sprout-warning: #eec27e;
     --sprout-warning-subtle: #34291b;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 16%,
-      var(--sprout-surface)
-    );
+    --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 16%, var(--sprout-surface));
     --sprout-secondary: #263951;
     --sprout-overlay: rgb(8 8 8 / 0.65);
   }
 
   @media (prefers-color-scheme: dark) {
-    :root:not(.light):not(.dark)[data-sprout-theme="stripe"],
-    :root:not(.light):not(.dark) [data-sprout-theme="stripe"] {
+    :root:not(.light):not(.dark)[data-sprout-theme='stripe'],
+    :root:not(.light):not(.dark) [data-sprout-theme='stripe'] {
       --sprout-canvas: #0a1929;
       --sprout-surface: #112640;
       --sprout-hover: #23374f;
@@ -113,11 +105,7 @@
       --sprout-success-subtle: #1c3223;
       --sprout-warning: #eec27e;
       --sprout-warning-subtle: #34291b;
-      --sprout-primary-subtle: color-mix(
-        in oklab,
-        var(--sprout-primary) 16%,
-        var(--sprout-surface)
-      );
+      --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 16%, var(--sprout-surface));
       --sprout-secondary: #263951;
       --sprout-overlay: rgb(8 8 8 / 0.65);
     }

package/dist/styles/themes/supabase.css

@@ -6,15 +6,15 @@
  * that subtree.
  */
 @layer base {
-  [data-sprout-theme="supabase"] {
+  [data-sprout-theme='supabase'] {
     --sprout-font: ui-sans-serif, system-ui, sans-serif;
     --sprout-radius-control: 0.375rem;
     --sprout-radius-panel: 0.5rem;
   }
 
-  [data-sprout-theme="supabase"],
-  .light[data-sprout-theme="supabase"],
-  .light [data-sprout-theme="supabase"] {
+  [data-sprout-theme='supabase'],
+  .light[data-sprout-theme='supabase'],
+  .light [data-sprout-theme='supabase'] {
     --sprout-canvas: #fcfcfc;
     --sprout-surface: #ffffff;
     --sprout-hover: #f1f1f1;
@@ -40,17 +40,13 @@
     --sprout-success-subtle: #e8f4eb;
     --sprout-warning: #8a4b08;
     --sprout-warning-subtle: #fdf1dc;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 10%,
-      var(--sprout-surface)
-    );
+    --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 10%, var(--sprout-surface));
     --sprout-secondary: #efefef;
     --sprout-overlay: rgb(18 18 18 / 0.35);
   }
 
-  .dark[data-sprout-theme="supabase"],
-  .dark [data-sprout-theme="supabase"] {
+  .dark[data-sprout-theme='supabase'],
+  .dark [data-sprout-theme='supabase'] {
     --sprout-canvas: #121212;
     --sprout-surface: #171717;
     --sprout-hover: #282828;
@@ -76,18 +72,14 @@
     --sprout-success-subtle: #1c3223;
     --sprout-warning: #eec27e;
     --sprout-warning-subtle: #34291b;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 16%,
-      var(--sprout-surface)
-    );
+    --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 16%, var(--sprout-surface));
     --sprout-secondary: #2a2a2a;
     --sprout-overlay: rgb(8 8 8 / 0.65);
   }
 
   @media (prefers-color-scheme: dark) {
-    :root:not(.light):not(.dark)[data-sprout-theme="supabase"],
-    :root:not(.light):not(.dark) [data-sprout-theme="supabase"] {
+    :root:not(.light):not(.dark)[data-sprout-theme='supabase'],
+    :root:not(.light):not(.dark) [data-sprout-theme='supabase'] {
       --sprout-canvas: #121212;
       --sprout-surface: #171717;
       --sprout-hover: #282828;
@@ -113,11 +105,7 @@
       --sprout-success-subtle: #1c3223;
       --sprout-warning: #eec27e;
       --sprout-warning-subtle: #34291b;
-      --sprout-primary-subtle: color-mix(
-        in oklab,
-        var(--sprout-primary) 16%,
-        var(--sprout-surface)
-      );
+      --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 16%, var(--sprout-surface));
       --sprout-secondary: #2a2a2a;
       --sprout-overlay: rgb(8 8 8 / 0.65);
     }

package/dist/styles/themes/tulipfarm.css

@@ -7,16 +7,15 @@
  * @fontsource-variable/inter) or the system font is used.
  */
 @layer base {
-  [data-sprout-theme="tulipfarm"] {
-    --sprout-font:
-      "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
+  [data-sprout-theme='tulipfarm'] {
+    --sprout-font: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
     --sprout-radius-control: 0.5rem;
     --sprout-radius-panel: 0.75rem;
   }
 
-  [data-sprout-theme="tulipfarm"],
-  .light[data-sprout-theme="tulipfarm"],
-  .light [data-sprout-theme="tulipfarm"] {
+  [data-sprout-theme='tulipfarm'],
+  .light[data-sprout-theme='tulipfarm'],
+  .light [data-sprout-theme='tulipfarm'] {
     --sprout-canvas: #f9f9fa;
     --sprout-surface: #ffffff;
     --sprout-hover: #f5f5f7;
@@ -47,8 +46,8 @@
     --sprout-overlay: rgb(32 33 36 / 0.25);
   }
 
-  .dark[data-sprout-theme="tulipfarm"],
-  .dark [data-sprout-theme="tulipfarm"] {
+  .dark[data-sprout-theme='tulipfarm'],
+  .dark [data-sprout-theme='tulipfarm'] {
     --sprout-canvas: #101113;
     --sprout-surface: #16171a;
     --sprout-hover: #202125;
@@ -80,8 +79,8 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    :root:not(.light):not(.dark)[data-sprout-theme="tulipfarm"],
-    :root:not(.light):not(.dark) [data-sprout-theme="tulipfarm"] {
+    :root:not(.light):not(.dark)[data-sprout-theme='tulipfarm'],
+    :root:not(.light):not(.dark) [data-sprout-theme='tulipfarm'] {
       --sprout-canvas: #101113;
       --sprout-surface: #16171a;
       --sprout-hover: #202125;

package/dist/styles/themes/vercel.css

@@ -6,16 +6,15 @@
  * that subtree.
  */
 @layer base {
-  [data-sprout-theme="vercel"] {
-    --sprout-font:
-      "Geist Variable", Geist, ui-sans-serif, system-ui, sans-serif;
+  [data-sprout-theme='vercel'] {
+    --sprout-font: 'Geist Variable', Geist, ui-sans-serif, system-ui, sans-serif;
     --sprout-radius-control: 0.375rem;
     --sprout-radius-panel: 0.75rem;
   }
 
-  [data-sprout-theme="vercel"],
-  .light[data-sprout-theme="vercel"],
-  .light [data-sprout-theme="vercel"] {
+  [data-sprout-theme='vercel'],
+  .light[data-sprout-theme='vercel'],
+  .light [data-sprout-theme='vercel'] {
     --sprout-canvas: #fafafa;
     --sprout-surface: #ffffff;
     --sprout-hover: #f1f1f1;
@@ -41,17 +40,13 @@
     --sprout-success-subtle: #e8f4eb;
     --sprout-warning: #8a4b08;
     --sprout-warning-subtle: #fdf1dc;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 10%,
-      var(--sprout-surface)
-    );
+    --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 10%, var(--sprout-surface));
     --sprout-secondary: #efefef;
     --sprout-overlay: rgb(18 18 18 / 0.35);
   }
 
-  .dark[data-sprout-theme="vercel"],
-  .dark [data-sprout-theme="vercel"] {
+  .dark[data-sprout-theme='vercel'],
+  .dark [data-sprout-theme='vercel'] {
     --sprout-canvas: #000000;
     --sprout-surface: #0a0a0a;
     --sprout-hover: #1c1c1c;
@@ -77,18 +72,14 @@
     --sprout-success-subtle: #1c3223;
     --sprout-warning: #eec27e;
     --sprout-warning-subtle: #34291b;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 16%,
-      var(--sprout-surface)
-    );
+    --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 16%, var(--sprout-surface));
     --sprout-secondary: #1e1e1e;
     --sprout-overlay: rgb(8 8 8 / 0.65);
   }
 
   @media (prefers-color-scheme: dark) {
-    :root:not(.light):not(.dark)[data-sprout-theme="vercel"],
-    :root:not(.light):not(.dark) [data-sprout-theme="vercel"] {
+    :root:not(.light):not(.dark)[data-sprout-theme='vercel'],
+    :root:not(.light):not(.dark) [data-sprout-theme='vercel'] {
       --sprout-canvas: #000000;
       --sprout-surface: #0a0a0a;
       --sprout-hover: #1c1c1c;
@@ -114,11 +105,7 @@
       --sprout-success-subtle: #1c3223;
       --sprout-warning: #eec27e;
       --sprout-warning-subtle: #34291b;
-      --sprout-primary-subtle: color-mix(
-        in oklab,
-        var(--sprout-primary) 16%,
-        var(--sprout-surface)
-      );
+      --sprout-primary-subtle: color-mix(in oklab, var(--sprout-primary) 16%, var(--sprout-surface));
       --sprout-secondary: #1e1e1e;
       --sprout-overlay: rgb(8 8 8 / 0.65);
     }

package/dist/styles/timeline.css

@@ -0,0 +1,276 @@
+@layer components {
+  /* Record timeline: an HTML list of rows beside the chart. Rows and chart
+     bands share one height, so they line up. The axis band is 40px in the
+     chart code too. */
+  .sprout-timeline {
+    --sprout-timeline-row: 2.75rem;
+    --sprout-timeline-label: 15rem;
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+    container-type: inline-size;
+    font-family: var(--sprout-font);
+    color: var(--sprout-text);
+  }
+  .sprout-timeline[aria-busy='true'] .sprout-timeline-grid:not([data-skeleton]) {
+    opacity: 0.6;
+  }
+  .sprout-timeline-notice:empty {
+    display: none;
+  }
+  .sprout-timeline-grid {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-width: 0;
+  }
+  .sprout-timeline-labels {
+    display: grid;
+    grid-auto-rows: var(--sprout-timeline-row);
+    align-content: start;
+    min-width: 0;
+    margin: 0;
+    padding: 40px 0 0;
+    border-right: 1px solid var(--sprout-line);
+    list-style: none;
+  }
+  .sprout-timeline-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    min-width: 0;
+    height: var(--sprout-timeline-row);
+    padding: 0 8px;
+    border-radius: var(--sprout-radius-control);
+    outline: none;
+  }
+  .sprout-timeline-row[data-hot] {
+    background: var(--sprout-hover);
+  }
+  .sprout-timeline-row[data-openable] {
+    cursor: pointer;
+  }
+  .sprout-timeline-row:focus-visible {
+    outline: 2px solid var(--sprout-focus-ring);
+    outline-offset: -2px;
+  }
+  .sprout-timeline-label {
+    display: grid;
+    gap: 2px;
+    flex: none;
+    width: var(--sprout-timeline-label);
+    min-width: 0;
+  }
+  .sprout-timeline-label-head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+  .sprout-timeline-label-title,
+  .sprout-timeline-label-dates {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sprout-timeline-label-title {
+    min-width: 0;
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+  .sprout-timeline-label-dates {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .sprout-timeline-label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sprout-timeline-label-clip {
+    flex: none;
+    color: var(--sprout-text);
+  }
+  .sprout-timeline-label-clip::before {
+    content: '· ';
+    color: var(--sprout-muted);
+  }
+  .sprout-timeline-label-marker {
+    flex: none;
+  }
+  .sprout-timeline-label-warning {
+    display: none;
+    flex: none;
+    color: var(--sprout-warning);
+    font-weight: 500;
+  }
+  .sprout-timeline-label-warning::after {
+    content: ' ·';
+    color: var(--sprout-muted);
+    font-weight: 400;
+  }
+  .sprout-timeline-row-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+  }
+  .sprout-timeline-plot {
+    position: relative;
+    min-width: 0;
+  }
+  .sprout-timeline-band {
+    position: absolute;
+    inset-inline: 0;
+    top: calc(40px + var(--sprout-timeline-index) * var(--sprout-timeline-row));
+    height: var(--sprout-timeline-row);
+    background: var(--sprout-hover);
+    pointer-events: none;
+  }
+  .sprout-chart.sprout-timeline-chart {
+    position: relative;
+    height: calc(var(--sprout-timeline-count) * var(--sprout-timeline-row) + 40px);
+  }
+  .sprout-timeline-chart .recharts-cartesian-axis-tick-value {
+    font-variant-numeric: tabular-nums;
+  }
+  .sprout-timeline-chart .recharts-bar-rectangle,
+  .sprout-timeline-point {
+    cursor: inherit;
+  }
+  .sprout-timeline-chevron {
+    fill: none;
+    stroke: var(--sprout-surface);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .sprout-timeline-today rect {
+    fill: var(--sprout-chart-1);
+  }
+  .sprout-timeline-today text {
+    fill: var(--sprout-surface);
+    font-size: 0.6875rem;
+    font-weight: 500;
+  }
+  .sprout-timeline-grid[data-skeleton] .sprout-timeline-label {
+    gap: 6px;
+  }
+  .sprout-timeline-skeleton-band {
+    display: flex;
+    align-items: center;
+    height: var(--sprout-timeline-row);
+    padding-inline: 16px;
+  }
+  .sprout-timeline-grid[data-skeleton] .sprout-timeline-plot {
+    padding-top: 40px;
+  }
+  .sprout-timeline-legend {
+    justify-content: flex-start;
+    padding-top: 0;
+  }
+  .sprout-timeline-undated {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 12px;
+    margin: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+  .sprout-timeline-state {
+    min-height: 12rem;
+  }
+  @container (max-width: 40rem) {
+    .sprout-timeline-grid {
+      --sprout-timeline-label: 8rem;
+    }
+    .sprout-timeline-row {
+      gap: 4px;
+      padding: 0 4px;
+    }
+    .sprout-timeline-label-clip,
+    .sprout-timeline-label-marker {
+      display: none;
+    }
+    .sprout-timeline-label-warning {
+      display: inline;
+    }
+  }
+
+  .sprout-timeline-window-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 12px;
+    min-width: 0;
+    font-family: var(--sprout-font);
+  }
+  .sprout-timeline-window-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .sprout-timeline-window-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    color: var(--sprout-text);
+    font-size: var(--sprout-text-base);
+    font-weight: 600;
+    line-height: 1.5rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  .sprout-timeline-window-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+  @media (max-width: 40rem) {
+    .sprout-timeline-window-zoom {
+      flex-basis: 100%;
+      width: 100%;
+    }
+    .sprout-timeline-window-zoom > * {
+      flex: 1 1 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-timeline-row {
+      transition: background-color var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-timeline-grid,
+    .sprout-timeline .sprout-timeline-state {
+      animation: sprout-timeline-in var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+    .sprout-timeline-grid:not([data-skeleton]) {
+      transition: opacity var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+  }
+  @keyframes sprout-timeline-in {
+    from {
+      opacity: 0.4;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-timeline-row:focus-visible {
+      outline-color: Highlight;
+    }
+    .sprout-timeline-row[data-hot],
+    .sprout-timeline-band {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+}

package/dist/styles/toast.css

@@ -25,8 +25,7 @@
     --sprout-toast-scale: max(0, calc(1 - var(--toast-index) * 0.06));
     --sprout-toast-shrink: calc(1 - var(--sprout-toast-scale));
     --sprout-toast-offset-y: calc(
-      var(--toast-offset-y) * -1 - var(--toast-index) *
-        var(--sprout-toast-gap) + var(--toast-swipe-movement-y)
+      var(--toast-offset-y) * -1 - var(--toast-index) * var(--sprout-toast-gap) + var(--toast-swipe-movement-y)
     );
     position: absolute;
     right: 0;
@@ -49,8 +48,7 @@
     transform: translateX(var(--toast-swipe-movement-x))
       translateY(
         calc(
-          var(--toast-swipe-movement-y) - var(--toast-index) *
-            var(--sprout-toast-peek) - var(--sprout-toast-shrink) *
+          var(--toast-swipe-movement-y) - var(--toast-index) * var(--sprout-toast-peek) - var(--sprout-toast-shrink) *
             var(--sprout-toast-height)
         )
       )
@@ -65,7 +63,7 @@
     left: 0;
     width: 100%;
     height: calc(var(--sprout-toast-gap) + 1px);
-    content: "";
+    content: '';
   }
   .sprout-toast:focus-visible {
     outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
@@ -73,25 +71,22 @@
   }
   .sprout-toast[data-expanded] {
     height: var(--toast-height);
-    transform: translateX(var(--toast-swipe-movement-x))
-      translateY(var(--sprout-toast-offset-y));
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--sprout-toast-offset-y));
   }
   .sprout-toast[data-limited] {
     opacity: 0;
   }
-  .sprout-toast[data-ending-style][data-swipe-direction="down"] {
+  .sprout-toast[data-ending-style][data-swipe-direction='down'] {
     transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
   }
-  .sprout-toast[data-ending-style][data-swipe-direction="up"] {
+  .sprout-toast[data-ending-style][data-swipe-direction='up'] {
     transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
   }
-  .sprout-toast[data-ending-style][data-swipe-direction="left"] {
-    transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
-      translateY(var(--sprout-toast-offset-y));
+  .sprout-toast[data-ending-style][data-swipe-direction='left'] {
+    transform: translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--sprout-toast-offset-y));
   }
-  .sprout-toast[data-ending-style][data-swipe-direction="right"] {
-    transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
-      translateY(var(--sprout-toast-offset-y));
+  .sprout-toast[data-ending-style][data-swipe-direction='right'] {
+    transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--sprout-toast-offset-y));
   }
 
   .sprout-toast-content {
@@ -119,7 +114,7 @@
     height: 16px;
     pointer-events: none;
   }
-  .sprout-toast-icon[data-type="error"] {
+  .sprout-toast-icon[data-type='error'] {
     color: var(--sprout-danger);
   }
 
@@ -156,7 +151,7 @@
   .sprout-toast-close::after {
     position: absolute;
     inset: -8px;
-    content: "";
+    content: '';
   }
   .sprout-toast-close:hover {
     color: var(--sprout-text);
@@ -179,9 +174,7 @@
       transition: opacity var(--sprout-motion-fast) var(--sprout-motion-ease);
     }
     .sprout-toast[data-starting-style],
-    .sprout-toast[data-ending-style]:not([data-limited]):not(
-        [data-swipe-direction]
-      ) {
+    .sprout-toast[data-ending-style]:not([data-limited]):not([data-swipe-direction]) {
       transform: translateY(150%);
     }
   }