@tulipfarm/sprout 0.1.0 → 0.3.0

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/sql-viewer.css

@@ -0,0 +1,406 @@
+@layer components {
+  .sprout-sql-viewer {
+    --sprout-sql-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    position: relative;
+    display: flex;
+    flex: 1 1 0%;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 24rem;
+    overflow: hidden;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-canvas);
+    color: var(--sprout-text);
+    font-family: var(--sprout-font);
+  }
+
+  .sprout-sql-flow.light,
+  .sprout-sql-flow.dark {
+    --sprout-chart-1: inherit;
+    --sprout-chart-2: inherit;
+    --sprout-chart-3: inherit;
+    --sprout-chart-4: inherit;
+    --sprout-chart-5: inherit;
+  }
+
+  .sprout-sql-viewer [data-tone] {
+    --sprout-sql-tone: var(--sprout-primary);
+  }
+  .sprout-sql-viewer [data-tone="1"] {
+    --sprout-sql-tone: var(--sprout-chart-1);
+  }
+  .sprout-sql-viewer [data-tone="2"] {
+    --sprout-sql-tone: var(--sprout-chart-2);
+  }
+  .sprout-sql-viewer [data-tone="3"] {
+    --sprout-sql-tone: var(--sprout-chart-3);
+  }
+  .sprout-sql-viewer [data-tone="4"] {
+    --sprout-sql-tone: var(--sprout-chart-4);
+  }
+  .sprout-sql-viewer [data-tone="5"] {
+    --sprout-sql-tone: var(--sprout-chart-5);
+  }
+
+  .sprout-sql-flow .react-flow__node-group {
+    pointer-events: none;
+  }
+
+  .sprout-sql-handle.react-flow__handle {
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    min-width: 0;
+    min-height: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .sprout-sql-handle.react-flow__handle-left {
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+  .sprout-sql-handle.react-flow__handle-right {
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+
+  .sprout-sql-group {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: 1px solid
+      color-mix(in oklab, var(--sprout-sql-tone) 45%, var(--sprout-line));
+    border-radius: 14px;
+    background: color-mix(in oklab, var(--sprout-sql-tone) 6%, transparent);
+  }
+  .sprout-sql-group-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 44px;
+    padding: 0 20px;
+    color: color-mix(in oklab, var(--sprout-sql-tone) 70%, var(--sprout-text));
+    font-size: var(--sprout-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    line-height: 1rem;
+    text-transform: uppercase;
+    pointer-events: all;
+    cursor: grab;
+  }
+  .sprout-sql-group-count {
+    min-width: 18px;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: color-mix(in oklab, var(--sprout-sql-tone) 14%, transparent);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+    text-align: center;
+  }
+
+  .sprout-sql-table {
+    box-sizing: border-box;
+    width: 272px;
+    overflow: hidden;
+    border: 1px solid var(--sprout-line);
+    border-top: 3px solid var(--sprout-sql-tone);
+    border-radius: 10px;
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-control);
+    transition:
+      opacity var(--sprout-motion-normal) var(--sprout-motion-ease),
+      box-shadow var(--sprout-motion-fast) var(--sprout-motion-ease),
+      border-color var(--sprout-motion-fast) var(--sprout-motion-ease);
+  }
+  .sprout-sql-table[data-dimmed] {
+    opacity: 0.38;
+  }
+  .sprout-sql-table[data-active],
+  .react-flow__node.dragging .sprout-sql-table {
+    box-shadow: var(--sprout-shadow-panel);
+  }
+  .sprout-sql-table[data-active] {
+    border-color: color-mix(
+      in oklab,
+      var(--sprout-sql-tone) 55%,
+      var(--sprout-line)
+    );
+  }
+
+  .sprout-sql-table-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 0 12px;
+    border-bottom: 1px solid var(--sprout-line);
+    background: color-mix(
+      in oklab,
+      var(--sprout-sql-tone) 9%,
+      var(--sprout-surface)
+    );
+  }
+  .sprout-sql-table-title {
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    color: var(--sprout-text);
+    font-size: var(--sprout-text-sm);
+    font-weight: 600;
+    line-height: 1.25rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sprout-sql-columns,
+  .sprout-sql-keys-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .sprout-sql-column {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    height: 28px;
+    padding: 0 12px;
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+  }
+  .sprout-sql-column + .sprout-sql-column {
+    box-shadow: inset 0 1px 0
+      color-mix(in oklab, var(--sprout-line) 60%, transparent);
+  }
+  .sprout-sql-column[data-join] {
+    cursor: pointer;
+  }
+  .sprout-sql-column[data-join]:hover,
+  .sprout-sql-column[data-active] {
+    background: color-mix(in oklab, var(--sprout-primary) 8%, transparent);
+  }
+  .sprout-sql-column-icon {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    width: 12px;
+    color: var(--sprout-muted);
+  }
+  .sprout-sql-column[data-key="primary"] .sprout-sql-column-icon {
+    color: var(--sprout-warning);
+  }
+  .sprout-sql-column[data-join] .sprout-sql-column-icon {
+    color: var(--sprout-primary);
+  }
+  .sprout-sql-column-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sprout-sql-column[data-key="primary"] .sprout-sql-column-name {
+    font-weight: 600;
+  }
+  .sprout-sql-column-type {
+    flex-shrink: 0;
+    max-width: 50%;
+    overflow: hidden;
+    color: var(--sprout-muted);
+    font-family: var(--sprout-sql-mono);
+    font-size: 0.6875rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sprout-sql-keys {
+    border-top: 1px solid var(--sprout-line);
+    background: color-mix(
+      in oklab,
+      var(--sprout-hover) 40%,
+      var(--sprout-surface)
+    );
+  }
+  .sprout-sql-keys-title {
+    box-sizing: border-box;
+    height: 35px;
+    margin: 0;
+    padding: 12px 12px 0;
+    color: var(--sprout-muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    line-height: 1rem;
+    text-transform: uppercase;
+  }
+  .sprout-sql-key {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-sizing: border-box;
+    height: 26px;
+    padding: 0 12px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+  }
+  .sprout-sql-key > span {
+    overflow: hidden;
+    color: var(--sprout-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sprout-sql-join {
+    transition:
+      stroke var(--sprout-motion-fast) var(--sprout-motion-ease),
+      opacity var(--sprout-motion-normal) var(--sprout-motion-ease);
+  }
+  .sprout-sql-flow .sprout-sql-join[data-active] {
+    stroke: var(--sprout-primary);
+    stroke-width: 1.75;
+  }
+  .sprout-sql-join[data-dimmed] {
+    opacity: 0.25;
+  }
+  .sprout-sql-joins {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    box-sizing: border-box;
+    max-width: calc(100% - 88px);
+    padding: 8px 10px;
+    border: 1px solid
+      color-mix(in oklab, var(--sprout-primary) 40%, var(--sprout-line));
+    border-radius: 8px;
+    background: var(--sprout-surface);
+    box-shadow: var(--sprout-shadow-control);
+    pointer-events: none;
+  }
+  .sprout-sql-viewer[data-layout="vertical"] .sprout-sql-joins {
+    max-width: calc(100% - 24px);
+  }
+  .sprout-sql-join-text {
+    overflow: hidden;
+    color: var(--sprout-text);
+    font-family: var(--sprout-sql-mono);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sprout-sql-joins-more {
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+  }
+
+  .sprout-sql-more {
+    position: relative;
+    width: 240px;
+    height: 132px;
+  }
+  .sprout-sql-more-sheet {
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--sprout-line);
+    border-radius: 10px;
+    background: var(--sprout-surface);
+  }
+  .sprout-sql-more-sheet:nth-of-type(1) {
+    transform: translate(10px, 10px);
+    opacity: 0.5;
+  }
+  .sprout-sql-more-sheet:nth-of-type(2) {
+    transform: translate(5px, 5px);
+    opacity: 0.8;
+  }
+  .sprout-sql-more-button {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    padding: 16px 18px;
+    border: 1px dashed var(--sprout-border-strong);
+    border-radius: 10px;
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    box-shadow: var(--sprout-shadow-control);
+    transition:
+      transform var(--sprout-motion-fast) var(--sprout-motion-ease),
+      border-color var(--sprout-motion-fast) var(--sprout-motion-ease);
+  }
+  .sprout-sql-more-button:hover {
+    border-color: var(--sprout-primary);
+    transform: translate(-2px, -2px);
+  }
+  .sprout-sql-more-button:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 2px;
+  }
+  .sprout-sql-more-count {
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .sprout-sql-more-names {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  .sprout-sql-more-action {
+    margin-top: 6px;
+    color: var(--sprout-primary);
+    font-size: var(--sprout-text-xs);
+    font-weight: 600;
+    line-height: 1rem;
+  }
+
+  .sprout-sql-empty {
+    margin: auto;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+  }
+
+  .sprout-sql-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-sql-table,
+    .sprout-sql-join,
+    .sprout-sql-more-button {
+      transition: none;
+    }
+    .sprout-sql-more-button:hover {
+      transform: none;
+    }
+  }
+}

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;