@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/BrandIcon/BrandIcon.tsx

@@ -0,0 +1,99 @@
+import { forwardRef, type ReactNode, type SVGAttributes } from 'react';
+import clsx from 'clsx';
+import styles from './BrandIcon.module.scss';
+
+/** Brands shipped today. Extend the union + the `ICONS` registry to add more. */
+export type BrandName = 'google' | 'yandex';
+
+export interface BrandIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
+  /** Which brand mark to render. */
+  name: BrandName;
+  /** Square pixel size (width = height). Defaults to `20`. */
+  size?: number;
+  /**
+   * Accessible name. Omit (default) for a decorative icon beside a text label —
+   * the icon renders `aria-hidden`. Set it for a standalone icon (e.g. an
+   * icon-only button) → `role="img"` + `aria-label`.
+   */
+  title?: string;
+}
+
+type BrandSvg = { viewBox: string; body: ReactNode };
+
+// `Record<BrandName, …>` makes the registry complete at COMPILE time — adding a
+// brand to `BrandName` without art fails typecheck. Brand hex is inline (the
+// documented exception to token-only color; the colors are brand-mandated).
+const ICONS: Record<BrandName, BrandSvg> = {
+  google: {
+    viewBox: '0 0 48 48',
+    body: (
+      <>
+        <path
+          fill="#EA4335"
+          d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.4 30.1 0 24 0 14.6 0 6.4 5.4 2.6 13.2l7.8 6.1C12.2 13.3 17.6 9.5 24 9.5z"
+        />
+        <path
+          fill="#4285F4"
+          d="M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.1 5.3-4.6 7l7.1 5.5c4.2-3.9 6.6-9.6 6.6-16.5z"
+        />
+        <path
+          fill="#FBBC05"
+          d="M10.4 28.3c-.5-1.4-.8-3-.8-4.3s.3-2.9.8-4.3l-7.8-6.1C1 16.8 0 20.3 0 24s1 7.2 2.6 10.4l7.8-6.1z"
+        />
+        <path
+          fill="#34A853"
+          d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.1-5.5c-2 1.3-4.5 2.1-8.8 2.1-6.4 0-11.8-3.8-13.6-9.1l-7.8 6.1C6.4 42.6 14.6 48 24 48z"
+        />
+      </>
+    ),
+  },
+  yandex: {
+    viewBox: '0 0 24 24',
+    body: (
+      <>
+        <rect width="24" height="24" rx="5" fill="#FC3F1D" />
+        {/* v1 representation of the Yandex "Я" logomark; swap for official path art when sourced. */}
+        <text
+          x="12"
+          y="17.5"
+          textAnchor="middle"
+          fontFamily="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
+          fontWeight="700"
+          fontSize="16"
+          fill="#fff"
+        >
+          Я
+        </text>
+      </>
+    ),
+  },
+};
+
+/**
+ * Renders a third-party brand's official multi-color mark, for SSO buttons and brand chrome.
+ * @see docs/components/BrandIcon.md
+ */
+export const BrandIcon = forwardRef<SVGSVGElement, BrandIconProps>(function BrandIcon(
+  { name, size = 20, title, className, ...rest },
+  ref,
+) {
+  const icon = ICONS[name];
+  const labeled = title != null && title !== '';
+  return (
+    // {...rest} last (Pattern A) so a consumer can override the a11y defaults.
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox={icon.viewBox}
+      className={clsx(styles.icon, className)}
+      role={labeled ? 'img' : undefined}
+      aria-label={labeled ? title : undefined}
+      aria-hidden={labeled ? undefined : true}
+      {...rest}
+    >
+      {labeled && <title>{title}</title>}
+      {icon.body}
+    </svg>
+  );
+});

package/src/components/BrandIcon/index.ts

@@ -0,0 +1,2 @@
+export { BrandIcon } from './BrandIcon';
+export type { BrandIconProps, BrandName } from './BrandIcon';

package/src/components/Breadcrumb/Breadcrumb.module.scss

@@ -0,0 +1,32 @@
+@use './Breadcrumb.tokens';
+
+.nav {
+  font-size: var(--breadcrumb-font-size);
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--breadcrumb-gap);
+  list-style: none;
+  /* stylelint-disable-next-line property-disallowed-list -- native <ol> margin reset */
+  margin: 0;
+  /* stylelint-disable-next-line property-disallowed-list -- native <ol> padding reset */
+  padding: 0;
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--breadcrumb-gap);
+}
+
+.separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--breadcrumb-separator-fg);
+}
+
+.current {
+  color: var(--breadcrumb-current-fg);
+}

package/src/components/Breadcrumb/Breadcrumb.tokens.scss

@@ -0,0 +1,9 @@
+// Breadcrumb.tokens.scss — Component-scoped tokens for <Breadcrumb>. Covers
+// the nav font-size, inter-item gap, separator color, and the current-item
+// (terminal crumb) foreground.
+:root {
+  --breadcrumb-font-size: var(--font-size-sm);
+  --breadcrumb-gap: var(--space-1);
+  --breadcrumb-separator-fg: var(--color-fg-muted);
+  --breadcrumb-current-fg: var(--color-fg);
+}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,146 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { ChevronRight } from 'lucide-react';
+import clsx from 'clsx';
+import { Link } from '../Link';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './Breadcrumb.module.scss';
+
+/**
+ * Polymorphic props helper. Same shape as Link's — duplicated here so the
+ * Breadcrumb module doesn't reach into Link's internals.
+ */
+type PolymorphicProps<C extends ElementType, P> = P & { as?: C } & Omit<
+    ComponentPropsWithoutRef<C>,
+    keyof P | 'as'
+  >;
+
+interface BreadcrumbItemOwnProps {
+  /**
+   * Mark this item as the current page. Forced to `true` automatically for
+   * the last child of `<Breadcrumb>` (auto-current). When `true`, the item
+   * renders as `<span aria-current="page">` and ignores all link-related
+   * props (`as`, `to`, `href`, etc.).
+   */
+  current?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Polymorphic — same generic shape as Link. When NOT current, the Item
+ * forwards `as` and all native props to an internal `<Link variant="muted">`.
+ */
+export type BreadcrumbItemProps<C extends ElementType = 'a'> = PolymorphicProps<
+  C,
+  BreadcrumbItemOwnProps
+>;
+
+export interface BreadcrumbProps {
+  /**
+   * One or more `<Breadcrumb.Item>` children. The component injects the
+   * separator between items and auto-marks the last child as current
+   * (renders as `<span aria-current="page">` instead of a link).
+   */
+  children: ReactNode;
+  /**
+   * Custom separator between items. Defaults to a small `<ChevronRight>`
+   * lucide icon. The separator renders inside a `<span aria-hidden="true">`
+   * wrapper automatically.
+   */
+  separator?: ReactNode;
+  /**
+   * Visible label for the `<nav>` element. Defaults to the i18n value at
+   * `breadcrumb.ariaLabel` (`'Breadcrumb'` in English) when omitted OR empty —
+   * an empty string is not an explicit name, so it takes the default too.
+   * Override when multiple breadcrumb instances coexist on the same page.
+   */
+  ariaLabel?: string;
+  /** Pass-through className applied to the `<nav>` wrapper. */
+  className?: string;
+}
+
+/**
+ * `<Breadcrumb.Item>`. Polymorphic.
+ * @see docs/components/Breadcrumb.md
+ */
+function BreadcrumbItem<C extends ElementType = 'a'>({
+  current,
+  as,
+  children,
+  className,
+  ...props
+}: BreadcrumbItemProps<C>) {
+  if (current) {
+    return (
+      <span aria-current="page" className={clsx(styles.current, className)}>
+        {children}
+      </span>
+    );
+  }
+  // Non-current → wrap children in a muted Link, forwarding `as` + native props.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const linkProps = props as any;
+  return (
+    <Link as={as} variant="muted" {...linkProps} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+const DEFAULT_SEPARATOR = <ChevronRight size={14} />;
+
+/**
+ * Navigation breadcrumb trail; the last child is auto-marked as the current page.
+ * @see docs/components/Breadcrumb.md
+ */
+function BreadcrumbRoot({
+  children,
+  separator = DEFAULT_SEPARATOR,
+  ariaLabel,
+  className,
+}: BreadcrumbProps) {
+  const t = useTranslation();
+  const items = Children.toArray(children).filter(isValidElement) as ReactElement<{
+    current?: boolean;
+  }>[];
+  const lastIndex = items.length - 1;
+
+  return (
+    <nav
+      aria-label={ariaLabel || t('breadcrumb.ariaLabel')}
+      className={clsx(styles.nav, className)}
+    >
+      <ol className={styles.list}>
+        {items.map((child, index) => {
+          const isLast = index === lastIndex;
+          const shouldBeCurrent = child.props.current ?? isLast;
+          const renderedChild =
+            shouldBeCurrent !== child.props.current
+              ? cloneElement(child, { current: shouldBeCurrent })
+              : child;
+
+          return (
+            <li key={index} className={styles.item}>
+              {renderedChild}
+              {!isLast && (
+                <span className={styles.separator} aria-hidden="true">
+                  {separator}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+export const Breadcrumb = Object.assign(BreadcrumbRoot, { Item: BreadcrumbItem });

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';

package/src/components/Button/Button.module.scss

@@ -0,0 +1,167 @@
+@use '../../styles/mixins' as *;
+@use './Button.tokens';
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-gap);
+  border: var(--border-width) solid var(--button-border-color);
+  border-radius: var(--button-radius);
+  font-family: inherit;
+  font-weight: var(--button-font-weight);
+  cursor: pointer;
+
+  // `<Button as="a" href>` renders a real anchor (#530), which the UA
+  // underlines. A button never is, at any variant.
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    filter var(--transition-fast);
+
+  &:focus-visible {
+    @include focus-ring(var(--button-ring));
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    opacity: var(--button-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+// Sizes
+.xs {
+  height: var(--button-height-xs);
+  padding: 0 var(--button-padding-x-xs);
+  font-size: var(--button-font-size-xs);
+  gap: var(--button-gap-xs);
+}
+
+.sm {
+  height: var(--button-height-sm);
+  padding: 0 var(--button-padding-x-sm);
+  font-size: var(--button-font-size-sm);
+}
+
+.md {
+  height: var(--button-height-md);
+  padding: 0 var(--button-padding-x-md);
+  font-size: var(--button-font-size-md);
+}
+
+.lg {
+  height: var(--button-height-lg);
+  padding: 0 var(--button-padding-x-lg);
+  font-size: var(--button-font-size-lg);
+}
+
+// MUST stay below the size blocks so `padding` overrides their horizontal padding.
+.iconOnly {
+  aspect-ratio: 1;
+  padding: var(--button-padding-icon-only);
+}
+
+// Variants
+.primary {
+  background: var(--button-bg);
+  color: var(--button-fg);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-hover);
+  }
+}
+
+.secondary {
+  background: var(--button-bg-secondary);
+  color: var(--button-fg-secondary);
+  border-color: var(--button-border-color-secondary);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-secondary-hover);
+  }
+}
+
+.ghost {
+  background: var(--button-bg-ghost);
+  color: var(--button-fg-ghost);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-ghost-hover);
+  }
+}
+
+.secondary.selected,
+.ghost.selected {
+  background: var(--button-bg-selected);
+  color: var(--button-fg-selected);
+  border-color: var(--button-border-color-selected);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-selected-hover);
+  }
+}
+
+.danger {
+  background: var(--button-bg-danger);
+  color: var(--button-fg-danger);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-danger-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring(var(--button-ring-danger));
+  }
+}
+
+.danger-outline {
+  background: var(--button-bg-danger-outline);
+  color: var(--button-fg-danger-outline);
+  border-color: var(--button-border-color-danger-outline);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-danger-outline-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring(var(--button-ring-danger-outline));
+  }
+}
+
+.success {
+  background: var(--button-bg-success);
+  color: var(--button-fg-success);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--button-bg-success-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring(var(--button-ring-success));
+  }
+}
+
+// Palette `color` (wins over variant) — the soft pair is injected inline as --button-palette-bg/fg
+// (same as PillMenu). One filter darkens fill AND text for all 30 colors, so
+// no per-color hover tokens; contrast.test.ts pins AA at both factors.
+.palette {
+  background: var(--button-palette-bg, transparent);
+  color: var(--button-palette-fg, currentColor);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    filter: brightness(0.96);
+  }
+
+  &:active:not(:disabled, [aria-disabled='true']) {
+    filter: brightness(0.92);
+  }
+}

package/src/components/Button/Button.tokens.scss

@@ -0,0 +1,90 @@
+// Button.tokens.scss
+// Component-scoped tokens for <Button>. Each token defaults to the
+// primitive the SCSS used before this migration — overriding any of
+// these at :root re-themes Button without touching globals.
+// Convention: --button-<part>-<state>. See
+// docs/superpowers/specs/2026-05-27-component-tokens-design.md
+:root {
+  // Surface (primary is the base; per-variant overrides further down)
+  --button-bg: var(--color-accent);
+  --button-bg-hover: var(--color-accent-hover);
+
+  // Foreground
+  --button-fg: var(--color-accent-fg);
+
+  // Border / radius
+  --button-border-color: transparent;
+  --button-radius: var(--radius-md);
+
+  // Focus ring (color only; ring width stays primitive)
+  --button-ring: var(--ring-accent);
+
+  // Disabled state
+  --button-opacity-disabled: var(--opacity-disabled);
+
+  // Sizing — height per size
+  --button-height-xs: var(--size-xs);
+  --button-height-sm: var(--size-sm);
+  --button-height-md: var(--size-md);
+  --button-height-lg: var(--size-lg);
+
+  // Sizing — horizontal padding per size
+  --button-padding-x-xs: var(--space-2);
+  --button-padding-x-sm: var(--space-3);
+  --button-padding-x-md: var(--space-4);
+  --button-padding-x-lg: var(--space-5);
+
+  // Sizing — icon-to-label gap (xs gets a tighter override)
+  --button-gap: var(--space-2);
+  --button-gap-xs: var(--space-1);
+
+  // Sizing — iconOnly inset
+  --button-padding-icon-only: var(--space-1);
+
+  // Typography
+  --button-font-weight: var(--font-weight-medium);
+  --button-font-size-xs: var(--font-size-xs);
+  --button-font-size-sm: var(--font-size-sm);
+  --button-font-size-md: var(--font-size-md);
+  --button-font-size-lg: var(--font-size-lg);
+
+  // Variant: secondary
+  --button-bg-secondary: var(--color-bg);
+  --button-bg-secondary-hover: var(--color-bg-hover);
+  --button-fg-secondary: var(--color-fg);
+  --button-border-color-secondary: var(--color-border-strong);
+
+  // Selected (secondary and ghost only)
+  --button-bg-selected: var(--color-accent-bg-subtle);
+  --button-bg-selected-hover: color-mix(
+    in srgb,
+    var(--button-bg-selected),
+    var(--button-border-color-selected) 12%
+  );
+  --button-fg-selected: var(--color-fg);
+  --button-border-color-selected: var(--color-accent);
+
+  // Variant: ghost
+  --button-bg-ghost: transparent;
+  --button-bg-ghost-hover: var(--color-bg-muted);
+  --button-fg-ghost: var(--color-fg);
+
+  // Variant: danger
+  --button-bg-danger: var(--color-danger);
+  --button-bg-danger-hover: var(--color-danger-hover);
+  --button-fg-danger: var(--color-danger-fg);
+  --button-ring-danger: var(--ring-danger);
+
+  // Variant: danger-outline (#596) — secondary's surface, danger's ink.
+  --button-bg-danger-outline: var(--color-bg);
+  --button-bg-danger-outline-hover: var(--color-danger-bg-subtle);
+  --button-fg-danger-outline: var(--color-danger);
+  --button-border-color-danger-outline: var(--color-danger);
+  --button-ring-danger-outline: var(--ring-danger);
+
+  // Variant: success
+  --button-bg-success: var(--color-success);
+  --button-bg-success-hover: var(--color-success-hover);
+  --button-fg-success: var(--color-success-fg);
+  --button-ring-success: var(--ring-success);
+}