@ds-mo/ui 0.2.4 → 0.4.0

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

@@ -1,44 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,57 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-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

@@ -1,49 +0,0 @@
-.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

@@ -1,129 +0,0 @@
-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

@@ -1,269 +0,0 @@
-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';