@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Kanban/index.ts

@@ -0,0 +1,7 @@
+export {
+  Kanban,
+  type KanbanProps,
+  type KanbanColumnProps,
+  type KanbanCardProps,
+  type KanbanMoveEvent,
+} from './Kanban';

package/src/components/Kbd/Kbd.module.scss

@@ -0,0 +1,47 @@
+@use './Kbd.tokens';
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kbd-separator-gap);
+  vertical-align: baseline;
+}
+
+.key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--kbd-padding-x-current);
+  height: var(--kbd-height-current);
+  min-width: var(--kbd-min-width-current);
+  font-family: var(--kbd-font-family);
+  font-size: var(--kbd-font-size-current);
+  font-weight: var(--kbd-font-weight);
+  color: var(--kbd-fg);
+  background: var(--kbd-bg);
+  border: var(--kbd-border-width) solid var(--kbd-border-color);
+  border-radius: var(--kbd-radius);
+  line-height: var(--line-height-none);
+}
+
+.separator {
+  color: var(--kbd-separator-fg);
+  font-size: var(--kbd-font-size-current);
+  user-select: none;
+}
+
+// Size variants set the per-size token bindings ONCE on the wrapper so the
+// .key + .separator children resolve via cascading `--kbd-*-current`.
+.kbdSizeSm {
+  --kbd-height-current: var(--kbd-height-sm);
+  --kbd-padding-x-current: var(--kbd-padding-x-sm);
+  --kbd-font-size-current: var(--kbd-font-size-sm);
+  --kbd-min-width-current: var(--kbd-min-width-sm);
+}
+
+.kbdSizeMd {
+  --kbd-height-current: var(--kbd-height-md);
+  --kbd-padding-x-current: var(--kbd-padding-x-md);
+  --kbd-font-size-current: var(--kbd-font-size-md);
+  --kbd-min-width-current: var(--kbd-min-width-md);
+}

package/src/components/Kbd/Kbd.tokens.scss

@@ -0,0 +1,26 @@
+:root {
+  // ─── Chip surface ──────────────────────────────────────────────────────
+  --kbd-bg: var(--color-bg-muted);
+  --kbd-fg: var(--color-fg-muted);
+  --kbd-border-color: var(--color-border);
+  --kbd-border-width: var(--border-width);
+  --kbd-radius: var(--radius-sm);
+  --kbd-font-family: var(--font-family-sans);
+  --kbd-font-weight: var(--font-weight-medium);
+
+  // ─── Separator (+ between keys) ────────────────────────────────────────
+  --kbd-separator-fg: var(--color-fg-muted);
+  --kbd-separator-gap: var(--space-1);
+
+  // ─── Size: sm (matches TopBar chrome) ──────────────────────────────────
+  --kbd-height-sm: 18px;
+  --kbd-padding-x-sm: var(--space-1);
+  --kbd-font-size-sm: var(--font-size-xs);
+  --kbd-min-width-sm: 18px; // single-char keys ('K') stay square
+
+  // ─── Size: md (command-palette feel) ───────────────────────────────────
+  --kbd-height-md: 24px;
+  --kbd-padding-x-md: var(--space-2);
+  --kbd-font-size-md: var(--font-size-sm);
+  --kbd-min-width-md: 24px;
+}

package/src/components/Kbd/Kbd.tsx

@@ -0,0 +1,73 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import styles from './Kbd.module.scss';
+
+/**
+ * Chip height. See KbdProps#size for when to use each. Intentionally only
+ * two sizes — `'sm'` for inline-chrome (matches TopBar.Search's hotkey hint)
+ * and `'md'` for standalone shortcut UI (command-palette, shortcut sheets).
+ */
+export type KbdSize = 'sm' | 'md';
+
+export interface KbdProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'> {
+  /**
+   * Keys to display. Each entry renders one `<kbd>` chip. Multiple entries
+   * are joined with an inline `+` separator; a single-entry array renders
+   * no separator. Pass the literal label you want shown (`'⌘'`, `'Ctrl'`,
+   * `'Shift'`, `'K'`) — the component does NOT platform-translate.
+   */
+  keys: string[];
+  /**
+   * Visual size. `'sm'` is the inline-chrome size (18px tall — matches
+   * `TopBar.Search`'s hotkey hint). `'md'` is the standalone shortcut size
+   * (24px tall — for command-palette / shortcut-sheet UI).
+   * @default 'sm'
+   */
+  size?: KbdSize;
+  /**
+   * Accessible label for the whole shortcut, read as a single phrase by
+   * screen readers. Defaults to `keys.join(' + ')` (e.g. `'⌘ + K'`) when
+   * omitted OR empty — an empty string is not an explicit name, so it takes
+   * the default too. Override when the raw keys are unintuitive — e.g. `keys={['⌘', 'K']}`
+   * with `aria-label="Open command palette"`.
+   */
+  'aria-label'?: string;
+}
+
+const sizeClass: Record<KbdSize, string> = {
+  sm: styles.kbdSizeSm,
+  md: styles.kbdSizeMd,
+};
+
+/**
+ * Renders a keyboard shortcut as one or more `<kbd>` chips joined with an inline `+` separator.
+ * @see docs/components/Kbd.md
+ */
+export const Kbd = forwardRef<HTMLSpanElement, KbdProps>(function Kbd(
+  { keys, size = 'sm', 'aria-label': ariaLabel, className, ...props },
+  ref,
+) {
+  // Pattern B — {...props} first so component-owned aria-label, aria-hidden
+  // composition, and className composition win over a careless spread.
+  return (
+    <span
+      {...props}
+      ref={ref}
+      aria-label={ariaLabel || keys.join(' + ')}
+      className={clsx(styles.kbd, sizeClass[size], className)}
+    >
+      {keys.map((key, i) => (
+        <span key={i} style={{ display: 'contents' }}>
+          {i > 0 && (
+            <span aria-hidden="true" className={styles.separator}>
+              +
+            </span>
+          )}
+          <kbd aria-hidden="true" className={styles.key}>
+            {key}
+          </kbd>
+        </span>
+      ))}
+    </span>
+  );
+});

package/src/components/Kbd/index.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd';
+export type { KbdProps, KbdSize } from './Kbd';

package/src/components/Lightbox/Lightbox.module.scss

@@ -0,0 +1,283 @@
+@use '../../styles/mixins' as *;
+@use './Lightbox.tokens';
+
+// stylelint-disable property-disallowed-list -- internal overlay positioning, not consumer layout
+
+.root {
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- overlay must be fixed to fill the viewport
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: calc(var(--lightbox-z) + var(--lightbox-depth, 0) * 2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--lightbox-gap);
+  padding: var(--lightbox-padding);
+  background: var(--lightbox-scrim);
+}
+
+.toolbar {
+  // Re-theme ghost <Button>s passed via `actions` for the dark scrim, so a plain
+  // `<Button iconOnly variant="ghost" size="sm">` matches the built-in controls.
+  --button-bg-ghost: var(--lightbox-control-bg);
+  --button-bg-ghost-hover: var(--lightbox-control-bg-hover);
+  --button-fg-ghost: var(--lightbox-control-fg);
+  --button-ring: var(--lightbox-ring);
+  --button-radius: var(--radius-full);
+  --button-height-sm: var(--lightbox-control-size);
+
+  position: absolute;
+  top: var(--lightbox-padding);
+  right: var(--lightbox-padding);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--lightbox-toolbar-gap);
+}
+
+.close,
+.download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lightbox-control-size);
+  height: var(--lightbox-control-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--lightbox-control-bg);
+  color: var(--lightbox-control-fg);
+  cursor: pointer;
+}
+
+// Download action for the current document — an <a> styled as an icon control.
+.download {
+  text-decoration: none;
+}
+
+.close:hover,
+.download:hover {
+  background: var(--lightbox-control-bg-hover);
+}
+
+.stage {
+  // Size container so the image can be bounded by the stage box (100cqw/100cqh):
+  // the flex child .imageWrap has no definite height, so a percentage max-height
+  // on the <img> would be ignored and a tall image cropped (#607). Safe: the
+  // stage's size comes from the column flex (flex: 1; min-height: 0), never
+  // from its contents.
+  container-type: size;
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+}
+
+.chev {
+  position: absolute;
+  top: 50%;
+  z-index: 1; // above the full-stage PDF wrap (.imageWrap:has(.doc))
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lightbox-control-size);
+  height: var(--lightbox-control-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--lightbox-control-bg);
+  color: var(--lightbox-control-fg);
+  cursor: pointer;
+}
+
+.chev:hover {
+  background: var(--lightbox-control-bg-hover);
+}
+
+.chev:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+// Keyboard focus ring on the dark scrim (Rule 3a) — the chevrons/close are bare
+// <button>s, so the UA default outline is low-contrast here; use the DS ring.
+// --lightbox-ring, NOT --ring-accent. The scrim is dark in both themes, so in
+// LIGHT theme the tone rings composite against it at 1.03-3.30:1 across the
+// scrim, the thumb strip and the two control fills — 10 of those 12 cells under
+// 1.4.11's 3:1, and the two that clear it are danger and success on the strip,
+// not the ring that matters: --ring-accent, which every focus ring in the
+// library resolves through, fails on all four surfaces (1.03-2.47).
+// Outside what the page-surface gate checks, too, because that gate walks the
+// four PAGE surfaces and this chrome is on none of them (#505).
+.close:focus-visible,
+.download:focus-visible,
+.chev:focus-visible,
+.thumbDoc:focus-visible {
+  @include focus-ring(var(--lightbox-ring));
+}
+
+.chevPrev {
+  left: var(--lightbox-padding);
+}
+
+.chevNext {
+  right: var(--lightbox-padding);
+}
+
+.imageWrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.image {
+  display: block;
+  max-width: 100cqw;
+  max-height: 100cqh;
+  object-fit: contain;
+}
+
+// Hide the broken <img> in the error state so the .stageError overlay is the only
+// thing shown/announced (no doubled broken-image glyph + a11y dupe).
+.image[data-state='error'] {
+  display: none;
+}
+
+// A document fills the stage, so the browser's PDF viewer draws its own toolbar
+// (top edge) and scrollbar (right edge) where our floating chrome sits. Inset
+// the stage's content box past the top-right toolbar and, when present, the
+// chevrons — the absolutely positioned chevrons are unaffected by the padding.
+.stage:has(.doc) {
+  padding-top: calc(var(--lightbox-control-size) + var(--lightbox-gap));
+}
+
+.stage:has(.chev):has(.doc) {
+  padding-inline: calc(
+    var(--lightbox-padding) + var(--lightbox-control-size) + var(--lightbox-gap)
+  );
+}
+
+// A document (PDF) has no intrinsic size to be `object-fit: contain`-ed like an
+// <img>, so the wrap is stretched to the stage and the iframe fills it.
+.imageWrap:has(.doc) {
+  width: 100%;
+  height: 100%;
+}
+
+.doc {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: var(--lightbox-radius);
+  background: var(--lightbox-doc-bg);
+}
+
+.stageOverlay {
+  position: absolute;
+  inset: 0;
+}
+
+.stageError {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  color: var(--lightbox-caption-fg);
+  font-size: var(--font-size-sm);
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  text-align: center;
+}
+
+.caption {
+  color: var(--lightbox-caption-fg);
+  font-size: var(--font-size-sm);
+}
+
+.counter {
+  color: var(--lightbox-counter-fg);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.thumbs {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  overflow-x: auto;
+  background: var(--lightbox-thumb-strip-bg);
+  border-radius: var(--lightbox-radius);
+}
+
+// Thumbnails are <Image interactive>, which draws its own ring — so the scrim
+// ring has to be handed to it, or it defaults to --ring-accent and lands under
+// 1.4.11's 3:1 on the strip in light theme (#505).
+.thumb {
+  --image-ring: var(--lightbox-ring);
+
+  flex: 0 0 auto;
+  width: var(--lightbox-thumb-size);
+  border-radius: var(--radius-sm);
+  opacity: var(--opacity-thumb-idle);
+  transition: opacity var(--transition-base);
+}
+
+.thumb:hover {
+  opacity: var(--opacity-thumb-hover);
+}
+
+// An idle thumbnail renders at --opacity-thumb-idle, and opacity fades the whole
+// subtree INCLUDING the focus ring, so a keyboard-focused idle thumb would show
+// a faded indicator. LAST of the three rules that decide the focused case, on
+// purpose: `:hover` and `:focus-within` are both (0,2,0), so order decides, and
+// above `:hover` a thumbnail that was focused AND hovered took the 0.85 value.
+// (A fourth rule, `.thumbActive`, also sets opacity but is only (0,1,0), so
+// hovering the CURRENT thumbnail dims it 1 -> 0.85 whatever the order —
+// pre-existing, unchanged here, and noted so the next reader does not read
+// three as the whole picture.)
+// The faded case is now unreachable FOR THE RING: Image paints it on
+// `.wrapper:has(.trigger:focus-visible)`, and this rule matches whenever that
+// trigger has focus, so a visible ring always coincides with full opacity. What
+// is left is the indicator looking the same however you got there.
+// contrast.test.ts measures the scrim ring at FULL opacity only; nothing in the
+// suite applies this opacity to it. Lowering --opacity-thumb-idle would not
+// fail any gate, so do not read the green suite as covering that.
+.thumb:focus-within {
+  opacity: var(--opacity-visible);
+}
+
+.thumbActive {
+  opacity: var(--opacity-visible);
+  box-shadow: 0 0 0 var(--ring-width) var(--lightbox-thumb-active-ring);
+}
+
+// Placeholder thumbnail for a document without its own image — centered icon on
+// a muted square, matching the thumbnail box (size/aspect/rounding come from .thumb).
+.thumbDoc {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--lightbox-thumb-doc-bg);
+  color: var(--lightbox-thumb-doc-fg);
+  cursor: pointer;
+}

package/src/components/Lightbox/Lightbox.tokens.scss

@@ -0,0 +1,36 @@
+:root {
+  --lightbox-scrim: var(--color-bg-overlay-strong);
+  --lightbox-z: var(--z-modal);
+
+  --lightbox-control-bg: rgb(255 255 255 / 14%);
+  --lightbox-control-bg-hover: rgb(255 255 255 / 24%);
+  --lightbox-control-fg: var(--color-fg-on-overlay);
+
+  --lightbox-caption-fg: rgb(255 255 255 / 92%);
+  --lightbox-counter-fg: rgb(255 255 255 / 64%);
+
+  --lightbox-thumb-size: 56px;
+  --lightbox-thumb-strip-bg: rgb(0 0 0 / 30%);
+  --lightbox-thumb-active-ring: var(--ring-on-scrim);
+
+  // The focus ring for the chrome that sits ON the scrim. It cannot be
+  // --ring-accent: the scrim is dark in BOTH themes, so in light theme the tone
+  // rings land on it well under 1.4.11's 3:1 (#505). A theme-independent surface
+  // needs a theme-independent ring.
+  // No ratio is quoted here on purpose. The surfaces are composites of
+  // --color-bg-overlay-strong over the page, not tokens, so no @contrast
+  // annotation could recompute them — contrast.test.ts composites them and
+  // asserts the 3:1 directly instead.
+  --lightbox-ring: var(--ring-on-scrim);
+
+  // Document (PDF) preview surfaces.
+  --lightbox-doc-bg: var(--color-bg);
+  --lightbox-thumb-doc-bg: var(--color-bg-muted);
+  --lightbox-thumb-doc-fg: var(--color-fg-muted);
+
+  --lightbox-padding: var(--space-4);
+  --lightbox-gap: var(--space-3);
+  --lightbox-toolbar-gap: var(--space-2);
+  --lightbox-control-size: var(--size-lg);
+  --lightbox-radius: var(--radius-md);
+}