@ds-mo/ui 0.1.0

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { Loader } from './Loader';
+
+const meta: Meta<typeof Loader> = {
+  title: 'Primitives/Loader',
+  component: Loader,
+  args: { size: 20 },
+  argTypes: { size: { control: 'number' } },
+};
+
+export default meta;
+type Story = StoryObj<typeof Loader>;
+
+export const Default: Story = {};
+
+/** Shows how stroke weight scales naturally with size — same as icon strokes. */
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      {([12, 16, 20, 24, 32, 48] as const).map(size => (
+        <div key={size} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
+          <Loader size={size} />
+          <span style={{ fontSize: 10, fontFamily: 'monospace', color: '#888' }}>{size}px</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Inherits currentColor — works on any background. */
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Loader size={20} />
+      <span style={{ color: '#2563eb' }}><Loader size={20} /></span>
+      <span style={{ color: '#16a34a' }}><Loader size={20} /></span>
+      <span style={{ color: '#dc2626' }}><Loader size={20} /></span>
+      <span style={{ padding: '6px', background: '#1e293b', borderRadius: 6, display: 'flex' }}>
+        <span style={{ color: '#fff' }}><Loader size={20} /></span>
+      </span>
+    </div>
+  ),
+};

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './Loader.module.css';
+
+export interface LoaderProps {
+  /**
+   * Render size in px. Designed at 16px (r=6, strokeWidth=1).
+   * Stroke weight scales proportionally with size — same behaviour as icons.
+   * Defaults to 20.
+   */
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Placeholder spinner component. Will be replaced with a full Loader
+ * component once motion/brand specs are finalised.
+ *
+ * Designed at 16×16 viewBox so it matches the icon grid:
+ *   - r=5  → 10px circle in a 16px box (3px optical padding each side)
+ *   - strokeWidth=1 at native size → scales to 1.25px at 20px, 1.5px at 24px
+ */
+export const Loader = ({ size = 20, className }: LoaderProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={`${styles.loader}${className ? ` ${className}` : ''}`}
+    aria-hidden="true"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="5"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeDasharray="23.6 7.9"
+    />
+  </svg>
+);
+
+Loader.displayName = 'Loader';

package/src/components/Loader/index.ts

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

package/src/components/Menu/DestructiveMenuItem.module.css

@@ -0,0 +1,57 @@
+.destructiveMenuItem {
+  display: flex;
+  align-items: center;
+  padding: var(--dimension-space-075);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--dimension-radius-075);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  text-align: left;
+  width: 100%;
+  min-height: var(--dimension-size-400);
+  position: relative;
+  transition: var(--effect-transition-interaction-background-instant);
+  overflow: hidden;
+}
+
+.destructiveMenuItem:has(.subtext) { align-items: flex-start; }
+
+.progressFill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--color-background-faint-negative);
+  border-radius: var(--dimension-radius-075);
+  transition: width 0ms linear;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.destructiveMenuItem::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: transparent;
+  border-radius: var(--dimension-radius-075);
+  transition: var(--effect-transition-interaction-background-instant);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dimension-space-025);
+  min-width: 0;
+}
+
+.label { color: var(--color-foreground-bold-negative); }
+.subtext { color: var(--color-foreground-secondary); text-wrap: pretty; }
+
+.destructiveMenuItem:hover::before { background-color: var(--color-interaction-hover); }
+.destructiveMenuItem:active::before { background-color: transparent; }

package/src/components/Menu/DestructiveMenuItem.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Text } from '@/components/Text';
+import styles from './DestructiveMenuItem.module.css';
+
+export interface DestructiveMenuItemProps {
+  label: string;
+  onClick: () => void;
+  holdDuration?: number;
+  subtext?: string;
+}
+
+export const DestructiveMenuItem = forwardRef<HTMLButtonElement, DestructiveMenuItemProps>(
+  ({ label, onClick, holdDuration = 4000, subtext }, ref) => {
+    const [progress, setProgress] = useState(0);
+    const pressTimerRef = useRef<number | null>(null);
+    const startTimeRef = useRef<number>(0);
+    const animationFrameRef = useRef<number | null>(null);
+
+    const resetState = () => {
+      setProgress(0);
+      if (pressTimerRef.current) { clearTimeout(pressTimerRef.current); pressTimerRef.current = null; }
+      if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; }
+    };
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (holdDuration === 0) { onClick(); return; }
+      startTimeRef.current = performance.now();
+      const animate = () => {
+        const elapsed = performance.now() - startTimeRef.current;
+        const newProgress = Math.min((elapsed / holdDuration) * 100, 100);
+        setProgress(newProgress);
+        if (newProgress < 100) animationFrameRef.current = requestAnimationFrame(animate);
+      };
+      animationFrameRef.current = requestAnimationFrame(animate);
+      pressTimerRef.current = window.setTimeout(() => { onClick(); resetState(); }, holdDuration);
+    };
+
+    const handleMouseUp = (e: React.MouseEvent) => { e.stopPropagation(); resetState(); };
+    const handleMouseLeave = (e: React.MouseEvent) => { e.stopPropagation(); resetState(); };
+
+    useEffect(() => () => { resetState(); }, []);
+
+    return (
+      <button
+        ref={ref}
+        className={styles.destructiveMenuItem}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        type="button"
+      >
+        <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+        <div className={styles.content}>
+          <Text variant="text-body-medium" as="span" className={styles.label}>{label}</Text>
+          {subtext && <Text variant="text-body-small" as="span" className={styles.subtext}>{subtext}</Text>}
+        </div>
+      </button>
+    );
+  }
+);
+
+DestructiveMenuItem.displayName = 'DestructiveMenuItem';

package/src/components/Menu/Menu.module.css

@@ -0,0 +1,49 @@
+.menuContainer {
+  box-sizing: border-box;
+  background-color: var(--color-background-primary);
+  border-radius: var(--dimension-radius-125);
+  box-shadow: var(--effect-elevation-elevated-floating);
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  max-width: 600px;
+  overflow: hidden;
+  animation: menuFadeIn var(--effect-motion-short-2) forwards;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+@keyframes menuFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.menuContainer.closing {
+  animation: menuFadeOut var(--effect-motion-short-3) forwards;
+}
+
+@keyframes menuFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.menuSection {
+  padding: var(--dimension-space-050);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dimension-space-050);
+}
+
+.sectionHeader {
+  padding: var(--dimension-space-050) var(--dimension-space-075);
+  display: flex;
+  align-items: center;
+  height: var(--dimension-size-400);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.sectionLabel {
+  color: var(--color-foreground-secondary);
+  text-align: left;
+}

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,129 @@
+import { useRef, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Menu } from './Menu';
+import { Button } from '../Button';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Components/Menu',
+  component: Menu,
+};
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const ref = useRef<HTMLButtonElement>(null);
+    return (
+      <div style={{ padding: 48 }}>
+        <Button ref={ref} variant="secondary" label="Open Menu" onClick={() => setOpen(true)} />
+        <Menu
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          anchorRef={ref as React.RefObject<HTMLElement>}
+          items={[
+            { label: 'Edit', onClick: () => setOpen(false) },
+            { label: 'Duplicate', onClick: () => setOpen(false) },
+            { label: 'Archive', onClick: () => setOpen(false) },
+          ]}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithSections: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const ref = useRef<HTMLButtonElement>(null);
+    return (
+      <div style={{ padding: 48 }}>
+        <Button ref={ref} variant="secondary" label="Actions" onClick={() => setOpen(true)} />
+        <Menu
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          anchorRef={ref as React.RefObject<HTMLElement>}
+          sections={[
+            {
+              header: 'File',
+              items: [
+                { label: 'New', onClick: () => setOpen(false) },
+                { label: 'Open', onClick: () => setOpen(false) },
+                { label: 'Save', onClick: () => setOpen(false) },
+              ],
+            },
+            {
+              header: 'Edit',
+              items: [
+                { label: 'Undo', onClick: () => setOpen(false) },
+                { label: 'Redo', onClick: () => setOpen(false) },
+              ],
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithSelection: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [selected, setSelected] = useState('medium');
+    const ref = useRef<HTMLButtonElement>(null);
+    return (
+      <div style={{ padding: 48 }}>
+        <Button ref={ref} variant="secondary" label={`Size: ${selected}`} onClick={() => setOpen(true)} />
+        <Menu
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          anchorRef={ref as React.RefObject<HTMLElement>}
+          items={['small', 'medium', 'large'].map(size => ({
+            label: size.charAt(0).toUpperCase() + size.slice(1),
+            onClick: () => { setSelected(size); setOpen(false); },
+            isSelected: selected === size,
+            selectionStyle: 'radio' as const,
+          }))}
+        />
+      </div>
+    );
+  },
+};
+
+export const Positioning: Story = {
+  render: () => {
+    const [openSide, setOpenSide] = useState<string | null>(null);
+    const refs = {
+      top: useRef<HTMLButtonElement>(null),
+      right: useRef<HTMLButtonElement>(null),
+      bottom: useRef<HTMLButtonElement>(null),
+      left: useRef<HTMLButtonElement>(null),
+    };
+    const items = [
+      { label: 'Item 1', onClick: () => setOpenSide(null) },
+      { label: 'Item 2', onClick: () => setOpenSide(null) },
+    ];
+    return (
+      <div style={{ display: 'flex', gap: 16, padding: 100, justifyContent: 'center' }}>
+        {(['top', 'right', 'bottom', 'left'] as const).map(side => (
+          <div key={side}>
+            <Button
+              ref={refs[side]}
+              variant="secondary"
+              label={side}
+              onClick={() => setOpenSide(side)}
+            />
+            <Menu
+              isOpen={openSide === side}
+              onClose={() => setOpenSide(null)}
+              anchorRef={refs[side] as React.RefObject<HTMLElement>}
+              side={side}
+              items={items}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,269 @@
+import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Text } from '@/components/Text';
+import { Surface } from '@/components/Surface';
+import { MenuItem as MenuItemComponent } from './MenuItem';
+import { DestructiveMenuItem } from './DestructiveMenuItem';
+import { getCssSpacePx } from '@/utils/css-tokens';
+import type { IconComponent } from '@/types';
+import type { MenuItemSelectionStyle } from './MenuItem';
+import styles from './Menu.module.css';
+
+const CLOSE_ANIMATION_MS = 220;
+
+export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
+export type MenuAlign = 'start' | 'center' | 'end';
+
+export interface MenuItemData {
+  label: string;
+  onClick: () => void;
+  isSelected?: boolean;
+  isDestructive?: boolean;
+  isInactive?: boolean;
+  intent?: 'negative';
+  keepOpenOnClick?: boolean;
+  holdDuration?: number;
+  icon?: IconComponent;
+  subtext?: string;
+  showToggle?: boolean;
+  toggleValue?: boolean;
+  selectionStyle?: MenuItemSelectionStyle;
+}
+
+export interface MenuSection {
+  header?: string;
+  items: MenuItemData[];
+}
+
+export interface MenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  items?: MenuItemData[];
+  sections?: MenuSection[];
+  side?: MenuSide;
+  align?: MenuAlign;
+  sideOffset?: number;
+  alignOffset?: number;
+  sideOffsetToken?: string;
+  alignOffsetToken?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  matchAnchorWidth?: boolean;
+  matchAnchorWidthOffset?: number;
+  usePortal?: boolean;
+}
+
+export const Menu: React.FC<MenuProps> = ({
+  isOpen,
+  onClose,
+  anchorRef,
+  items,
+  sections,
+  side = 'bottom',
+  align = 'start',
+  sideOffset = 4,
+  alignOffset = 0,
+  sideOffsetToken,
+  alignOffsetToken,
+  width,
+  minWidth,
+  maxWidth,
+  matchAnchorWidth = false,
+  matchAnchorWidthOffset = 0,
+  usePortal = true,
+}) => {
+  const [isClosing, setIsClosing] = useState(false);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isPositionReady, setIsPositionReady] = useState(false);
+  const [position, setPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [menuSize, setMenuSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const [anchorSize, setAnchorSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const positionCalculatedRef = useRef(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const lastSectionsRef = useRef<MenuSection[]>([]);
+
+  const menuSections: MenuSection[] = sections || (items ? [{ items }] : []);
+
+  const hasItems = menuSections.some((s) => s.items.length > 0);
+  if (!isClosing && menuSections.length > 0 && hasItems) {
+    lastSectionsRef.current = menuSections;
+  }
+  const sectionsToRender = isClosing ? lastSectionsRef.current : menuSections;
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      setIsClosing(false);
+      setIsPositionReady(false);
+      positionCalculatedRef.current = false;
+    } else if (shouldRender) {
+      setIsClosing(true);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+        setIsClosing(false);
+        positionCalculatedRef.current = false;
+      }, CLOSE_ANIMATION_MS);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, shouldRender]);
+
+  useLayoutEffect(() => {
+    if (!isOpen || !shouldRender || !menuRef.current) return;
+    const updateSize = () => {
+      if (!menuRef.current) return;
+      const rect = menuRef.current.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) setMenuSize({ width: rect.width, height: rect.height });
+    };
+    updateSize();
+    requestAnimationFrame(() => requestAnimationFrame(updateSize));
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(updateSize);
+      observer.observe(menuRef.current);
+      return () => observer.disconnect();
+    }
+  }, [isOpen, shouldRender, menuSections.length]);
+
+  useLayoutEffect(() => {
+    if (!isOpen || !shouldRender || !anchorRef.current || !menuRef.current) return;
+    const calculatePosition = () => {
+      const anchor = anchorRef.current;
+      const menu = menuRef.current;
+      if (!anchor || !menu) return;
+      const anchorRect = anchor.getBoundingClientRect();
+      const menuRect = menu.getBoundingClientRect();
+      const menuWidth = menuRect.width || menuSize.width || 200;
+      const menuHeight = menuRect.height || menuSize.height || 160;
+      setAnchorSize({ width: anchorRect.width, height: anchorRect.height });
+      const gap = sideOffsetToken != null ? getCssSpacePx(sideOffsetToken, 12) : sideOffset;
+      const alignOff = alignOffsetToken != null ? getCssSpacePx(alignOffsetToken, 4) : alignOffset;
+      let x = 0, y = 0;
+      switch (side) {
+        case 'top':
+          y = anchorRect.top - menuHeight - gap;
+          x = align === 'start' ? anchorRect.left + alignOff : align === 'end' ? anchorRect.right - menuWidth + alignOff : anchorRect.left + anchorRect.width / 2 - menuWidth / 2 + alignOff;
+          break;
+        case 'bottom':
+          y = anchorRect.bottom + gap;
+          x = align === 'start' ? anchorRect.left + alignOff : align === 'end' ? anchorRect.right - menuWidth + alignOff : anchorRect.left + anchorRect.width / 2 - menuWidth / 2 + alignOff;
+          break;
+        case 'left':
+          x = anchorRect.left - menuWidth - gap;
+          y = align === 'start' ? anchorRect.top + alignOff : align === 'end' ? anchorRect.bottom - menuHeight + alignOff : anchorRect.top + anchorRect.height / 2 - menuHeight / 2 + alignOff;
+          break;
+        case 'right':
+          x = anchorRect.right + gap;
+          y = align === 'start' ? anchorRect.top + alignOff : align === 'end' ? anchorRect.bottom - menuHeight + alignOff : anchorRect.top + anchorRect.height / 2 - menuHeight / 2 + alignOff;
+          break;
+      }
+      const vp = 4;
+      setPosition({
+        x: Math.min(Math.max(x, vp), window.innerWidth - menuWidth - vp),
+        y: Math.min(Math.max(y, vp), window.innerHeight - menuHeight - vp),
+      });
+      positionCalculatedRef.current = true;
+      setIsPositionReady(true);
+    };
+    if (!positionCalculatedRef.current) {
+      calculatePosition();
+      requestAnimationFrame(() => { if (!positionCalculatedRef.current) calculatePosition(); });
+    }
+    const handleScrollResize = () => calculatePosition();
+    window.addEventListener('scroll', handleScrollResize, true);
+    window.addEventListener('resize', handleScrollResize);
+    return () => {
+      window.removeEventListener('scroll', handleScrollResize, true);
+      window.removeEventListener('resize', handleScrollResize);
+    };
+  }, [isOpen, shouldRender, anchorRef, side, align, sideOffset, alignOffset, sideOffsetToken, alignOffsetToken, menuSize.width, menuSize.height, menuSections.length, matchAnchorWidthOffset]);
+
+  useEffect(() => {
+    if (!isOpen || !shouldRender) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (menuRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      onClose();
+    };
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => document.removeEventListener('mousedown', handleClickOutside, true);
+  }, [isOpen, shouldRender, onClose, anchorRef]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!shouldRender || sectionsToRender.length === 0) return null;
+
+  const renderMenuItem = (item: MenuItemData, index: number) => {
+    if (item.isDestructive) {
+      return (
+        <DestructiveMenuItem
+          key={index}
+          label={item.label}
+          subtext={item.subtext}
+          holdDuration={item.holdDuration ?? 4000}
+          onClick={() => { item.onClick(); if (!item.keepOpenOnClick) onClose(); }}
+        />
+      );
+    }
+    return (
+      <MenuItemComponent
+        key={index}
+        icon={item.icon}
+        label={item.label}
+        subtext={item.subtext}
+        onClick={() => { if (!item.isInactive) { item.onClick(); if (!item.keepOpenOnClick) onClose(); } }}
+        isSelected={item.isSelected}
+        isInactive={item.isInactive}
+        intent={item.intent}
+        showToggle={item.showToggle}
+        toggleValue={item.toggleValue}
+        selectionStyle={item.selectionStyle}
+      />
+    );
+  };
+
+  const menuStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    transform: `translate(${Math.round(position.x)}px, ${Math.round(position.y)}px)`,
+    willChange: 'transform',
+    zIndex: 9998,
+    visibility: isPositionReady ? 'visible' : 'hidden',
+    ...(matchAnchorWidth && anchorSize.width > 0 ? { width: `${anchorSize.width + matchAnchorWidthOffset}px` } : width ? { width } : {}),
+    ...(minWidth ? { minWidth } : {}),
+    ...(maxWidth ? { maxWidth } : {}),
+  };
+
+  const menuContent = (
+    <div ref={menuRef} className={`${styles.menuContainer} ${isClosing ? styles.closing : ''}`} style={menuStyle} role="menu" aria-label="Menu">
+      {sectionsToRender.map((section, sectionIndex) => (
+        <Surface
+          key={sectionIndex}
+          as="div"
+          className={styles.menuSection}
+          edge={sectionIndex < sectionsToRender.length - 1 ? 'bottom' : undefined}
+          elevation="none"
+        >
+          {section.header && (
+            <div className={styles.sectionHeader}>
+              <Text variant="text-body-small-emphasis" as="span" className={styles.sectionLabel}>{section.header}</Text>
+            </div>
+          )}
+          {section.items.map((item, itemIndex) => renderMenuItem(item, itemIndex))}
+        </Surface>
+      ))}
+    </div>
+  );
+
+  if (usePortal) return createPortal(menuContent, document.body);
+  return menuContent;
+};
+
+Menu.displayName = 'Menu';