@ds-mo/ui 0.1.0

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

@@ -0,0 +1,84 @@
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-050);
+  padding: var(--dimension-space-075);
+  border: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  text-align: left;
+  width: 100%;
+  min-height: var(--dimension-size-400);
+}
+
+.menuItem:has(.subtext) { align-items: flex-start; }
+
+.iconPrefix {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--color-foreground-secondary);
+}
+
+.menuItemSelected .iconPrefix { color: var(--color-foreground-primary); }
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dimension-space-025);
+  min-width: 0;
+}
+
+.label { color: var(--color-foreground-secondary); }
+.menuItem:has(.subtext) .label { color: var(--color-foreground-primary); }
+.menuItemSelected .label { color: var(--color-foreground-primary) !important; }
+.menuItemLabelTertiary .label, .menuItemLabelTertiary .iconPrefix { color: var(--color-foreground-tertiary); }
+.menuItemNegative .label { color: var(--color-foreground-bold-negative) !important; }
+
+.subtext { color: var(--color-foreground-secondary); line-height: 1.4; }
+
+.menuItemInactive { opacity: 0.5; cursor: default; pointer-events: none; }
+
+.toggleSuffix { flex-shrink: 0; display: flex; align-items: center; }
+
+.toggle {
+  width: calc(var(--dimension-size-400) + var(--dimension-size-050));
+  height: var(--dimension-size-250);
+  background-color: var(--color-background-translucent);
+  border-radius: var(--dimension-radius-125);
+  position: relative;
+  transition: var(--effect-transition-interaction-background-short-2);
+}
+
+.toggleOn { background-color: var(--color-background-medium-brand); }
+
+.toggleThumb {
+  width: var(--dimension-size-200);
+  height: var(--dimension-size-200);
+  background-color: var(--color-foreground-on-bold-background-primary);
+  border-radius: 50%;
+  position: absolute;
+  top: var(--dimension-space-025);
+  left: var(--dimension-space-025);
+  transition: transform var(--effect-motion-short-2);
+}
+
+.toggleOn .toggleThumb { transform: translateX(var(--dimension-offset-200)); }
+
+.checkSuffix {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--color-foreground-primary);
+}
+
+.chevronSuffix {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--color-foreground-secondary);
+}
+
+.menuItemSelected .chevronSuffix { color: var(--color-foreground-primary); }

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,101 @@
+import React, { forwardRef } from 'react';
+import { Text } from '@/components/Text';
+import { Surface } from '@/components/Surface';
+import type { IconComponent } from '@/types';
+import styles from './MenuItem.module.css';
+
+export type MenuItemSelectionStyle = 'highlight' | 'radio' | 'noOverlay';
+
+export interface MenuItemProps {
+  label: string;
+  onClick: () => void;
+  isSelected?: boolean;
+  isInactive?: boolean;
+  icon?: IconComponent;
+  labelColor?: 'primary' | 'secondary' | 'tertiary';
+  subtext?: string;
+  showToggle?: boolean;
+  toggleValue?: boolean;
+  intent?: 'negative';
+  selectionStyle?: MenuItemSelectionStyle;
+  showTrailingChevron?: boolean;
+  checkIcon?: IconComponent;
+  chevronIcon?: IconComponent;
+}
+
+export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
+  ({
+    label,
+    onClick,
+    isSelected = false,
+    isInactive = false,
+    icon: Icon,
+    labelColor,
+    subtext,
+    showToggle = false,
+    toggleValue = false,
+    intent,
+    selectionStyle = 'highlight',
+    showTrailingChevron = false,
+    checkIcon: CheckIcon,
+    chevronIcon: ChevronIcon,
+  }, ref) => {
+    const useRadioStyle = selectionStyle === 'radio';
+    const noOverlay = selectionStyle === 'noOverlay' || useRadioStyle;
+    const showSelectedOverlay = isSelected && !noOverlay;
+
+    return (
+      <Surface
+        ref={ref as React.Ref<HTMLElement>}
+        as="button"
+        interactive={!isInactive}
+        selected={showSelectedOverlay}
+        radius="sm"
+        className={`${styles.menuItem} ${isSelected ? styles.menuItemSelected : ''} ${isInactive ? styles.menuItemInactive : ''} ${intent === 'negative' ? styles.menuItemNegative : ''} ${labelColor === 'tertiary' ? styles.menuItemLabelTertiary : ''}`}
+        onClick={onClick}
+        type="button"
+        inactive={isInactive}
+      >
+        {Icon && (
+          <div className={styles.iconPrefix}>
+            <Icon size={20} />
+          </div>
+        )}
+        <div className={styles.content}>
+          <Text
+            variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'}
+            color={labelColor}
+            as="span"
+            className={styles.label}
+          >
+            {label}
+          </Text>
+          {subtext && (
+            <Text variant="text-body-small" as="span" className={styles.subtext}>
+              {subtext}
+            </Text>
+          )}
+        </div>
+        {showToggle && (
+          <div className={styles.toggleSuffix}>
+            <div className={`${styles.toggle} ${toggleValue ? styles.toggleOn : ''}`}>
+              <div className={styles.toggleThumb} />
+            </div>
+          </div>
+        )}
+        {useRadioStyle && isSelected && CheckIcon && (
+          <div className={styles.checkSuffix}>
+            <CheckIcon size={20} />
+          </div>
+        )}
+        {showTrailingChevron && ChevronIcon && (
+          <div className={styles.chevronSuffix}>
+            <ChevronIcon size={20} />
+          </div>
+        )}
+      </Surface>
+    );
+  }
+);
+
+MenuItem.displayName = 'MenuItem';

package/src/components/Menu/index.ts

@@ -0,0 +1,6 @@
+export { Menu } from './Menu';
+export type { MenuProps, MenuSection, MenuItemData, MenuSide, MenuAlign } from './Menu';
+export { MenuItem } from './MenuItem';
+export type { MenuItemProps, MenuItemSelectionStyle } from './MenuItem';
+export { DestructiveMenuItem } from './DestructiveMenuItem';
+export type { DestructiveMenuItemProps } from './DestructiveMenuItem';

package/src/components/Modal/Modal.module.css

@@ -0,0 +1,67 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dimension-space-200);
+  background-color: var(--color-background-shade);
+  backdrop-filter: blur(var(--effect-blur-sm));
+  -webkit-backdrop-filter: blur(var(--effect-blur-sm));
+  animation: modalBackdropFadeIn var(--effect-motion-short-2) forwards;
+  z-index: 9999;
+}
+
+.backdrop.closing {
+  animation: modalBackdropFadeOut var(--effect-motion-short-3) forwards;
+}
+
+@keyframes modalBackdropFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalBackdropFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+  animation: modalDialogFadeIn var(--effect-motion-short-2) forwards;
+}
+
+.backdrop.closing .dialog {
+  animation: modalDialogFadeOut var(--effect-motion-short-3) forwards;
+}
+
+@keyframes modalDialogFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalDialogFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.header {
+  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100) var(--dimension-space-200);
+}
+
+.subtitle {
+  margin-top: var(--dimension-space-100);
+  text-wrap: balance;
+}
+
+.body {
+  padding: var(--dimension-space-100) var(--dimension-space-200);
+  overflow-y: auto;
+}
+
+.footer {
+  padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-200);
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Modal } from './Modal';
+import { Button } from '../Button';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="primary" label="Open Modal" onClick={() => setOpen(true)} />
+        <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm Action">
+          <p>Are you sure you want to proceed? This action cannot be undone.</p>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const WithSubtitleAndFooter: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="primary" label="Open Modal" onClick={() => setOpen(true)} />
+        <Modal
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          title="Edit Profile"
+          subtitle="Update your personal information"
+          footer={
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+              <Button variant="secondary" label="Cancel" onClick={() => setOpen(false)} />
+              <Button variant="primary" label="Save Changes" onClick={() => setOpen(false)} />
+            </div>
+          }
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <p>Form content would go here.</p>
+          </div>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [size, setSize] = useState<'sm' | 'md' | 'lg' | null>(null);
+    return (
+      <>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button variant="secondary" label="Small" onClick={() => setSize('sm')} />
+          <Button variant="secondary" label="Medium" onClick={() => setSize('md')} />
+          <Button variant="secondary" label="Large" onClick={() => setSize('lg')} />
+        </div>
+        <Modal isOpen={!!size} onClose={() => setSize(null)} title={`${size} modal`} width={size || 'md'}>
+          <p>This is a {size} width modal.</p>
+        </Modal>
+      </>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Surface } from '@/components/Surface';
+import { Text } from '@/components/Text';
+import styles from './Modal.module.css';
+
+export type ModalWidth = 'sm' | 'md' | 'lg';
+
+const WIDTH_MAP: Record<ModalWidth, string> = {
+  sm: 'var(--dimension-modal-width-sm, 400px)',
+  md: 'var(--dimension-modal-width-md, 560px)',
+  lg: 'var(--dimension-modal-width-lg, 720px)',
+};
+
+const CLOSE_ANIMATION_MS = 220;
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  width?: ModalWidth | string;
+  bodyClassName?: string;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  footer,
+  width = 'md',
+  bodyClassName,
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  const [isClosing, setIsClosing] = useState(false);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+
+  const resolvedWidth = useMemo(() => {
+    if (width === 'sm' || width === 'md' || width === 'lg') {
+      return WIDTH_MAP[width];
+    }
+    return width;
+  }, [width]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      setIsClosing(false);
+    } else if (shouldRender) {
+      setIsClosing(true);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+        setIsClosing(false);
+      }, CLOSE_ANIMATION_MS);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, shouldRender]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (!isOpen || !shouldRender) return;
+    const id = requestAnimationFrame(() => {
+      dialogRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isOpen, shouldRender]);
+
+  if (!shouldRender) return null;
+
+  return createPortal(
+    <div
+      className={`${styles.backdrop} ${isClosing ? styles.closing : ''}`}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <Surface
+        ref={dialogRef}
+        background="primary"
+        elevation="floating"
+        radius="var(--dimension-radius-275, 22px)"
+        className={styles.dialog}
+        style={{ width: `min(${resolvedWidth}, calc(100vw - 32px))` }}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
+        <div className={styles.header}>
+          <Text id={titleId} as="h2" variant="text-title-small">
+            {title}
+          </Text>
+          {subtitle != null && (
+            <div className={styles.subtitle}>{subtitle}</div>
+          )}
+        </div>
+        <div className={`${styles.body} ${bodyClassName ?? ''}`.trim()}>
+          {children}
+        </div>
+        {footer != null && (
+          <div className={styles.footer}>{footer}</div>
+        )}
+      </Surface>
+    </div>,
+    document.body
+  );
+};
+
+Modal.displayName = 'Modal';

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalWidth } from './Modal';

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,64 @@
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-025);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.inactive {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Button ────────────────────────────────────────────────────────────────── */
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--dimension-size-300);
+  height: var(--dimension-size-300);
+  padding: 0 var(--dimension-space-050);
+  background: none;
+  border: none;
+  border-radius: var(--dimension-radius-075);
+  cursor: pointer;
+  color: var(--color-foreground-secondary);
+  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);
+}
+
+.button:hover:not(:disabled) {
+  background-color: var(--color-interaction-hover);
+  color: var(--color-foreground-primary);
+}
+
+.button:active:not(:disabled) {
+  background-color: var(--color-interaction-pressed);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.active {
+  background-color: var(--color-interaction-hover);
+  color: var(--color-foreground-primary);
+}
+
+/* ─── Nav arrows ────────────────────────────────────────────────────────────── */
+
+.nav {
+  font-size: 18px;
+}
+
+/* ─── Ellipsis ──────────────────────────────────────────────────────────────── */
+
+.ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--dimension-size-300);
+  height: var(--dimension-size-300);
+}

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Pagination } from './Pagination';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Classic/Pagination',
+  component: Pagination,
+  args: {
+    inactive: false,
+    siblingCount: 1,
+  },
+  argTypes: {
+    inactive: { control: 'boolean' },
+    siblingCount: { control: { type: 'number', min: 0, max: 3 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+const Controlled = (props: Partial<React.ComponentProps<typeof Pagination>> & { totalPages?: number }) => {
+  const total = props.totalPages ?? 10;
+  const [page, setPage] = useState(1);
+  return <Pagination page={page} totalPages={total} onPageChange={setPage} {...props} />;
+};
+
+export const Playground: Story = {
+  render: args => <Controlled totalPages={20} {...args} />,
+};
+
+export const Default: Story = {
+  render: () => <Controlled totalPages={10} />,
+};
+
+export const ManyPages: Story = {
+  render: () => <Controlled totalPages={100} />,
+};
+
+export const FewPages: Story = {
+  render: () => <Controlled totalPages={3} />,
+};
+
+export const SinglePage: Story = {
+  render: () => <Controlled totalPages={1} />,
+};
+
+export const Inactive: Story = {
+  render: () => (
+    <Pagination page={5} totalPages={20} onPageChange={() => {}} inactive />
+  ),
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef, useMemo } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import styles from './Pagination.module.css';
+
+export interface PaginationProps {
+  /** Current page (1-based). */
+  page: number;
+  /** Total number of pages. */
+  totalPages: number;
+  /** Called when page changes. */
+  onPageChange: (page: number) => void;
+  /** Max page buttons visible (excluding prev/next). */
+  siblingCount?: number;
+  /** Disables all interaction. */
+  inactive?: boolean;
+  className?: string;
+}
+
+function buildRange(start: number, end: number): (number | 'ellipsis')[] {
+  const items: (number | 'ellipsis')[] = [];
+  for (let i = start; i <= end; i++) items.push(i);
+  return items;
+}
+
+function buildPages(page: number, totalPages: number, siblings: number): (number | 'ellipsis')[] {
+  const totalSlots = siblings * 2 + 5; // siblings + boundaries + ellipses + current
+
+  if (totalPages <= totalSlots) return buildRange(1, totalPages);
+
+  const leftSibling = Math.max(page - siblings, 2);
+  const rightSibling = Math.min(page + siblings, totalPages - 1);
+
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const left = buildRange(1, siblings * 2 + 3);
+    return [...left, 'ellipsis', totalPages];
+  }
+
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const right = buildRange(totalPages - (siblings * 2 + 2), totalPages);
+    return [1, 'ellipsis', ...right];
+  }
+
+  return [1, 'ellipsis', ...buildRange(leftSibling, rightSibling), 'ellipsis', totalPages];
+}
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  ({ page, totalPages, onPageChange, siblingCount = 1, inactive = false, className }, ref) => {
+    const pages = useMemo(() => buildPages(page, totalPages, siblingCount), [page, totalPages, siblingCount]);
+
+    if (totalPages <= 1) return null;
+
+    return (
+      <nav ref={ref} aria-label="Pagination" className={cn(styles.pagination, inactive && styles.inactive, className)}>
+        <button
+          type="button"
+          className={cn(styles.button, styles.nav)}
+          disabled={page <= 1 || inactive}
+          onClick={() => onPageChange(page - 1)}
+          aria-label="Previous page"
+        >
+          <Text variant="text-body-small" as="span" color="inherit">&#x2039;</Text>
+        </button>
+
+        {pages.map((item, i) =>
+          item === 'ellipsis' ? (
+            <span key={`e${i}`} className={styles.ellipsis}>
+              <Text variant="text-body-small" as="span" color="tertiary">&hellip;</Text>
+            </span>
+          ) : (
+            <button
+              key={item}
+              type="button"
+              className={cn(styles.button, item === page && styles.active)}
+              onClick={() => onPageChange(item)}
+              aria-current={item === page ? 'page' : undefined}
+              disabled={inactive}
+            >
+              <Text variant={item === page ? 'text-body-small-emphasis' : 'text-body-small'} as="span" color="inherit">
+                {item}
+              </Text>
+            </button>
+          )
+        )}
+
+        <button
+          type="button"
+          className={cn(styles.button, styles.nav)}
+          disabled={page >= totalPages || inactive}
+          onClick={() => onPageChange(page + 1)}
+          aria-label="Next page"
+        >
+          <Text variant="text-body-small" as="span" color="inherit">&#x203A;</Text>
+        </button>
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = 'Pagination';

package/src/components/Pagination/index.ts

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