@ds-mo/ui 0.1.0

package/src/components/Text/Text.tsx

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

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

@@ -0,0 +1,91 @@
+/* ─── 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

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

@@ -0,0 +1,182 @@
+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>>();
+
+  const dismiss = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => {
+      toast.dismiss(data.id);
+      data.onDismiss?.();
+    }, 200);
+  }, [data]);
+
+  useEffect(() => {
+    const duration = data.duration ?? 4000;
+    if (duration > 0) {
+      timerRef.current = setTimeout(dismiss, duration);
+    }
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, [data.duration, dismiss]);
+
+  return (
+    <Surface
+      intent={INTENT_MAP[data.intent ?? 'neutral']}
+      contrast="bold"
+      elevation="floating"
+      radius="lg"
+      className={cn(styles.toast, exiting && styles.toastExit)}
+      role="status"
+      aria-live="polite"
+    >
+      <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)])}
+        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

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

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

@@ -0,0 +1,87 @@
+.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;
+}