@ds-mo/ui 0.3.0 → 0.4.1

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,199 +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;
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'area[href]',
-  'button:not([disabled])',
-  'input:not([disabled]):not([type="hidden"])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  'iframe',
-  'object',
-  'embed',
-  '[contenteditable="true"]',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',');
-
-const getFocusableElements = (root: HTMLElement): HTMLElement[] => {
-  const nodes = root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
-  return Array.from(nodes).filter(
-    (el) => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'
-  );
-};
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  subtitle?: React.ReactNode;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  width?: ModalWidth | string;
-  bodyClassName?: string;
-  initialFocus?: React.RefObject<HTMLElement>;
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  title,
-  subtitle,
-  children,
-  footer,
-  width = 'md',
-  bodyClassName,
-  initialFocus,
-}) => {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
-  const titleId = useId();
-  const subtitleId = 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;
-    previouslyFocusedRef.current =
-      document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    const id = requestAnimationFrame(() => {
-      const dialog = dialogRef.current;
-      if (!dialog) return;
-      if (initialFocus?.current) {
-        initialFocus.current.focus();
-        return;
-      }
-      const focusables = getFocusableElements(dialog);
-      if (focusables.length > 0) {
-        focusables[0].focus();
-      } else {
-        dialog.focus();
-      }
-    });
-    return () => {
-      cancelAnimationFrame(id);
-      const previous = previouslyFocusedRef.current;
-      if (previous && document.contains(previous)) {
-        previous.focus();
-      }
-      previouslyFocusedRef.current = null;
-    };
-  }, [isOpen, shouldRender, initialFocus]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key !== 'Tab') return;
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const focusables = getFocusableElements(dialog);
-    if (focusables.length === 0) {
-      e.preventDefault();
-      dialog.focus();
-      return;
-    }
-    const first = focusables[0];
-    const last = focusables[focusables.length - 1];
-    const active = document.activeElement;
-    if (e.shiftKey) {
-      if (active === first || active === dialog || !dialog.contains(active)) {
-        e.preventDefault();
-        last.focus();
-      }
-    } else {
-      if (active === last || !dialog.contains(active)) {
-        e.preventDefault();
-        first.focus();
-      }
-    }
-  };
-
-  if (!shouldRender) return null;
-
-  const describedById = subtitle != null ? subtitleId : undefined;
-
-  return createPortal(
-    <div
-      className={`${styles.backdrop} ${isClosing ? styles.closing : ''}`}
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      onKeyDown={handleKeyDown}
-    >
-      <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}
-        aria-describedby={describedById}
-        tabIndex={-1}
-      >
-        <div className={styles.header}>
-          <Text id={titleId} as="h2" variant="text-title-small">
-            {title}
-          </Text>
-          {subtitle != null && (
-            <div id={subtitleId} 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';

package/src/components/Radio/Radio.module.css

@@ -1,61 +0,0 @@
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-025);
-}
-
-.horizontal {
-  flex-direction: row;
-  gap: var(--dimension-space-100);
-}
-
-/* ─── Radio item ────────────────────────────────────────────────────────────── */
-
-.radio {
-  display: flex;
-  align-items: center;
-  gap: var(--dimension-space-050);
-  padding: var(--dimension-space-075);
-  height: var(--dimension-size-400);
-  box-sizing: border-box;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  border-radius: var(--dimension-radius-075);
-  transition: background-color var(--effect-motion-short-2);
-}
-
-.radio:hover { background-color: var(--color-interaction-hover); }
-.radio:active { background-color: var(--color-interaction-pressed); }
-
-.inactive {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* ─── Circle indicator ──────────────────────────────────────────────────────── */
-
-.circle {
-  width: 20px;
-  height: 20px;
-  border: 1.5px solid var(--color-foreground-secondary);
-  border-radius: var(--dimension-radius-half);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all var(--effect-motion-short-2);
-  box-sizing: border-box;
-}
-
-.circleChecked {
-  border-color: var(--color-foreground-primary);
-}
-
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: var(--dimension-radius-half);
-  background-color: var(--color-foreground-primary);
-}