@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Text/Text.tsx

@@ -1,181 +0,0 @@
-import React, { forwardRef } from 'react';
-import styles from './Text.module.css';
-
-/**
- * Text variant options.
- * Each variant maps to a TokoMo typography class with predefined font-size, line-height,
- * font-weight, and letter-spacing.
- */
-export type TextVariant =
-  | 'text-display-medium'
-  | 'text-display-small'
-  | 'text-title-large'
-  | 'text-title-medium'
-  | 'text-title-small'
-  | 'text-body-large'
-  | 'text-body-large-emphasis'
-  | 'text-body-medium'
-  | 'text-body-medium-emphasis'
-  | 'text-body-small'
-  | 'text-body-small-emphasis'
-  | 'text-caption'
-  | 'text-caption-emphasis';
-
-/** @deprecated Use `TextVariant` instead. */
-export type TextStyle = TextVariant;
-
-/**
- * Semantic color tokens for text.
- * Maps to TokoMo --color-foreground-* CSS custom properties.
- */
-export type TextColorToken =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'brand'
-  | 'negative'
-  | 'positive'
-  | 'warning'
-  | 'caution'
-  | 'ai'
-  | 'on-strong'
-  | 'on-bold'
-  | 'inherit';
-
-/** Text color — semantic token or CSS variable escape hatch. */
-export type TextColor = TextColorToken | `var(--${string})`;
-
-export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
-export type TextAlign = 'left' | 'center' | 'right';
-export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
-export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
-export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-export interface TextProps {
-  /** Typography variant. Maps to a TokoMo typography class. Defaults to 'text-body-medium'. */
-  variant?: TextVariant;
-  children: React.ReactNode;
-
-  // Appearance
-  color?: TextColor;
-  decoration?: TextDecoration;
-  italic?: boolean;
-  align?: TextAlign;
-
-  // Truncation / wrap
-  /** Max lines before ellipsis. Ignored when wrap is 'nowrap'. Defaults to 'none'. */
-  lineTruncation?: LineTruncation;
-  /** 'nowrap' = single line, truncates with ellipsis when constrained. */
-  wrap?: TextWrap;
-
-  // Semantic HTML
-  as?: TextElement;
-  id?: string;
-  htmlFor?: string;
-
-  // Escape hatches
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const colorClassMap: Record<TextColorToken, string> = {
-  primary: styles.colorPrimary,
-  secondary: styles.colorSecondary,
-  tertiary: styles.colorTertiary,
-  brand: styles.colorBrand,
-  negative: styles.colorNegative,
-  positive: styles.colorPositive,
-  warning: styles.colorWarning,
-  caution: styles.colorCaution,
-  ai: styles.colorAi,
-  'on-strong': styles.colorOnStrong,
-  'on-bold': styles.colorOnBold,
-  inherit: styles.colorInherit,
-};
-
-const decorationClassMap: Record<TextDecoration, string> = {
-  none: styles.decorationNone,
-  underline: styles.decorationUnderline,
-  'dotted-underline': styles.decorationDottedUnderline,
-};
-
-const alignClassMap: Record<TextAlign, string> = {
-  left: styles.alignLeft,
-  center: styles.alignCenter,
-  right: styles.alignRight,
-};
-
-const truncationClassMap: Record<LineTruncation, string> = {
-  1: styles.truncate1Line,
-  2: styles.truncate2Lines,
-  3: styles.truncate3Lines,
-  4: styles.truncate4Lines,
-  5: styles.truncate5Lines,
-  none: styles.noTruncation,
-};
-
-const isCustomColor = (color: TextColor): color is `var(--${string})` =>
-  color.startsWith('var(--');
-
-export const Text = forwardRef<HTMLElement, TextProps>(
-  (
-    {
-      variant = 'text-body-medium',
-      children,
-      color,
-      decoration,
-      italic,
-      align,
-      lineTruncation = 'none',
-      wrap,
-      as: Component = 'p',
-      id,
-      htmlFor,
-      className = '',
-      style,
-    },
-    ref
-  ) => {
-    const wrapClass =
-      wrap === 'nowrap' ? styles.wrapNowrap
-      : wrap === 'balance' ? styles.wrapBalance
-      : wrap === 'pretty' ? styles.wrapPretty
-      : '';
-    const truncationClass =
-      wrap === 'nowrap' ? '' : truncationClassMap[lineTruncation];
-
-    const classes = [
-      variant,
-      styles.text,
-      wrapClass,
-      truncationClass,
-      color && !isCustomColor(color) ? colorClassMap[color] : '',
-      decoration ? decorationClassMap[decoration] : '',
-      italic ? styles.italic : '',
-      align ? alignClassMap[align] : '',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const computedStyle: React.CSSProperties = {
-      ...style,
-      ...(color && isCustomColor(color) ? { color } : {}),
-    };
-
-    const props: React.HTMLAttributes<HTMLElement> & { htmlFor?: string } = {
-      className: classes,
-      style: Object.keys(computedStyle).length > 0 ? computedStyle : undefined,
-      ...(id ? { id } : {}),
-      ...(Component === 'label' && htmlFor ? { htmlFor } : {}),
-    };
-
-    return (
-      <Component ref={ref as React.Ref<never>} {...props}>
-        {children}
-      </Component>
-    );
-  }
-);
-
-Text.displayName = 'Text';

package/src/components/Text/index.ts

@@ -1,13 +0,0 @@
-export { Text } from './Text';
-export type {
-  TextProps,
-  TextVariant,
-  TextStyle,
-  TextColor,
-  TextColorToken,
-  TextDecoration,
-  TextAlign,
-  LineTruncation,
-  TextWrap,
-  TextElement,
-} from './Text';

package/src/components/Toast/Toast.module.css

@@ -1,91 +0,0 @@
-/* ─── Container ─────────────────────────────────────────────────────────────── */
-
-.container {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-075);
-  pointer-events: none;
-  padding: var(--dimension-space-100);
-  max-width: 480px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.topCenter {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-}
-
-.topRight {
-  top: 0;
-  right: 0;
-  align-items: flex-end;
-}
-
-.bottomCenter {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-}
-
-.bottomRight {
-  bottom: 0;
-  right: 0;
-  align-items: flex-end;
-}
-
-/* ─── Toast ─────────────────────────────────────────────────────────────────── */
-
-.toast {
-  display: flex;
-  align-items: center;
-  gap: var(--dimension-space-075);
-  padding: var(--dimension-space-075) var(--dimension-space-100);
-  min-height: var(--dimension-size-400);
-  pointer-events: auto;
-  animation: slideIn var(--effect-motion-short-3) ease-out;
-}
-
-.toastExit {
-  animation: fadeOut 200ms ease-in forwards;
-}
-
-.dismiss {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: var(--dimension-space-025);
-  margin-left: auto;
-  font-size: 16px;
-  line-height: 1;
-  opacity: 0.7;
-  border-radius: var(--dimension-radius-050);
-  transition: opacity var(--effect-motion-short-2);
-  flex-shrink: 0;
-}
-
-.dismiss:hover { opacity: 1; }
-
-/* ─── Animations ────────────────────────────────────────────────────────────── */
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}

package/src/components/Toast/Toast.stories.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ToastContainer, toast } from './Toast';
-import type { ToastIntent } from './Toast';
-
-const meta: Meta<typeof ToastContainer> = {
-  title: 'Classic/Toast',
-  component: ToastContainer,
-  args: {
-    position: 'top-center',
-  },
-  argTypes: {
-    position: { control: 'select', options: ['top-center', 'top-right', 'bottom-center', 'bottom-right'] },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ToastContainer>;
-
-const INTENTS: ToastIntent[] = ['neutral', 'brand', 'positive', 'negative', 'warning', 'caution'];
-
-const row: React.CSSProperties = { display: 'flex', gap: 8, flexWrap: 'wrap' };
-
-const ToastDemo = (props: React.ComponentProps<typeof ToastContainer>) => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-    <div style={row}>
-      <button onClick={() => toast.info('This is an info message.')}>Info</button>
-      <button onClick={() => toast.success('Operation completed successfully.')}>Success</button>
-      <button onClick={() => toast.error('Something went wrong.')}>Error</button>
-      <button onClick={() => toast.warning('Please check your input.')}>Warning</button>
-    </div>
-    <div style={row}>
-      {INTENTS.map(intent => (
-        <button
-          key={intent}
-          onClick={() => toast.show({ message: `Toast with ${intent} intent`, intent })}
-        >
-          {intent}
-        </button>
-      ))}
-    </div>
-    <div style={row}>
-      <button onClick={() => toast.show({ message: 'Persistent toast (no auto-dismiss)', intent: 'brand', duration: 0 })}>
-        No auto-dismiss
-      </button>
-      <button onClick={() => toast.dismissAll()}>Dismiss all</button>
-    </div>
-    <ToastContainer {...props} />
-  </div>
-);
-
-export const Playground: Story = {
-  render: args => <ToastDemo {...args} />,
-};
-
-export const Default: Story = {
-  render: () => <ToastDemo />,
-};
-
-export const TopRight: Story = {
-  render: () => <ToastDemo position="top-right" />,
-};
-
-export const BottomCenter: Story = {
-  render: () => <ToastDemo position="bottom-center" />,
-};

package/src/components/Toast/Toast.tsx

@@ -1,218 +0,0 @@
-import React, { forwardRef, useEffect, useState, useCallback, useRef, useSyncExternalStore } from 'react';
-import ReactDOM from 'react-dom';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import { Surface } from '@/components/Surface';
-import type { SurfaceIntent } from '@/components/Surface';
-import styles from './Toast.module.css';
-
-/* ─── Toast Types ───────────────────────────────────────────────────────────── */
-
-export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';
-export type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
-
-export interface ToastData {
-  id: string;
-  message: string;
-  intent?: ToastIntent;
-  duration?: number;
-  onDismiss?: () => void;
-}
-
-export interface ToastOptions {
-  message: string;
-  intent?: ToastIntent;
-  /** Auto-dismiss duration in ms. 0 = no auto-dismiss. Default 4000. */
-  duration?: number;
-  onDismiss?: () => void;
-}
-
-/* ─── Toast Store (external, framework-agnostic) ────────────────────────────── */
-
-let toasts: ToastData[] = [];
-const listeners = new Set<() => void>();
-
-function emit() {
-  listeners.forEach(fn => fn());
-}
-
-function getSnapshot(): ToastData[] {
-  return toasts;
-}
-
-function subscribe(listener: () => void) {
-  listeners.add(listener);
-  return () => { listeners.delete(listener); };
-}
-
-let idCounter = 0;
-
-export const toast = {
-  show(options: ToastOptions): string {
-    const id = `toast-${++idCounter}`;
-    toasts = [...toasts, { id, ...options }];
-    emit();
-    return id;
-  },
-  info(message: string, options?: Omit<ToastOptions, 'message'>): string {
-    return toast.show({ message, intent: 'neutral', ...options });
-  },
-  success(message: string, options?: Omit<ToastOptions, 'message'>): string {
-    return toast.show({ message, intent: 'positive', ...options });
-  },
-  error(message: string, options?: Omit<ToastOptions, 'message'>): string {
-    return toast.show({ message, intent: 'negative', ...options });
-  },
-  warning(message: string, options?: Omit<ToastOptions, 'message'>): string {
-    return toast.show({ message, intent: 'warning', ...options });
-  },
-  dismiss(id: string) {
-    toasts = toasts.filter(t => t.id !== id);
-    emit();
-  },
-  dismissAll() {
-    toasts = [];
-    emit();
-  },
-};
-
-/* ─── useToasts hook ────────────────────────────────────────────────────────── */
-
-export function useToasts(): ToastData[] {
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-/* ─── Single Toast ──────────────────────────────────────────────────────────── */
-
-const INTENT_MAP: Record<ToastIntent, SurfaceIntent> = {
-  neutral: 'neutral',
-  brand: 'brand',
-  positive: 'positive',
-  negative: 'negative',
-  warning: 'warning',
-  caution: 'caution',
-};
-
-interface ToastItemProps {
-  data: ToastData;
-}
-
-const ToastItem: React.FC<ToastItemProps> = ({ data }) => {
-  const [exiting, setExiting] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const remainingRef = useRef<number>(data.duration ?? 4000);
-  const startedAtRef = useRef<number>(0);
-  const pausedRef = useRef<boolean>(false);
-
-  const dismiss = useCallback(() => {
-    setExiting(true);
-    setTimeout(() => {
-      toast.dismiss(data.id);
-      data.onDismiss?.();
-    }, 200);
-  }, [data]);
-
-  const clearTimer = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = undefined;
-    }
-  }, []);
-
-  const startTimer = useCallback((ms: number) => {
-    if (ms <= 0) return;
-    startedAtRef.current = Date.now();
-    timerRef.current = setTimeout(dismiss, ms);
-  }, [dismiss]);
-
-  const pause = useCallback(() => {
-    if (pausedRef.current || !timerRef.current) return;
-    pausedRef.current = true;
-    const elapsed = Date.now() - startedAtRef.current;
-    remainingRef.current = Math.max(0, remainingRef.current - elapsed);
-    clearTimer();
-  }, [clearTimer]);
-
-  const resume = useCallback(() => {
-    if (!pausedRef.current) return;
-    pausedRef.current = false;
-    startTimer(remainingRef.current);
-  }, [startTimer]);
-
-  useEffect(() => {
-    remainingRef.current = data.duration ?? 4000;
-    pausedRef.current = false;
-    startTimer(remainingRef.current);
-    return clearTimer;
-  }, [data.duration, startTimer, clearTimer]);
-
-  const isNegative = data.intent === 'negative';
-
-  return (
-    <Surface
-      intent={INTENT_MAP[data.intent ?? 'neutral']}
-      contrast="bold"
-      elevation="floating"
-      radius="lg"
-      className={cn(styles.toast, exiting && styles.toastExit)}
-      role={isNegative ? 'alert' : 'status'}
-      aria-live={isNegative ? 'assertive' : 'polite'}
-      onMouseEnter={pause}
-      onMouseLeave={resume}
-      onFocus={pause}
-      onBlur={resume}
-    >
-      <Text variant="text-body-medium" as="span" color="inherit">
-        {data.message}
-      </Text>
-      <button
-        type="button"
-        className={styles.dismiss}
-        onClick={dismiss}
-        aria-label="Dismiss"
-      >
-        &times;
-      </button>
-    </Surface>
-  );
-};
-
-/* ─── ToastContainer ────────────────────────────────────────────────────────── */
-
-export interface ToastContainerProps {
-  /** Where to render toasts on screen. */
-  position?: ToastPosition;
-}
-
-export const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(
-  ({ position = 'top-center' }, ref) => {
-    const items = useToasts();
-
-    if (typeof document === 'undefined') return null;
-
-    return ReactDOM.createPortal(
-      <div
-        ref={ref}
-        className={cn(styles.container, styles[positionClass(position)])}
-        role="region"
-        aria-label="Notifications"
-      >
-        {items.map(item => (
-          <ToastItem key={item.id} data={item} />
-        ))}
-      </div>,
-      document.body
-    );
-  }
-);
-
-ToastContainer.displayName = 'ToastContainer';
-
-function positionClass(position: ToastPosition): string {
-  switch (position) {
-    case 'top-center': return 'topCenter';
-    case 'top-right': return 'topRight';
-    case 'bottom-center': return 'bottomCenter';
-    case 'bottom-right': return 'bottomRight';
-  }
-}

package/src/components/Toast/index.ts

@@ -1,8 +0,0 @@
-export { ToastContainer, toast, useToasts } from './Toast';
-export type {
-  ToastContainerProps,
-  ToastData,
-  ToastOptions,
-  ToastIntent,
-  ToastPosition,
-} from './Toast';

package/src/components/Toggle/Toggle.module.css

@@ -1,87 +0,0 @@
-.toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: var(--dimension-size-400);
-  height: var(--dimension-size-250);
-  padding: 0 var(--dimension-space-025);
-  border: none;
-  border-radius: var(--dimension-radius-half);
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  outline: none;
-  flex-shrink: 0;
-  background-color: var(--color-background-medium-neutral);
-  box-shadow: var(--effect-highlight-depressed-sm);
-  transition: background-color var(--effect-motion-short-2);
-}
-
-.toggle::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: var(--effect-shadow-depressed-sm);
-  pointer-events: none;
-}
-
-.toggle:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
-  outline-offset: var(--dimension-space-025);
-}
-
-.checked {
-  background-color: var(--color-foreground-bold-brand) !important;
-}
-
-.thumb {
-  position: relative;
-  flex-shrink: 0;
-  width: var(--dimension-size-200);
-  height: var(--dimension-size-200);
-  background-color: var(--color-background-primary);
-  border-radius: var(--dimension-radius-half);
-  box-shadow: var(--effect-elevation-elevated-sm);
-  transition: transform var(--effect-motion-short-2);
-  transform: translateX(0);
-  z-index: 1;
-}
-
-.thumb::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-color: transparent;
-  border-radius: inherit;
-  transition: var(--effect-transition-interaction-background-instant);
-  pointer-events: none;
-}
-
-.toggle:hover:not(.inactive) .thumb::after {
-  background-color: var(--color-interaction-hover);
-}
-
-.toggle:active:not(.inactive) .thumb::after {
-  background-color: var(--color-interaction-pressed);
-}
-
-.checked .thumb {
-  transform: translateX(var(--dimension-offset-150));
-}
-
-.toggle:active:not(.inactive) .thumb {
-  transform: translateX(0) scale(var(--dimension-scale-subtle)) !important;
-  transition: transform var(--effect-motion-instant);
-}
-
-.checked.toggle:active:not(.inactive) .thumb {
-  transform: translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;
-  transition: transform var(--effect-motion-instant);
-}
-
-.inactive {
-  cursor: not-allowed;
-  opacity: 0.5;
-}