@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/state-panel.css

@@ -0,0 +1,173 @@
+@layer components {
+  .sprout-state-panel {
+    font-family: var(--sprout-font);
+    color: var(--sprout-text);
+    overflow-wrap: anywhere;
+    animation: sprout-state-panel-in var(--sprout-motion-normal, 180ms)
+      var(--sprout-motion-ease, ease) both;
+  }
+  .sprout-state-panel[data-layout="centered"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+    max-width: 28rem;
+    margin-inline: auto;
+    padding: 3rem 1.5rem;
+    text-align: center;
+  }
+
+  .sprout-state-panel-media {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid var(--sprout-line);
+    border-radius: 0.5rem;
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-control);
+  }
+  .sprout-state-panel-media > svg {
+    flex-shrink: 0;
+  }
+  .sprout-state-panel-danger {
+    color: var(--sprout-danger);
+  }
+
+  .sprout-state-panel-text {
+    display: grid;
+    gap: 0.5rem;
+    width: 100%;
+  }
+  .sprout-state-panel-title {
+    margin: 0;
+    font-size: var(--sprout-text-base);
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--sprout-text);
+  }
+  .sprout-state-panel-description {
+    margin: 0;
+    font-size: var(--sprout-text-sm);
+    line-height: 1.5;
+    color: var(--sprout-muted);
+  }
+
+  .sprout-state-panel-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    font-size: var(--sprout-text-sm);
+    color: var(--sprout-muted);
+  }
+  .sprout-state-panel-actions:empty {
+    display: none;
+  }
+
+  .sprout-state-panel[data-layout="sample"] {
+    container-type: inline-size;
+    width: 100%;
+  }
+  .sprout-state-panel-card {
+    display: grid;
+    overflow: hidden;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    box-shadow: var(--sprout-shadow-control);
+  }
+  .sprout-state-panel-copy {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+  [data-layout="sample"] .sprout-state-panel-text {
+    max-width: 28rem;
+  }
+  [data-layout="sample"] .sprout-state-panel-title {
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+  [data-layout="sample"] .sprout-state-panel-description {
+    font-size: var(--sprout-text-base);
+  }
+  [data-layout="sample"] .sprout-state-panel-actions {
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+  .sprout-state-panel-sample {
+    position: relative;
+    display: none;
+    min-height: 15rem;
+    overflow: hidden;
+    border-top: 1px solid var(--sprout-line);
+    background: var(--sprout-canvas);
+  }
+  .sprout-state-panel-sample-window {
+    position: absolute;
+    inset: 1.5rem 0 0 1.5rem;
+    overflow: hidden;
+    border-top: 1px solid var(--sprout-line);
+    border-left: 1px solid var(--sprout-line);
+    border-top-left-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    box-shadow: var(--sprout-shadow-panel);
+    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
+  }
+
+  @container (min-width: 24rem) {
+    [data-layout="sample"] .sprout-state-panel-actions {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      width: auto;
+    }
+  }
+  @container (min-width: 28rem) {
+    .sprout-state-panel-sample {
+      display: block;
+    }
+  }
+  @container (min-width: 32rem) {
+    .sprout-state-panel-copy {
+      padding: 2.5rem;
+    }
+  }
+  @container (min-width: 48rem) {
+    .sprout-state-panel-card {
+      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+    }
+    .sprout-state-panel-copy {
+      padding-block: 3.5rem;
+    }
+    .sprout-state-panel-sample {
+      min-height: 22rem;
+      border-top: 0;
+      border-left: 1px solid var(--sprout-line);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-state-panel {
+      animation: none;
+    }
+  }
+}
+
+@keyframes sprout-state-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}

package/dist/styles/state-sample.css

@@ -0,0 +1,285 @@
+@layer components {
+  .sprout-state-sample,
+  .sprout-state-sample-mark {
+    --sprout-state-sample-pdf: #e2463f;
+    --sprout-state-sample-sheet: #1f8f4a;
+    --sprout-state-sample-document: #2b67d1;
+    --sprout-state-sample-slides: #d9622b;
+    --sprout-state-sample-image: #a8d4f7;
+    --sprout-state-sample-chart-1: #188038;
+    --sprout-state-sample-chart-2: #245cba;
+    --sprout-state-sample-chart-4: #7c4eb0;
+  }
+  .sprout-state-sample {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    color: var(--sprout-text);
+  }
+  .dark .sprout-state-sample,
+  .dark.sprout-state-sample,
+  .dark .sprout-state-sample-mark {
+    --sprout-state-sample-image: #4d7ea8;
+    --sprout-state-sample-chart-1: #75ce8e;
+    --sprout-state-sample-chart-2: #9cbdff;
+    --sprout-state-sample-chart-4: #c6a4ed;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) .sprout-state-sample,
+    :root:not(.light):not(.dark) .sprout-state-sample-mark {
+      --sprout-state-sample-image: #4d7ea8;
+      --sprout-state-sample-chart-1: #75ce8e;
+      --sprout-state-sample-chart-2: #9cbdff;
+      --sprout-state-sample-chart-4: #c6a4ed;
+    }
+  }
+
+  .sprout-state-sample-bar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.375rem;
+    height: 2.5rem;
+    min-width: 0;
+    padding-inline: 1rem;
+    border-bottom: 1px solid var(--sprout-line);
+    white-space: nowrap;
+  }
+  .sprout-state-sample-icon {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--sprout-muted);
+  }
+  .sprout-state-sample-faint {
+    flex-shrink: 0;
+    color: var(--sprout-muted);
+  }
+  .sprout-state-sample-crumb {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--sprout-muted);
+  }
+  .sprout-state-sample-crumb[data-current] {
+    font-weight: 500;
+    color: var(--sprout-text);
+  }
+  .sprout-state-sample-label {
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-inline: 0.375rem;
+    border: 1px solid var(--sprout-line);
+    border-radius: 0.25rem;
+    color: var(--sprout-muted);
+  }
+
+  .sprout-state-sample-tabs {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.25rem;
+    overflow: hidden;
+    padding: 0.375rem 0.75rem;
+    border-bottom: 1px solid var(--sprout-line);
+  }
+  .sprout-state-sample-tab {
+    flex-shrink: 0;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--sprout-radius-control);
+    color: var(--sprout-muted);
+    white-space: nowrap;
+  }
+  .sprout-state-sample-tab[data-selected] {
+    background: var(--sprout-hover);
+    font-weight: 500;
+    color: var(--sprout-text);
+  }
+
+  .sprout-state-sample-table,
+  .sprout-state-sample-list {
+    min-width: 0;
+  }
+  .sprout-state-sample-head,
+  .sprout-state-sample-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+    padding-inline: 1rem;
+    border-bottom: 1px solid var(--sprout-line);
+  }
+  .sprout-state-sample-head {
+    height: 2.25rem;
+    color: var(--sprout-muted);
+  }
+  .sprout-state-sample-row {
+    height: 2.5rem;
+  }
+  .sprout-state-sample-check {
+    flex-shrink: 0;
+    width: 0.75rem;
+    height: 0.75rem;
+    border: 1px solid var(--sprout-input);
+    border-radius: 0.125rem;
+  }
+  .sprout-state-sample-cell {
+    display: flex;
+    flex: 1 1 0%;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .sprout-state-sample-head .sprout-state-sample-cell {
+    display: block;
+    font-weight: 500;
+    text-overflow: ellipsis;
+  }
+  .sprout-state-sample-cell[data-size="wide"] {
+    flex: 1.6 1 0%;
+  }
+  .sprout-state-sample-cell[data-size="narrow"] {
+    flex: none;
+    width: 6rem;
+  }
+
+  .sprout-state-sample-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+    min-height: 3.5rem;
+    padding: 0.625rem 1rem;
+    border-bottom: 1px solid var(--sprout-line);
+  }
+  .sprout-state-sample-leading,
+  .sprout-state-sample-trailing {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .sprout-state-sample-trailing {
+    gap: 0.5rem;
+  }
+  .sprout-state-sample-copy {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+  .sprout-state-sample-title,
+  .sprout-state-sample-detail,
+  .sprout-state-sample-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sprout-state-sample-title {
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--sprout-text);
+  }
+  .sprout-state-sample-detail {
+    color: var(--sprout-muted);
+  }
+
+  .sprout-state-sample-text[data-tone="strong"] {
+    font-weight: 500;
+    color: var(--sprout-text);
+  }
+  .sprout-state-sample-text[data-tone="muted"] {
+    color: var(--sprout-muted);
+  }
+  .sprout-state-sample-text[data-tone="link"] {
+    color: var(--sprout-info);
+  }
+  .sprout-state-sample-text[data-tone="mono"] {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--sprout-muted);
+  }
+
+  .sprout-state-sample-mark {
+    --sprout-state-sample-from: var(--sprout-state-sample-pdf);
+    --sprout-state-sample-to: var(--sprout-state-sample-chart-4);
+    flex-shrink: 0;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 0.125rem;
+    background: linear-gradient(
+      to bottom right,
+      var(--sprout-state-sample-from),
+      var(--sprout-state-sample-to)
+    );
+  }
+  .sprout-state-sample-mark[data-size="md"] {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--sprout-radius-control);
+  }
+  .sprout-state-sample-mark[data-tone="orange"] {
+    --sprout-state-sample-from: var(--sprout-state-sample-slides);
+    --sprout-state-sample-to: var(--sprout-state-sample-pdf);
+  }
+  .sprout-state-sample-mark[data-tone="green"] {
+    --sprout-state-sample-from: var(--sprout-state-sample-sheet);
+    --sprout-state-sample-to: var(--sprout-state-sample-chart-2);
+  }
+  .sprout-state-sample-mark[data-tone="blue"] {
+    --sprout-state-sample-from: var(--sprout-state-sample-document);
+    --sprout-state-sample-to: var(--sprout-state-sample-chart-4);
+  }
+  .sprout-state-sample-mark[data-tone="violet"] {
+    --sprout-state-sample-from: var(--sprout-state-sample-chart-4);
+    --sprout-state-sample-to: var(--sprout-state-sample-pdf);
+  }
+  .sprout-state-sample-mark[data-tone="teal"] {
+    --sprout-state-sample-from: var(--sprout-state-sample-chart-1);
+    --sprout-state-sample-to: var(--sprout-state-sample-image);
+  }
+
+  .sprout-state-sample-placeholder {
+    min-width: 0;
+    width: 50%;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: var(--sprout-active);
+  }
+  .sprout-state-sample-placeholder[data-width="sm"] {
+    width: 33.333%;
+  }
+  .sprout-state-sample-placeholder[data-width="lg"] {
+    width: 75%;
+  }
+
+  .sprout-state-sample-icon-tile {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-surface);
+    color: var(--sprout-muted);
+    box-shadow: var(--sprout-shadow-control);
+  }
+
+  @media (forced-colors: active) {
+    .sprout-state-sample-mark,
+    .sprout-state-sample-placeholder {
+      forced-color-adjust: none;
+      border: 1px solid CanvasText;
+    }
+    .sprout-state-sample-tab[data-selected] {
+      outline: 1px solid CanvasText;
+    }
+  }
+}

package/dist/styles/switch.css

@@ -0,0 +1,128 @@
+@layer components {
+  .sprout-switch {
+    --sprout-switch-thumb-off: var(--sprout-surface);
+    --sprout-switch-travel: 14px;
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 18px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background-color: var(--sprout-muted);
+    vertical-align: middle;
+    cursor: pointer;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .sprout-switch-size-sm {
+    --sprout-switch-travel: 10px;
+    width: 24px;
+    height: 14px;
+  }
+  /* A 56 x 34px hit area around the default track. */
+  .sprout-switch::after {
+    content: "";
+    position: absolute;
+    inset: -8px -12px;
+  }
+  .dark .sprout-switch {
+    --sprout-switch-thumb-off: var(--sprout-text);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) .sprout-switch {
+      --sprout-switch-thumb-off: var(--sprout-text);
+    }
+  }
+  .sprout-switch:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+  }
+  .sprout-switch[data-checked] {
+    background-color: var(--sprout-primary);
+  }
+  .sprout-switch[aria-invalid="true"] {
+    border-color: var(--sprout-danger);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--sprout-danger) 20%, transparent);
+  }
+  .sprout-switch[aria-invalid="true"]:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
+  .sprout-switch[data-readonly] {
+    cursor: default;
+  }
+  .sprout-switch[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .sprout-switch[aria-busy="true"] {
+    cursor: progress;
+  }
+
+  .sprout-switch-thumb {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    background-color: var(--sprout-switch-thumb-off);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+    pointer-events: none;
+  }
+  .sprout-switch-size-sm .sprout-switch-thumb {
+    width: 12px;
+    height: 12px;
+  }
+  .sprout-switch-thumb[data-checked] {
+    background-color: var(--sprout-on-primary);
+    transform: translateX(var(--sprout-switch-travel));
+  }
+  .sprout-switch-thumb[data-checked]:dir(rtl) {
+    transform: translateX(calc(var(--sprout-switch-travel) * -1));
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-switch {
+      transition:
+        background-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        border-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        box-shadow var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        opacity var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out);
+    }
+    .sprout-switch-thumb {
+      transition:
+        transform var(--sprout-motion-normal, 180ms)
+          var(--sprout-motion-ease, ease-out),
+        background-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-switch {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+    .sprout-switch[data-checked] {
+      border-color: Highlight;
+      background-color: Highlight;
+    }
+    .sprout-switch-thumb {
+      background-color: CanvasText;
+    }
+    .sprout-switch-thumb[data-checked] {
+      background-color: HighlightText;
+    }
+    .sprout-switch:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}