@ds-mo/ui 0.2.4 → 0.4.0

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

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

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

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

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

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

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

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

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

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

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

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

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