@crewlethq/ui 0.2.0 → 0.4.0

package/scripts/css-source.mjs

@@ -0,0 +1,67 @@
+// What both CSS checks read, so the two cannot come to disagree about which
+// files they cover or where a finding is.
+//
+// Comments are BLANKED rather than removed, so a line number in a finding is
+// the line a person will open, and so prose about a rule is never mistaken for
+// the rule being broken: `check-css-variables` had already caught a stylesheet
+// whose own header explained why a style element is forbidden.
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+export function sourceFiles(directory, extensions = /\.(css|tsx?)$/) {
+  const found = [];
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) found.push(...sourceFiles(path, extensions));
+    else if (extensions.test(entry.name)) found.push(path);
+  }
+  return found;
+}
+
+export function withoutComments(text, isStylesheet) {
+  const pattern = isStylesheet ? /\/\*[\s\S]*?\*\//g : /\/\*[\s\S]*?\*\/|\/\/[^\n]*/g;
+  return text.replace(pattern, (comment) => comment.replace(/[^\n]/g, ' '));
+}
+
+export function lineOf(text, index) {
+  return text.slice(0, index).split('\n').length;
+}
+
+/** Every file under the given roots, with its comments blanked. */
+export function readSources(roots, base, extensions) {
+  const files = [];
+  for (const root of roots) {
+    if (!statSync(root).isDirectory()) throw new Error(`${root} is not a directory`);
+    for (const path of sourceFiles(root, extensions)) {
+      const raw = readFileSync(path, 'utf8');
+      files.push({
+        path,
+        where: relative(base, path),
+        isStylesheet: path.endsWith('.css'),
+        text: withoutComments(raw, path.endsWith('.css')),
+      });
+    }
+  }
+  return files;
+}
+
+/** Every rule body in a stylesheet, with its selector and its start offset. */
+export function rules(text) {
+  const found = [];
+  const pattern = /([^{}]+)\{([^{}]*)\}/g;
+  for (const match of text.matchAll(pattern)) {
+    found.push({ selector: match[1].trim(), body: match[2], index: match.index });
+  }
+  return found;
+}
+
+export function report(name, problems, checked) {
+  if (problems.length > 0) {
+    console.error(`${name} failed:\n${problems.map((problem) => `  ${problem}`).join('\n')}`);
+    process.exitCode = 1;
+    return false;
+  }
+  console.warn(`[ui] ${name}: ${checked}`);
+  return true;
+}

package/scripts/write-barrel.mjs

@@ -0,0 +1,60 @@
+// Writes src/generated/index.ts: one re-export line per component folder.
+//
+// WHY IT IS GENERATED. The root barrel is the one file every component folder
+// has to touch, and eight people adding components at once is eight conflicts
+// in it. Generated from the folder list, nobody edits it: a folder with an
+// index.ts is exported, a folder without one is not, and the order is the
+// filesystem's rather than an argument.
+//
+// It runs before tsup, before typecheck and before lint, because all three
+// read src/index.ts, which is nothing but a re-export of this file.
+
+import { readdirSync, readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = join(packageRoot, 'src');
+const out = join(sourceRoot, 'generated', 'index.ts');
+
+/** Every folder directly under src/ that publishes an index.ts. */
+export function componentFolders(root = sourceRoot) {
+  return readdirSync(root, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory() && entry.name !== 'generated')
+    .map((entry) => entry.name)
+    .filter((name) => {
+      try {
+        readdirSync(join(root, name));
+      } catch {
+        return false;
+      }
+      return readdirSync(join(root, name)).includes('index.ts');
+    })
+    .sort();
+}
+
+export function barrelSource(folders) {
+  return [
+    '// Generated by scripts/write-barrel.mjs from the folders under src/. Do not edit.',
+    ...folders.map((name) => `export * from '../${name}/index.js';`),
+    '',
+  ].join('\n');
+}
+
+function main() {
+  const folders = componentFolders();
+  const text = barrelSource(folders);
+  mkdirSync(dirname(out), { recursive: true });
+  let current = null;
+  try {
+    current = readFileSync(out, 'utf8');
+  } catch {
+    // Not written yet, which is every clean checkout.
+  }
+  // Only when it changed: an unconditional write restarts every watcher
+  // looking at src/ on each build.
+  if (current !== text) writeFileSync(out, text);
+  console.warn(`[ui] barrel exports ${folders.length} component folders`);
+}
+
+if (process.argv[1] && import.meta.url === `file://${process.argv[1]}`) main();

package/dist/Accordion-NIMJQIOI.css

@@ -1,88 +0,0 @@
-/*
- * Accordion, a stacked disclosure list for FAQs and dense settings. One
- * hairline rule between items, a chevron that rotates on open, and a panel
- * that is fully removed from the a11y tree when collapsed.
- */
-
-.crewlet-accordion {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid var(--color-border-default);
-}
-
-.crewlet-accordion__item {
-  border-bottom: 1px solid var(--color-border-default);
-}
-
-.crewlet-accordion__heading {
-  margin: 0;
-  font: inherit;
-}
-
-.crewlet-accordion__trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-4);
-  width: 100%;
-  padding: var(--spacing-5) 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  color: var(--color-text-primary);
-  font-family: var(--font-family-display);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-snug);
-  transition: color var(--motion-duration-base) var(--motion-easing-out);
-}
-
-.crewlet-accordion__trigger:hover {
-  color: var(--color-brand-accent);
-}
-
-.crewlet-accordion__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-  border-radius: var(--radius-sm);
-}
-
-.crewlet-accordion__item.is-disabled .crewlet-accordion__trigger {
-  cursor: not-allowed;
-  color: var(--color-text-muted);
-}
-
-.crewlet-accordion__title {
-  min-width: 0;
-}
-
-.crewlet-accordion__icon {
-  flex-shrink: 0;
-  font-size: 24px;
-  color: var(--color-text-tertiary);
-  transition: transform var(--motion-duration-base) var(--motion-easing-out);
-}
-
-.crewlet-accordion__item.is-open .crewlet-accordion__icon {
-  transform: rotate(180deg);
-  color: var(--color-brand-accent);
-}
-
-.crewlet-accordion__panel {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-md);
-  line-height: var(--font-line-height-relaxed, 1.7);
-}
-
-.crewlet-accordion__panel-inner {
-  padding: 0 0 var(--spacing-5);
-  max-width: 68ch;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-accordion__icon,
-  .crewlet-accordion__trigger {
-    transition: none;
-  }
-}

package/dist/AppShell-ZW3NSFBP.css

@@ -1,51 +0,0 @@
-/*
- * AppShell, layout shell for console apps.
- *
- * Passive composition: the sidebar and topbar slots position
- * themselves (typically `position: fixed`); AppShell only reserves
- * the gutters the fixed elements overlay via margin / padding on
- * the content column, so an application can adopt the shell without
- * restyling a sidebar or header it already positions itself.
- *
- * Layout dimensions are exposed as CSS custom properties on the
- * root so styles inside slot children can read them.
- */
-
-.crewlet-app-shell {
-  display: flex;
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: visible;
-  --crewlet-app-shell-sidebar-width: 280px;
-  --crewlet-app-shell-topbar-height: 64px;
-}
-
-.crewlet-app-shell__column {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  margin-left: var(--crewlet-app-shell-sidebar-width);
-  padding-top: var(--crewlet-app-shell-topbar-height);
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: visible;
-}
-
-.crewlet-app-shell__main {
-  flex: 1;
-  padding: 40px 0;
-  overflow-y: auto;
-  overflow-x: visible;
-  min-height: 0;
-  /*
-   * Reserve space for the vertical scrollbar on every page so the
-   * tab strip, headers, and content stay anchored at the same x
-   * position when navigating between a tall page (long form, large
-   * table) and a short page (a card or two). Without this gutter,
-   * the scrollbar appears or disappears between routes and shifts
-   * every element horizontally by the scrollbar's width, which
-   * reads as the page "jumping" on every navigation.
-   */
-  scrollbar-gutter: stable;
-}

package/dist/Avatar-V6NG6Q45.css

@@ -1,67 +0,0 @@
-/*
- * Avatar, round identity badge.
- *
- * The initials fallback
- * uses the defined brand-accent surface and its paired on-brand text token so
- * the dark, light, and system themes all keep an accessible contrast ratio.
- */
-
-.crewlet-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-  object-fit: cover;
-  font-family: var(--font-family-sans);
-  font-weight: 600;
-  line-height: 1;
-  user-select: none;
-}
-
-/* Shape modifiers. "circle" is the round identity badge; "square" keeps
-   rounded corners (matching the Card radius) so wide marks such as company
-   logos are not cropped into a circle. */
-.crewlet-avatar--circle {
-  border-radius: var(--radius-circle, 50%);
-}
-
-.crewlet-avatar--square {
-  border-radius: var(--radius-lg, 12px);
-}
-
-.crewlet-avatar--image {
-  display: block;
-  object-fit: cover;
-}
-
-.crewlet-avatar--fallback {
-  background: var(--color-brand-accent);
-  color: var(--color-text-on-brand);
-  text-transform: uppercase;
-}
-
-/*
- * Identity tints. When a colorSeed is supplied, the initials fallback picks
- * one of these fixed backgrounds by a stable hash of the seed, so each
- * identity keeps a distinct, consistent colour across the product (agent
- * rosters, member lists). The palette is chosen for a legible contrast ratio
- * against white initials (overridable through --crewlet-avatar-tint-fg),
- * and each tint overrides the plain
- * brand-accent fallback above. Ordering matters: these rules follow
- * .crewlet-avatar--fallback so the tint wins at equal specificity.
- */
-.crewlet-avatar--tint {
-  color: var(--crewlet-avatar-tint-fg, #ffffff);
-}
-
-.crewlet-avatar--tint-0 { background: #2563eb; }
-.crewlet-avatar--tint-1 { background: #7c3aed; }
-.crewlet-avatar--tint-2 { background: #c026d3; }
-.crewlet-avatar--tint-3 { background: #db2777; }
-.crewlet-avatar--tint-4 { background: #dc2626; }
-.crewlet-avatar--tint-5 { background: #ea580c; }
-.crewlet-avatar--tint-6 { background: #ca8a04; }
-.crewlet-avatar--tint-7 { background: #16a34a; }
-.crewlet-avatar--tint-8 { background: #0d9488; }
-.crewlet-avatar--tint-9 { background: #0284c7; }

package/dist/Button-XGCTXXYP.css

@@ -1,174 +0,0 @@
-/*
- * Button styles. Colour properties go through the @crewlethq/tokens
- * variables so the dark, light and system themes pick up the right
- * palette without a per-theme rule here.
- *
- * Each size fixes a min-height (28, 32 and 44px) so a row of mixed
- * buttons, with and without icons, keeps one height. IconButton's
- * 28px size matches the small button, so check the IconButton and
- * toolbar stories in Storybook when you change a size.
- */
-
-.crewlet-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  font-family: var(--font-family-sans);
-  font-weight: 600;
-  letter-spacing: -0.005em;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.crewlet-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.32));
-}
-
-.crewlet-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* ── Sizes (padding + font + min-height) ─────────────────────────── */
-.crewlet-btn--small  { padding: 5px 12px; font-size: 12px; min-height: 28px; }
-.crewlet-btn--medium { padding: 7px 14px; font-size: 13px; min-height: 32px; }
-.crewlet-btn--large  { padding: 9px 18px; font-size: 15px; min-height: 44px; }
-
-/* ── Shape modifiers ────────────────────────────────────────────── */
-.crewlet-btn--square { border-radius: 8px; }
-.crewlet-btn--pill   { border-radius: 100px; gap: 6px; }
-
-.crewlet-btn--pill.crewlet-btn--small  { padding: 6px 16px; }
-.crewlet-btn--pill.crewlet-btn--medium { padding: 9px 22px; }
-.crewlet-btn--pill.crewlet-btn--large  { padding: 11px 28px; }
-
-/*
- * Pill buttons paired with Material Symbols icons read better when
- * the icon drops from its default 20px to 16px so "← Back" / "Next →"
- * pairs sit as a unit.
- */
-.crewlet-btn--pill .material-symbols-outlined {
-  font-size: 16px;
-}
-
-/* ── Primary: solid white CTA, black text (dark theme); flips to
-   black-on-white in the light theme through the token overrides. ── */
-.crewlet-btn--primary {
-  background: var(--color-brand-primary, #ffffff);
-  color: var(--color-text-on-brand, #000000);
-  border-color: var(--color-brand-primary, #ffffff);
-}
-.crewlet-btn--primary:hover:not(:disabled) {
-  background: var(--color-brand-primary-hover, rgba(255, 255, 255, 0.9));
-  border-color: var(--color-brand-primary-hover, rgba(255, 255, 255, 0.9));
-}
-.crewlet-btn--primary:active:not(:disabled) {
-  background: var(--color-brand-primary-active, rgba(255, 255, 255, 0.82));
-  border-color: var(--color-brand-primary-active, rgba(255, 255, 255, 0.82));
-}
-
-/* ── Secondary: ghost with visible border. ──────────────────────── */
-.crewlet-btn--secondary {
-  background: var(--color-surface-subtle);
-  color: var(--color-text-primary);
-  border-color: var(--color-border-default);
-}
-.crewlet-btn--secondary:hover:not(:disabled) {
-  background: var(--color-surface-elevated, var(--color-surface-subtle));
-  border-color: var(--color-border-strong);
-}
-
-/* ── Outline: lavender accent. Branded secondary CTA. ───────────── */
-.crewlet-btn--outline {
-  background: transparent;
-  color: var(--color-brand-accent, #5469d4);
-  border-color: var(--color-brand-accent, #5469d4);
-}
-.crewlet-btn--outline:hover:not(:disabled) {
-  background: var(--color-brand-accent-soft, rgba(84, 105, 212, 0.10));
-  border-color: var(--color-brand-accent, #5469d4);
-}
-
-/* ── Tertiary: borderless ghost. ─────────────────────────────────── */
-.crewlet-btn--tertiary {
-  background: transparent;
-  color: var(--color-text-secondary);
-  border-color: transparent;
-}
-.crewlet-btn--tertiary:hover:not(:disabled) {
-  background: var(--color-surface-elevated, var(--color-surface-subtle));
-  color: var(--color-text-primary);
-}
-
-/* ── Accent: solid brand accent CTA. Used when the page already has
-   a white "primary" and a branded "yes do this" still belongs on
-   the surface, for example the action inside a toast. ────────── */
-.crewlet-btn--accent {
-  background: var(--color-brand-accent, #5469d4);
-  color: #ffffff;
-  border-color: var(--color-brand-accent, #5469d4);
-}
-.crewlet-btn--accent:hover:not(:disabled) {
-  background: var(--color-brand-accent-hover, #6478e0);
-  border-color: var(--color-brand-accent-hover, #6478e0);
-}
-.crewlet-btn--accent:active:not(:disabled) {
-  background: var(--color-brand-accent-active, #4a5cc2);
-  border-color: var(--color-brand-accent-active, #4a5cc2);
-}
-
-/* ── Danger: solid red for destructive confirmation. ────────────── */
-.crewlet-btn--danger {
-  background: var(--color-feedback-danger, #f43f5e);
-  color: #ffffff;
-  border-color: var(--color-feedback-danger, #f43f5e);
-}
-.crewlet-btn--danger:hover:not(:disabled) {
-  background: var(--color-feedback-danger-hover, #e11d48);
-  border-color: var(--color-feedback-danger-hover, #e11d48);
-}
-
-.crewlet-btn__icon  { display: inline-flex; align-items: center; }
-.crewlet-btn__label { display: inline-flex; align-items: center; }
-
-/*
- * Pending state. The spinner takes the leading icon's place so the
- * label neither moves nor changes width when an action starts, which is
- * what makes a button feel like it is working rather than replaced.
- */
-.crewlet-btn__spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  opacity: 0.7;
-  animation: crewlet-btn-spin 0.6s linear infinite;
-  flex: none;
-}
-
-@keyframes crewlet-btn-spin {
-  to { transform: rotate(360deg); }
-}
-
-/* A disabled button already reads as unavailable; a loading one should
-   still read as this button, mid-action. */
-.crewlet-btn--loading {
-  cursor: progress;
-}
-
-/* A spinner that cannot spin should not pretend to. The ring still
-   reads as pending without the motion. */
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-btn__spinner {
-    animation: none;
-  }
-}

package/dist/Callout-LEGDIMAM.css

@@ -1,52 +0,0 @@
-/*
- * Callout, inline status banner. One tinted surface per feedback
- * tone, readable on dark surfaces without stealing focus from the
- * content it annotates.
- */
-
-.crewlet-callout {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  border: 1px solid;
-  border-radius: 10px;
-  padding: 12px 16px;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.crewlet-callout__icon {
-  display: inline-flex;
-  margin-top: 1px;
-}
-
-.crewlet-callout__content { min-width: 0; }
-
-.crewlet-callout__title {
-  font-weight: 600;
-  margin-right: 6px;
-}
-
-.crewlet-callout--info {
-  border-color: color-mix(in srgb, var(--color-feedback-info) 30%, transparent);
-  background: color-mix(in srgb, var(--color-feedback-info) 9%, transparent);
-  color: color-mix(in srgb, var(--color-feedback-info) 55%, var(--color-text-primary));
-}
-
-.crewlet-callout--success {
-  border-color: color-mix(in srgb, var(--color-feedback-success) 32%, transparent);
-  background: color-mix(in srgb, var(--color-feedback-success) 9%, transparent);
-  color: color-mix(in srgb, var(--color-feedback-success) 55%, var(--color-text-primary));
-}
-
-.crewlet-callout--warning {
-  border-color: color-mix(in srgb, var(--color-feedback-warning) 32%, transparent);
-  background: color-mix(in srgb, var(--color-feedback-warning) 9%, transparent);
-  color: color-mix(in srgb, var(--color-feedback-warning) 60%, var(--color-text-primary));
-}
-
-.crewlet-callout--danger {
-  border-color: color-mix(in srgb, var(--color-feedback-danger) 30%, transparent);
-  background: color-mix(in srgb, var(--color-feedback-danger) 9%, transparent);
-  color: color-mix(in srgb, var(--color-feedback-danger) 45%, var(--color-text-primary));
-}

package/dist/Card-BOZGBML7.css

@@ -1,86 +0,0 @@
-/*
- * Card, surface primitive with optional Header / Body / Footer slots.
- * The 12px radius is shared with PricingCard so a card grid and a plain
- * card read as one family on the same page.
- *
- * Variants: default sits one step above the page on the subtle surface,
- * subtle sits flush with the page background behind its border,
- * outlined is transparent with a strong border, and elevated lifts off
- * the page with the elevated surface and a shadow.
- */
-
-.crewlet-card {
-  background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: 12px;
-  color: var(--color-text-primary);
-  display: flex;
-  flex-direction: column;
-}
-
-.crewlet-card--default  { background-color: var(--color-surface-subtle); }
-.crewlet-card--subtle   { background-color: var(--color-surface-background); }
-.crewlet-card--outlined {
-  background-color: transparent;
-  border-color: var(--color-border-strong);
-}
-.crewlet-card--elevated {
-  background-color: var(--color-surface-elevated, var(--color-surface-subtle));
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
-}
-
-.crewlet-card--p-sm   { padding: 12px 16px; }
-.crewlet-card--p-md   { padding: 20px 24px; }
-.crewlet-card--p-lg   { padding: 24px 28px; }
-
-.crewlet-card.is-interactive {
-  cursor: pointer;
-  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
-}
-.crewlet-card.is-interactive:hover {
-  border-color: var(--color-border-strong);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
-}
-.crewlet-card.is-interactive:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.32));
-}
-
-.crewlet-card__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.crewlet-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 0;
-}
-
-.crewlet-card__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--color-border-default);
-}
-
-.crewlet-card__title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.crewlet-card__description {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  margin: 0;
-  line-height: 1.5;
-}