@tulipfarm/sprout 0.4.0 → 0.5.0

package/dist/styles/attachment.css

@@ -58,35 +58,35 @@
     border-color: color-mix(in oklab, var(--sprout-danger) 35%, transparent);
   }
 
-  .sprout-attachment-size-default {
+  .sprout-attachment-size-lg {
     gap: 8px;
     font-size: var(--sprout-text-sm);
   }
-  .sprout-attachment-size-default:has([data-slot='attachment-content']) {
+  .sprout-attachment-size-lg:has([data-slot='attachment-content']) {
     padding: 8px 10px;
   }
-  .sprout-attachment-size-default:has([data-slot='attachment-media']) {
+  .sprout-attachment-size-lg:has([data-slot='attachment-media']) {
     padding: 8px;
   }
-  .sprout-attachment-size-sm {
+  .sprout-attachment-size-md {
     gap: 10px;
     font-size: var(--sprout-text-xs);
   }
-  .sprout-attachment-size-sm:has([data-slot='attachment-content']) {
+  .sprout-attachment-size-md:has([data-slot='attachment-content']) {
     padding: 6px 8px;
   }
-  .sprout-attachment-size-sm:has([data-slot='attachment-media']) {
+  .sprout-attachment-size-md:has([data-slot='attachment-media']) {
     padding: 6px;
   }
-  .sprout-attachment-size-xs {
+  .sprout-attachment-size-sm {
     gap: 6px;
     border-radius: 8px;
     font-size: var(--sprout-text-xs);
   }
-  .sprout-attachment-size-xs:has([data-slot='attachment-content']) {
+  .sprout-attachment-size-sm:has([data-slot='attachment-content']) {
     padding: 4px 6px;
   }
-  .sprout-attachment-size-xs:has([data-slot='attachment-media']) {
+  .sprout-attachment-size-sm:has([data-slot='attachment-media']) {
     padding: 4px;
   }
 
@@ -115,10 +115,10 @@
     background: var(--sprout-hover);
     color: var(--sprout-text);
   }
-  .sprout-attachment-size-sm .sprout-attachment-media {
+  .sprout-attachment-size-md .sprout-attachment-media {
     width: 32px;
   }
-  .sprout-attachment-size-xs .sprout-attachment-media {
+  .sprout-attachment-size-sm .sprout-attachment-media {
     width: 28px;
     border-radius: 6px;
   }
@@ -141,7 +141,7 @@
     width: 24px;
     height: 24px;
   }
-  .sprout-attachment-size-xs .sprout-attachment-media svg:not([class*='size-']) {
+  .sprout-attachment-size-sm .sprout-attachment-media svg:not([class*='size-']) {
     width: 14px;
     height: 14px;
   }
@@ -206,7 +206,7 @@
   .sprout-attachment-vertical .sprout-attachment-actions .sprout-button {
     background: color-mix(in oklab, var(--sprout-surface) 88%, transparent);
   }
-  .sprout-attachment-size-xs.sprout-attachment-vertical .sprout-attachment-actions {
+  .sprout-attachment-size-sm.sprout-attachment-vertical .sprout-attachment-actions {
     top: 6px;
     right: 6px;
   }

package/dist/styles/avatar.css

@@ -30,10 +30,6 @@
       mix-blend-mode: lighten;
     }
   }
-  :is(.sprout-avatar, .sprout-entity-avatar)[data-size='xs'] {
-    --sprout-avatar-size: 1.25rem;
-    font-size: var(--sprout-text-xs);
-  }
   :is(.sprout-avatar, .sprout-entity-avatar)[data-size='sm'] {
     --sprout-avatar-size: 1.5rem;
     font-size: var(--sprout-text-xs);
@@ -45,17 +41,13 @@
     --sprout-avatar-size: 2.5rem;
     font-size: var(--sprout-text-base);
   }
-  .sprout-entity-avatar[data-size='xl'] {
-    --sprout-avatar-size: 4rem;
-    font-size: 1.5rem;
-  }
   .sprout-entity-avatar {
     overflow: hidden;
   }
   .sprout-entity-avatar[data-shape='square'] {
     border-radius: 0.5rem;
   }
-  .sprout-entity-avatar[data-shape='square'][data-size='xs'] {
+  .sprout-entity-avatar[data-shape='square'][data-size='sm'] {
     border-radius: 0.25rem;
   }
 
@@ -109,15 +101,11 @@
     width: 0.5rem;
     height: 0.5rem;
   }
-  .sprout-avatar[data-size='xs'] > .sprout-avatar-badge {
-    width: 0.375rem;
-    height: 0.375rem;
-  }
   .sprout-avatar[data-size='sm'] > .sprout-avatar-badge {
     width: 0.5rem;
     height: 0.5rem;
   }
-  .sprout-avatar:is([data-size='xs'], [data-size='sm']) > .sprout-avatar-badge > svg {
+  .sprout-avatar[data-size='sm'] > .sprout-avatar-badge > svg {
     display: none;
   }
   .sprout-avatar[data-size='lg'] > .sprout-avatar-badge {

package/dist/styles/button-group.css

@@ -55,7 +55,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    min-height: 28px;
+    min-height: var(--sprout-control-height);
     padding-inline: 10px;
     border: 1px solid var(--sprout-input);
     border-radius: var(--sprout-radius-control);

package/dist/styles/button.css

@@ -7,7 +7,7 @@
     align-items: center;
     justify-content: center;
     gap: 6px;
-    height: 28px;
+    height: var(--sprout-control-height);
     padding: 0 10px;
     border: 1px solid transparent;
     border-radius: var(--sprout-radius-control);
@@ -104,6 +104,17 @@
   .sprout-button-variant-destructive:focus-visible {
     outline-color: var(--sprout-danger);
   }
+  .sprout-button-variant-ghost-destructive {
+    background: transparent;
+    color: var(--sprout-danger);
+  }
+  .sprout-button-variant-ghost-destructive:hover,
+  .sprout-button-variant-ghost-destructive:active {
+    background: color-mix(in srgb, var(--sprout-danger) 10%, transparent);
+  }
+  .sprout-button-variant-ghost-destructive:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
   .sprout-button-variant-link {
     background: transparent;
     color: var(--sprout-primary);
@@ -122,158 +133,31 @@
     background: color-mix(in srgb, var(--sprout-info) 16%, transparent);
   }
 
-  .sprout-button-size-default:has([data-icon='inline-start']),
+  .sprout-button-size-md:has([data-icon='inline-start']),
   .sprout-button-size-lg:has([data-icon='inline-start']) {
     padding-inline-start: 8px;
   }
-  .sprout-button-size-default:has([data-icon='inline-end']),
+  .sprout-button-size-md:has([data-icon='inline-end']),
   .sprout-button-size-lg:has([data-icon='inline-end']) {
     padding-inline-end: 8px;
   }
-  .sprout-button-size-xs {
-    --sprout-button-icon: 0.75rem;
-    gap: 4px;
-    height: 24px;
-    padding: 0 8px;
-    border-radius: min(var(--sprout-radius-control), 10px);
-    font-size: var(--sprout-text-xs);
-  }
   .sprout-button-size-sm {
     --sprout-button-icon: 0.875rem;
     gap: 4px;
+    height: calc(var(--sprout-control-height) - 4px);
     padding: 0 10px;
     border-radius: min(var(--sprout-radius-control), 12px);
     font-size: var(--sprout-text-xs);
+    line-height: 16px;
   }
-  .sprout-button-size-xs:has([data-icon='inline-start']),
   .sprout-button-size-sm:has([data-icon='inline-start']) {
     padding-inline-start: 6px;
   }
-  .sprout-button-size-xs:has([data-icon='inline-end']),
   .sprout-button-size-sm:has([data-icon='inline-end']) {
     padding-inline-end: 6px;
   }
   .sprout-button-size-lg {
-    height: 36px;
-  }
-  .sprout-button-size-back {
-    --sprout-button-icon: 0.875rem;
-    gap: 4px;
-    padding: 0 10px 0 6px;
-    border-radius: min(var(--sprout-radius-control), 12px);
-    font-size: var(--sprout-text-xs);
-  }
-  .sprout-button-size-onboarding {
-    gap: 8px;
-    width: 100%;
-    height: 44px;
-    padding: 0 16px;
-    font-size: var(--sprout-text-base);
-  }
-  .sprout-button-size-bud,
-  .sprout-button-size-bud-labeled {
-    border-radius: 999px;
-    cursor: grab;
-    touch-action: none;
-  }
-  .sprout-button-size-bud:active,
-  .sprout-button-size-bud-labeled:active {
-    cursor: grabbing;
-  }
-  .sprout-button-size-bud {
-    width: 64px;
-    height: 64px;
-    padding: 0;
-  }
-  .sprout-button-size-bud-labeled {
-    gap: 8px;
-    height: 48px;
-    padding: 0 16px 0 8px;
-  }
-  .sprout-button-size-chat-row {
-    justify-content: space-between;
-    gap: 16px;
-    width: 100%;
-    min-width: 0;
-    height: 44px;
-    padding: 0 12px;
-    color: var(--sprout-text);
-    text-align: start;
-  }
-  .sprout-button-size-task-link {
-    justify-content: flex-start;
-    min-width: 0;
-    max-width: 100%;
-    height: auto;
-    min-height: 32px;
-    padding-block: 4px;
-    text-align: start;
-    white-space: normal;
-  }
-  .sprout-button-size-card-title {
-    justify-content: flex-start;
-    gap: 8px;
-    width: 100%;
-    min-width: 0;
-    height: 40px;
-    padding: 0;
-    color: var(--sprout-text);
-    text-align: start;
-    white-space: normal;
-  }
-  .sprout-button-size-result-card {
-    height: 32px;
-    padding: 0 12px;
-  }
-  .sprout-button-size-calendar-title {
-    gap: 4px;
-    height: 32px;
-    padding: 0 4px;
-    color: var(--sprout-text);
-    letter-spacing: -0.015em;
-  }
-  .sprout-button-size-calendar {
-    height: 32px;
-    padding: 0 8px;
-    font-size: var(--sprout-text-xs);
-  }
-  .sprout-button-size-calendar-icon {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-  }
-  .sprout-button-size-nav {
-    justify-content: flex-start;
-    gap: 8px;
-    width: 100%;
-    height: 32px;
-    text-align: start;
-  }
-  .sprout-button-size-column-header,
-  .sprout-button-size-column-header-end {
-    --sprout-button-icon: 0.875rem;
-    gap: 4px;
-    padding: 0 8px;
-  }
-  .sprout-button-size-column-header {
-    margin-inline-start: -8px;
-  }
-  .sprout-button-size-column-header-end {
-    flex-direction: row-reverse;
-    margin-inline-end: -8px;
-  }
-  .sprout-button-size-table-link {
-    justify-content: flex-start;
-    min-width: 0;
-    height: auto;
-    padding: 2px 0;
-    text-align: start;
-  }
-  .sprout-button-size-badge {
-    min-width: 0;
-    max-width: 176px;
-    padding: 0 10px;
-    border-radius: 999px;
+    height: calc(var(--sprout-control-height) + 4px);
   }
   .sprout-button-size-icon,
   .sprout-button-size-icon-xs,
@@ -282,8 +166,8 @@
     padding: 0;
   }
   .sprout-button-size-icon {
-    width: 32px;
-    height: 32px;
+    width: var(--sprout-control-height);
+    height: var(--sprout-control-height);
   }
   .sprout-button-size-icon-xs {
     --sprout-button-icon: 0.75rem;
@@ -292,15 +176,14 @@
     border-radius: min(var(--sprout-radius-control), 10px);
   }
   .sprout-button-size-icon-sm {
-    width: 28px;
-    height: 28px;
+    width: calc(var(--sprout-control-height) - 4px);
+    height: calc(var(--sprout-control-height) - 4px);
     border-radius: min(var(--sprout-radius-control), 12px);
   }
   .sprout-button-size-icon-lg {
-    width: 36px;
-    height: 36px;
+    width: calc(var(--sprout-control-height) + 4px);
+    height: calc(var(--sprout-control-height) + 4px);
   }
-  [data-slot='button-group'] .sprout-button-size-xs,
   [data-slot='button-group'] .sprout-button-size-sm,
   [data-slot='button-group'] .sprout-button-size-icon-xs,
   [data-slot='button-group'] .sprout-button-size-icon-sm {
@@ -317,18 +200,21 @@
     font-family: var(--sprout-font);
   }
   /* Long labels such as "Add #channel to execution limits" wrap instead of overflowing. */
-  .sprout-button-action > :is(.sprout-button-size-default, .sprout-button-size-sm, .sprout-button-size-lg),
+  .sprout-button-action > :is(.sprout-button-size-md, .sprout-button-size-sm, .sprout-button-size-lg),
   .sprout-action-group-row > .sprout-button {
     max-width: 100%;
     height: auto;
-    min-height: 28px;
+    min-height: var(--sprout-control-height);
     padding-block: 3px;
     white-space: normal;
     overflow-wrap: anywhere;
     text-align: center;
   }
+  .sprout-button-action > .sprout-button-size-sm {
+    min-height: calc(var(--sprout-control-height) - 4px);
+  }
   .sprout-button-action > .sprout-button-size-lg {
-    min-height: 36px;
+    min-height: calc(var(--sprout-control-height) + 4px);
   }
   .sprout-action-group-row {
     display: flex;
@@ -343,17 +229,6 @@
     max-width: 100%;
   }
 
-  @media (min-width: 640px) {
-    .sprout-button-size-calendar-title {
-      font-size: 1.125rem;
-    }
-  }
-  @media (max-width: 639px) {
-    .sprout-button-size-back {
-      width: 28px;
-      padding-inline: 0;
-    }
-  }
   @media (pointer: coarse) {
     .sprout-button,
     .sprout-button-action > .sprout-button,

package/dist/styles/chat-sources.css

@@ -150,6 +150,7 @@
   }
   .sprout-chat-sources-checked.sprout-button {
     display: inline;
+    height: auto;
     min-height: 0;
     padding: 0;
     font: inherit;

package/dist/styles/combobox.css

@@ -97,7 +97,7 @@
     gap: 8px;
     width: 100%;
     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);
@@ -170,7 +170,7 @@
     gap: 4px;
     width: 100%;
     min-width: 0;
-    min-height: 32px;
+    min-height: var(--sprout-control-height);
     padding: 4px 10px;
     border: 1px solid var(--sprout-input);
     border-radius: var(--sprout-radius-control);
@@ -182,6 +182,17 @@
     outline-offset: 0;
     cursor: text;
   }
+  .sprout-combobox-chips-size-sm {
+    min-height: calc(var(--sprout-control-height) - 4px);
+    padding-block: 2px;
+    border-radius: min(var(--sprout-radius-control), 12px);
+    font-size: var(--sprout-text-xs);
+    line-height: 16px;
+  }
+  .sprout-combobox-chips-size-lg {
+    min-height: calc(var(--sprout-control-height) + 4px);
+    padding-block: 6px;
+  }
   .sprout-combobox-chips:has([data-slot='combobox-chip']) {
     padding-inline: 4px;
   }

package/dist/styles/command.css

@@ -40,7 +40,7 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    height: 32px;
+    height: var(--sprout-control-height);
     min-width: 0;
     padding-inline: 8px;
     border: 1px solid color-mix(in oklab, var(--sprout-input) 30%, transparent);
@@ -135,10 +135,12 @@
 
   .sprout-command-item {
     position: relative;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     gap: 8px;
     min-width: 0;
+    min-height: var(--sprout-control-height);
     padding: 6px 8px;
     border-radius: calc(var(--sprout-radius-control) - 2px);
     color: var(--sprout-text);

package/dist/styles/context-menu.css

@@ -49,10 +49,12 @@
 
   .sprout-context-menu-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/dropdown-menu.css

@@ -48,10 +48,12 @@
 
   .sprout-dropdown-menu-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/gradient-banner.css

@@ -80,11 +80,6 @@
     min-height: 10rem;
     padding: 1.25rem;
   }
-  .sprout-gradient-banner[data-size='xl'] {
-    min-height: 22.5rem;
-    padding: 2rem;
-    border-radius: 1rem;
-  }
 
   .sprout-gradient-banner-art {
     position: absolute;

package/dist/styles/index.css

@@ -166,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;
@@ -181,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;
@@ -221,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;
@@ -254,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;

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);
@@ -43,8 +43,12 @@
     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,
@@ -159,38 +163,42 @@
     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 {
@@ -232,9 +240,9 @@
   .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 {

package/dist/styles/input-otp.css

@@ -35,8 +35,8 @@
   .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;
@@ -64,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;
   }
@@ -87,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);