@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/avatar.css

@@ -0,0 +1,186 @@
+@layer components {
+  .sprout-avatar,
+  .sprout-entity-avatar {
+    --sprout-avatar-size: 2rem;
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    width: var(--sprout-avatar-size);
+    height: var(--sprout-avatar-size);
+    border-radius: 9999px;
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1;
+    user-select: none;
+  }
+  .sprout-avatar::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--sprout-line);
+    border-radius: inherit;
+    mix-blend-mode: darken;
+    pointer-events: none;
+  }
+  .dark .sprout-avatar::after {
+    mix-blend-mode: lighten;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) .sprout-avatar::after {
+      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);
+  }
+  .sprout-avatar[data-size="lg"] {
+    --sprout-avatar-size: 2.5rem;
+  }
+  .sprout-entity-avatar[data-size="lg"] {
+    --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"] {
+    border-radius: 0.25rem;
+  }
+
+  .sprout-avatar-image {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1;
+    border-radius: inherit;
+    object-fit: cover;
+    transition: opacity var(--sprout-motion-normal, 180ms)
+      var(--sprout-motion-ease, ease);
+  }
+  .sprout-avatar-image[data-starting-style],
+  .sprout-avatar-image[data-ending-style] {
+    opacity: 0;
+  }
+  .sprout-avatar-fallback,
+  .sprout-entity-avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+  .sprout-avatar-fallback {
+    background: var(--sprout-hover);
+    color: var(--sprout-muted);
+  }
+  .sprout-entity-avatar-fallback {
+    color: #fff;
+    font-weight: 600;
+  }
+
+  .sprout-avatar-badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background: var(--sprout-primary);
+    color: var(--sprout-on-primary);
+    box-shadow: 0 0 0 2px var(--sprout-avatar-ring, var(--sprout-canvas));
+    user-select: none;
+  }
+  .sprout-avatar-badge > svg {
+    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 {
+    display: none;
+  }
+  .sprout-avatar[data-size="lg"] > .sprout-avatar-badge {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .sprout-avatar-group {
+    display: flex;
+  }
+  .sprout-avatar-group > * + * {
+    margin-inline-start: -0.5rem;
+  }
+  .sprout-avatar-group > :is(.sprout-avatar, .sprout-avatar-group-count) {
+    box-shadow: 0 0 0 2px var(--sprout-avatar-ring, var(--sprout-canvas));
+  }
+  .sprout-avatar-group-count {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    background: var(--sprout-hover);
+    color: var(--sprout-muted);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1;
+  }
+  .sprout-avatar-group-count > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .sprout-avatar-group:has(> [data-size="sm"]) > .sprout-avatar-group-count {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--sprout-text-xs);
+  }
+  .sprout-avatar-group:has(> [data-size="sm"])
+    > .sprout-avatar-group-count
+    > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .sprout-avatar-group:has(> [data-size="lg"]) > .sprout-avatar-group-count {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .sprout-avatar-group:has(> [data-size="lg"])
+    > .sprout-avatar-group-count
+    > svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-avatar-image {
+      transition: none;
+    }
+  }
+}

package/dist/styles/badge.css

@@ -0,0 +1,178 @@
+@layer components {
+  .sprout-badge {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    width: fit-content;
+    max-width: 100%;
+    height: 20px;
+    overflow: hidden;
+    padding: 2px 8px;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background: transparent;
+    font-family: inherit;
+    font-size: var(--sprout-text-xs);
+    font-weight: 500;
+    line-height: 1rem;
+    white-space: nowrap;
+    vertical-align: middle;
+    text-decoration: none;
+    color: var(--sprout-text);
+  }
+  .sprout-badge:has(> [data-icon="inline-start"]) {
+    padding-inline-start: 6px;
+  }
+  .sprout-badge:has(> [data-icon="inline-end"]) {
+    padding-inline-end: 6px;
+  }
+  .sprout-badge > svg {
+    flex-shrink: 0;
+    width: 12px !important;
+    height: 12px !important;
+    pointer-events: none;
+  }
+  .sprout-badge:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
+  }
+  .sprout-badge[aria-invalid="true"] {
+    border-color: var(--sprout-danger);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--sprout-danger) 22%, transparent);
+  }
+  .sprout-badge:is(a[href], button):not(:disabled) {
+    cursor: pointer;
+  }
+  .sprout-badge:is(button) {
+    appearance: none;
+    margin: 0;
+  }
+  .sprout-badge:is(button):disabled,
+  .sprout-badge[aria-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .sprout-badge-chip {
+    align-items: flex-start;
+    min-width: 0;
+    height: auto;
+    min-height: 24px;
+    padding-block: 3px;
+    border-radius: 12px;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    text-align: start;
+  }
+  .sprout-badge-chip > svg {
+    margin-top: 2px;
+  }
+
+  .sprout-badge-default {
+    background: var(--sprout-primary-subtle);
+    color: var(--sprout-primary);
+  }
+  .sprout-badge-success {
+    background: var(--sprout-success-subtle);
+    color: var(--sprout-success);
+  }
+  .sprout-badge-warning {
+    background: var(--sprout-warning-subtle);
+    color: var(--sprout-warning);
+  }
+  .sprout-badge-info {
+    background: var(--sprout-info-subtle);
+    color: var(--sprout-info);
+  }
+  .sprout-badge-secondary {
+    background: var(--sprout-secondary);
+    color: var(--sprout-text);
+  }
+  .sprout-badge-destructive {
+    background: var(--sprout-danger-subtle);
+    color: var(--sprout-danger);
+  }
+  .sprout-badge-destructive:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
+  .sprout-badge-outline {
+    border-color: var(--sprout-line);
+    color: var(--sprout-text);
+  }
+  .sprout-badge-ghost {
+    background: transparent;
+    color: var(--sprout-text);
+  }
+  .sprout-badge-link {
+    background: transparent;
+    color: var(--sprout-primary);
+    text-underline-offset: 4px;
+  }
+
+  @media (hover: hover) {
+    .sprout-badge-default:is(a[href], button:not(:disabled)):hover {
+      background: color-mix(
+        in oklab,
+        var(--sprout-primary) 16%,
+        var(--sprout-surface)
+      );
+    }
+    .sprout-badge-success:is(a[href], button:not(:disabled)):hover {
+      background: color-mix(
+        in oklab,
+        var(--sprout-success) 18%,
+        var(--sprout-success-subtle)
+      );
+    }
+    .sprout-badge-warning:is(a[href], button:not(:disabled)):hover {
+      background: color-mix(
+        in oklab,
+        var(--sprout-warning) 18%,
+        var(--sprout-warning-subtle)
+      );
+    }
+    .sprout-badge-info:is(a[href], button:not(:disabled)):hover {
+      background: color-mix(
+        in oklab,
+        var(--sprout-info) 18%,
+        var(--sprout-info-subtle)
+      );
+    }
+    .sprout-badge-secondary:is(a[href], button:not(:disabled)):hover {
+      background: color-mix(
+        in oklab,
+        var(--sprout-text) 8%,
+        var(--sprout-secondary)
+      );
+    }
+    .sprout-badge-destructive:is(a[href], button:not(:disabled)):hover {
+      background: color-mix(
+        in oklab,
+        var(--sprout-danger) 20%,
+        var(--sprout-danger-subtle)
+      );
+    }
+    .sprout-badge-outline:is(a[href], button:not(:disabled)):hover,
+    .sprout-badge-ghost:is(a[href], button:not(:disabled)):hover {
+      background: var(--sprout-hover);
+      color: var(--sprout-muted);
+    }
+    .sprout-badge-link:is(a[href], button:not(:disabled)):hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-badge {
+      transition:
+        background-color var(--sprout-motion-fast) ease-out,
+        color var(--sprout-motion-fast) ease-out,
+        border-color var(--sprout-motion-fast) ease-out,
+        box-shadow var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+  }
+}

package/dist/styles/brand-icon.css

@@ -0,0 +1,104 @@
+@layer components {
+  /* [data-size] lifts these above .sprout-button when a tile renders a Button. */
+  .sprout-brand-tile[data-size] {
+    --sprout-brand-tile-size: 2.25rem;
+    box-sizing: border-box;
+    position: relative;
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--sprout-brand-tile-size);
+    min-width: var(--sprout-brand-tile-size);
+    height: var(--sprout-brand-tile-size);
+    padding: 0.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);
+    font-family: var(--sprout-font);
+    line-height: 1;
+  }
+  .sprout-brand-tile[data-size="sm"] {
+    --sprout-brand-tile-size: 1.5rem;
+    padding: 0.25rem;
+    border-radius: 0.375rem;
+  }
+  .sprout-brand-tile[data-size="lg"] {
+    --sprout-brand-tile-size: 3rem;
+    padding: 0.625rem;
+    border-radius: 0.75rem;
+  }
+  .sprout-brand-tile[data-size="xl"] {
+    --sprout-brand-tile-size: 3.5rem;
+    padding: 0.75rem;
+    border-radius: 1rem;
+  }
+  @media (pointer: coarse) {
+    .sprout-brand-tile[data-size="action"] {
+      --sprout-brand-tile-size: 2.75rem;
+      padding: 0.75rem;
+    }
+  }
+  .sprout-brand-tile[data-size]:is(button, a) {
+    cursor: pointer;
+    transition:
+      background-color var(--sprout-motion-fast) var(--sprout-motion-ease),
+      border-color var(--sprout-motion-fast) var(--sprout-motion-ease);
+  }
+  .sprout-brand-tile[data-size]:is(button, a):hover:not(:disabled) {
+    background: var(--sprout-hover);
+  }
+  .sprout-brand-tile[data-size]:is(button, a):focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
+  }
+  .sprout-brand-tile[data-size]:is(button, a):disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .sprout-brand-icon[data-size] {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 1rem;
+    height: 1rem;
+  }
+  .sprout-brand-icon[data-size="glyph"] {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .sprout-brand-icon[data-size="fill"] {
+    width: 100%;
+    height: 100%;
+  }
+  :is(.sprout-brand-icon, .sprout-brand-tile)[data-size]
+    > svg.sprout-brand-glyph {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .sprout-brand-stack {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .sprout-brand-stack > * + * {
+    margin-inline-start: -0.375rem;
+  }
+  .sprout-brand-stack > .sprout-brand-tile[data-size] {
+    box-shadow:
+      0 0 0 2px var(--sprout-brand-ring, var(--sprout-canvas)),
+      var(--sprout-shadow-control);
+  }
+  .sprout-brand-stack > .sprout-brand-tile:hover {
+    z-index: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sprout-brand-tile[data-size]:is(button, a) {
+      transition: none;
+    }
+  }
+}

package/dist/styles/breadcrumb.css

@@ -0,0 +1,121 @@
+@layer components {
+  .sprout-breadcrumb {
+    min-width: 0;
+  }
+  .sprout-breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    list-style: none;
+    overflow-wrap: break-word;
+  }
+  .sprout-breadcrumb-list[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+  .sprout-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+  .sprout-breadcrumb-list[data-wrap="false"] > .sprout-breadcrumb-item {
+    flex-shrink: 0;
+  }
+  .sprout-breadcrumb-list[data-wrap="false"]
+    > .sprout-breadcrumb-item:is(
+      [aria-current="page"],
+      :has(> [aria-current="page"])
+    ) {
+    flex-shrink: 1;
+  }
+
+  .sprout-breadcrumb-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    border-radius: 2px;
+    color: inherit;
+    text-decoration: none;
+  }
+  .sprout-breadcrumb-link > svg {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+  }
+  .sprout-breadcrumb-link:is(a[href], button):hover {
+    color: var(--sprout-text);
+  }
+  .sprout-breadcrumb-link:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
+  }
+
+  .sprout-breadcrumb-page {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    color: var(--sprout-text);
+    font-weight: 400;
+  }
+
+  .sprout-breadcrumb-label {
+    display: block;
+    min-width: 0;
+    max-width: var(--sprout-breadcrumb-label-width, 12rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sprout-breadcrumb-separator {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .sprout-breadcrumb-separator > svg {
+    width: 14px;
+    height: 14px;
+  }
+  .sprout-breadcrumb-separator:dir(rtl) > svg {
+    transform: scaleX(-1);
+  }
+
+  .sprout-breadcrumb-ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+  .sprout-breadcrumb-ellipsis > svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .sprout-breadcrumb-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;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-breadcrumb-link {
+      transition: color var(--sprout-motion-fast) ease-out;
+    }
+  }
+}

package/dist/styles/button-group.css

@@ -0,0 +1,113 @@
+@layer components {
+  .sprout-button-group {
+    display: flex;
+    align-items: stretch;
+    width: fit-content;
+    max-width: 100%;
+  }
+  .sprout-button-group > :focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+  .sprout-button-group:has(> [data-slot="button-group"]) {
+    gap: 8px;
+  }
+  .sprout-button-group > input {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .sprout-button-group.sprout-button-group-vertical {
+    flex-direction: column;
+  }
+
+  /* Doubled class so these joins outrank per-size button radii. */
+  .sprout-button-group.sprout-button-group-horizontal > [data-slot] {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .sprout-button-group.sprout-button-group-horizontal
+    > [data-slot]:not(:has(~ [data-slot])) {
+    border-start-end-radius: var(--sprout-radius-control);
+    border-end-end-radius: var(--sprout-radius-control);
+  }
+  .sprout-button-group.sprout-button-group-horizontal
+    > [data-slot]
+    ~ [data-slot] {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    border-inline-start-width: 0;
+  }
+
+  .sprout-button-group.sprout-button-group-vertical > [data-slot] {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .sprout-button-group.sprout-button-group-vertical
+    > [data-slot]:not(:has(~ [data-slot])) {
+    border-end-start-radius: var(--sprout-radius-control);
+    border-end-end-radius: var(--sprout-radius-control);
+  }
+  .sprout-button-group.sprout-button-group-vertical
+    > [data-slot]
+    ~ [data-slot] {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-block-start-width: 0;
+  }
+
+  .sprout-button-group-text {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 28px;
+    padding-inline: 10px;
+    border: 1px solid var(--sprout-input);
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-secondary);
+    color: var(--sprout-text);
+    font-family: inherit;
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 20px;
+    white-space: nowrap;
+  }
+  .sprout-button-group-text svg {
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+  .sprout-button-group-text svg:not([class*="size-"]) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .sprout-button-group-separator {
+    position: relative;
+    align-self: stretch;
+  }
+  .sprout-separator.sprout-button-group-separator[data-orientation="horizontal"] {
+    width: auto;
+    margin-inline: 1px;
+  }
+  .sprout-separator.sprout-button-group-separator[data-orientation="vertical"] {
+    height: auto;
+    min-height: 0;
+    margin-block: 1px;
+  }
+
+  @media (forced-colors: active) {
+    .sprout-button-group-text {
+      border-color: CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-button-group-text {
+      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);
+    }
+  }
+}