@tulipfarm/sprout 0.4.0 → 0.5.0

package/dist/styles/input.css

@@ -3,7 +3,7 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: 32px;
+    height: var(--sprout-control-height);
     margin: 0;
     padding: 4px 10px;
     border: 1px solid var(--sprout-input);
@@ -42,7 +42,7 @@
 
   .sprout-input[type='file'] {
     padding-block: 0;
-    line-height: 30px;
+    line-height: calc(var(--sprout-control-height) - 2px);
     cursor: pointer;
   }
   .sprout-input[type='file']:disabled {
@@ -67,14 +67,22 @@
     opacity: 0.7;
   }
 
+  .sprout-input-scale-sm {
+    height: calc(var(--sprout-control-height) - 4px);
+    padding-inline: 8px;
+    border-radius: min(var(--sprout-radius-control), 12px);
+    font-size: var(--sprout-text-xs);
+    line-height: 16px;
+  }
   .sprout-input-scale-lg {
-    height: 44px;
+    height: calc(var(--sprout-control-height) + 4px);
     padding-inline: 12px;
-    font-size: var(--sprout-text-base);
-    line-height: 24px;
+  }
+  .sprout-input-scale-sm[type='file'] {
+    line-height: calc(var(--sprout-control-height) - 6px);
   }
   .sprout-input-scale-lg[type='file'] {
-    line-height: 42px;
+    line-height: calc(var(--sprout-control-height) + 2px);
   }
 
   @media (prefers-reduced-motion: no-preference) {

package/dist/styles/menubar.css

@@ -6,7 +6,7 @@
     gap: 2px;
     width: fit-content;
     max-width: 100%;
-    height: 32px;
+    height: var(--sprout-control-height);
     padding: 3px;
     border: 1px solid var(--sprout-line);
     border-radius: var(--sprout-radius-panel);
@@ -32,7 +32,7 @@
     flex-shrink: 0;
     align-items: center;
     gap: 6px;
-    height: 24px;
+    height: calc(var(--sprout-control-height) - 8px);
     padding: 2px 8px;
     border: 0;
     border-radius: var(--sprout-radius-control);
@@ -113,10 +113,12 @@
 
   .sprout-menubar-item {
     position: relative;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: 6px;
     min-width: 0;
+    min-height: calc(var(--sprout-control-height) - 4px);
     padding: 4px 6px;
     border-radius: var(--sprout-radius-control);
     color: var(--sprout-text);

package/dist/styles/navigation-menu.css

@@ -38,7 +38,7 @@
     gap: 4px;
     width: max-content;
     max-width: 100%;
-    height: 32px;
+    height: var(--sprout-control-height);
     margin: 0;
     padding: 0 10px;
     border: 0;

package/dist/styles/page-header.css

@@ -133,6 +133,10 @@
   }
 
   @media (max-width: 639px) {
+    .sprout-page-header-back {
+      width: calc(var(--sprout-control-height) - 4px);
+      padding-inline: 0;
+    }
     .sprout-page-header-back-label {
       position: absolute;
       width: 1px;

package/dist/styles/pagination.css

@@ -36,10 +36,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: var(--sprout-control-height);
+    height: var(--sprout-control-height);
     color: var(--sprout-muted);
   }
+  /* The ellipsis has no size prop, so it matches the links around it. */
+  .sprout-pagination-content:has(.sprout-button-size-sm, .sprout-button-size-icon-sm) .sprout-pagination-ellipsis {
+    width: calc(var(--sprout-control-height) - 4px);
+    height: calc(var(--sprout-control-height) - 4px);
+  }
+  .sprout-pagination-content:has(.sprout-button-size-lg, .sprout-button-size-icon-lg) .sprout-pagination-ellipsis {
+    width: calc(var(--sprout-control-height) + 4px);
+    height: calc(var(--sprout-control-height) + 4px);
+  }
   .sprout-pagination-ellipsis > svg {
     width: 16px;
     height: 16px;

package/dist/styles/record-list.css

@@ -16,7 +16,7 @@
     line-height: 1.25rem;
     overflow: hidden;
   }
-  .sprout-record-list[data-density='compact'] {
+  .sprout-record-list[data-density='sm'] {
     --sprout-record-list-pad-y: 0.5rem;
     --sprout-record-list-pad-x: 0.75rem;
   }

package/dist/styles/result-card.css

@@ -124,7 +124,7 @@
     .sprout-result-card-app + .sprout-result-card-app {
       margin-inline-start: -8px;
     }
-    .sprout-result-card-action .sprout-button-size-result-card {
+    .sprout-result-card-action .sprout-button {
       height: 44px;
     }
   }

package/dist/styles/rich-text-editor.css

@@ -5,7 +5,7 @@
     min-width: 0;
     color: var(--sprout-text);
   }
-  .sprout-rich-text-editor-size-compact,
+  .sprout-rich-text-editor-size-sm,
   .sprout-rich-text-editor-condensed {
     display: flex;
     align-items: flex-end;
@@ -21,7 +21,7 @@
     /* Holds the editor's height before Tiptap mounts on the client. */
     min-height: 5rem;
   }
-  .sprout-rich-text-editor-size-compact > .sprout-rich-text-editor-body,
+  .sprout-rich-text-editor-size-sm > .sprout-rich-text-editor-body,
   .sprout-rich-text-editor-condensed > .sprout-rich-text-editor-body {
     min-height: 2.5rem;
   }
@@ -41,7 +41,7 @@
     outline: 0 solid transparent;
     outline-offset: 0;
   }
-  .sprout-rich-text-editor-size-compact .sprout-rich-text-editor-content {
+  .sprout-rich-text-editor-size-sm .sprout-rich-text-editor-content {
     min-height: 2.5rem;
     max-height: 8rem;
     font-size: var(--sprout-text-sm);

package/dist/styles/select.css

@@ -8,7 +8,7 @@
     gap: 6px;
     min-width: 0;
     max-width: 100%;
-    height: 32px;
+    height: var(--sprout-control-height);
     padding: 0 8px 0 10px;
     border: 1px solid var(--sprout-input);
     border-radius: var(--sprout-radius-control);
@@ -69,17 +69,15 @@
   .sprout-select-trigger-sm {
     --sprout-select-icon: 0.875rem;
     gap: 4px;
-    height: 28px;
+    height: calc(var(--sprout-control-height) - 4px);
     padding: 0 6px 0 8px;
     border-radius: min(var(--sprout-radius-control), 12px);
     font-size: var(--sprout-text-xs);
+    line-height: 16px;
   }
-  .sprout-select-trigger-calendar {
-    --sprout-select-icon: 0.875rem;
-    gap: 4px;
-    height: 32px;
-    padding: 0 6px 0 8px;
-    font-size: var(--sprout-text-xs);
+  .sprout-select-trigger-lg {
+    height: calc(var(--sprout-control-height) + 4px);
+    padding: 0 10px 0 12px;
   }
   .sprout-select-trigger-fit {
     width: fit-content;
@@ -155,11 +153,12 @@
 
   .sprout-select-item {
     position: relative;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: 6px;
     min-width: 0;
-    min-height: 28px;
+    min-height: calc(var(--sprout-control-height) - 4px);
     padding: 4px 32px 4px 6px;
     border-radius: var(--sprout-radius-control);
     color: var(--sprout-text);
@@ -245,9 +244,6 @@
     .sprout-select-item {
       min-height: 2.75rem;
     }
-    .sprout-select-trigger-calendar {
-      min-width: 2.75rem;
-    }
   }
 
   @media (forced-colors: active) {

package/dist/styles/sidebar.css

@@ -90,6 +90,7 @@
   .sprout-sidebar-menu-action,
   .sprout-sidebar-trigger,
   .sprout-sidebar-close {
+    box-sizing: border-box;
     font: inherit;
     color: var(--sprout-text);
     background: transparent;
@@ -104,8 +105,8 @@
     gap: 10px;
     min-width: 0;
     width: 100%;
-    min-height: 34px;
-    padding: 7px 10px;
+    min-height: var(--sprout-control-height);
+    padding: 6px 10px;
     font-size: var(--sprout-text-sm);
     font-weight: 450;
     line-height: 20px;
@@ -169,9 +170,9 @@
     place-items: center;
     position: absolute;
     inset-inline-end: 4px;
-    top: 3px;
-    width: 28px;
-    height: 28px;
+    top: 4px;
+    width: calc(var(--sprout-control-height) - 8px);
+    height: calc(var(--sprout-control-height) - 8px);
   }
   .sprout-sidebar-menu-item:has(.sprout-sidebar-menu-action) > .sprout-sidebar-menu-button,
   .sprout-sidebar-section-heading > .sprout-sidebar-menu-button {
@@ -192,9 +193,9 @@
     border-left: 1px solid var(--sprout-line);
   }
   .sprout-sidebar-sub-button {
-    min-height: 30px;
-    font-size: 12px;
-    padding-block: 5px;
+    min-height: calc(var(--sprout-control-height) - 4px);
+    font-size: var(--sprout-text-xs);
+    line-height: 16px;
   }
   .sprout-sidebar-section-content {
     height: var(--collapsible-panel-height);
@@ -220,17 +221,18 @@
     align-items: center;
     justify-content: center;
     gap: 8px;
-    min-width: 34px;
-    min-height: 34px;
-    padding: 7px;
+    min-width: var(--sprout-control-height);
+    min-height: var(--sprout-control-height);
+    padding: 6px;
     font-size: var(--sprout-text-xs);
   }
   .sprout-sidebar-skeleton {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: 10px;
-    min-height: 34px;
-    padding: 7px 10px;
+    min-height: var(--sprout-control-height);
+    padding: 6px 10px;
   }
   .sprout-sidebar-skeleton span {
     display: block;

package/dist/styles/state-sample.css

@@ -130,10 +130,10 @@
     font-weight: 500;
     text-overflow: ellipsis;
   }
-  .sprout-state-sample-cell[data-size='wide'] {
+  .sprout-state-sample-cell[data-size='lg'] {
     flex: 1.6 1 0%;
   }
-  .sprout-state-sample-cell[data-size='narrow'] {
+  .sprout-state-sample-cell[data-size='sm'] {
     flex: none;
     width: 6rem;
   }

package/dist/styles/table.css

@@ -263,11 +263,18 @@
     cursor: grab;
     touch-action: none;
   }
-  .sprout-table-handle + .sprout-button-size-column-header {
-    margin-inline-start: 0;
+  .sprout-button.sprout-table-sort {
+    margin-inline-start: -8px;
+    padding: 0 8px;
+    font-size: var(--sprout-text-sm);
+    line-height: 20px;
+  }
+  .sprout-button.sprout-table-sort-end {
+    flex-direction: row-reverse;
+    margin-inline: 0 -8px;
   }
-  .sprout-table-handle + .sprout-button-size-column-header-end {
-    margin-inline-end: 0;
+  .sprout-table-handle + .sprout-button.sprout-table-sort {
+    margin-inline: 0;
   }
   .sprout-table-handle:disabled {
     cursor: not-allowed;

package/dist/styles/tabs.css

@@ -17,7 +17,7 @@
     justify-content: center;
     box-sizing: border-box;
     width: fit-content;
-    height: 32px;
+    height: var(--sprout-control-height);
     padding: 3px;
     border-radius: calc(var(--sprout-radius-control) + 2px);
     color: var(--sprout-muted);
@@ -29,8 +29,6 @@
   }
   .sprout-tabs-list-default {
     gap: 2px;
-    height: 36px;
-    padding: 4px;
     border-radius: calc(var(--sprout-radius-control) + 4px);
     background: var(--sprout-secondary);
   }

package/dist/styles/toggle-group.css

@@ -23,8 +23,8 @@
     justify-content: center;
     gap: 6px;
     box-sizing: border-box;
-    height: 32px;
-    min-width: 32px;
+    height: var(--sprout-control-height);
+    min-width: var(--sprout-control-height);
     margin: 0;
     padding: 0 10px;
     border: 1px solid transparent;
@@ -86,8 +86,8 @@
   .sprout-toggle-group-item-size-sm {
     --sprout-toggle-group-icon: 0.875rem;
     gap: 4px;
-    height: 28px;
-    min-width: 28px;
+    height: calc(var(--sprout-control-height) - 4px);
+    min-width: calc(var(--sprout-control-height) - 4px);
     font-size: var(--sprout-text-xs);
     line-height: 16px;
   }
@@ -98,8 +98,8 @@
     padding-inline-end: 6px;
   }
   .sprout-toggle-group-item-size-lg {
-    height: 36px;
-    min-width: 36px;
+    height: calc(var(--sprout-control-height) + 4px);
+    min-width: calc(var(--sprout-control-height) + 4px);
   }
 
   /* spacing={0} joins items into one segmented control. */

package/dist/styles/toggle.css

@@ -8,8 +8,8 @@
     justify-content: center;
     gap: 4px;
     box-sizing: border-box;
-    height: 32px;
-    min-width: 32px;
+    height: var(--sprout-control-height);
+    min-width: var(--sprout-control-height);
     margin: 0;
     padding: 0 10px;
     border: 1px solid transparent;
@@ -81,8 +81,8 @@
 
   .sprout-toggle-size-sm {
     --sprout-toggle-icon: 0.875rem;
-    height: 28px;
-    min-width: 28px;
+    height: calc(var(--sprout-control-height) - 4px);
+    min-width: calc(var(--sprout-control-height) - 4px);
     font-size: var(--sprout-text-xs);
     line-height: 16px;
   }
@@ -93,8 +93,8 @@
     padding-inline-end: 6px;
   }
   .sprout-toggle-size-lg {
-    height: 36px;
-    min-width: 36px;
+    height: calc(var(--sprout-control-height) + 4px);
+    min-width: calc(var(--sprout-control-height) + 4px);
   }
 
   @media (prefers-reduced-motion: no-preference) {

package/dist/styles/view-switcher.css

@@ -22,7 +22,7 @@
     gap: 2px;
     width: auto;
     max-width: 100%;
-    height: 40px;
+    height: calc(var(--sprout-control-height) + 8px);
     padding: 0 2px;
     overflow-x: auto;
     overflow-y: hidden;
@@ -58,7 +58,7 @@
   .sprout-view-switcher-tab.sprout-tabs-trigger {
     flex: none;
     gap: 6px;
-    height: 30px;
+    height: calc(var(--sprout-control-height) - 4px);
     padding: 0 8px;
     border: 0;
     color: var(--sprout-muted);
@@ -121,6 +121,24 @@
       opacity: 1;
     }
   }
+  /* With a pointer, the close button floats over the tab end instead of taking space, so gaps stay even. */
+  @media (hover: hover) {
+    .sprout-view-switcher-tab[data-closable] {
+      padding-inline-end: 8px;
+    }
+    .sprout-view-switcher-close {
+      position: absolute;
+      inset-inline-end: 4px;
+      top: 50%;
+      translate: 0 -50%;
+    }
+    .sprout-view-switcher-tab[data-closable]:is(:hover, :focus-visible) .sprout-view-switcher-label {
+      mask-image: linear-gradient(to left, transparent 14px, #000 24px);
+    }
+    .sprout-view-switcher-tab[data-closable]:is(:hover, :focus-visible) .sprout-view-switcher-label:dir(rtl) {
+      mask-image: linear-gradient(to right, transparent 14px, #000 24px);
+    }
+  }
 
   .sprout-view-switcher-indicator {
     position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulipfarm/sprout",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Considered React controls. Built with Base UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,10 @@
       "types": "./dist/components/agent-fanout.d.ts",
       "import": "./dist/components/agent-fanout.js"
     },
+    "./agent-avatar": {
+      "types": "./dist/components/agent-avatar.d.ts",
+      "import": "./dist/components/agent-avatar.js"
+    },
     "./alert": {
       "types": "./dist/components/alert.d.ts",
       "import": "./dist/components/alert.js"