@tulipfarm/sprout 0.1.0 → 0.2.0

package/dist/styles/search-dialog.css

@@ -16,28 +16,6 @@
     background: transparent;
   }
 
-  .sprout-search-kbd {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    min-width: 20px;
-    height: 20px;
-    padding-inline: 4px;
-    border: 1px solid var(--sprout-line);
-    border-radius: calc(var(--sprout-radius-control) - 2px);
-    background: var(--sprout-surface);
-    color: var(--sprout-muted);
-    font-family: inherit;
-    font-size: var(--sprout-text-xs);
-    font-weight: 500;
-    line-height: 1;
-    white-space: nowrap;
-    user-select: none;
-    pointer-events: none;
-  }
-
   /* Input row */
   .sprout-search-input {
     display: flex;
@@ -79,44 +57,6 @@
   .sprout-search-filters::-webkit-scrollbar {
     display: none;
   }
-  .sprout-search-filter {
-    box-sizing: border-box;
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    gap: 6px;
-    height: 28px;
-    margin: 0;
-    padding-inline: 10px;
-    border: 1px solid var(--sprout-line);
-    border-radius: calc(var(--sprout-radius-panel) - 4px);
-    background: var(--sprout-surface);
-    box-shadow: var(--sprout-shadow-control);
-    color: var(--sprout-muted);
-    font: inherit;
-    font-size: var(--sprout-text-xs);
-    font-weight: 500;
-    line-height: 1rem;
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .sprout-search-filter > svg {
-    flex-shrink: 0;
-    width: 14px;
-    height: 14px;
-  }
-  .sprout-search-filter:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
-  }
-  .sprout-search-filter[data-pressed] {
-    border-color: var(--sprout-input);
-    background: var(--sprout-active);
-    color: var(--sprout-text);
-  }
-
   /* Results */
   .sprout-search-dialog .sprout-search-list {
     height: min(28rem, 60dvh);
@@ -337,27 +277,4 @@
       display: flex;
     }
   }
-
-  @media (hover: hover) {
-    .sprout-search-filter:hover {
-      background: var(--sprout-hover);
-      color: var(--sprout-text);
-    }
-  }
-
-  @media (forced-colors: active) {
-    .sprout-search-filter[data-pressed] {
-      outline: 2px solid Highlight;
-      outline-offset: -2px;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .sprout-search-filter {
-      transition:
-        background-color var(--sprout-motion-fast) var(--sprout-motion-ease),
-        border-color var(--sprout-motion-fast) var(--sprout-motion-ease),
-        color var(--sprout-motion-fast) var(--sprout-motion-ease);
-    }
-  }
 }

package/dist/styles/select.css

@@ -34,8 +34,8 @@
     background: var(--sprout-hover);
   }
   .sprout-select-trigger:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-select-trigger[data-placeholder] {
     color: var(--sprout-muted);
@@ -253,7 +253,7 @@
   @media (forced-colors: active) {
     .sprout-select-item[data-highlighted] {
       outline: 2px solid Highlight;
-      outline-offset: -2px;
+      outline-offset: -1px;
     }
   }
 

package/dist/styles/separator.css

@@ -181,8 +181,8 @@
   }
   a.sprout-separator-marker:focus-visible,
   .sprout-separator-content > a:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
     color: var(--sprout-text);
   }
 

package/dist/styles/sheet.css

@@ -140,8 +140,8 @@
   }
   .sprout-sheet-title[tabindex="-1"]:focus-visible {
     border-radius: 2px;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   .sprout-sheet-description {

package/dist/styles/sidebar.css

@@ -129,8 +129,8 @@
   .sprout-sidebar-menu-action:focus-visible,
   .sprout-sidebar-trigger:focus-visible,
   .sprout-sidebar-close:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
   .sprout-sidebar-menu-button:disabled,
   .sprout-sidebar-menu-button[data-disabled] {

package/dist/styles/slider.css

@@ -133,7 +133,7 @@
     }
     .sprout-slider-thumb:has(:focus-visible) {
       outline: 2px solid Highlight;
-      outline-offset: 2px;
+      outline-offset: 0;
     }
     .sprout-slider-control[data-disabled] .sprout-slider-range {
       background-color: GrayText;

package/dist/styles/state-panel.css

@@ -37,9 +37,6 @@
   .sprout-state-panel-danger {
     color: var(--sprout-danger);
   }
-  .sprout-state-panel-spinner {
-    animation: sprout-state-panel-spin 1s linear infinite;
-  }
 
   .sprout-state-panel-text {
     display: grid;
@@ -162,8 +159,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .sprout-state-panel,
-    .sprout-state-panel-spinner {
+    .sprout-state-panel {
       animation: none;
     }
   }
@@ -175,8 +171,3 @@
     transform: translateY(4px);
   }
 }
-@keyframes sprout-state-panel-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/styles/switch.css

@@ -17,7 +17,7 @@
     vertical-align: middle;
     cursor: pointer;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
     -webkit-tap-highlight-color: transparent;
   }
   .sprout-switch-size-sm {
@@ -40,7 +40,7 @@
     }
   }
   .sprout-switch:focus-visible {
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
   }
   .sprout-switch[data-checked] {
     background-color: var(--sprout-primary);

package/dist/styles/table.css

@@ -5,8 +5,8 @@
     overflow-x: auto;
   }
   .sprout-table-container:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
 
   .sprout-table {
@@ -217,8 +217,8 @@
   }
   .sprout-table-chip-label:focus-visible,
   .sprout-table-chip-remove:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
   .sprout-table-filter {
     display: flex;
@@ -292,8 +292,8 @@
   .sprout-table-handle:focus-visible,
   .sprout-table-toggle:focus-visible,
   .sprout-table-resizer:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-table-resizer {
     position: absolute;
@@ -421,7 +421,7 @@
   .sprout-table-row:has(.sprout-table-link:focus-visible) {
     --sprout-table-row-bg: var(--sprout-table-hover);
     background-color: var(--sprout-table-hover);
-    box-shadow: inset 0 0 0 2px var(--sprout-focus);
+    box-shadow: inset 0 0 0 var(--sprout-focus-width) var(--sprout-focus-ring);
   }
   .sprout-table-row[data-linked]
     :is(
@@ -444,7 +444,7 @@
   .sprout-table-row[data-drop-target] {
     --sprout-table-row-bg: var(--sprout-primary-subtle);
     background: var(--sprout-primary-subtle);
-    box-shadow: inset 0 0 0 2px var(--sprout-focus);
+    box-shadow: inset 0 0 0 var(--sprout-focus-width) var(--sprout-focus-ring);
   }
 
   .sprout-table-actions {
@@ -472,8 +472,8 @@
     font: inherit;
   }
   .sprout-table-select:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 1px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-table-error {
     color: var(--sprout-danger);

package/dist/styles/tabs.css

@@ -101,7 +101,7 @@
     height: 16px;
   }
   .sprout-tabs-trigger:focus-visible {
-    outline: 2px solid var(--sprout-focus);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
     outline-offset: 0;
   }
   .sprout-tabs-trigger[data-disabled] {
@@ -175,7 +175,7 @@
     border-radius: 0;
   }
   .sprout-tabs-list-steps > .sprout-tabs-trigger:focus-visible {
-    outline-offset: -2px;
+    outline-offset: -1px;
   }
   .sprout-tabs-list-steps > .sprout-tabs-trigger::after {
     bottom: -1px;
@@ -203,8 +203,8 @@
     display: none;
   }
   .sprout-tabs-content:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
 
   @media (prefers-reduced-motion: no-preference) {

package/dist/styles/textarea.css

@@ -20,16 +20,15 @@
     field-sizing: content;
     resize: vertical;
     outline: 0 solid transparent;
-    outline-offset: 2px;
+    outline-offset: 0;
   }
   .sprout-textarea::placeholder {
     color: var(--sprout-muted);
     opacity: 1;
   }
   .sprout-textarea:focus-visible {
-    border-color: var(--sprout-focus);
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
   }
   .sprout-textarea:disabled {
     cursor: not-allowed;

package/dist/styles/themes/tulipfarm.css

@@ -1,125 +1,115 @@
-/* TulipFarm: Neutral grays with TulipFarm green.
+/* TulipFarm: The TulipFarm Cloud palette, cool neutral grays with Google green.
  *
  * One file is the whole theme: font, radius, and every color token for light
  * and dark. Import it after "@tulipfarm/sprout/styles.css", then set
  * data-sprout-theme="tulipfarm" on <html>, or on any element to theme only
- * that subtree.
+ * that subtree. The font is Inter; load it (for example with
+ * @fontsource-variable/inter) or the system font is used.
  */
 @layer base {
   [data-sprout-theme="tulipfarm"] {
-    --sprout-font: ui-sans-serif, system-ui, sans-serif;
-    --sprout-radius-control: 0.375rem;
+    --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"] {
-    --sprout-canvas: #f8f8f8;
-    --sprout-surface: #fdfdfd;
-    --sprout-hover: #eeeeee;
-    --sprout-active: #e3e3e3;
-    --sprout-text: #242424;
-    --sprout-muted: #626262;
-    --sprout-line: #e0e0e0;
-    --sprout-border: #909090;
-    --sprout-border-strong: #707070;
-    --sprout-input: #d4d4d4;
-    --sprout-primary: #286440;
-    --sprout-primary-hover: #1e5032;
-    --sprout-primary-active: #164027;
-    --sprout-on-primary: #f5fbf6;
-    --sprout-focus: #327c4e;
-    --sprout-danger: #b32d34;
-    --sprout-danger-hover: #98252b;
-    --sprout-on-danger: #fff8f8;
-    --sprout-info: #1f5fb8;
-    --sprout-info-subtle: #ebf1fd;
-    --sprout-danger-subtle: #fdeeef;
-    --sprout-success: #1d6a37;
-    --sprout-success-subtle: #e8f4eb;
+    --sprout-canvas: #f9f9fa;
+    --sprout-surface: #ffffff;
+    --sprout-hover: #f5f5f7;
+    --sprout-active: #ebebed;
+    --sprout-text: #1b1b1b;
+    --sprout-muted: #65666e;
+    --sprout-line: #e8e8e8;
+    --sprout-border: #89898e;
+    --sprout-border-strong: #6e6f75;
+    --sprout-input: #dedee0;
+    --sprout-primary: #188038;
+    --sprout-primary-hover: #146c2f;
+    --sprout-primary-active: #105825;
+    --sprout-on-primary: #ffffff;
+    --sprout-focus: #188038;
+    --sprout-danger: #b42332;
+    --sprout-danger-hover: #9a1d2a;
+    --sprout-on-danger: #ffffff;
+    --sprout-info: #245cba;
+    --sprout-info-subtle: #edf3ff;
+    --sprout-danger-subtle: #fff0f1;
+    --sprout-success: #146c2f;
+    --sprout-success-subtle: #e9f5ec;
     --sprout-warning: #8a4b08;
-    --sprout-warning-subtle: #fdf1dc;
-    --sprout-primary-subtle: color-mix(
-      in oklab,
-      var(--sprout-primary) 10%,
-      var(--sprout-surface)
-    );
-    --sprout-secondary: #ececec;
-    --sprout-overlay: rgb(18 18 18 / 0.35);
+    --sprout-warning-subtle: #fff4df;
+    --sprout-primary-subtle: #e9f5ec;
+    --sprout-secondary: #f0f0f2;
+    --sprout-overlay: rgb(32 33 36 / 0.25);
   }
 
   .dark[data-sprout-theme="tulipfarm"],
   .dark [data-sprout-theme="tulipfarm"] {
-    --sprout-canvas: #151515;
-    --sprout-surface: #1d1d1d;
-    --sprout-hover: #2b2b2b;
-    --sprout-active: #363636;
-    --sprout-text: #f0f0f0;
-    --sprout-muted: #adadad;
-    --sprout-line: #383838;
-    --sprout-border: #808080;
-    --sprout-border-strong: #a0a0a0;
-    --sprout-input: #474747;
-    --sprout-primary: #a2d8af;
-    --sprout-primary-hover: #b8e3c1;
-    --sprout-primary-active: #c9ecd0;
-    --sprout-on-primary: #142e1c;
-    --sprout-focus: #a2d8af;
-    --sprout-danger: #ff9197;
-    --sprout-danger-hover: #ffadb1;
-    --sprout-on-danger: #3c1014;
-    --sprout-info: #8fb8f5;
-    --sprout-info-subtle: #1f2c45;
-    --sprout-danger-subtle: #3a2124;
-    --sprout-success: #82d29a;
-    --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-secondary: #2c2c2c;
-    --sprout-overlay: rgb(8 8 8 / 0.65);
+    --sprout-canvas: #101113;
+    --sprout-surface: #16171a;
+    --sprout-hover: #202125;
+    --sprout-active: #222327;
+    --sprout-text: #ffffff;
+    --sprout-muted: #a5a6af;
+    --sprout-line: #2d2e31;
+    --sprout-border: #727277;
+    --sprout-border-strong: #9a9ba1;
+    --sprout-input: #26272b;
+    --sprout-primary: #75ce8e;
+    --sprout-primary-hover: #8fd9a3;
+    --sprout-primary-active: #a6e2b6;
+    --sprout-on-primary: #0e2615;
+    --sprout-focus: #75ce8e;
+    --sprout-danger: #ff929d;
+    --sprout-danger-hover: #ffadb5;
+    --sprout-on-danger: #3b1016;
+    --sprout-info: #9cbdff;
+    --sprout-info-subtle: #202e48;
+    --sprout-danger-subtle: #3b2228;
+    --sprout-success: #75ce8e;
+    --sprout-success-subtle: #1b3323;
+    --sprout-warning: #edc17c;
+    --sprout-warning-subtle: #352b1e;
+    --sprout-primary-subtle: #1b3323;
+    --sprout-secondary: #28292e;
+    --sprout-overlay: rgb(0 0 0 / 0.5);
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark)[data-sprout-theme="tulipfarm"],
     :root:not(.light):not(.dark) [data-sprout-theme="tulipfarm"] {
-      --sprout-canvas: #151515;
-      --sprout-surface: #1d1d1d;
-      --sprout-hover: #2b2b2b;
-      --sprout-active: #363636;
-      --sprout-text: #f0f0f0;
-      --sprout-muted: #adadad;
-      --sprout-line: #383838;
-      --sprout-border: #808080;
-      --sprout-border-strong: #a0a0a0;
-      --sprout-input: #474747;
-      --sprout-primary: #a2d8af;
-      --sprout-primary-hover: #b8e3c1;
-      --sprout-primary-active: #c9ecd0;
-      --sprout-on-primary: #142e1c;
-      --sprout-focus: #a2d8af;
-      --sprout-danger: #ff9197;
-      --sprout-danger-hover: #ffadb1;
-      --sprout-on-danger: #3c1014;
-      --sprout-info: #8fb8f5;
-      --sprout-info-subtle: #1f2c45;
-      --sprout-danger-subtle: #3a2124;
-      --sprout-success: #82d29a;
-      --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-secondary: #2c2c2c;
-      --sprout-overlay: rgb(8 8 8 / 0.65);
+      --sprout-canvas: #101113;
+      --sprout-surface: #16171a;
+      --sprout-hover: #202125;
+      --sprout-active: #222327;
+      --sprout-text: #ffffff;
+      --sprout-muted: #a5a6af;
+      --sprout-line: #2d2e31;
+      --sprout-border: #727277;
+      --sprout-border-strong: #9a9ba1;
+      --sprout-input: #26272b;
+      --sprout-primary: #75ce8e;
+      --sprout-primary-hover: #8fd9a3;
+      --sprout-primary-active: #a6e2b6;
+      --sprout-on-primary: #0e2615;
+      --sprout-focus: #75ce8e;
+      --sprout-danger: #ff929d;
+      --sprout-danger-hover: #ffadb5;
+      --sprout-on-danger: #3b1016;
+      --sprout-info: #9cbdff;
+      --sprout-info-subtle: #202e48;
+      --sprout-danger-subtle: #3b2228;
+      --sprout-success: #75ce8e;
+      --sprout-success-subtle: #1b3323;
+      --sprout-warning: #edc17c;
+      --sprout-warning-subtle: #352b1e;
+      --sprout-primary-subtle: #1b3323;
+      --sprout-secondary: #28292e;
+      --sprout-overlay: rgb(0 0 0 / 0.5);
     }
   }
 }

package/dist/styles/toast.css

@@ -68,8 +68,8 @@
     content: "";
   }
   .sprout-toast:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-toast[data-expanded] {
     height: var(--toast-height);

package/dist/styles/toggle-group.css

@@ -58,8 +58,8 @@
   }
   .sprout-toggle-group-item:focus-visible {
     z-index: 1;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-toggle-group-item[data-disabled] {
     cursor: not-allowed;

package/dist/styles/toggle.css

@@ -44,8 +44,8 @@
   }
   .sprout-toggle:focus-visible {
     z-index: 1;
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-toggle:disabled,
   .sprout-toggle[data-disabled] {

package/dist/styles/tool-activity.css

@@ -87,8 +87,8 @@
     display: none;
   }
   .sprout-activity-panel-viewport:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: -2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: -1px;
   }
 
   .sprout-tool-activity {
@@ -114,7 +114,7 @@
     color: var(--sprout-text);
   }
   .sprout-tool-activity-trigger:focus-visible {
-    outline-offset: 1px;
+    outline-offset: 0;
   }
   .sprout-tool-activity-trigger > svg {
     flex-shrink: 0;
@@ -262,8 +262,8 @@
     background: var(--sprout-active);
   }
   .sprout-tool-activity-source-chip:focus-visible {
-    outline: 2px solid var(--sprout-focus);
-    outline-offset: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
   }
   .sprout-tool-activity-favicon {
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulipfarm/sprout",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Considered React controls. Built with Base UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -108,6 +108,10 @@
       "types": "./dist/components/chat-sources.d.ts",
       "import": "./dist/components/chat-sources.js"
     },
+    "./chat-input": {
+      "types": "./dist/components/chat-input.d.ts",
+      "import": "./dist/components/chat-input.js"
+    },
     "./checkbox": {
       "types": "./dist/components/checkbox.d.ts",
       "import": "./dist/components/checkbox.js"
@@ -152,6 +156,10 @@
       "types": "./dist/components/field.d.ts",
       "import": "./dist/components/field.js"
     },
+    "./file-explorer": {
+      "types": "./dist/components/file-explorer.d.ts",
+      "import": "./dist/components/file-explorer.js"
+    },
     "./file-viewer": {
       "types": "./dist/components/file-viewer.d.ts",
       "import": "./dist/components/file-viewer.js"
@@ -418,6 +426,7 @@
     "@tiptap/pm": "3.31.4",
     "@tiptap/react": "3.31.4",
     "@tiptap/starter-kit": "3.31.4",
+    "@tiptap/suggestion": "3.31.4",
     "@xyflow/react": "12.12.0",
     "clsx": "^2.1.1",
     "react-day-picker": "10.0.1",