@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Divider/Divider.module.scss

@@ -0,0 +1,144 @@
+@use './Divider.tokens';
+
+.divider {
+  border: 0;
+  color: var(--divider-fg);
+}
+
+// ─── No-label cases: <hr> with a single border edge ─────────────────────
+
+.horizontal {
+  width: 100%;
+  border-top: var(--border-width) solid var(--divider-fg);
+}
+
+// Rule 4 exception: vertical separators need parent height. Without
+// align-self the line collapses to 0 in flex/grid parents. Same documented
+// exception as ButtonGroup uses for `align-self: flex-start`.
+.vertical {
+  // stylelint-disable-next-line property-disallowed-list -- vertical separator needs parent height
+  align-self: stretch;
+  border-left: var(--border-width) solid var(--divider-fg);
+  min-height: var(--divider-min-length);
+}
+
+// ─── Variants ──────────────────────────────────────────────────────────
+
+.dashed.horizontal {
+  border-top-style: dashed;
+}
+
+.dashed.vertical {
+  border-left-style: dashed;
+}
+
+// ─── Sizes (no-label cases) ─────────────────────────────────────────────
+
+.sizeMd.horizontal {
+  border-top-width: var(--divider-thickness-md);
+}
+
+.sizeMd.vertical {
+  border-left-width: var(--divider-thickness-md);
+}
+
+.sizeLg.horizontal {
+  border-top-width: var(--divider-thickness-lg);
+}
+
+.sizeLg.vertical {
+  border-left-width: var(--divider-thickness-lg);
+}
+
+// ─── Labeled — flex layout with two line spans flanking the label ───────
+
+.labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--divider-label-gap);
+  border-top: 0;
+  border-left: 0;
+}
+
+// Same Rule 4 exception as the no-label .vertical case.
+.labeled.vertical {
+  flex-direction: column;
+  // stylelint-disable-next-line property-disallowed-list -- vertical separator needs parent height; same exception as the no-label case
+  align-self: stretch;
+  min-height: var(--divider-min-length);
+}
+
+.line {
+  flex: 1;
+  border: 0;
+  background: var(--divider-fg);
+  height: var(--border-width);
+  border-radius: 0;
+}
+
+.labeled.vertical .line {
+  width: var(--border-width);
+  height: auto;
+  // stylelint-disable-next-line property-disallowed-list -- internal child layout; line span must stretch to fill the vertical container
+  align-self: stretch;
+}
+
+// Dashed lines collapse the height to 0 and rely on the border for the dash
+// pattern. Without this, the height + dashed border would visually stack.
+.dashed .line {
+  background: transparent;
+  height: 0;
+  border-top: var(--border-width) dashed var(--divider-fg);
+}
+
+.dashed.vertical .line {
+  width: 0;
+  border-top: 0;
+  border-left: var(--border-width) dashed var(--divider-fg);
+}
+
+.sizeMd .line {
+  height: var(--divider-thickness-md);
+}
+
+.sizeLg .line {
+  height: var(--divider-thickness-lg);
+}
+
+.sizeMd.vertical .line {
+  width: var(--divider-thickness-md);
+  height: auto;
+}
+
+.sizeLg.vertical .line {
+  width: var(--divider-thickness-lg);
+  height: auto;
+}
+
+.sizeMd.dashed .line {
+  border-top-width: var(--divider-thickness-md);
+  height: 0;
+}
+
+.sizeLg.dashed .line {
+  border-top-width: var(--divider-thickness-lg);
+  height: 0;
+}
+
+.sizeMd.dashed.vertical .line {
+  border-left-width: var(--divider-thickness-md);
+  width: 0;
+}
+
+.sizeLg.dashed.vertical .line {
+  border-left-width: var(--divider-thickness-lg);
+  width: 0;
+}
+
+.label {
+  flex: 0 0 auto;
+  font-size: var(--divider-label-font-size);
+  font-weight: var(--divider-label-font-weight);
+  color: var(--divider-label-fg);
+  white-space: nowrap;
+}

package/src/components/Divider/Divider.tokens.scss

@@ -0,0 +1,21 @@
+// Divider.tokens.scss — Component-scoped tokens for <Divider>. Each token
+// defaults to the primitive the SCSS used before this migration.
+:root {
+  // Line color (and root color inherited by border edges)
+  --divider-fg: var(--color-border);
+
+  // Thickness per size (sm uses the library-default --border-width primitive)
+  --divider-thickness-md: var(--border-width-emphasis);
+  --divider-thickness-lg: var(--border-width-strong);
+
+  // Min-length for vertical orientation (so it doesn't collapse in flex/grid)
+  --divider-min-length: var(--space-3);
+
+  // Labeled variant — gap between line and label
+  --divider-label-gap: var(--space-2);
+
+  // Label typography
+  --divider-label-font-size: var(--font-size-sm);
+  --divider-label-font-weight: var(--font-weight-medium);
+  --divider-label-fg: var(--color-fg-muted);
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,103 @@
+import { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import clsx from 'clsx';
+import styles from './Divider.module.scss';
+
+/** Layout direction. Defaults to `'horizontal'`. */
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+/** Line style. Defaults to `'solid'`. */
+export type DividerVariant = 'solid' | 'dashed';
+
+/**
+ * Line thickness tier. Defaults to `'sm'` (1px).
+ * - `'sm'` — `--border-width` (1px). Default. Quiet separation.
+ * - `'md'` — `--border-width-emphasis` (2px). Section breaks.
+ * - `'lg'` — `--border-width-strong` (3px). Heavy emphasis; rare.
+ */
+export type DividerSize = 'sm' | 'md' | 'lg';
+
+export interface DividerProps extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'children'> {
+  /** Layout direction. Defaults to `'horizontal'`. */
+  orientation?: DividerOrientation;
+
+  /** Line style. Defaults to `'solid'`. */
+  variant?: DividerVariant;
+
+  /** Line thickness tier. Defaults to `'sm'`. */
+  size?: DividerSize;
+
+  /**
+   * Optional centered label rendered between two line segments.
+   * Common pattern: `<Divider>OR</Divider>` for auth-form section breaks.
+   *
+   * When `children` is set, the root becomes `<div role="separator">`
+   * instead of `<hr>` (HTML `<hr>` cannot have children).
+   *
+   * Works with `orientation="vertical"` but renders awkwardly (text wraps
+   * across two short line segments). Avoid vertical + label combos.
+   */
+  children?: ReactNode;
+}
+
+const ORIENTATION_CLASS: Record<DividerOrientation, string> = {
+  horizontal: styles.horizontal,
+  vertical: styles.vertical,
+};
+
+const VARIANT_CLASS: Record<DividerVariant, string> = {
+  solid: '',
+  dashed: styles.dashed,
+};
+
+const SIZE_CLASS: Record<DividerSize, string> = {
+  sm: '',
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+/**
+ * Thin separator primitive: horizontal or vertical, solid or dashed, three sizes, optional centered label.
+ * @see docs/components/Divider.md
+ */
+export const Divider = forwardRef<HTMLElement, DividerProps>(function Divider(
+  { orientation = 'horizontal', variant = 'solid', size = 'sm', children, className, ...props },
+  ref,
+) {
+  const classes = clsx(
+    styles.divider,
+    ORIENTATION_CLASS[orientation],
+    VARIANT_CLASS[variant],
+    SIZE_CLASS[size],
+    children != null && styles.labeled,
+    className,
+  );
+
+  if (children == null) {
+    // Pattern B — {...props} first so role/aria-orientation/className can't be overridden.
+    return (
+      <hr
+        ref={ref as Ref<HTMLHRElement>}
+        {...props}
+        role="separator"
+        aria-orientation={orientation}
+        className={classes}
+      />
+    );
+  }
+
+  // Pattern B — {...props} first so role/aria-orientation/className can't be overridden.
+  return (
+    <div
+      ref={ref as Ref<HTMLDivElement>}
+      {...props}
+      role="separator"
+      aria-orientation={orientation}
+      data-labeled="true"
+      className={classes}
+    >
+      <span className={styles.line} aria-hidden="true" />
+      <span className={styles.label}>{children}</span>
+      <span className={styles.line} aria-hidden="true" />
+    </div>
+  );
+});

package/src/components/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerOrientation, DividerVariant, DividerSize } from './Divider';

package/src/components/Dot/Dot.module.scss

@@ -0,0 +1,40 @@
+@use './Dot.tokens';
+@use '../Badge/Badge.tokens';
+
+.dot {
+  display: inline-block;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+
+  // Semantic tones (when no palette `color` — palette colors come from the
+  // inline style's `--color-palette-<name>-fg`). Mirrors FilterChip's tone dot.
+  &[data-tone='neutral'] {
+    background: var(--color-fg-subtle);
+  }
+
+  &[data-tone='info'] {
+    background: var(--color-info);
+  }
+
+  &[data-tone='success'] {
+    background: var(--color-success);
+  }
+
+  &[data-tone='warning'] {
+    // @contrast --color-warning on --color-bg = 2.14:1 light
+    // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+    // --color-warning-strong, not --color-warning: the bare amber measures
+    // 2.14:1 on --color-bg, below 1.4.11's 3:1 for a graphical object. See #481.
+    background: var(--color-warning-strong);
+  }
+
+  &[data-tone='danger'] {
+    background: var(--color-danger);
+  }
+
+  &[data-tone='purple'] {
+    background: var(--badge-fg-purple);
+  }
+}

package/src/components/Dot/Dot.tokens.scss

@@ -0,0 +1,4 @@
+// Dot.tokens.scss — component tokens for <Dot>. Size mirrors the Badge dot.
+:root {
+  --dot-size: var(--size-badge-dot);
+}

package/src/components/Dot/Dot.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import { type PaletteColor } from '../../palette';
+import { type BadgeTone } from '../Badge';
+import styles from './Dot.module.scss';
+
+export interface DotProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * One of the 30 `PaletteColor`s — renders the bare circle in that color's
+   * saturated `--color-palette-<name>-fg` token (the same color OptionsPicker groups and palette Badges use). Takes precedence over `tone`.
+   */
+  color?: PaletteColor;
+  /**
+   * A semantic `BadgeTone` (`neutral` default / `info` / `success` / `warning` /
+   * `danger` / `purple`) — used when `color` is omitted. Neither set → `neutral`.
+   */
+  tone?: BadgeTone;
+}
+
+/**
+ * A bare, background-less colored circle for color-coding affordances (leading dot, status indicator, legend swatch).
+ * @see docs/components/Dot.md
+ */
+export const Dot = forwardRef<HTMLSpanElement, DotProps>(function Dot(
+  { color, tone = 'neutral', className, style, 'aria-hidden': ariaHidden, ...props },
+  ref,
+) {
+  return (
+    <span
+      // {...props} first so component-owned attrs (aria-hidden default, data-*,
+      // class, color style) win; consumer can still override via explicit props.
+      {...props}
+      ref={ref}
+      aria-hidden={ariaHidden ?? true}
+      data-tone={color ? undefined : tone}
+      data-palette={color}
+      className={clsx(styles.dot, className)}
+      style={
+        color
+          ? ({ background: `var(--color-palette-${color}-fg)`, ...style } as CSSProperties)
+          : style
+      }
+    />
+  );
+});

package/src/components/Dot/index.ts

@@ -0,0 +1,2 @@
+export { Dot } from './Dot';
+export type { DotProps } from './Dot';

package/src/components/Drawer/Body.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import styles from './Drawer.module.scss';
+
+export interface DrawerBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /** Override body padding. Default 'default' (--space-4). 'none' for edge-to-edge. */
+  padding?: 'default' | 'none';
+}
+
+export const Body = forwardRef<HTMLDivElement, DrawerBodyProps>(function Body(
+  { padding = 'default', className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={clsx(styles.body, padding === 'none' && styles.bodyPaddingNone, className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});

package/src/components/Drawer/Close.tsx

@@ -0,0 +1,35 @@
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
+} from 'react';
+import { useDrawerContext } from './context';
+import { chain } from '../_internal/refs';
+
+export interface DrawerCloseProps {
+  /**
+   * Exactly one React element. Close clones it to inject an onClick that
+   * closes the drawer, chained with the child's existing onClick.
+   */
+  children: ReactElement;
+}
+
+/**
+ * Wraps a clickable child so activating it dismisses the drawer (`Drawer.Close`).
+ * @see docs/components/Drawer.md
+ */
+export function Close({ children }: DrawerCloseProps) {
+  const ctx = useDrawerContext('Close');
+  if (!isValidElement(children)) {
+    throw new Error('<Drawer.Close> requires exactly one React element child.');
+  }
+  const childProps = children.props as {
+    onClick?: (e: ReactMouseEvent<HTMLElement>) => void;
+  };
+  const handleClick = useCallback((_e: ReactMouseEvent<HTMLElement>) => ctx.setOpen(false), [ctx]);
+  return cloneElement(children, {
+    onClick: chain(childProps.onClick, handleClick),
+  } as object);
+}

package/src/components/Drawer/Content.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useLayoutEffect, useRef, type CSSProperties, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { isFocusLost, useFocusTrap, overlayStack } from '../_internal/overlay';
+import { useDrawerContext } from './context';
+import styles from './Drawer.module.scss';
+
+export interface ContentProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Dialog container. role="dialog", aria-modal="true", tabIndex=-1.
+ * Owns initial focus, focus trap (when isTop), Escape capture-phase listener,
+ * and renders compound children (Header/Body/Footer/Close).
+ */
+export function Content({ children, className, style }: ContentProps) {
+  const ctx = useDrawerContext('Content');
+  const { setOpen } = ctx;
+
+  // Initial focus belongs to the OPEN transition only. isTop also flips
+  // false → true when a nested overlay (e.g. a Modal opened from this drawer)
+  // closes; re-running here would queue a focus that lands AFTER the nested
+  // overlay restored focus to its opener / returnFocusRef (#551).
+  const initialFocusPendingRef = useRef(true);
+  useLayoutEffect(() => {
+    if (!ctx.open) {
+      initialFocusPendingRef.current = true;
+      return;
+    }
+    if (!ctx.isTop) return;
+    if (!initialFocusPendingRef.current) {
+      // Regained the top after a nested overlay closed. Its restore (and that
+      // restore's own retry, queued earlier) wins; only if focus is still
+      // lost — nothing to restore to — take it into this container (#551).
+      queueMicrotask(() => {
+        if (isFocusLost()) ctx.contentRef.current?.focus({ preventScroll: true });
+      });
+      return;
+    }
+    initialFocusPendingRef.current = false;
+    queueMicrotask(() => {
+      const target = ctx.initialFocusRef?.current ?? ctx.contentRef.current;
+      target?.focus({ preventScroll: true });
+    });
+  }, [ctx.open, ctx.isTop, ctx.initialFocusRef, ctx.contentRef]);
+
+  useEffect(() => {
+    if (!ctx.open) return;
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key !== 'Escape') return;
+      if (!overlayStack.isTop(ctx.drawerId)) return;
+      // #274: an open floating surface (Select/Popover/menu/date-time popover/
+      // Rail flyout) wins this press — its own Escape handling (a capture
+      // listener or an element-scoped handler) closes it on this same press;
+      // wasEscapeConsumed covers a surface whose listener already ran. The
+      // next press reaches us.
+      if (overlayStack.hasOpenFloating() || overlayStack.wasEscapeConsumed(e)) return;
+      if (ctx.disableEscapeClose) return;
+      e.preventDefault();
+      setOpen(false);
+    }
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [ctx.open, ctx.drawerId, ctx.disableEscapeClose, setOpen]);
+
+  useFocusTrap(ctx.contentRef, ctx.open && ctx.isTop);
+
+  return (
+    <div
+      ref={ctx.contentRef}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={ctx.headingId ?? undefined}
+      aria-label={ctx.headingId ? undefined : ctx.ariaLabel}
+      aria-describedby={ctx.ariaDescribedBy}
+      tabIndex={-1}
+      data-state={ctx.open ? 'open' : 'closed'}
+      data-side={ctx.side}
+      data-size={ctx.size}
+      className={clsx(
+        styles.content,
+        styles[`side-${ctx.side}`],
+        styles[`size-${ctx.size}`],
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}