@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/styles/form.css

@@ -60,11 +60,11 @@
     color: var(--sprout-text);
     font-family: var(--sprout-font);
   }
-  .sprout-form-footer[data-layout="bar"] {
+  .sprout-form-footer[data-layout='bar'] {
     padding-top: 1rem;
     border-top: 1px solid var(--sprout-line);
   }
-  .sprout-form-footer[data-layout="compact"] {
+  .sprout-form-footer[data-layout='compact'] {
     padding-top: 0.75rem;
   }
   .sprout-form-footer-row {
@@ -75,7 +75,7 @@
     gap: 0.5rem 1rem;
     min-width: 0;
   }
-  .sprout-form-footer[data-layout="compact"] .sprout-form-footer-row {
+  .sprout-form-footer[data-layout='compact'] .sprout-form-footer-row {
     column-gap: 0.25rem;
   }
   .sprout-form-footer-status {

package/dist/styles/glass-banner.css

@@ -71,28 +71,10 @@
     font-family: var(--sprout-font);
     color: var(--sprout-glass-banner-ink);
     background:
-      radial-gradient(
-        ellipse 22% 85% at 64% 50%,
-        var(--sprout-glass-banner-glow),
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at 64% 50%,
-        transparent 0 38%,
-        var(--sprout-glass-banner-ring) 38.2%,
-        transparent 38.8%
-      ),
-      radial-gradient(
-        circle at 64% 50%,
-        transparent 0 52%,
-        var(--sprout-glass-banner-ring) 52.2%,
-        transparent 52.8%
-      ),
-      linear-gradient(
-        115deg,
-        var(--sprout-glass-banner-base-a),
-        var(--sprout-glass-banner-base-b)
-      );
+      radial-gradient(ellipse 22% 85% at 64% 50%, var(--sprout-glass-banner-glow), transparent 70%),
+      radial-gradient(circle at 64% 50%, transparent 0 38%, var(--sprout-glass-banner-ring) 38.2%, transparent 38.8%),
+      radial-gradient(circle at 64% 50%, transparent 0 52%, var(--sprout-glass-banner-ring) 52.2%, transparent 52.8%),
+      linear-gradient(115deg, var(--sprout-glass-banner-base-a), var(--sprout-glass-banner-base-b));
     box-shadow: inset 0 0 0 1px var(--sprout-glass-banner-edge);
   }
 
@@ -108,11 +90,7 @@
     position: absolute;
     border: 1px solid var(--sprout-glass-banner-ring);
     border-radius: 9999px;
-    background: radial-gradient(
-      circle at 30% 28%,
-      var(--sprout-glass-banner-glow),
-      var(--sprout-glass-bubble) 75%
-    );
+    background: radial-gradient(circle at 30% 28%, var(--sprout-glass-banner-glow), var(--sprout-glass-bubble) 75%);
   }
   .sprout-glass-bubble:nth-child(1) {
     left: 6%;
@@ -200,11 +178,7 @@
     padding: 0.25rem 0.875rem 0.25rem 0.25rem;
     border: 1px solid var(--sprout-glass-chip-edge);
     border-radius: 9999px;
-    background: linear-gradient(
-      180deg,
-      var(--sprout-glass-chip-top),
-      var(--sprout-glass-chip-bottom)
-    );
+    background: linear-gradient(180deg, var(--sprout-glass-chip-top), var(--sprout-glass-chip-bottom));
     box-shadow:
       inset 0 1px 0 var(--sprout-glass-chip-edge),
       inset 0 -2px 6px var(--sprout-glass-chip-inner),
@@ -261,34 +235,25 @@
     .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip {
       position: absolute;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(1) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(1) {
       right: 9%;
       top: 15%;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(1)
-      .sprout-glass-chip-surface {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(1) .sprout-glass-chip-surface {
       rotate: 3deg;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(2) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(2) {
       left: 7%;
       top: 58%;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(2)
-      .sprout-glass-chip-surface {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(2) .sprout-glass-chip-surface {
       rotate: -4deg;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(3) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(3) {
       left: 47%;
       top: 72%;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(3)
-      .sprout-glass-chip-surface {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(3) .sprout-glass-chip-surface {
       rotate: 1.5deg;
     }
   }

package/dist/styles/gradient-banner.css

@@ -30,28 +30,28 @@
     color: var(--sprout-gradient-banner-ink);
   }
 
-  .sprout-gradient-banner[data-variant="citrus"] {
+  .sprout-gradient-banner[data-variant='citrus'] {
     --sprout-gradient-banner-base: #fbd65c;
     --sprout-gradient-banner-shadow: #ec986f;
     --sprout-gradient-banner-glow: #fff5b5;
     --sprout-gradient-banner-bloom: #f6b9c8;
     --sprout-gradient-banner-fold-angle: 28deg;
   }
-  .sprout-gradient-banner[data-variant="lagoon"] {
+  .sprout-gradient-banner[data-variant='lagoon'] {
     --sprout-gradient-banner-base: #18bec4;
     --sprout-gradient-banner-shadow: #007e83;
     --sprout-gradient-banner-glow: #c8f2a3;
     --sprout-gradient-banner-bloom: #43bf79;
     --sprout-gradient-banner-fold-angle: -65deg;
   }
-  .sprout-gradient-banner[data-variant="iris"] {
+  .sprout-gradient-banner[data-variant='iris'] {
     --sprout-gradient-banner-base: #bca3ef;
     --sprout-gradient-banner-shadow: #7968d7;
     --sprout-gradient-banner-glow: #dceffd;
     --sprout-gradient-banner-bloom: #ecb6ec;
   }
   /* Deep blue art: text placed straight on it switches to pearl. */
-  .sprout-gradient-banner[data-variant="cobalt"] {
+  .sprout-gradient-banner[data-variant='cobalt'] {
     --sprout-gradient-banner-ink: var(--sprout-gradient-banner-pearl);
     --sprout-gradient-banner-base: #2268b7;
     --sprout-gradient-banner-shadow: #102c6b;
@@ -62,7 +62,7 @@
     --sprout-gradient-banner-light-angle: -8deg;
     --sprout-gradient-banner-light-opacity: 0.35;
   }
-  .sprout-gradient-banner[data-variant="mint"] {
+  .sprout-gradient-banner[data-variant='mint'] {
     --sprout-gradient-banner-base: #e0ebce;
     --sprout-gradient-banner-shadow: #9bcaba;
     --sprout-gradient-banner-glow: #fcf7d5;
@@ -71,16 +71,16 @@
     --sprout-gradient-banner-fold-opacity: 0.35;
   }
 
-  .sprout-gradient-banner[data-size="sm"] {
+  .sprout-gradient-banner[data-size='sm'] {
     min-height: 6rem;
     padding: 1rem;
     border-radius: 0.5rem;
   }
-  .sprout-gradient-banner[data-size="md"] {
+  .sprout-gradient-banner[data-size='md'] {
     min-height: 10rem;
     padding: 1.25rem;
   }
-  .sprout-gradient-banner[data-size="xl"] {
+  .sprout-gradient-banner[data-size='xl'] {
     min-height: 22.5rem;
     padding: 2rem;
     border-radius: 1rem;
@@ -94,21 +94,9 @@
     border-radius: inherit;
     pointer-events: none;
     background:
-      radial-gradient(
-        ellipse at 76% 0%,
-        var(--sprout-gradient-banner-glow),
-        transparent 46%
-      ),
-      radial-gradient(
-        ellipse at 5% 90%,
-        var(--sprout-gradient-banner-bloom),
-        transparent 56%
-      ),
-      radial-gradient(
-        ellipse at 100% 100%,
-        var(--sprout-gradient-banner-shadow),
-        transparent 58%
-      ),
+      radial-gradient(ellipse at 76% 0%, var(--sprout-gradient-banner-glow), transparent 46%),
+      radial-gradient(ellipse at 5% 90%, var(--sprout-gradient-banner-bloom), transparent 56%),
+      radial-gradient(ellipse at 100% 100%, var(--sprout-gradient-banner-shadow), transparent 58%),
       var(--sprout-gradient-banner-base);
     box-shadow: inset 0 0 0 1px var(--sprout-gradient-banner-edge);
   }
@@ -145,12 +133,7 @@
     inset: -30% -10%;
     transform: rotate(var(--sprout-gradient-banner-light-angle));
     background:
-      radial-gradient(
-        ellipse at 72% 12%,
-        transparent 36%,
-        var(--sprout-gradient-banner-pearl) 37%,
-        transparent 44%
-      ),
+      radial-gradient(ellipse at 72% 12%, transparent 36%, var(--sprout-gradient-banner-pearl) 37%, transparent 44%),
       linear-gradient(
         100deg,
         transparent 35%,
@@ -195,7 +178,7 @@
     overflow-wrap: anywhere;
     box-shadow: 0 1px 2px rgb(24 24 24 / 0.05);
   }
-  .sprout-gradient-banner-panel[data-tone="dark"] {
+  .sprout-gradient-banner-panel[data-tone='dark'] {
     background: var(--sprout-gradient-banner-night);
     color: var(--sprout-gradient-banner-paper);
   }
@@ -220,7 +203,7 @@
   .sprout-gradient-banner-badge > svg {
     flex-shrink: 0;
   }
-  [data-tone="dark"] .sprout-gradient-banner-badge {
+  [data-tone='dark'] .sprout-gradient-banner-badge {
     background: var(--sprout-gradient-banner-badge-dark);
     color: var(--sprout-gradient-banner-paper);
   }
@@ -232,7 +215,7 @@
     border-radius: 9999px;
     background: var(--sprout-gradient-banner-badge-light);
   }
-  [data-tone="dark"] .sprout-gradient-banner-progress {
+  [data-tone='dark'] .sprout-gradient-banner-progress {
     background: var(--sprout-gradient-banner-badge-dark);
   }
   .sprout-gradient-banner-progress-fill {
@@ -241,10 +224,9 @@
     background: currentColor;
     transform: scaleX(var(--sprout-gradient-banner-progress, 0));
     transform-origin: left;
-    transition: transform var(--sprout-motion-normal, 180ms)
-      var(--sprout-motion-ease, ease-out);
+    transition: transform var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease-out);
   }
-  [dir="rtl"] .sprout-gradient-banner-progress-fill {
+  [dir='rtl'] .sprout-gradient-banner-progress-fill {
     transform-origin: right;
   }
 

package/dist/styles/hover-card.css

@@ -67,28 +67,22 @@
       opacity: 0;
       scale: 0.95;
     }
-    .sprout-hover-card-content[data-side="bottom"]:is(
-        [data-starting-style],
-        [data-ending-style]
-      ) {
+    .sprout-hover-card-content[data-side='bottom']:is([data-starting-style], [data-ending-style]) {
       translate: 0 calc(var(--sprout-hover-card-shift) * -1);
     }
-    .sprout-hover-card-content[data-side="top"]:is(
+    .sprout-hover-card-content[data-side='top']:is([data-starting-style], [data-ending-style]) {
+      translate: 0 var(--sprout-hover-card-shift);
+    }
+    .sprout-hover-card-content:is([data-side='right'], [data-side='inline-end']):is(
         [data-starting-style],
         [data-ending-style]
       ) {
-      translate: 0 var(--sprout-hover-card-shift);
-    }
-    .sprout-hover-card-content:is(
-        [data-side="right"],
-        [data-side="inline-end"]
-      ):is([data-starting-style], [data-ending-style]) {
       translate: calc(var(--sprout-hover-card-shift) * -1) 0;
     }
-    .sprout-hover-card-content:is(
-        [data-side="left"],
-        [data-side="inline-start"]
-      ):is([data-starting-style], [data-ending-style]) {
+    .sprout-hover-card-content:is([data-side='left'], [data-side='inline-start']):is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
       translate: var(--sprout-hover-card-shift) 0;
     }
   }

package/dist/styles/index.css

@@ -1,96 +1,101 @@
-@import "./accordion.css";
-@import "./agent-fanout.css";
-@import "./alert.css";
-@import "./alert-dialog.css";
-@import "./aspect-ratio.css";
-@import "./attachment.css";
-@import "./avatar.css";
-@import "./badge.css";
-@import "./brand-icon.css";
-@import "./breadcrumb.css";
-@import "./button.css";
-@import "./button-group.css";
-@import "./calendar.css";
-@import "./canvas.css";
-@import "./card.css";
-@import "./carousel.css";
-@import "./chart.css";
-@import "./chat-confirmation.css";
-@import "./chat-input.css";
-@import "./chat-plan.css";
-@import "./chat-sources.css";
-@import "./checkbox.css";
-@import "./choice-list.css";
-@import "./code-block.css";
-@import "./collapsible.css";
-@import "./combobox.css";
-@import "./command.css";
-@import "./context-menu.css";
-@import "./dialog.css";
-@import "./dropdown-menu.css";
-@import "./field.css";
-@import "./file-explorer.css";
-@import "./file-viewer.css";
-@import "./form.css";
-@import "./glass-banner.css";
-@import "./gradient-banner.css";
-@import "./hover-card.css";
-@import "./input.css";
-@import "./input-group.css";
-@import "./input-otp.css";
-@import "./kbd.css";
-@import "./label.css";
-@import "./mention-list.css";
-@import "./menubar.css";
-@import "./message.css";
-@import "./message-actions.css";
-@import "./message-response.css";
-@import "./message-scroller.css";
-@import "./navigation-menu.css";
-@import "./notice-banner.css";
-@import "./page-content.css";
-@import "./page-header.css";
-@import "./pagination.css";
-@import "./plan-outline.css";
-@import "./popover.css";
-@import "./presence-cursor.css";
-@import "./progress.css";
-@import "./prompt-list.css";
-@import "./questionnaire.css";
-@import "./radio-group.css";
-@import "./reasoning-effort.css";
-@import "./resizable.css";
-@import "./result-card.css";
-@import "./review-card.css";
-@import "./rich-text-editor.css";
-@import "./schema-diagram.css";
-@import "./sql-viewer.css";
-@import "./scroll-area.css";
-@import "./search-dialog.css";
-@import "./search-field.css";
-@import "./select.css";
-@import "./selection-slot.css";
-@import "./separator.css";
-@import "./settings-list.css";
-@import "./sheet.css";
-@import "./sidebar.css";
-@import "./skeleton.css";
-@import "./slider.css";
-@import "./spinner.css";
-@import "./state-panel.css";
-@import "./state-panel-samples.css";
-@import "./state-sample.css";
-@import "./switch.css";
-@import "./table.css";
-@import "./tabs.css";
-@import "./textarea.css";
-@import "./toast.css";
-@import "./toggle.css";
-@import "./toggle-group.css";
-@import "./tool-activity.css";
-@import "./toolbar-status.css";
-@import "./tooltip.css";
-@import "./typed-text.css";
+@import './accordion.css';
+@import './agent-fanout.css';
+@import './alert.css';
+@import './alert-dialog.css';
+@import './aspect-ratio.css';
+@import './attachment.css';
+@import './avatar.css';
+@import './badge.css';
+@import './board.css';
+@import './brand-icon.css';
+@import './breadcrumb.css';
+@import './button.css';
+@import './button-group.css';
+@import './calendar.css';
+@import './canvas.css';
+@import './card.css';
+@import './carousel.css';
+@import './chart.css';
+@import './timeline.css';
+@import './chat-confirmation.css';
+@import './chat-input.css';
+@import './chat-plan.css';
+@import './chat-sources.css';
+@import './checkbox.css';
+@import './choice-list.css';
+@import './code-block.css';
+@import './collapsible.css';
+@import './combobox.css';
+@import './command.css';
+@import './context-menu.css';
+@import './dialog.css';
+@import './dropdown-menu.css';
+@import './field.css';
+@import './file-explorer.css';
+@import './file-viewer.css';
+@import './form.css';
+@import './glass-banner.css';
+@import './gradient-banner.css';
+@import './hover-card.css';
+@import './input.css';
+@import './input-group.css';
+@import './input-otp.css';
+@import './kbd.css';
+@import './label.css';
+@import './mention-list.css';
+@import './menubar.css';
+@import './message.css';
+@import './message-actions.css';
+@import './message-response.css';
+@import './message-scroller.css';
+@import './navigation-menu.css';
+@import './notice-banner.css';
+@import './page-content.css';
+@import './page-header.css';
+@import './pagination.css';
+@import './plan-outline.css';
+@import './popover.css';
+@import './presence-cursor.css';
+@import './progress.css';
+@import './prompt-list.css';
+@import './questionnaire.css';
+@import './radio-group.css';
+@import './reasoning-effort.css';
+@import './record-list.css';
+@import './resizable.css';
+@import './result-card.css';
+@import './result-notice.css';
+@import './review-card.css';
+@import './rich-text-editor.css';
+@import './schema-diagram.css';
+@import './sql-viewer.css';
+@import './scroll-area.css';
+@import './search-dialog.css';
+@import './search-field.css';
+@import './select.css';
+@import './selection-slot.css';
+@import './separator.css';
+@import './settings-list.css';
+@import './sheet.css';
+@import './sidebar.css';
+@import './skeleton.css';
+@import './slider.css';
+@import './spinner.css';
+@import './state-panel.css';
+@import './state-panel-samples.css';
+@import './state-sample.css';
+@import './switch.css';
+@import './table.css';
+@import './tabs.css';
+@import './textarea.css';
+@import './toast.css';
+@import './toggle.css';
+@import './toggle-group.css';
+@import './tool-activity.css';
+@import './toolbar-status.css';
+@import './tooltip.css';
+@import './typed-text.css';
+@import './view-switcher.css';
 @source "../**/*.js";
 
 @theme inline {
@@ -122,11 +127,26 @@
   --color-sprout-warning: var(--sprout-warning);
   --color-sprout-warning-subtle: var(--sprout-warning-subtle);
   --color-sprout-overlay: var(--sprout-overlay);
+  --color-sprout-indigo: var(--sprout-indigo);
+  --color-sprout-green: var(--sprout-green);
+  --color-sprout-orange: var(--sprout-orange);
+  --color-sprout-red: var(--sprout-red);
+  --color-sprout-sky: var(--sprout-sky);
+  --color-sprout-purple: var(--sprout-purple);
+  --color-sprout-yellow: var(--sprout-yellow);
+  --color-sprout-teal: var(--sprout-teal);
+  --color-sprout-blue: var(--sprout-blue);
+  --color-sprout-tan: var(--sprout-tan);
   --color-sprout-chart-1: var(--sprout-chart-1);
   --color-sprout-chart-2: var(--sprout-chart-2);
   --color-sprout-chart-3: var(--sprout-chart-3);
   --color-sprout-chart-4: var(--sprout-chart-4);
   --color-sprout-chart-5: var(--sprout-chart-5);
+  --color-sprout-chart-6: var(--sprout-chart-6);
+  --color-sprout-chart-7: var(--sprout-chart-7);
+  --color-sprout-chart-8: var(--sprout-chart-8);
+  --color-sprout-chart-9: var(--sprout-chart-9);
+  --color-sprout-chart-10: var(--sprout-chart-10);
   --font-sprout: var(--sprout-font);
   --text-sprout-xs: var(--sprout-text-xs);
   --text-sprout-sm: var(--sprout-text-sm);
@@ -181,11 +201,7 @@
     --sprout-on-danger: #fff8f8;
     --sprout-info: #1f5fb8;
     --sprout-info-subtle: #ebf1fd;
-    --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: #ececec;
     --sprout-danger-subtle: #fdeeef;
     --sprout-success: #1d6a37;
@@ -217,11 +233,7 @@
     --sprout-on-danger: #3c1014;
     --sprout-info: #8fb8f5;
     --sprout-info-subtle: #1f2c45;
-    --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: #2c2c2c;
     --sprout-danger-subtle: #3a2124;
     --sprout-success: #82d29a;
@@ -254,11 +266,7 @@
       --sprout-on-danger: #3c1014;
       --sprout-info: #8fb8f5;
       --sprout-info-subtle: #1f2c45;
-      --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: #2c2c2c;
       --sprout-danger-subtle: #3a2124;
       --sprout-success: #82d29a;