@tulipfarm/sprout 0.0.0-stage → 0.1.0

package/dist/styles/input.css

@@ -0,0 +1,99 @@
+@layer components {
+  .sprout-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: 32px;
+    margin: 0;
+    padding: 4px 10px;
+    border: 1px solid var(--sprout-input);
+    border-radius: var(--sprout-radius-control);
+    background-color: var(--sprout-surface);
+    color: var(--sprout-text);
+    font-family: inherit;
+    font-size: var(--sprout-text-sm);
+    font-weight: 400;
+    line-height: 20px;
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+  }
+  .sprout-input::placeholder {
+    color: var(--sprout-muted);
+    opacity: 1;
+  }
+  .sprout-input:focus-visible {
+    border-color: var(--sprout-focus);
+    outline: 2px solid var(--sprout-focus);
+    outline-offset: 2px;
+  }
+  .sprout-input:disabled,
+  .sprout-input[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--sprout-hover);
+    opacity: 0.5;
+  }
+  .sprout-input[aria-invalid="true"],
+  .sprout-input[data-invalid] {
+    border-color: var(--sprout-danger);
+  }
+  .sprout-input[aria-invalid="true"]:focus-visible,
+  .sprout-input[data-invalid]:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
+
+  .sprout-input[type="file"] {
+    padding-block: 0;
+    line-height: 30px;
+    cursor: pointer;
+  }
+  .sprout-input[type="file"]:disabled {
+    cursor: not-allowed;
+  }
+  .sprout-input::file-selector-button {
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+    margin: 0 8px 0 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--sprout-text);
+    font: inherit;
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    cursor: inherit;
+  }
+  .sprout-input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 0.7;
+  }
+
+  .sprout-input-scale-lg {
+    height: 44px;
+    padding-inline: 12px;
+    font-size: var(--sprout-text-base);
+    line-height: 24px;
+  }
+  .sprout-input-scale-lg[type="file"] {
+    line-height: 42px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-input {
+      transition:
+        color var(--sprout-motion-fast, 120ms) ease-out,
+        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;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-input {
+      border-color: FieldText;
+    }
+    .sprout-input:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/dist/styles/kbd.css

@@ -0,0 +1,59 @@
+@layer components {
+  .sprout-kbd {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    gap: 4px;
+    width: fit-content;
+    min-width: 20px;
+    height: 20px;
+    padding-inline: 4px;
+    border: 1px solid transparent;
+    border-radius: calc(var(--sprout-radius-control) - 2px);
+    background: var(--sprout-secondary);
+    color: var(--sprout-muted);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-xs);
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    pointer-events: none;
+  }
+  .sprout-kbd[data-variant="outline"] {
+    border-color: var(--sprout-line);
+    background: var(--sprout-surface);
+  }
+  .sprout-kbd :where(svg) {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+  }
+
+  .sprout-kbd-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font: inherit;
+    vertical-align: middle;
+  }
+
+  @media (forced-colors: active) {
+    .sprout-kbd {
+      border-color: CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-kbd {
+      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/label.css

@@ -0,0 +1,89 @@
+@layer components {
+  .sprout-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    margin: 0;
+    color: var(--sprout-text);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1rem;
+    overflow-wrap: anywhere;
+    user-select: none;
+  }
+
+  /* A checkbox, switch, or radio inside the label, or just before it. */
+  .sprout-label:has(
+    > :is(
+      [role="checkbox"],
+      [role="switch"],
+      [role="radio"],
+      input[type="checkbox"],
+      input[type="radio"]
+    )
+  ),
+  :is(
+      [role="checkbox"],
+      [role="switch"],
+      [role="radio"],
+      input[type="checkbox"],
+      input[type="radio"]
+    )
+    + .sprout-label {
+    cursor: pointer;
+    line-height: 1.25rem;
+  }
+
+  /* A text control inside the label stacks under the text. */
+  .sprout-label:has(
+    > :is(
+      textarea,
+      select,
+      input:not([type="checkbox"], [type="radio"], [type="hidden"]),
+      [data-slot="input"],
+      [data-slot="select-trigger"],
+      [contenteditable]
+    )
+  ) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .sprout-label:has(:disabled, [data-disabled]:not([data-disabled="false"])) {
+    color: var(--sprout-muted);
+    cursor: not-allowed;
+  }
+
+  :is(input, textarea, select, button):disabled ~ .sprout-label,
+  :is([role], [data-slot])[data-disabled]:not([data-disabled="false"])
+    ~ .sprout-label,
+  .sprout-label:has(
+    + :is(
+      :is(input, textarea, select, button):disabled,
+      [data-disabled]:not([data-disabled="false"])
+    )
+  ) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :where(
+      [data-slot="field"][data-disabled]:not([data-disabled="false"]),
+      fieldset:disabled
+    )
+    .sprout-label {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-label {
+      transition:
+        color var(--sprout-motion-fast) var(--sprout-motion-ease),
+        opacity var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+  }
+}

package/dist/styles/mention-list.css

@@ -0,0 +1,166 @@
+@layer components {
+  .sprout-mention-list {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: 18rem;
+    min-width: 0;
+    padding: 4px;
+    overflow: hidden;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: 0 8px 24px -12px rgb(18 18 18 / 0.22);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+  .sprout-mention-list :where(ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sprout-mention-list-options {
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: 4px;
+    scrollbar-width: thin;
+  }
+  .sprout-mention-list-announcement {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .sprout-mention-option {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    min-height: 44px;
+    padding: 6px 8px;
+    border-radius: calc(var(--sprout-radius-panel) - 4px);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  @media (pointer: fine) {
+    .sprout-mention-option {
+      min-height: 36px;
+    }
+  }
+  .sprout-mention-option:hover {
+    background: color-mix(in oklab, var(--sprout-hover) 60%, transparent);
+  }
+  .sprout-mention-option[aria-selected="true"] {
+    background: var(--sprout-hover);
+    color: var(--sprout-text);
+  }
+  .sprout-mention-option-media {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--sprout-muted);
+  }
+  .sprout-mention-option[aria-selected="true"] .sprout-mention-option-media {
+    color: var(--sprout-text);
+  }
+  .sprout-mention-option-media > :where(svg) {
+    flex-shrink: 0;
+  }
+  .sprout-mention-option-text {
+    flex: 1;
+    min-width: 0;
+  }
+  .sprout-mention-option-title,
+  .sprout-mention-option-description {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sprout-mention-option-title {
+    font-weight: 500;
+  }
+  .sprout-mention-option-description {
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+  }
+
+  .sprout-mention-group:not(:first-child) {
+    margin-top: 4px;
+    padding-top: 4px;
+    border-top: 1px solid var(--sprout-line);
+  }
+  .sprout-mention-group-label {
+    display: block;
+    padding: 6px 8px 4px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    font-weight: 500;
+    line-height: 1rem;
+  }
+
+  .sprout-mention-status {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    min-height: 44px;
+    padding: 6px 8px;
+    color: var(--sprout-muted);
+  }
+  .sprout-mention-list-options:not(:empty) + .sprout-mention-status,
+  .sprout-mention-status + .sprout-mention-status {
+    border-top: 1px solid var(--sprout-line);
+  }
+  .sprout-mention-status-text {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .sprout-mention-status[data-tone="error"] .sprout-mention-status-text {
+    color: var(--sprout-danger);
+  }
+  .sprout-mention-status-action {
+    flex-shrink: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sprout-mention-option[aria-selected="true"] {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-mention-list {
+      animation: sprout-mention-list-in var(--sprout-motion-fast)
+        var(--sprout-motion-ease);
+    }
+    .sprout-mention-option {
+      transition: background-color var(--sprout-motion-fast)
+        var(--sprout-motion-ease);
+    }
+  }
+}
+
+@keyframes sprout-mention-list-in {
+  from {
+    opacity: 0;
+    translate: 0 6px;
+  }
+}

package/dist/styles/menubar.css

@@ -0,0 +1,226 @@
+@layer components {
+  .sprout-menubar {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    width: fit-content;
+    max-width: 100%;
+    height: 32px;
+    padding: 3px;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-control);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+  .sprout-menubar[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+    height: auto;
+  }
+  .sprout-menubar[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .sprout-menubar-trigger {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+    height: 24px;
+    padding: 2px 8px;
+    border: 0;
+    border-radius: var(--sprout-radius-control);
+    background: transparent;
+    color: var(--sprout-text);
+    font: inherit;
+    font-weight: 500;
+    white-space: nowrap;
+    outline: none;
+    cursor: default;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .sprout-menubar-trigger :where(svg) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+  .sprout-menubar-trigger[data-popup-open],
+  .sprout-menubar-trigger[aria-expanded="true"] {
+    background: var(--sprout-hover);
+  }
+  .sprout-menubar-trigger:focus-visible {
+    z-index: 1;
+    outline: 2px solid var(--sprout-focus);
+    outline-offset: 1px;
+  }
+  .sprout-menubar-trigger[data-disabled],
+  .sprout-menubar-trigger:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  @media (hover: hover) {
+    .sprout-menubar-trigger:not([data-disabled], :disabled):hover {
+      background: var(--sprout-hover);
+    }
+  }
+
+  .sprout-menubar-positioner {
+    z-index: 50;
+    isolation: isolate;
+    outline: none;
+  }
+
+  .sprout-menubar-content {
+    box-sizing: border-box;
+    width: max-content;
+    min-width: 9rem;
+    max-width: min(20rem, var(--available-width));
+    max-height: var(--available-height);
+    padding: 4px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-overlay);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    outline: none;
+    scrollbar-width: thin;
+    transform-origin: var(--transform-origin);
+  }
+  .sprout-menubar-content.sprout-menubar-sub-content {
+    min-width: 8rem;
+  }
+
+  .sprout-menubar-label {
+    padding: 4px 6px;
+    color: var(--sprout-muted);
+    font-weight: 500;
+    overflow-wrap: break-word;
+  }
+
+  .sprout-menubar-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 4px 6px;
+    border-radius: var(--sprout-radius-control);
+    color: var(--sprout-text);
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    overflow-wrap: break-word;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .sprout-menubar-item :where(svg) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+  .sprout-menubar-item[data-highlighted],
+  .sprout-menubar-sub-trigger[data-popup-open] {
+    background: var(--sprout-hover);
+    color: var(--sprout-text);
+  }
+  .sprout-menubar-item[data-variant="destructive"] {
+    color: var(--sprout-danger);
+  }
+  .sprout-menubar-item[data-variant="destructive"][data-highlighted] {
+    background: var(--sprout-danger-subtle);
+    color: var(--sprout-danger);
+  }
+  .sprout-menubar-item[data-disabled] {
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+  :is(.sprout-menubar-item, .sprout-menubar-label)[data-inset],
+  .sprout-menubar-choice {
+    padding-inline-start: 28px;
+  }
+
+  .sprout-menubar-sub-chevron {
+    margin-inline-start: auto;
+    color: var(--sprout-muted);
+  }
+  .sprout-menubar-sub-chevron:dir(rtl) {
+    scale: -1 1;
+  }
+
+  .sprout-menubar-indicator {
+    position: absolute;
+    inset-inline-start: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  .sprout-menubar-separator {
+    height: 1px;
+    margin: 4px -4px;
+    background: var(--sprout-line);
+  }
+
+  .sprout-menubar-shortcut {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    padding-inline-start: 12px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    letter-spacing: 0.08em;
+    white-space: nowrap;
+  }
+  .sprout-menubar-item[data-highlighted] .sprout-menubar-shortcut {
+    color: var(--sprout-text);
+  }
+
+  @media (forced-colors: active) {
+    .sprout-menubar-trigger[data-popup-open],
+    .sprout-menubar-item[data-highlighted],
+    .sprout-menubar-sub-trigger[data-popup-open] {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-menubar-trigger {
+      transition: background-color var(--sprout-motion-fast)
+        var(--sprout-motion-ease);
+    }
+    .sprout-menubar-content {
+      transition:
+        opacity var(--sprout-motion-fast) var(--sprout-motion-ease),
+        scale var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-menubar-content[data-starting-style],
+    .sprout-menubar-content[data-ending-style] {
+      opacity: 0;
+      scale: 0.96;
+    }
+    .sprout-menubar-content[data-instant] {
+      transition: none;
+    }
+  }
+}

package/dist/styles/message-actions.css

@@ -0,0 +1,83 @@
+@layer components {
+  .sprout-message-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    font-family: var(--sprout-font);
+  }
+
+  .sprout-message-actions-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+  .sprout-message-actions[data-author="human"] .sprout-message-actions-row {
+    justify-content: flex-end;
+  }
+  /* Revealed by hovering the message, or by focus anywhere in it. */
+  .sprout-message-actions-row[data-hover] {
+    opacity: 0;
+    transition: opacity var(--sprout-motion-fast) var(--sprout-motion-ease);
+  }
+  .sprout-message:hover .sprout-message-actions-row[data-hover],
+  .sprout-message:focus-within .sprout-message-actions-row[data-hover],
+  .sprout-message-actions-row[data-hover]:focus-within {
+    opacity: 1;
+  }
+  @media (hover: none) {
+    .sprout-message-actions-row[data-hover] {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-message-actions-row[data-hover] {
+      transition: none;
+    }
+  }
+
+  .sprout-message-actions-time {
+    padding-inline: 4px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .sprout-message-actions-error {
+    margin: 0;
+    color: var(--sprout-danger);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+
+  .sprout-message-actions-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .sprout-message-branch {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--sprout-muted);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+  }
+  .sprout-message-branch-count {
+    min-width: 2.5rem;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+}