@crewlethq/ui 0.2.0 → 0.3.0

package/dist/PricingCard-NKYV3JHA.css

@@ -1,238 +0,0 @@
-/*
- * PricingCard, plan-tier card surface.
- *
- * The primitive owns the outer card surface (border / radius / padding /
- * states), the header / name / tag, the price block (amount + cadence
- * + price note), the grid container, and a body / footer slot for
- * domain content (allowances, features, CTAs).
- *
- * Colours flow through the @crewlethq/tokens variables so the light,
- * dark and system themes pick up the right palette. Hex fallbacks keep
- * the dark defaults when the token stylesheet has not loaded.
- */
-
-/* ── Grid container ─────────────────────────────────────────────── */
-.crewlet-pricing-card-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  align-items: stretch;
-}
-
-@media (max-width: 1320px) {
-  .crewlet-pricing-card-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 680px) {
-  .crewlet-pricing-card-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-/* ── Card root ──────────────────────────────────────────────────── */
-.crewlet-pricing-card {
-  text-align: left;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.08));
-  border-radius: 12px;
-  padding: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  font-family: inherit;
-  color: inherit;
-  min-width: 0;
-  container-type: inline-size;
-  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
-}
-
-.crewlet-pricing-card.is-interactive {
-  cursor: pointer;
-}
-
-.crewlet-pricing-card.is-interactive:hover:not(.is-disabled):not(.is-unavailable):not(:disabled) {
-  border-color: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.4);
-}
-
-.crewlet-pricing-card.is-selected {
-  border-color: var(--color-brand-accent, #5469d4);
-  background: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.08);
-  box-shadow: 0 0 0 1px var(--color-brand-accent, #5469d4);
-}
-
-.crewlet-pricing-card.is-disabled,
-.crewlet-pricing-card:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.crewlet-pricing-card.is-unavailable {
-  opacity: 0.65;
-  cursor: not-allowed;
-}
-
-.crewlet-pricing-card.is-selected:has(.crewlet-pricing-card__amount--discounted) {
-  box-shadow: 0 0 0 1px var(--color-brand-accent, #5469d4), 0 0 24px rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.18);
-}
-
-/* Compact a card's interior at small container widths so a 4-up grid
-   on a tablet doesn't render unreadably tight. */
-@container (max-width: 320px) {
-  .crewlet-pricing-card {
-    padding: 12px;
-    gap: 10px;
-  }
-  .crewlet-pricing-card__amount { font-size: 1.4rem; }
-}
-
-@container (max-width: 240px) {
-  .crewlet-pricing-card {
-    padding: 10px;
-  }
-  .crewlet-pricing-card__amount { font-size: 1.25rem; }
-  .crewlet-pricing-card__name   { font-size: 0.9rem; }
-}
-
-/* ── Header (name + tags) ───────────────────────────────────────── */
-.crewlet-pricing-card__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.crewlet-pricing-card__name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary, #f5f5f7);
-}
-
-/* ── Tags ───────────────────────────────────────────────────────── */
-.crewlet-pricing-card__tag {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 2px 8px;
-  border-radius: 999px;
-}
-
-.crewlet-pricing-card__tag--neutral {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--color-text-secondary, #a1a1aa);
-}
-
-.crewlet-pricing-card__tag--top {
-  background: var(--color-brand-accent, #5469d4);
-  color: #ffffff;
-  font-weight: 600;
-  font-size: 0.6rem;
-  padding: 1px 6px;
-  margin-left: auto;
-}
-
-.crewlet-pricing-card__tag--save {
-  background: rgba(34, 197, 94, 0.15);
-  color: #86efac;
-}
-
-/*
- * Pending tag, for a change that takes effect later. Muted amber. The tag is the only
- * visual signal on the card (no border tint, no card background
- * change) so the eye picks it up as a heads-up annotation rather
- * than a status badge competing with the selection ring.
- */
-.crewlet-pricing-card__tag--pending {
-  background: rgba(245, 158, 11, 0.08);
-  color: rgba(251, 191, 36, 0.75);
-  font-weight: 500;
-}
-
-/* ── Price block ────────────────────────────────────────────────── */
-.crewlet-pricing-card__price {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.crewlet-pricing-card__amount {
-  font-size: 1.7rem;
-  font-weight: 600;
-  color: var(--color-text-primary, #f5f5f7);
-  transition: color 0.2s ease;
-}
-
-.crewlet-pricing-card__amount--strike {
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: var(--color-text-tertiary, #8c99ad);
-  text-decoration: line-through;
-  text-decoration-thickness: 1.5px;
-}
-
-.crewlet-pricing-card__amount--discounted {
-  color: var(--color-brand-accent, #5469d4);
-  animation: crewlet-pricing-card-discount-pop 480ms cubic-bezier(0.2, 0.7, 0.2, 1.2);
-  transform-origin: left center;
-}
-
-@keyframes crewlet-pricing-card-discount-pop {
-  0%   { transform: scale(0.92); opacity: 0; filter: blur(2px); }
-  60%  { transform: scale(1.06); opacity: 1; filter: blur(0); }
-  100% { transform: scale(1);    opacity: 1; filter: blur(0); }
-}
-
-.crewlet-pricing-card__cadence {
-  font-size: 0.8rem;
-  color: var(--color-text-secondary, #a1a1aa);
-}
-
-/*
- * Price note, a short label below the price block, for example
- * "Save $X (10% off)" beneath a discounted plan, or "Billed annually"
- * and "Free forever" hints.
- */
-.crewlet-pricing-card__price-note {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  flex-basis: 100%;
-  margin-top: 2px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  background: rgba(22, 163, 74, 0.12);
-  color: #4ade80;
-  border: 1px solid rgba(22, 163, 74, 0.35);
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  width: max-content;
-  max-width: 100%;
-  animation: crewlet-pricing-card-price-note-enter 520ms cubic-bezier(0.2, 0.7, 0.2, 1.2);
-}
-
-.crewlet-pricing-card__price-note .material-symbols-outlined {
-  font-size: 14px;
-  line-height: 1;
-}
-
-@keyframes crewlet-pricing-card-price-note-enter {
-  0%   { transform: translateY(-4px); opacity: 0; }
-  100% { transform: translateY(0);    opacity: 1; }
-}
-
-/* ── Body + Footer slots ────────────────────────────────────────── */
-.crewlet-pricing-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-width: 0;
-}
-
-.crewlet-pricing-card__footer {
-  margin-top: auto;
-  display: flex;
-  gap: 8px;
-}

package/dist/Section-665ZIPG6.css

@@ -1,20 +0,0 @@
-/*
- * Section, the vertical rhythm band. One spacing scale keeps the cadence
- * between page sections consistent, and collapses gracefully on small
- * viewports.
- */
-
-.crewlet-section {
-  position: relative;
-}
-
-.crewlet-section--none { padding-block: 0; }
-.crewlet-section--sm { padding-block: var(--spacing-9); }
-.crewlet-section--md { padding-block: var(--spacing-11); }
-.crewlet-section--lg { padding-block: 120px; }
-
-@media (max-width: 768px) {
-  .crewlet-section--sm { padding-block: var(--spacing-7); }
-  .crewlet-section--md { padding-block: var(--spacing-9); }
-  .crewlet-section--lg { padding-block: var(--spacing-10); }
-}

package/dist/Select-GPRF7PRB.css

@@ -1,294 +0,0 @@
-/* Unified custom dropdown. Colours come from the canonical
-   @crewlethq/tokens variables (--color-surface-*, --color-border-*,
-   --color-text-*, --color-brand-accent), so the same component
-   follows whichever palette the host application loads without
-   per-surface overrides.
-
-   The accent is read from --color-brand-accent and
-   --color-brand-accent-rgb on the trigger and on the menu. An app that
-   rebinds those two tokens retints the focus, highlight and selected
-   colours; the menu is portaled to <body>, so the override has to be
-   declared on <body> or <html> (or on the menu itself) to reach it. */
-
-.crewlet-select {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  --crewlet-select-accent: var(--color-brand-accent, #5469d4);
-  --crewlet-select-accent-rgb: var(--color-brand-accent-rgb, 84, 105, 212);
-}
-
-.crewlet-select.is-disabled {
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.crewlet-select__trigger {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 10px 8px 12px;
-  background: var(--color-surface-elevated, #1f2128);
-  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
-  color: var(--color-text-primary, #f5f5f7);
-  font-size: 13px;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease,
-    background 0.15s ease;
-}
-
-.crewlet-select--sm .crewlet-select__trigger {
-  padding: 6px 8px 6px 10px;
-  font-size: 12px;
-}
-
-.crewlet-select__trigger:hover:not(:disabled) {
-  border-color: var(--color-border-strong, rgba(255, 255, 255, 0.18));
-}
-
-.crewlet-select__trigger:focus,
-.crewlet-select.is-open > .crewlet-select__trigger {
-  outline: none;
-  border-color: var(--crewlet-select-accent);
-  box-shadow: 0 0 0 3px rgba(var(--crewlet-select-accent-rgb), 0.15);
-}
-
-.crewlet-select__label {
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.crewlet-select__label.is-placeholder {
-  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.5));
-}
-
-.crewlet-select__chevron {
-  font-size: 18px;
-  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.6));
-  flex-shrink: 0;
-}
-
-.crewlet-select.is-open .crewlet-select__chevron {
-  color: var(--crewlet-select-accent);
-}
-
-/* Floating menu. Portaled to <body> so it never gets clipped by
-   an ancestor's overflow rule (popovers, table cards, modal
-   bodies). Position is set inline from getBoundingClientRect on
-   the trigger; this rule only sets the visual chrome and the
-   z-index. The accent token is set on the wrapper, but because
-   the menu lives outside the wrapper after portalling, we mirror
-   the same fallback chain here so colours stay consistent. */
-.crewlet-select__menu {
-  /* The popover layer sits above the modal layer because a Select is
-     routinely opened inside a Modal: the trigger lives in the dialog,
-     but the panel portals to <body> as a sibling of the backdrop.
-     Below the modal layer the panel renders but is covered by the
-     backdrop, which both hides it and swallows clicks, so the menu
-     looks like it will not open. Toasts stay above it. */
-  z-index: var(--z-index-popover, 10000);
-  background: var(--color-surface-subtle, #15171c);
-  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
-  border-radius: 10px;
-  box-shadow:
-    0 12px 32px rgba(0, 0, 0, 0.45),
-    0 0 0 1px rgba(var(--crewlet-select-accent-rgb, 84, 105, 212), 0.18);
-  max-height: 320px;
-  display: flex;
-  flex-direction: column;
-  outline: none;
-  overflow: hidden;
-  animation: crewlet-select-pop 120ms ease-out;
-  --crewlet-select-accent: var(--color-brand-accent, #5469d4);
-  --crewlet-select-accent-rgb: var(--color-brand-accent-rgb, 84, 105, 212);
-}
-
-/* Inner option list. Scrolls when the option count exceeds the
-   menu's max height, while the optional search header stays
-   pinned at the top of the menu. */
-.crewlet-select__list {
-  margin: 0;
-  padding: 6px;
-  list-style: none;
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* Search header. Same visual register as the toolbar search
-   field so the operator recognises it instantly. */
-.crewlet-select__search {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.08));
-  flex-shrink: 0;
-}
-
-.crewlet-select__search .material-symbols-outlined {
-  font-size: 16px;
-  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.55));
-  flex-shrink: 0;
-}
-
-.crewlet-select__search-input {
-  flex: 1;
-  min-width: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--color-text-primary, #f5f5f7);
-  font-size: 13px;
-  font-family: inherit;
-  padding: 0;
-}
-
-.crewlet-select__search-input::placeholder {
-  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.55));
-}
-
-/* "No matches" row when search filters everything out. */
-.crewlet-select__empty {
-  padding: 14px 10px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.55));
-  list-style: none;
-}
-
-.crewlet-select__menu--top {
-  transform-origin: bottom left;
-}
-
-.crewlet-select__menu--bottom {
-  transform-origin: top left;
-}
-
-@keyframes crewlet-select-pop {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.crewlet-select__option {
-  padding: 8px 10px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: block;
-  color: var(--color-text-primary, #f5f5f7);
-  font-size: 13px;
-  line-height: 1.4;
-  user-select: none;
-  transition: background 0.1s ease, color 0.1s ease;
-}
-
-/*
- * Compact menu (size="sm") shrinks the inner list padding plus each
- * option's padding + font so a sm Select dropdown reads as a tight
- * companion to its sm trigger (e.g. the Local time zone / UTC
- * selector inside the TimeWindowPicker header).
- */
-.crewlet-select__menu--sm .crewlet-select__list {
-  padding: 4px;
-}
-
-.crewlet-select__menu--sm .crewlet-select__option {
-  padding: 5px 8px;
-  font-size: 12px;
-  line-height: 1.3;
-  border-radius: 4px;
-}
-
-.crewlet-select__menu--sm .crewlet-select__option-check {
-  font-size: 14px;
-}
-
-.crewlet-select__option + .crewlet-select__option {
-  margin-top: 1px;
-}
-
-.crewlet-select__option.is-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.crewlet-select__option.is-highlight {
-  background: rgba(var(--crewlet-select-accent-rgb), 0.14);
-  color: var(--crewlet-select-accent);
-}
-
-.crewlet-select__option.is-selected:not(.is-highlight) {
-  color: var(--crewlet-select-accent);
-}
-
-.crewlet-select__option-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.crewlet-select__option-label {
-  flex: 1;
-  min-width: 0;
-}
-
-.crewlet-select__option-check {
-  font-size: 16px;
-  color: var(--crewlet-select-accent);
-  flex-shrink: 0;
-}
-
-/*
- * Multi-select checkbox affordance painted on the leading edge of
- * each option row. Uses the same accent token as the single-select
- * check icon so every palette stays consistent.
- * Empty state is a hollow box with the border tinted; checked state
- * fills the box and centres the check glyph.
- */
-.crewlet-select__option--multi .crewlet-select__option-row {
-  align-items: center;
-}
-
-.crewlet-select__option-checkbox {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  border: 1.5px solid var(--color-border-strong, rgba(255, 255, 255, 0.25));
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
-  color: transparent;
-}
-
-.crewlet-select__option-checkbox.is-checked {
-  background: var(--crewlet-select-accent);
-  border-color: var(--crewlet-select-accent);
-  color: #ffffff;
-}
-
-.crewlet-select__option-checkbox .material-symbols-outlined {
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.crewlet-select__option-desc {
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--color-text-secondary, rgba(245, 245, 247, 0.7));
-  line-height: 1.4;
-}