@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/index.css

@@ -0,0 +1,268 @@
+@import "./accordion.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 "./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 "./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";
+@source "../**/*.js";
+
+@theme inline {
+  --color-sprout-canvas: var(--sprout-canvas);
+  --color-sprout-surface: var(--sprout-surface);
+  --color-sprout-hover: var(--sprout-hover);
+  --color-sprout-active: var(--sprout-active);
+  --color-sprout-text: var(--sprout-text);
+  --color-sprout-muted: var(--sprout-muted);
+  --color-sprout-line: var(--sprout-line);
+  --color-sprout-border: var(--sprout-border);
+  --color-sprout-border-strong: var(--sprout-border-strong);
+  --color-sprout-input: var(--sprout-input);
+  --color-sprout-primary: var(--sprout-primary);
+  --color-sprout-primary-hover: var(--sprout-primary-hover);
+  --color-sprout-primary-active: var(--sprout-primary-active);
+  --color-sprout-on-primary: var(--sprout-on-primary);
+  --color-sprout-focus: var(--sprout-focus);
+  --color-sprout-danger: var(--sprout-danger);
+  --color-sprout-danger-hover: var(--sprout-danger-hover);
+  --color-sprout-on-danger: var(--sprout-on-danger);
+  --color-sprout-info: var(--sprout-info);
+  --color-sprout-info-subtle: var(--sprout-info-subtle);
+  --color-sprout-primary-subtle: var(--sprout-primary-subtle);
+  --color-sprout-secondary: var(--sprout-secondary);
+  --color-sprout-danger-subtle: var(--sprout-danger-subtle);
+  --color-sprout-success: var(--sprout-success);
+  --color-sprout-success-subtle: var(--sprout-success-subtle);
+  --color-sprout-warning: var(--sprout-warning);
+  --color-sprout-warning-subtle: var(--sprout-warning-subtle);
+  --color-sprout-overlay: var(--sprout-overlay);
+  --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);
+  --font-sprout: var(--sprout-font);
+  --text-sprout-xs: var(--sprout-text-xs);
+  --text-sprout-sm: var(--sprout-text-sm);
+  --text-sprout-base: var(--sprout-text-base);
+  --radius-sprout-control: var(--sprout-radius-control);
+  --radius-sprout-panel: var(--sprout-radius-panel);
+  --shadow-sprout-control: var(--sprout-shadow-control);
+  --shadow-sprout-panel: var(--sprout-shadow-panel);
+  --shadow-sprout-overlay: var(--sprout-shadow-overlay);
+}
+
+@layer base {
+  :root {
+    --sprout-font: ui-sans-serif, system-ui, sans-serif;
+    --sprout-text-xs: 0.75rem;
+    --sprout-text-sm: 0.875rem;
+    --sprout-text-base: 1rem;
+    --sprout-radius-control: 0.375rem;
+    --sprout-radius-panel: 0.75rem;
+    --sprout-sidebar-width: 15.25rem;
+    --sprout-sidebar-icon-width: 3.5rem;
+    --sprout-sidebar-mobile-width: 18rem;
+    --sprout-motion-fast: 120ms;
+    --sprout-motion-normal: 180ms;
+    --sprout-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --sprout-shadow-control: 0 1px 2px rgb(24 24 24 / 0.04);
+    --sprout-shadow-panel: 0 2px 6px -4px rgb(24 24 24 / 0.1);
+    --sprout-shadow-overlay: 0 16px 64px -16px rgb(18 18 18 / 0.3);
+  }
+
+  :root,
+  .light {
+    --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: #262626;
+    --sprout-primary-hover: #171717;
+    --sprout-primary-active: #0d0d0d;
+    --sprout-on-primary: #fafafa;
+    --sprout-focus: #525252;
+    --sprout-focus-ring: #3b82f6;
+    --sprout-focus-width: 1px;
+    --sprout-danger: #b32d34;
+    --sprout-danger-hover: #98252b;
+    --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-secondary: #ececec;
+    --sprout-danger-subtle: #fdeeef;
+    --sprout-success: #1d6a37;
+    --sprout-success-subtle: #e8f4eb;
+    --sprout-warning: #8a4b08;
+    --sprout-warning-subtle: #fdf1dc;
+    --sprout-overlay: rgb(18 18 18 / 0.35);
+  }
+
+  .dark {
+    --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: #ededed;
+    --sprout-primary-hover: #d6d6d6;
+    --sprout-primary-active: #c4c4c4;
+    --sprout-on-primary: #202020;
+    --sprout-focus: #b5b5b5;
+    --sprout-focus-ring: #60a5fa;
+    --sprout-danger: #ff9197;
+    --sprout-danger-hover: #ffadb1;
+    --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-secondary: #2c2c2c;
+    --sprout-danger-subtle: #3a2124;
+    --sprout-success: #82d29a;
+    --sprout-success-subtle: #1c3223;
+    --sprout-warning: #eec27e;
+    --sprout-warning-subtle: #34291b;
+    --sprout-overlay: rgb(8 8 8 / 0.65);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --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: #ededed;
+      --sprout-primary-hover: #d6d6d6;
+      --sprout-primary-active: #c4c4c4;
+      --sprout-on-primary: #202020;
+      --sprout-focus: #b5b5b5;
+      --sprout-focus-ring: #60a5fa;
+      --sprout-danger: #ff9197;
+      --sprout-danger-hover: #ffadb1;
+      --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-secondary: #2c2c2c;
+      --sprout-danger-subtle: #3a2124;
+      --sprout-success: #82d29a;
+      --sprout-success-subtle: #1c3223;
+      --sprout-warning: #eec27e;
+      --sprout-warning-subtle: #34291b;
+      --sprout-overlay: rgb(8 8 8 / 0.65);
+    }
+  }
+}

package/dist/styles/input-group.css

@@ -0,0 +1,285 @@
+@layer components {
+  .sprout-input-group {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: 32px;
+    border: 1px solid var(--sprout-input);
+    border-radius: var(--sprout-radius-control);
+    background-color: var(--sprout-surface);
+    color: var(--sprout-text);
+    outline: 0 solid transparent;
+    outline-offset: 0;
+  }
+  .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]) {
+    border-color: var(--sprout-danger);
+    outline-color: var(--sprout-danger);
+  }
+  .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"]) {
+    flex-direction: column;
+    height: auto;
+  }
+  .sprout-input-group:has(> textarea) {
+    height: auto;
+  }
+
+  /* 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) {
+    border-color: var(--sprout-input);
+    outline-color: transparent;
+  }
+
+  .sprout-input-group-size-lg {
+    height: 44px;
+  }
+
+  .sprout-input-group-variant-composer,
+  .sprout-input-group-variant-question-composer {
+    flex-direction: column;
+    align-items: stretch;
+    height: auto;
+    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
+  ) {
+    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"]
+  ) {
+    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"] {
+    flex-wrap: wrap;
+    gap: 4px;
+    padding-inline: 8px;
+    padding-bottom: 8px;
+  }
+
+  .sprout-input-group-addon {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: auto;
+    min-width: 0;
+    padding-block: 6px;
+    border-color: var(--sprout-line);
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 20px;
+    cursor: text;
+    user-select: none;
+  }
+  .sprout-input-group-addon > svg:not([class*="size-"]) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+  .sprout-input-group-addon > svg {
+    pointer-events: none;
+  }
+  .sprout-input-group-addon-align-inline-start {
+    order: -1;
+    flex-shrink: 0;
+    padding-left: 8px;
+  }
+  .sprout-input-group-addon-align-inline-end {
+    order: 9999;
+    flex-shrink: 0;
+    padding-right: 8px;
+  }
+  .sprout-input-group-addon-align-inline-start:has(> button) {
+    padding-left: calc(8px - 0.3rem);
+  }
+  .sprout-input-group-addon-align-inline-end:has(> button) {
+    padding-right: calc(8px - 0.3rem);
+  }
+  .sprout-input-group-addon-align-inline-start:has(> kbd) {
+    padding-left: calc(8px - 0.15rem);
+  }
+  .sprout-input-group-addon-align-inline-end:has(> kbd) {
+    padding-right: calc(8px - 0.15rem);
+  }
+  .sprout-input-group-addon-align-block-start,
+  .sprout-input-group-addon-align-block-end {
+    justify-content: flex-start;
+    width: 100%;
+    padding-inline: 10px;
+  }
+  .sprout-input-group-addon-align-block-start {
+    order: -1;
+    padding-top: 8px;
+  }
+  .sprout-input-group-addon-align-block-end {
+    order: 9999;
+    padding-bottom: 8px;
+  }
+  .sprout-input-group-addon-align-block-start.border-b {
+    padding-bottom: 8px;
+  }
+  .sprout-input-group-addon-align-block-end.border-t {
+    padding-top: 8px;
+  }
+
+  .sprout-input-group-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    white-space: nowrap;
+  }
+  .sprout-input-group-text svg {
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+  .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;
+  }
+  .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-button.sprout-input-group-button-size-sm {
+    --sprout-button-icon: 1rem;
+    gap: 6px;
+    height: 28px;
+    padding: 0 8px;
+    border-radius: var(--sprout-radius-control);
+  }
+  .sprout-button.sprout-input-group-button-size-icon-xs {
+    --sprout-button-icon: 0.875rem;
+    width: 24px;
+    height: 24px;
+    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;
+    padding: 0;
+    border-radius: var(--sprout-radius-control);
+  }
+  @media (pointer: coarse) {
+    .sprout-input-group-variant-composer
+      .sprout-button.sprout-input-group-button {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+  .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[data-invalid] {
+    border-color: transparent;
+    background-color: transparent;
+    outline: 0 solid transparent;
+    opacity: 1;
+  }
+  .sprout-input.sprout-input-group-input {
+    flex: 1;
+    height: 100%;
+    border-width: 0;
+    border-radius: 0;
+    text-overflow: ellipsis;
+  }
+  .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 {
+    padding-right: 6px;
+  }
+  .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 {
+    padding-top: 8px;
+  }
+  .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-input[type="search"]::-webkit-search-cancel-button,
+  .sprout-input-group-input[type="search"]::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  .sprout-textarea.sprout-input-group-textarea {
+    flex: 1;
+    width: 100%;
+    padding-block: 8px;
+    resize: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-input-group {
+      transition:
+        background-color var(--sprout-motion-fast, 120ms) ease-out,
+        border-color var(--sprout-motion-fast, 120ms) ease-out,
+        outline-color var(--sprout-motion-fast, 120ms) ease-out,
+        box-shadow var(--sprout-motion-fast, 120ms) ease-out;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-input-group {
+      border-color: FieldText;
+    }
+    .sprout-input-group:has([data-slot="input-group-control"]:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
+}

package/dist/styles/input-otp.css

@@ -0,0 +1,138 @@
+@layer components {
+  .sprout-input-otp {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: fit-content;
+    max-width: 100%;
+  }
+  .sprout-input-otp[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .sprout-input-otp-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .sprout-input-otp-group {
+    display: flex;
+    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-slot {
+    position: relative;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--sprout-input);
+    border-inline-start-width: 0;
+    border-radius: 0;
+    background-color: var(--sprout-surface);
+    color: var(--sprout-text);
+    caret-color: var(--sprout-text);
+    font-family: inherit;
+    font-size: var(--sprout-text-sm);
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    line-height: 20px;
+    text-align: center;
+    outline: 0 solid transparent;
+    appearance: none;
+  }
+  .sprout-input-otp-slot:first-child {
+    border-inline-start-width: 1px;
+    border-start-start-radius: var(--sprout-radius-control);
+    border-end-start-radius: var(--sprout-radius-control);
+  }
+  .sprout-input-otp-slot:last-child {
+    border-start-end-radius: var(--sprout-radius-control);
+    border-end-end-radius: var(--sprout-radius-control);
+  }
+  .sprout-input-otp-slot::selection {
+    background: transparent;
+  }
+  .sprout-input-otp-slot:focus {
+    z-index: 1;
+    border-color: var(--sprout-border);
+    outline: var(--sprout-focus-width) solid transparent;
+    outline-offset: 0;
+  }
+  .sprout-input-otp-slot[aria-invalid="true"] {
+    border-color: var(--sprout-danger);
+  }
+  .sprout-input-otp-slot[aria-invalid="true"]:focus {
+    outline-color: color-mix(in oklab, var(--sprout-danger) 40%, transparent);
+  }
+  .sprout-input-otp-slot:disabled {
+    cursor: not-allowed;
+  }
+  .sprout-input-otp-slot[data-readonly] {
+    background-color: var(--sprout-hover);
+  }
+
+  @media (pointer: coarse) {
+    .sprout-input-otp-slot {
+      width: 44px;
+      height: 44px;
+      font-size: var(--sprout-text-base);
+    }
+  }
+
+  .sprout-input-otp-separator {
+    display: flex;
+    flex: none;
+    align-items: center;
+    color: var(--sprout-muted);
+  }
+  .sprout-input-otp-separator svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  @media (max-width: 359px) {
+    .sprout-input-otp {
+      gap: 4px;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-input-otp-slot {
+      transition:
+        border-color var(--sprout-motion-fast, 120ms) ease-out,
+        outline-color var(--sprout-motion-fast, 120ms) ease-out,
+        background-color var(--sprout-motion-fast, 120ms) ease-out;
+    }
+    .sprout-input-otp-group {
+      transition: box-shadow var(--sprout-motion-fast, 120ms) ease-out;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-input-otp-slot {
+      border-color: FieldText;
+    }
+    .sprout-input-otp-slot:focus {
+      outline: 2px solid Highlight;
+    }
+    .sprout-input-otp-slot[aria-invalid="true"] {
+      border-color: Mark;
+    }
+  }
+}