@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/LabelWrap/LabelWrap.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { cn } from '@/utils/cn';
-import styles from './LabelWrap.module.css';
-
-interface LabelWrapProps {
-  children: React.ReactNode;
-  /**
-   * Maps to typography size — controls optical horizontal padding:
-   *   xs | sm → 2px (tighter scale)
-   *   md | lg → 4px (body scale, default)
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  /** Enables truncation with ellipsis — use inside full-width containers. */
-  truncate?: boolean;
-  className?: string;
-}
-
-/**
- * Internal utility wrapper used inside interactive components (Button, Tag,
- * Input, Select, MenuItem, etc.) to:
- *   1. Kill the inherited line-height strut from body { line-height: 1.5 }
- *   2. Add optical horizontal padding around the text
- *
- * Not exported from the public barrel — internal use only.
- */
-export const LabelWrap = ({ children, size = 'md', truncate = false, className }: LabelWrapProps) => (
-  <span className={cn(styles.labelWrap, size === 'sm' && styles.sizeSm, size === 'xs' && styles.sizeXs, truncate && styles.truncate, className)}>
-    {children}
-  </span>
-);
-
-LabelWrap.displayName = 'LabelWrap';

package/src/components/LabelWrap/index.ts

@@ -1 +0,0 @@
-export { LabelWrap } from './LabelWrap';

package/src/components/Loader/Loader.module.css

@@ -1,26 +0,0 @@
-.loader {
-  flex-shrink: 0;
-  animation: spin 0.75s linear infinite;
-}
-
-.status {
-  display: inline-flex;
-  align-items: center;
-}
-
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}

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

@@ -1,53 +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 = {};
-
-/**
- * Standalone usage with an accessible label. Wraps the spinner in a
- * `role="status"` live region and renders a visually-hidden label so
- * screen readers announce the loading state on mount.
- */
-export const WithLabel: Story = {
-  args: { label: 'Loading' },
-};
-
-/** 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,65 +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;
-  /**
-   * Accessible label announced by assistive tech when the Loader is used
-   * standalone. When provided, the spinner is wrapped in a live region
-   * (`role="status"`, `aria-live="polite"`) and the label is rendered
-   * visually-hidden so screen readers announce it on mount.
-   *
-   * Omit when the Loader is rendered inside a host that already conveys
-   * busy state (e.g. a Button with `aria-busy`) — the spinner stays
-   * `aria-hidden` to avoid double-announcing.
-   */
-  label?: 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, label }: LoaderProps) => {
-  const svg = (
-    <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>
-  );
-
-  if (label === undefined) return svg;
-
-  return (
-    <span role="status" aria-live="polite" className={styles.status}>
-      {svg}
-      <span className={styles.visuallyHidden}>{label}</span>
-    </span>
-  );
-};
-
-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,117 +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;
-  tabIndex?: number;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
-}
-
-export const DestructiveMenuItem = forwardRef<HTMLButtonElement, DestructiveMenuItemProps>(
-  ({ label, onClick, holdDuration = 4000, subtext, tabIndex, onKeyDown, onFocus }, ref) => {
-    const [progress, setProgress] = useState(0);
-    const pressTimerRef = useRef<number | null>(null);
-    const startTimeRef = useRef<number>(0);
-    const animationFrameRef = useRef<number | null>(null);
-    const isHoldingRef = useRef(false);
-
-    const resetState = () => {
-      setProgress(0);
-      isHoldingRef.current = false;
-      if (pressTimerRef.current) { clearTimeout(pressTimerRef.current); pressTimerRef.current = null; }
-      if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; }
-    };
-
-    const startHold = () => {
-      if (isHoldingRef.current) return;
-      isHoldingRef.current = true;
-      if (holdDuration === 0) { onClick(); resetState(); 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 handleMouseDown = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      startHold();
-    };
-
-    const handleMouseUp = (e: React.MouseEvent) => { e.stopPropagation(); resetState(); };
-    const handleMouseLeave = (e: React.MouseEvent) => { e.stopPropagation(); resetState(); };
-
-    const isSpaceKey = (e: React.KeyboardEvent) => e.key === ' ' || e.key === 'Spacebar';
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (isSpaceKey(e)) {
-        e.preventDefault();
-        if (e.repeat) return;
-        e.stopPropagation();
-        startHold();
-        return;
-      }
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        return;
-      }
-      onKeyDown?.(e);
-    };
-
-    const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (isSpaceKey(e)) {
-        e.preventDefault();
-        e.stopPropagation();
-        resetState();
-      }
-    };
-
-    const handleBlur = () => { resetState(); };
-
-    useEffect(() => () => { resetState(); }, []);
-
-    return (
-      <button
-        ref={ref}
-        className={styles.destructiveMenuItem}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}
-        onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
-        onBlur={handleBlur}
-        onFocus={onFocus}
-        type="button"
-        role="menuitem"
-        tabIndex={tabIndex ?? -1}
-        aria-keyshortcuts="Space"
-      >
-        <div
-          className={styles.progressFill}
-          style={{ width: `${progress}%` }}
-          role="progressbar"
-          aria-valuenow={Math.round(progress)}
-          aria-valuemin={0}
-          aria-valuemax={100}
-          aria-label={`Hold to confirm ${label}`}
-        />
-        <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>
-    );
-  },
-};