@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Button/Button.tsx

@@ -1,232 +0,0 @@
-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';
-
-interface ButtonBaseProps {
-  /** Polymorphic element type. Defaults to 'button'. */
-  as?: React.ElementType;
-  /** Visual variant. Defaults to 'primary'. */
-  variant?: ButtonVariant;
-  /** 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;
-  href?: string;
-  target?: string;
-  rel?: string;
-}
-
-/**
- * Accessible-name requirement: a Button must expose text via `label`,
- * `aria-label`, or `aria-labelledby`. Icon-only buttons that omit all three
- * fail at the call site (TypeScript), with a runtime warning as a soft
- * fallback for callers that bypass the type system.
- */
-type ButtonAccessibleNameProps =
-  | { label: string; 'aria-label'?: string; 'aria-labelledby'?: string }
-  | { label?: string; 'aria-label': string; 'aria-labelledby'?: string }
-  | { label?: string; 'aria-label'?: string; 'aria-labelledby': string };
-
-export type ButtonProps = ButtonBaseProps & ButtonAccessibleNameProps;
-
-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>(
-  (props, ref) => {
-    const {
-      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,
-      'aria-labelledby': ariaLabelledBy,
-      href,
-      target,
-      rel,
-    } = props;
-
-    const Component = (as ?? 'button') as React.ElementType;
-    const isButton = !as || as === 'button';
-    const isLink = as === 'a';
-    const isCustomInteractive = !isButton && !isLink;
-    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,
-    );
-
-    if (isIconOnly && !ariaLabel && !ariaLabelledBy) {
-      console.warn(
-        '[@ds-mo/ui Button] Icon-only Button is missing an accessible name. Provide `label`, `aria-label`, or `aria-labelledby`.'
-      );
-    }
-
-    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;
-
-    if (isCustomInteractive) {
-      extraProps.role = 'button';
-      extraProps.tabIndex = isInteractive ? 0 : -1;
-      if (isInteractive) {
-        extraProps.onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            (e.currentTarget as HTMLElement).click();
-          }
-        };
-      }
-    }
-
-    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={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        aria-disabled={inactive || loading || undefined}
-        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

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

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

@@ -1,157 +0,0 @@
-/* ==========================================================================
-   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; }