@crewlethq/ui 0.2.0

package/dist/PricingCard-NKYV3JHA.css

@@ -0,0 +1,238 @@
+/*
+ * 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

@@ -0,0 +1,20 @@
+/*
+ * 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

@@ -0,0 +1,294 @@
+/* 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;
+}