@ds-mo/ui 0.1.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,201 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import { LabelWrap } from '@/components/LabelWrap';
+import { Loader } from '@/components/Loader';
+import { ChevronDown } from '@ds-mo/icons';
+import type { IconComponent } from '@/types/icons';
+import styles from './Button.module.css';
+
+export type ButtonVariant  = 'primary' | 'secondary';
+export type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
+export type ButtonIntent   = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type ButtonSize     = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonContrast = 'strong' | 'bold' | 'medium' | 'faint';
+export type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+export interface ButtonProps {
+  /** Polymorphic element type. Defaults to 'button'. */
+  as?: React.ElementType;
+  /** Visual variant. Defaults to 'primary'. */
+  variant?: ButtonVariant;
+  /** Label text. */
+  label?: string;
+  /** Leading icon component from @ds-mo/icons. */
+  icon?: IconComponent;
+  /** Semantic intent. Defaults to 'brand'. */
+  intent?: ButtonIntent;
+  /** Size. Defaults to 'md'. */
+  size?: ButtonSize;
+  /** Pill shape with extra padding. */
+  rounded?: boolean;
+  /** Fill container width. Label truncates if space is tight. */
+  fullWidth?: boolean;
+  /** Fixed width. Omit for content width. */
+  width?: React.CSSProperties['width'];
+  /** Contrast level (primary variant only). Defaults to 'bold'. */
+  contrast?: ButtonContrast;
+  /**
+   * Parent surface context. Adjusts hover tokens and secondary fg colors
+   * for buttons placed on colored backgrounds.
+   *   faint      — default, no adjustment
+   *   medium     — use on-medium-background interaction tokens
+   *   bold       — use on-bold-background interaction + inverted fg
+   *   strong     — use on-strong-background interaction + inverted fg
+   *   always-dark — dark surface (no theme flip), on-bold-background tokens
+   */
+  background?: ButtonBackground;
+  /** Show trailing ChevronDown dropdown indicator. */
+  dropdown?: boolean;
+  /** Badge count. */
+  badgeCount?: number;
+  /**
+   * Chrome level for secondary; shadow level for primary.
+   *   none     — ghost (transparent, no border, no shadow)
+   *   flat     — border only, transparent bg  [default for secondary]
+   *   elevated — bg-primary + shadow          [default for primary]
+   *   floating — bg-primary + FAB-strength shadow
+   */
+  elevation?: ButtonElevation;
+  /** Show loading spinner in place of icon. Prevents interaction. */
+  loading?: boolean;
+
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+  className?: string;
+  inactive?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  id?: string;
+  'aria-label'?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+}
+
+const ICON_SIZE_MAP: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };
+
+const TEXT_STYLE_MAP: Record<ButtonSize, string> = {
+  xs: 'text-caption-emphasis',
+  sm: 'text-body-small-emphasis',
+  md: 'text-body-medium-emphasis',
+  lg: 'text-body-large-emphasis',
+};
+
+
+export const Button = forwardRef<HTMLElement, ButtonProps>(
+  (
+    {
+      as,
+      variant = 'primary',
+      label,
+      icon: Icon,
+      intent = 'brand',
+      size = 'md',
+      rounded = false,
+      fullWidth = false,
+      width,
+      contrast = 'bold',
+      background,
+      dropdown = false,
+      badgeCount,
+      elevation,
+      loading = false,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      className,
+      inactive = false,
+      type = 'button',
+      id,
+      'aria-label': ariaLabel,
+      href,
+      target,
+      rel,
+    },
+    ref
+  ) => {
+    const Component = (as ?? 'button') as React.ElementType;
+    const isButton = !as || as === 'button';
+    const isInteractive = !inactive && !loading;
+
+    const hasIcon = !!Icon;
+    const hasLabel = !!label;
+    const showLeading = hasIcon || loading; // spinner fills the icon slot
+    const isIconOnly = showLeading && !hasLabel;
+    const isLabelOnly = hasLabel && !showLeading;
+    const isIconAndLabel = showLeading && hasLabel;
+    const iconSize = ICON_SIZE_MAP[size];
+    const textStyle = TEXT_STYLE_MAP[size];
+
+    // Derive default elevation per variant: primary→none, secondary→flat
+    const effectiveElevation: ButtonElevation = elevation ?? (variant === 'primary' ? 'none' : 'flat');
+    const elevKey = effectiveElevation.charAt(0).toUpperCase() + effectiveElevation.slice(1);
+
+    const classes = cn(
+      styles.button,
+      styles[variant],
+      styles[`intent${intent.charAt(0).toUpperCase() + intent.slice(1)}`],
+      size !== 'md' && styles[`size${size.toUpperCase()}`],
+      rounded && styles.rounded,
+      (inactive || loading) && styles.inactive,
+      isIconOnly && styles.iconOnly,
+      isLabelOnly && styles.labelOnly,
+      isIconAndLabel && styles.iconAndLabel,
+      dropdown && styles.dropdown,
+      variant === 'primary' && intent !== 'none' && contrast !== 'bold' && styles[`contrast${contrast.charAt(0).toUpperCase() + contrast.slice(1)}`],
+      styles[`elevation${elevKey}`],
+      background && background !== 'faint' && styles[
+        background === 'always-dark' ? 'onAlwaysDark'
+          : `on${background.charAt(0).toUpperCase() + background.slice(1)}`
+      ],
+      fullWidth && styles.fullWidth,
+      className,
+    );
+
+    const resolvedAriaLabel = ariaLabel || label || 'button';
+
+    const extraProps: Record<string, unknown> = {};
+    if (isButton) {
+      extraProps.type = type;
+      extraProps.disabled = inactive || loading;
+    }
+    if (href) extraProps.href = href;
+    if (target) extraProps.target = target;
+    if (rel) extraProps.rel = rel;
+
+    return (
+      <Component
+        ref={ref}
+        id={id}
+        className={classes}
+        style={width ? { width } : undefined}
+        onClick={isInteractive ? onClick : undefined}
+        onMouseEnter={isInteractive ? onMouseEnter : undefined}
+        onMouseLeave={isInteractive ? onMouseLeave : undefined}
+        aria-label={resolvedAriaLabel}
+        aria-busy={loading || undefined}
+        {...extraProps}
+      >
+        {loading ? (
+          <Loader size={iconSize} />
+        ) : (
+          Icon && <Icon size={iconSize} />
+        )}
+        {label && (
+          <LabelWrap truncate={fullWidth}>
+            <Text variant={textStyle as never} as="span" color="inherit">
+              {label}
+            </Text>
+          </LabelWrap>
+        )}
+        {dropdown && <ChevronDown size={iconSize} />}
+        {badgeCount != null && badgeCount > 0 && (
+          <span className={styles.badge}>{badgeCount > 9 ? '+' : badgeCount}</span>
+        )}
+      </Component>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/Button/index.ts

@@ -0,0 +1,10 @@
+export { Button } from './Button';
+export type {
+  ButtonProps,
+  ButtonVariant,
+  ButtonElevation,
+  ButtonIntent,
+  ButtonSize,
+  ButtonContrast,
+  ButtonBackground,
+} from './Button';

package/src/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   ButtonGroup — flush row of Button components
+   ========================================================================== */
+
+.group {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--dimension-radius-050);
+  position: relative;
+}
+
+/* Inset ring / highlight overlay — sits above button children so it isn't
+   covered by their backgrounds. Outset shadow stays on the element itself. */
+.group::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+/* ── Group-level elevation ──────────────────────────────────────────────── */
+/* Individual item chrome is suppressed via .item — the group container
+   carries the elevation so it wraps the whole control as one visual unit. */
+
+/* Outset shadow on element; inset highlight on ::after (children would cover it otherwise) */
+.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }
+.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }
+
+/* Flat ring lives entirely on ::after — same reasoning as highlight */
+.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }
+
+.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }
+.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }
+/* groupNone = ghost / primary — no shadow, no border */
+
+.groupRounded { border-radius: var(--dimension-radius-half); }
+
+/* ── Base item ─────────────────────────────────────────────────────────────── */
+
+.item {
+  flex-shrink: 0;
+  /* Suppress individual elevation so the group reads as one unit */
+  box-shadow: none !important;
+  /* Suppress noElevation individual border — divider handles separation */
+  border: none !important;
+  /* Suppress scale-on-press: transform would detach the divider from the
+     adjacent button, creating a visible gap. Pressed state is still
+     communicated via the ::after overlay colour. */
+}
+.item:active {
+  transform: none !important;
+}
+
+/* ── Divider ────────────────────────────────────────────────────────────────
+ * Rendered as a separate <div> between items so it is never part of any
+ * button's stacking context — disabled (opacity: 0.5) or other state changes
+ * on adjacent buttons cannot bleed through to the divider.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* Full-height divider (secondary + primary).
+ * Overlaps each neighbour by 0.5px and paints on top so the alpha token
+ * composites over the button fill rather than the page background. */
+.divider {
+  width: 1px;
+  flex-shrink: 0;
+  background-color: var(--color-border-tertiary);
+  position: relative;
+  z-index: 1;
+  margin: 0 -0.5px;
+  pointer-events: none;
+}
+
+/* Ghost (elevation=none): short centred divider at icon height */
+.dividerGhost    { height: 20px; align-self: center; } /* md default */
+.dividerGhostXS  { height: 12px; }
+.dividerGhostSM  { height: 16px; }
+.dividerGhostLG  { height: 24px; }
+
+/* Primary intent: on-background divider colour */
+.dividerBold   { background-color: var(--color-border-on-bold-background-tertiary); }
+.dividerMedium { background-color: var(--color-border-on-medium-background-tertiary); }
+.dividerStrong { background-color: var(--color-border-on-strong-background-tertiary); }
+
+/* Ghost hover-fade: hide the divider on either side of a hovered ghost button */
+.item:hover + .dividerGhost,
+.dividerGhost:has(+ .item:hover) { opacity: 0; }
+
+/* ── Ghost interaction states: rounded chips ──────────────────────────────────
+ * Ghost items have no group chrome — hover/press overlay should appear as
+ * fully rounded chips (4px all corners). Rounded groups: outer corners of
+ * first/last become pill; inner corners stay 4px.
+ *
+ * Uses .group ancestor (2-class specificity) to reliably beat .first / .last /
+ * .middle (1-class) regardless of load order. Explicit longhands throughout to
+ * avoid shorthand/longhand cascade ambiguity with the !important rules above.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+/* ::after hover/press overlay — all positions: 4px all corners */
+.group .itemShort::after {
+  border-top-left-radius:     var(--dimension-radius-050) !important;
+  border-top-right-radius:    var(--dimension-radius-050) !important;
+  border-bottom-right-radius: var(--dimension-radius-050) !important;
+  border-bottom-left-radius:  var(--dimension-radius-050) !important;
+}
+
+/* ── Border radius: flatten only the inner-facing corners ──────────────────── */
+/* Outer corners keep the button's own radius — works for default + rounded */
+
+.first {
+  border-top-right-radius:    0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.last {
+  border-top-left-radius:    0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.middle {
+  border-radius: 0 !important;
+}
+
+/* Rounded group: first — left corners become pill (3-class specificity) */
+.groupRounded .first.itemShort::after {
+  border-top-left-radius:    var(--dimension-radius-half) !important;
+  border-bottom-left-radius: var(--dimension-radius-half) !important;
+}
+
+/* Rounded group: last — right corners become pill (3-class specificity) */
+.groupRounded .last.itemShort::after {
+  border-top-right-radius:    var(--dimension-radius-half) !important;
+  border-bottom-right-radius: var(--dimension-radius-half) !important;
+}
+
+/* ── Rounded: inner-edge padding correction ────────────────────────────────── */
+/*
+ * Rounded buttons add `space-050` extra padding on each side.
+ * In a group the inner-facing edge should use base (non-pill) padding instead.
+ * These classes are injected by ButtonGroup for first/last/mid × size.
+ * XS rounded has no extra padding so needs no correction.
+ */
+
+/* MD — base padding: space-100 */
+.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }
+.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }
+.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }
+
+/* SM — base padding: space-075 */
+.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }
+.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }
+.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }
+
+/* LG — base padding: space-150 */
+.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }
+.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }
+.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }