@tulipfarm/sprout 0.3.1 → 0.5.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);
@@ -146,6 +166,7 @@
     --sprout-text-base: 1rem;
     --sprout-radius-control: 0.375rem;
     --sprout-radius-panel: 0.75rem;
+    --sprout-control-height: 32px;
     --sprout-sidebar-width: 15.25rem;
     --sprout-sidebar-icon-width: 3.5rem;
     --sprout-sidebar-mobile-width: 18rem;
@@ -161,14 +182,14 @@
   .light {
     --sprout-canvas: #f8f8f8;
     --sprout-surface: #fdfdfd;
-    --sprout-hover: #eeeeee;
+    --sprout-hover: #ededed;
     --sprout-active: #e3e3e3;
     --sprout-text: #242424;
     --sprout-muted: #626262;
     --sprout-line: #e0e0e0;
     --sprout-border: #909090;
     --sprout-border-strong: #707070;
-    --sprout-input: #d4d4d4;
+    --sprout-input: #939393;
     --sprout-primary: #262626;
     --sprout-primary-hover: #171717;
     --sprout-primary-active: #0d0d0d;
@@ -181,11 +202,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;
@@ -205,7 +222,7 @@
     --sprout-line: #383838;
     --sprout-border: #808080;
     --sprout-border-strong: #a0a0a0;
-    --sprout-input: #474747;
+    --sprout-input: #686868;
     --sprout-primary: #ededed;
     --sprout-primary-hover: #d6d6d6;
     --sprout-primary-active: #c4c4c4;
@@ -217,11 +234,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;
@@ -242,7 +255,7 @@
       --sprout-line: #383838;
       --sprout-border: #808080;
       --sprout-border-strong: #a0a0a0;
-      --sprout-input: #474747;
+      --sprout-input: #686868;
       --sprout-primary: #ededed;
       --sprout-primary-hover: #d6d6d6;
       --sprout-primary-active: #c4c4c4;
@@ -254,11 +267,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;

package/dist/styles/input-group.css

@@ -6,7 +6,7 @@
     align-items: center;
     width: 100%;
     min-width: 0;
-    height: 32px;
+    height: var(--sprout-control-height);
     border: 1px solid var(--sprout-input);
     border-radius: var(--sprout-radius-control);
     background-color: var(--sprout-surface);
@@ -14,24 +14,22 @@
     outline: 0 solid transparent;
     outline-offset: 0;
   }
-  .sprout-input-group:has([data-slot="input-group-control"]:focus-visible) {
+  .sprout-input-group:has([data-slot='input-group-control']:focus-visible) {
     border-color: var(--sprout-border);
     outline: var(--sprout-focus-width) solid transparent;
   }
-  .sprout-input-group:has(
-    [data-slot="input-group-control"][aria-invalid="true"]
-  ),
-  .sprout-input-group:has([data-slot="input-group-control"][data-invalid]) {
+  .sprout-input-group:has([data-slot='input-group-control'][aria-invalid='true']),
+  .sprout-input-group:has([data-slot='input-group-control'][data-invalid]) {
     border-color: var(--sprout-danger);
     outline-color: var(--sprout-danger);
   }
-  .sprout-input-group:has([data-slot="input-group-control"]:disabled) {
+  .sprout-input-group:has([data-slot='input-group-control']:disabled) {
     cursor: not-allowed;
     background-color: var(--sprout-hover);
     opacity: 0.5;
   }
-  .sprout-input-group:has(> [data-align="block-start"]),
-  .sprout-input-group:has(> [data-align="block-end"]) {
+  .sprout-input-group:has(> [data-align='block-start']),
+  .sprout-input-group:has(> [data-align='block-end']) {
     flex-direction: column;
     height: auto;
   }
@@ -40,14 +38,17 @@
   }
 
   /* Popups such as a combobox list draw their own focus, so the search row stays quiet. */
-  :where([data-slot="combobox-content"])
-    .sprout-input-group:has([data-slot="input-group-control"]:focus-visible) {
+  :where([data-slot='combobox-content']) .sprout-input-group:has([data-slot='input-group-control']:focus-visible) {
     border-color: var(--sprout-input);
     outline-color: transparent;
   }
 
+  .sprout-input-group-size-sm {
+    height: calc(var(--sprout-control-height) - 4px);
+    border-radius: min(var(--sprout-radius-control), 12px);
+  }
   .sprout-input-group-size-lg {
-    height: 44px;
+    height: calc(var(--sprout-control-height) + 4px);
   }
 
   .sprout-input-group-variant-composer,
@@ -58,26 +59,18 @@
     border-color: var(--sprout-input);
     border-radius: var(--sprout-radius-panel);
   }
-  .sprout-input-group-variant-composer:has(
-    [data-slot="input-group-control"]:focus-visible
-  ),
-  .sprout-input-group-variant-question-composer:has(
-    [data-slot="input-group-control"]:focus-visible
-  ) {
+  .sprout-input-group-variant-composer:has([data-slot='input-group-control']:focus-visible),
+  .sprout-input-group-variant-question-composer:has([data-slot='input-group-control']:focus-visible) {
     border-color: var(--sprout-border);
     outline: var(--sprout-focus-width) solid transparent;
   }
-  .sprout-input-group-variant-composer:has(
-    [data-slot="input-group-control"][aria-invalid="true"]
-  ),
-  .sprout-input-group-variant-question-composer:has(
-    [data-slot="input-group-control"][aria-invalid="true"]
-  ) {
+  .sprout-input-group-variant-composer:has([data-slot='input-group-control'][aria-invalid='true']),
+  .sprout-input-group-variant-question-composer:has([data-slot='input-group-control'][aria-invalid='true']) {
     border-color: var(--sprout-danger);
     box-shadow: none;
   }
-  .sprout-input-group-variant-composer > [data-align="block-end"],
-  .sprout-input-group-variant-question-composer > [data-align="block-end"] {
+  .sprout-input-group-variant-composer > [data-align='block-end'],
+  .sprout-input-group-variant-question-composer > [data-align='block-end'] {
     flex-wrap: wrap;
     gap: 4px;
     padding-inline: 8px;
@@ -101,7 +94,7 @@
     cursor: text;
     user-select: none;
   }
-  .sprout-input-group-addon > svg:not([class*="size-"]) {
+  .sprout-input-group-addon > svg:not([class*='size-']) {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
@@ -165,47 +158,50 @@
     flex-shrink: 0;
     pointer-events: none;
   }
-  .sprout-input-group-text svg:not([class*="size-"]) {
+  .sprout-input-group-text svg:not([class*='size-']) {
     width: 16px;
     height: 16px;
   }
 
-  .sprout-button.sprout-input-group-button {
-    gap: 8px;
-    font-size: var(--sprout-text-sm);
-    box-shadow: none;
+  /* 4px inset on each side of the group, so the button tracks the group size. */
+  .sprout-input-group {
+    --sprout-input-group-button-height: calc(var(--sprout-control-height) - 8px);
   }
-  .sprout-button.sprout-input-group-button-size-xs {
-    --sprout-button-icon: 0.875rem;
-    gap: 4px;
-    height: 24px;
-    padding: 0 6px;
-    border-radius: max(calc(var(--sprout-radius-control) - 2px), 2px);
+  .sprout-input-group-size-sm {
+    --sprout-input-group-button-height: calc(var(--sprout-control-height) - 12px);
+  }
+  .sprout-input-group-size-lg {
+    --sprout-input-group-button-height: calc(var(--sprout-control-height) - 4px);
+  }
+  .sprout-input-group-addon-align-block-start,
+  .sprout-input-group-addon-align-block-end {
+    --sprout-input-group-button-height: calc(var(--sprout-control-height) - 4px);
   }
-  .sprout-button.sprout-input-group-button-size-sm {
+  .sprout-button.sprout-input-group-button {
     --sprout-button-icon: 1rem;
     gap: 6px;
-    height: 28px;
+    height: var(--sprout-input-group-button-height);
     padding: 0 8px;
-    border-radius: var(--sprout-radius-control);
+    border-radius: max(calc(var(--sprout-radius-control) - 2px), 2px);
+    font-size: var(--sprout-text-sm);
+    box-shadow: none;
   }
-  .sprout-button.sprout-input-group-button-size-icon-xs {
-    --sprout-button-icon: 0.875rem;
-    width: 24px;
-    height: 24px;
+  .sprout-button.sprout-input-group-button-size-icon {
+    width: var(--sprout-input-group-button-height);
     padding: 0;
-    border-radius: max(calc(var(--sprout-radius-control) - 2px), 2px);
   }
-  .sprout-button.sprout-input-group-button-size-icon-sm {
-    --sprout-button-icon: 1rem;
-    width: 28px;
-    height: 28px;
+  .sprout-input-group-size-sm .sprout-button.sprout-input-group-button {
+    --sprout-button-icon: 0.875rem;
+    gap: 4px;
+    padding: 0 6px;
+    font-size: var(--sprout-text-xs);
+    line-height: 16px;
+  }
+  .sprout-input-group-size-sm .sprout-button.sprout-input-group-button-size-icon {
     padding: 0;
-    border-radius: var(--sprout-radius-control);
   }
   @media (pointer: coarse) {
-    .sprout-input-group-variant-composer
-      .sprout-button.sprout-input-group-button {
+    .sprout-input-group-variant-composer .sprout-button.sprout-input-group-button {
       min-width: 44px;
       min-height: 44px;
     }
@@ -214,7 +210,7 @@
   .sprout-input.sprout-input-group-input,
   .sprout-input.sprout-input-group-input:focus-visible,
   .sprout-input.sprout-input-group-input:disabled,
-  .sprout-input.sprout-input-group-input[aria-invalid="true"],
+  .sprout-input.sprout-input-group-input[aria-invalid='true'],
   .sprout-input.sprout-input-group-input[data-invalid] {
     border-color: transparent;
     background-color: transparent;
@@ -228,32 +224,28 @@
     border-radius: 0;
     text-overflow: ellipsis;
   }
-  .sprout-input-group:has(> [data-align="inline-start"])
-    > .sprout-input-group-input {
+  .sprout-input-group:has(> [data-align='inline-start']) > .sprout-input-group-input {
     padding-left: 6px;
   }
-  .sprout-input-group:has(> [data-align="inline-end"])
-    > .sprout-input-group-input {
+  .sprout-input-group:has(> [data-align='inline-end']) > .sprout-input-group-input {
     padding-right: 6px;
   }
-  .sprout-input-group:has(> [data-align^="block"]) > .sprout-input-group-input {
+  .sprout-input-group:has(> [data-align^='block']) > .sprout-input-group-input {
     width: 100%;
     height: 30px;
   }
-  .sprout-input-group:has(> [data-align="block-end"])
-    > .sprout-input-group-input {
+  .sprout-input-group:has(> [data-align='block-end']) > .sprout-input-group-input {
     padding-top: 8px;
   }
-  .sprout-input-group:has(> [data-align="block-start"])
-    > .sprout-input-group-input {
+  .sprout-input-group:has(> [data-align='block-start']) > .sprout-input-group-input {
     padding-bottom: 8px;
   }
-  .sprout-input-group-size-lg > .sprout-input-group-input {
-    font-size: var(--sprout-text-base);
-    line-height: 24px;
+  .sprout-input-group-size-sm > .sprout-input-group-input {
+    font-size: var(--sprout-text-xs);
+    line-height: 16px;
   }
-  .sprout-input-group-input[type="search"]::-webkit-search-cancel-button,
-  .sprout-input-group-input[type="search"]::-webkit-search-decoration {
+  .sprout-input-group-input[type='search']::-webkit-search-cancel-button,
+  .sprout-input-group-input[type='search']::-webkit-search-decoration {
     appearance: none;
   }
 
@@ -278,7 +270,7 @@
     .sprout-input-group {
       border-color: FieldText;
     }
-    .sprout-input-group:has([data-slot="input-group-control"]:focus-visible) {
+    .sprout-input-group:has([data-slot='input-group-control']:focus-visible) {
       outline-color: Highlight;
     }
   }

package/dist/styles/input-otp.css

@@ -28,16 +28,15 @@
     align-items: center;
     border-radius: var(--sprout-radius-control);
   }
-  .sprout-input-otp-group:has(.sprout-input-otp-slot[aria-invalid="true"]) {
-    box-shadow: 0 0 0 3px
-      color-mix(in oklab, var(--sprout-danger) 20%, transparent);
+  .sprout-input-otp-group:has(.sprout-input-otp-slot[aria-invalid='true']) {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--sprout-danger) 20%, transparent);
   }
 
   .sprout-input-otp-slot {
     position: relative;
     box-sizing: border-box;
-    width: 32px;
-    height: 32px;
+    width: var(--sprout-control-height);
+    height: var(--sprout-control-height);
     min-width: 0;
     margin: 0;
     padding: 0;
@@ -65,6 +64,16 @@
     border-start-end-radius: var(--sprout-radius-control);
     border-end-end-radius: var(--sprout-radius-control);
   }
+  .sprout-input-otp-size-sm .sprout-input-otp-slot {
+    width: calc(var(--sprout-control-height) - 4px);
+    height: calc(var(--sprout-control-height) - 4px);
+    font-size: var(--sprout-text-xs);
+    line-height: 16px;
+  }
+  .sprout-input-otp-size-lg .sprout-input-otp-slot {
+    width: calc(var(--sprout-control-height) + 4px);
+    height: calc(var(--sprout-control-height) + 4px);
+  }
   .sprout-input-otp-slot::selection {
     background: transparent;
   }
@@ -74,10 +83,10 @@
     outline: var(--sprout-focus-width) solid transparent;
     outline-offset: 0;
   }
-  .sprout-input-otp-slot[aria-invalid="true"] {
+  .sprout-input-otp-slot[aria-invalid='true'] {
     border-color: var(--sprout-danger);
   }
-  .sprout-input-otp-slot[aria-invalid="true"]:focus {
+  .sprout-input-otp-slot[aria-invalid='true']:focus {
     outline-color: color-mix(in oklab, var(--sprout-danger) 40%, transparent);
   }
   .sprout-input-otp-slot:disabled {
@@ -88,7 +97,7 @@
   }
 
   @media (pointer: coarse) {
-    .sprout-input-otp-slot {
+    .sprout-input-otp .sprout-input-otp-slot {
       width: 44px;
       height: 44px;
       font-size: var(--sprout-text-base);
@@ -131,7 +140,7 @@
     .sprout-input-otp-slot:focus {
       outline: 2px solid Highlight;
     }
-    .sprout-input-otp-slot[aria-invalid="true"] {
+    .sprout-input-otp-slot[aria-invalid='true'] {
       border-color: Mark;
     }
   }