@crewlethq/ui 0.2.0

package/dist/Skeleton-3WEFLRDN.css

@@ -0,0 +1,378 @@
+/*
+ * Skeleton, loading-state placeholder. Supports eight variants:
+ *   box           Single large rectangle with a sweeping wave-glow,
+ *                 used as a hero placeholder during heavy content
+ *                 loads. Five glow colours.
+ *   text          Multi-line text shimmer.
+ *   card          Single card with title + two text lines.
+ *   grid          N×M card grid.
+ *   list          Avatar + two-line list rows.
+ *   table         Header + rows table shimmer.
+ *   info-grid     Label/value pairs in a grid with row separators.
+ *   pricing-card  A row of cards laid out like PricingCard.Grid, each
+ *                 with a header, description, feature list and action
+ *                 button.
+ *
+ * Every class is namespaced under .crewlet-skeleton, so the placeholder
+ * never matches an application's own class names (a page stylesheet is
+ * likely to declare its own .skeleton-line, for instance).
+ *
+ * All static blocks share a single pulse animation; the box variant
+ * uses a sweeping wave overlay instead.
+ */
+
+/* ── Pulse animation, used by every static shimmer block ───────── */
+@keyframes crewlet-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.5; }
+}
+
+.crewlet-skeleton .crewlet-skeleton__line,
+.crewlet-skeleton .crewlet-skeleton__avatar,
+.crewlet-skeleton .crewlet-skeleton__circle,
+.crewlet-skeleton .crewlet-skeleton__button,
+.crewlet-skeleton .crewlet-skeleton__card,
+.crewlet-skeleton .crewlet-skeleton__list-item,
+.crewlet-skeleton .crewlet-skeleton__info-item {
+  animation: crewlet-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* ── Primitives: line, avatar, circle, button ───────────────────── */
+.crewlet-skeleton__line {
+  height: 12px;
+  background: var(--color-surface-elevated, var(--color-surface-muted));
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+.crewlet-skeleton__line:last-child { margin-bottom: 0; }
+
+.crewlet-skeleton__line--title { height: 16px; width: 60%; margin-bottom: 12px; }
+.crewlet-skeleton__line--text  { height: 12px; width: 100%; }
+.crewlet-skeleton__line--short { width: 70%; }
+.crewlet-skeleton__line--label { height: 13px; width: 40%; margin-bottom: 8px; }
+.crewlet-skeleton__line--value { height: 14px; width: 80%; }
+
+.crewlet-skeleton__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-surface-elevated, var(--color-surface-muted));
+  flex-shrink: 0;
+}
+
+.crewlet-skeleton__circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--color-surface-elevated, var(--color-surface-muted));
+  flex-shrink: 0;
+}
+
+.crewlet-skeleton__circle--small {
+  width: 16px;
+  height: 16px;
+}
+
+.crewlet-skeleton__button {
+  width: 100%;
+  height: 36px;
+  background: var(--color-surface-elevated, var(--color-surface-muted));
+  border-radius: 8px;
+}
+
+/* ── card / grid / list containers ──────────────────────────────── */
+.crewlet-skeleton--card {
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 12px;
+  padding: 24px;
+}
+
+/*
+ * grid and info-grid read their column count from
+ * --crewlet-skeleton-cols, set by the --cols-N modifier the component
+ * adds and lowered by the responsive rules at the end of this file.
+ */
+.crewlet-skeleton--cols-1 { --crewlet-skeleton-cols: 1; }
+.crewlet-skeleton--cols-2 { --crewlet-skeleton-cols: 2; }
+.crewlet-skeleton--cols-3 { --crewlet-skeleton-cols: 3; }
+.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 4; }
+
+.crewlet-skeleton--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-skeleton-cols, 1), 1fr);
+  gap: 16px;
+  width: 100%;
+}
+
+.crewlet-skeleton__card {
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.crewlet-skeleton--list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
+
+.crewlet-skeleton__list-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+}
+
+.crewlet-skeleton__list-content { flex: 1; min-width: 0; }
+
+/* ── table ──────────────────────────────────────────────────────── */
+.crewlet-skeleton--table {
+  width: 100%;
+  position: relative;
+  overflow-x: auto;
+}
+
+.crewlet-skeleton__table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
+  display: table;
+  table-layout: auto;
+}
+
+.crewlet-skeleton__table thead { border-bottom: 1px solid var(--color-border-default); display: table-header-group; }
+.crewlet-skeleton__table tbody { display: table-row-group; }
+.crewlet-skeleton__table tr    { display: table-row; }
+
+.crewlet-skeleton__th {
+  padding: 2px 16px;
+  text-align: left;
+  position: relative;
+  display: table-cell;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.crewlet-skeleton__th .crewlet-skeleton__line {
+  height: 14px;
+  width: 60%;
+  margin: 0;
+  display: inline-block;
+  transform: translateY(-4px);
+}
+
+.crewlet-skeleton__th:first-child .crewlet-skeleton__line { width: 70%; }
+.crewlet-skeleton__th:last-child  .crewlet-skeleton__line { width: 40%; }
+
+.crewlet-skeleton__tr {
+  background: var(--color-surface-subtle);
+  border-bottom: 1px solid var(--color-border-default);
+  transition: background-color 0.2s ease;
+  display: table-row;
+}
+.crewlet-skeleton__tr:hover { background: var(--color-surface-elevated, var(--color-surface-subtle)); }
+
+.crewlet-skeleton__td {
+  padding: 12px 16px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.crewlet-skeleton__td .crewlet-skeleton__line {
+  height: 8px;
+  width: auto;
+  min-width: 80px;
+  margin: 0;
+  border-radius: 4px;
+}
+
+.crewlet-skeleton__td:first-child .crewlet-skeleton__line { min-width: 200px; }
+.crewlet-skeleton__td:last-child  .crewlet-skeleton__line { min-width: 60px; width: 60px; }
+
+/* ── info-grid (label/value pairs with row separators) ──────────── */
+.crewlet-skeleton--info-grid {
+  --crewlet-skeleton-row-gap: 32px;
+  --crewlet-skeleton-col-gap: 48px;
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-skeleton-cols, 1), 1fr);
+  gap: var(--crewlet-skeleton-row-gap) var(--crewlet-skeleton-col-gap);
+  width: 100%;
+}
+
+.crewlet-skeleton__info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+}
+
+/*
+ * A separator centred in the row gap above the first item of every row
+ * after the first, drawn across the whole row: the item's own width
+ * times the column count, plus the column gaps between them. The
+ * row-start selectors are wrapped in :where() so every rule here shares
+ * one specificity and the responsive overrides win by source order.
+ */
+.crewlet-skeleton__info-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: calc(var(--crewlet-skeleton-row-gap) / -2);
+  width: calc(100% * var(--crewlet-skeleton-cols, 1) + var(--crewlet-skeleton-col-gap) * (var(--crewlet-skeleton-cols, 1) - 1));
+  height: 1px;
+  background: var(--color-border-default);
+  display: none;
+}
+
+:where(.crewlet-skeleton--cols-1) > .crewlet-skeleton__info-item:where(:nth-child(n+2))::before,
+:where(.crewlet-skeleton--cols-2) > .crewlet-skeleton__info-item:where(:nth-child(2n+1):nth-child(n+3))::before,
+:where(.crewlet-skeleton--cols-3) > .crewlet-skeleton__info-item:where(:nth-child(3n+1):nth-child(n+4))::before,
+:where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item:where(:nth-child(4n+1):nth-child(n+5))::before {
+  display: block;
+}
+
+/* ── pricing-card (mirrors PricingCard.Grid and the card surface) ── */
+.crewlet-skeleton--pricing-card {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.crewlet-skeleton__pricing-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 12px;
+}
+
+.crewlet-skeleton__pricing-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.crewlet-skeleton__pricing-card-description {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-skeleton__pricing-card-features {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.crewlet-skeleton__pricing-card-feature {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.crewlet-skeleton__line--heading      { width: 80px; height: 16px; margin: 0; }
+.crewlet-skeleton__line--wide         { width: 90%; }
+.crewlet-skeleton__line--three-quarter { width: 75%; }
+.crewlet-skeleton__line--feature      { width: 60px; height: 12px; margin: 0; }
+
+/* ── responsive ─────────────────────────────────────────────────── */
+@media (max-width: 1320px) {
+  .crewlet-skeleton--pricing-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 1200px) {
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 2; }
+
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
+    --crewlet-skeleton-cols: 2;
+    --crewlet-skeleton-row-gap: 24px;
+    --crewlet-skeleton-col-gap: 32px;
+  }
+  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item::before { display: none; }
+  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item:where(:nth-child(2n+1):nth-child(n+3))::before {
+    display: block;
+  }
+}
+
+@media (max-width: 768px) {
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-2,
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-3,
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 1; }
+
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-2,
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-3,
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
+    --crewlet-skeleton-cols: 1;
+    --crewlet-skeleton-row-gap: 20px;
+  }
+  .crewlet-skeleton__info-item::before { display: none; }
+  .crewlet-skeleton__info-item:where(:nth-child(n+2))::before { display: block; }
+
+  .crewlet-skeleton--card,
+  .crewlet-skeleton__card { padding: 16px; }
+}
+
+@media (max-width: 680px) {
+  .crewlet-skeleton--pricing-card { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* ── Box variant: wave-glow hero shimmer ────────────────────────── */
+.crewlet-skeleton--box {
+  width: 100%;
+  padding: 0;
+  animation: crewlet-skeleton-fade-in 0.15s ease-in;
+}
+
+@keyframes crewlet-skeleton-fade-in {
+  from { opacity: 0; } to { opacity: 1; }
+}
+
+.crewlet-skeleton__glow-box {
+  width: 100%;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0.03) 100%
+  );
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.crewlet-skeleton__glow-wave {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  animation: crewlet-skeleton-wave ease-in-out infinite;
+}
+
+@keyframes crewlet-skeleton-wave {
+  0%   { left: -100%; }
+  100% { left: 100%; }
+}
+
+.crewlet-skeleton__glow-wave--blue {
+  background: linear-gradient(90deg, transparent 0%, rgba(147, 197, 253, 0.3) 20%, rgba(147, 197, 253, 0.5) 50%, rgba(147, 197, 253, 0.3) 80%, transparent 100%);
+}
+.crewlet-skeleton__glow-wave--green {
+  background: linear-gradient(90deg, transparent 0%, rgba(134, 239, 172, 0.3) 20%, rgba(134, 239, 172, 0.5) 50%, rgba(134, 239, 172, 0.3) 80%, transparent 100%);
+}
+.crewlet-skeleton__glow-wave--purple {
+  background: linear-gradient(90deg, transparent 0%, rgba(196, 181, 253, 0.3) 20%, rgba(196, 181, 253, 0.5) 50%, rgba(196, 181, 253, 0.3) 80%, transparent 100%);
+}
+.crewlet-skeleton__glow-wave--orange {
+  background: linear-gradient(90deg, transparent 0%, rgba(253, 186, 116, 0.3) 20%, rgba(253, 186, 116, 0.5) 50%, rgba(253, 186, 116, 0.3) 80%, transparent 100%);
+}
+.crewlet-skeleton__glow-wave--red {
+  background: linear-gradient(90deg, transparent 0%, rgba(252, 165, 165, 0.3) 20%, rgba(252, 165, 165, 0.5) 50%, rgba(252, 165, 165, 0.3) 80%, transparent 100%);
+}

package/dist/StatCard-RTJIVTRB.css

@@ -0,0 +1,50 @@
+/*
+ * StatCard, key-metric tile. Shares the Card surface treatment so
+ * stat rows sit naturally next to Card-based sections.
+ */
+
+.crewlet-statcard {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 12px;
+  padding: 16px;
+  color: var(--color-text-primary);
+}
+
+.crewlet-statcard__icon {
+  display: inline-flex;
+  margin-top: 2px;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-statcard__body { min-width: 0; }
+
+.crewlet-statcard__value {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--color-text-primary);
+}
+
+.crewlet-statcard__placeholder { color: var(--color-text-muted); }
+
+.crewlet-statcard__label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-top: 4px;
+}
+
+.crewlet-statcard__sub {
+  font-size: 11.5px;
+  color: var(--color-text-tertiary);
+  margin-top: 2px;
+}
+
+.crewlet-statcard--brand   .crewlet-statcard__icon { color: var(--color-brand-primary); }
+.crewlet-statcard--success .crewlet-statcard__icon { color: var(--color-feedback-success); }
+.crewlet-statcard--warning .crewlet-statcard__icon { color: var(--color-feedback-warning); }
+.crewlet-statcard--danger  .crewlet-statcard__icon { color: var(--color-feedback-danger); }
+.crewlet-statcard--info    .crewlet-statcard__icon { color: var(--color-feedback-info); }

package/dist/Table-AR3TRY2E.css

@@ -0,0 +1,89 @@
+/* Table Component Styles */
+.crewlet-table {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.crewlet-table__container {
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-table__header {
+  display: grid;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-subtle);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/* The dark palette lays the header flush with the page background,
+   so the rows (on the subtle surface) read as lifted beneath it. */
+body.theme-dark .crewlet-table__header {
+  background: var(--color-surface-background);
+}
+
+.crewlet-table__body {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-table__row {
+  display: grid;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  border-bottom: 1px solid var(--color-border-default);
+  transition: background 0.2s ease;
+}
+
+.crewlet-table__row:last-child {
+  border-bottom: none;
+}
+
+.crewlet-table__row:hover {
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-table__empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.crewlet-table__action-btn {
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  color: var(--color-brand-accent, #5469d4);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.2s ease;
+  margin-bottom: -20px;
+}
+
+.crewlet-table__action-text {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 6px;
+  transition: background 0.2s ease;
+}
+
+.crewlet-table__action-btn:hover .crewlet-table__action-text {
+  background: var(--color-surface-elevated);
+}

package/dist/Tabs-XZ4JIH3E.css

@@ -0,0 +1,153 @@
+/*
+ * Tabs primitive.
+ *
+ * Two visual variants share the same item layout:
+ *
+ *   - underline   Flat strip on a baseline border with a sliding
+ *                 2px accent bar under the active tab. The bar
+ *                 position + width come from CSS variables the
+ *                 primitive writes after measuring the active tab
+ *                 in a useLayoutEffect, so the bar animates between
+ *                 tabs as the selection moves.
+ *   - pill        Segmented control inside a tinted container, with
+ *                 a lifted active chip.
+ *
+ * Variant chrome is owned here so consumers do not need to ship a
+ * parallel stylesheet for each new tab strip they introduce.
+ */
+
+.crewlet-tabs {
+  display: inline-flex;
+  align-items: center;
+  font-family: inherit;
+}
+
+/* ─── Underline (sliding accent bar) ──────────────────────────── */
+.crewlet-tabs--underline {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
+  position: relative;
+  width: 100%;
+}
+
+.crewlet-tabs--underline::after {
+  /*
+   * Sliding accent bar. Positioned absolutely against the nav. The
+   * left + width come from inline CSS variables the primitive writes
+   * from a measurement pass against the .is-active tab. The default
+   * width of 0 keeps the bar invisible until the first measurement
+   * lands, no opacity toggle needed.
+   */
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: var(--crewlet-tabs-slider-left, 0);
+  width: var(--crewlet-tabs-slider-width, 0);
+  height: 2px;
+  background: var(--color-brand-accent, #5469d4);
+  transition:
+    left 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+/* ─── Pill (segmented control) ────────────────────────────────── */
+.crewlet-tabs--pill {
+  gap: 4px;
+  padding: 4px;
+  background: var(--color-surface-subtle, #f4f4f5);
+  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
+  border-radius: 10px;
+  width: fit-content;
+}
+
+/* ─── Tab item (shared) ───────────────────────────────────────── */
+.crewlet-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 0;
+  color: var(--color-text-secondary, #c9ced8);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.crewlet-tabs--sm .crewlet-tabs__tab {
+  font-size: 12px;
+}
+
+/* Underline tab sizing. Sits flush against the baseline; the slider
+   provides the active indicator so no per-tab border is needed. */
+.crewlet-tabs--underline .crewlet-tabs__tab {
+  padding: 12px 16px;
+  font-size: 14px;
+  position: relative;
+}
+
+.crewlet-tabs--underline.crewlet-tabs--sm .crewlet-tabs__tab {
+  padding: 10px 14px;
+  font-size: 13px;
+}
+
+/* Pill tab sizing + rounded chip shape. */
+.crewlet-tabs--pill .crewlet-tabs__tab {
+  padding: 6px 12px;
+  border-radius: 7px;
+}
+
+.crewlet-tabs--pill.crewlet-tabs--sm .crewlet-tabs__tab {
+  padding: 5px 10px;
+}
+
+/* Hover. */
+.crewlet-tabs__tab:hover:not(.is-disabled):not(.is-active) {
+  color: var(--color-text-primary, #fafafa);
+}
+
+.crewlet-tabs--pill .crewlet-tabs__tab:hover:not(.is-disabled):not(.is-active) {
+  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.06));
+}
+
+/* Active. Underline relies on the slider for the line; tab itself
+   just brightens its text color. Pill paints an elevated chip. */
+.crewlet-tabs__tab.is-active {
+  color: var(--color-text-primary, #fafafa);
+}
+
+.crewlet-tabs--pill .crewlet-tabs__tab.is-active {
+  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.08));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.crewlet-tabs__tab:focus-visible {
+  outline: 2px solid var(--color-brand-accent, #5469d4);
+  outline-offset: 2px;
+}
+
+.crewlet-tabs__tab.is-disabled,
+.crewlet-tabs__tab:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.crewlet-tabs__icon {
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.crewlet-tabs__label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}