@ds-mo/ui 0.1.0

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Accordion } from './Accordion';
+import { Text } from '@/components/Text';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Classic/Accordion',
+  component: Accordion,
+  args: {
+    multiple: false,
+  },
+  argTypes: {
+    multiple: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const ITEMS = [
+  {
+    id: 'shipping',
+    label: 'Shipping Information',
+    content: (
+      <Text variant="text-body-medium" as="p" color="secondary">
+        We offer free standard shipping on all orders over $50. Express shipping is available for $9.99.
+        International shipping rates are calculated at checkout based on destination.
+      </Text>
+    ),
+  },
+  {
+    id: 'returns',
+    label: 'Returns & Exchanges',
+    content: (
+      <Text variant="text-body-medium" as="p" color="secondary">
+        Items can be returned within 30 days of purchase. Items must be in original condition with tags attached.
+        Refunds are processed within 5-7 business days.
+      </Text>
+    ),
+  },
+  {
+    id: 'warranty',
+    label: 'Warranty',
+    content: (
+      <Text variant="text-body-medium" as="p" color="secondary">
+        All products come with a 1-year manufacturer warranty against defects in materials and workmanship.
+      </Text>
+    ),
+  },
+  {
+    id: 'contact',
+    label: 'Contact Support',
+    content: (
+      <Text variant="text-body-medium" as="p" color="secondary">
+        Email us at support@example.com or call 1-800-EXAMPLE. Our support hours are Mon-Fri 9am-5pm EST.
+      </Text>
+    ),
+  },
+];
+
+const Controlled = (props: Partial<React.ComponentProps<typeof Accordion>>) => {
+  const [expanded, setExpanded] = useState<string[]>([]);
+  return <Accordion items={ITEMS} expandedIds={expanded} onExpandedChange={setExpanded} {...props} />;
+};
+
+export const Playground: Story = {
+  render: args => <Controlled {...args} />,
+};
+
+export const Default: Story = {
+  render: () => <Controlled />,
+};
+
+export const Multiple: Story = {
+  render: () => <Controlled multiple />,
+};
+
+export const WithInactive: Story = {
+  render: () => (
+    <Controlled
+      items={[
+        ...ITEMS.slice(0, 2),
+        { ...ITEMS[2], inactive: true },
+        ITEMS[3],
+      ]}
+    />
+  ),
+};
+
+export const PreExpanded: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState<string[]>(['shipping']);
+    return <Accordion items={ITEMS} expandedIds={expanded} onExpandedChange={setExpanded} />;
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import styles from './Accordion.module.css';
+
+export interface AccordionItemData {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+  inactive?: boolean;
+}
+
+export interface AccordionProps {
+  /** Items to render. */
+  items: AccordionItemData[];
+  /** Allow multiple items open at once. When false, behaves as an accordion. */
+  multiple?: boolean;
+  /** Controlled: which item IDs are expanded. */
+  expandedIds?: string[];
+  /** Called when expansion state changes. */
+  onExpandedChange?: (ids: string[]) => void;
+  className?: string;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  ({ items, multiple = false, expandedIds: controlledIds, onExpandedChange, className }, ref) => {
+    const [internalIds, setInternalIds] = useState<string[]>([]);
+    const expandedIds = controlledIds ?? internalIds;
+
+    const toggle = (id: string) => {
+      let next: string[];
+      if (expandedIds.includes(id)) {
+        next = expandedIds.filter(x => x !== id);
+      } else {
+        next = multiple ? [...expandedIds, id] : [id];
+      }
+      setInternalIds(next);
+      onExpandedChange?.(next);
+    };
+
+    return (
+      <div ref={ref} className={cn(styles.accordion, className)}>
+        {items.map(item => (
+          <AccordionItem
+            key={item.id}
+            label={item.label}
+            isExpanded={expandedIds.includes(item.id)}
+            inactive={item.inactive}
+            onToggle={() => toggle(item.id)}
+          >
+            {item.content}
+          </AccordionItem>
+        ))}
+      </div>
+    );
+  }
+);
+
+Accordion.displayName = 'Accordion';
+
+/* ─── AccordionItem ─────────────────────────────────────────────────────────── */
+
+export interface AccordionItemProps {
+  label: string;
+  children: React.ReactNode;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+  inactive?: boolean;
+  className?: string;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ label, children, isExpanded = false, onToggle, inactive = false, className }, ref) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [height, setHeight] = useState<number>(0);
+
+    const measure = useCallback(() => {
+      if (contentRef.current) {
+        setHeight(contentRef.current.scrollHeight);
+      }
+    }, []);
+
+    useEffect(() => {
+      measure();
+      const el = contentRef.current;
+      if (!el) return;
+      const ro = new ResizeObserver(measure);
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, [measure]);
+
+    return (
+      <div ref={ref} className={cn(styles.item, inactive && styles.inactive, className)}>
+        <button
+          type="button"
+          className={styles.trigger}
+          onClick={() => !inactive && onToggle?.()}
+          aria-expanded={isExpanded}
+          tabIndex={inactive ? -1 : 0}
+        >
+          <Text variant="text-body-medium-emphasis" as="span" color="inherit">
+            {label}
+          </Text>
+          <span className={cn(styles.chevron, isExpanded && styles.chevronOpen)}>
+            &#x203A;
+          </span>
+        </button>
+        <div
+          className={styles.body}
+          style={{ height: isExpanded ? height : 0 }}
+          aria-hidden={!isExpanded}
+        >
+          <div ref={contentRef} className={styles.bodyInner}>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+AccordionItem.displayName = 'AccordionItem';

package/src/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionProps, AccordionItemProps, AccordionItemData } from './Accordion';

package/src/components/Badge/Badge.module.css

@@ -0,0 +1,6 @@
+.badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Primitives/Badge',
+  component: Badge,
+  args: {
+    count: 3,
+    isSelected: false,
+  },
+  argTypes: {
+    count: { control: 'number' },
+    isSelected: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Playground: Story = {};
+
+// ─── Matrix ───────────────────────────────────────────────────────────────────
+
+const COUNTS = [1, 5, 9, 10, 99];
+
+const row: React.CSSProperties = { display: 'flex', gap: 16, alignItems: 'center' };
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 12 };
+const labelStyle: React.CSSProperties = { fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 72, flexShrink: 0 };
+
+export const Matrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ ...col, fontFamily: 'sans-serif' }}>
+      {/* Header row */}
+      <div style={row}>
+        <span style={labelStyle}></span>
+        {COUNTS.map(c => (
+          <span key={c} style={{ ...labelStyle, textAlign: 'center' }}>{c}</span>
+        ))}
+      </div>
+      {/* Normal */}
+      <div style={row}>
+        <span style={labelStyle}>normal</span>
+        {COUNTS.map(c => (
+          <div key={c} style={{ minWidth: 72, display: 'flex', justifyContent: 'center' }}>
+            <Badge count={c} />
+          </div>
+        ))}
+      </div>
+      {/* Selected */}
+      <div style={row}>
+        <span style={labelStyle}>selected</span>
+        {COUNTS.map(c => (
+          <div key={c} style={{ minWidth: 72, display: 'flex', justifyContent: 'center' }}>
+            <Badge count={c} isSelected />
+          </div>
+        ))}
+      </div>
+      {/* Zero renders nothing */}
+      <div style={row}>
+        <span style={labelStyle}>zero</span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <Badge count={0} />
+          <span style={{ fontSize: 10, color: '#aaa', fontFamily: 'monospace' }}>(renders null)</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ─── Individual stories ───────────────────────────────────────────────────────
+
+export const Counts: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      {COUNTS.map(c => <Badge key={c} count={c} />)}
+    </div>
+  ),
+};
+
+export const Selected: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      <Badge count={5} />
+      <Badge count={5} isSelected />
+    </div>
+  ),
+};
+
+export const ZeroCount: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontFamily: 'sans-serif', fontSize: 12 }}>
+      <span>count=0 renders null:</span>
+      <Badge count={0} />
+      <span style={{ color: '#888' }}>(nothing between these spans)</span>
+    </div>
+  ),
+};

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text } from '@/components/Text';
+import styles from './Badge.module.css';
+
+export interface BadgeProps {
+  count: number;
+  isSelected?: boolean;
+  className?: string;
+}
+
+export const Badge: React.FC<BadgeProps> = ({ count, isSelected = false, className }) => {
+  if (count === 0) return null;
+  const displayText = count > 9 ? '+' : count.toString();
+  return (
+    <span className={`${styles.badge} ${className || ''}`} aria-label={`${count} unread`}>
+      <Text variant="text-caption-emphasis" as="span" color={isSelected ? 'primary' : 'secondary'}>
+        {displayText}
+      </Text>
+    </span>
+  );
+};
+
+Badge.displayName = 'Badge';

package/src/components/Badge/index.ts

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

package/src/components/Banner/Banner.module.css

@@ -0,0 +1,67 @@
+.bannerWrapper {}
+
+.banner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.bannerHeaderSurface {
+  width: 100%;
+  height: var(--dimension-space-100);
+  flex-shrink: 0;
+  overflow: hidden;
+  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);
+}
+
+.bannerHeader {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--banner-content),
+    var(--banner-content) var(--dimension-size-100),
+    transparent var(--dimension-size-100),
+    transparent var(--dimension-size-200)
+  );
+}
+
+.bannerBody {
+  padding: var(--dimension-space-075);
+  min-height: var(--dimension-size-400);
+}
+
+.message {
+  color: var(--banner-content);
+  line-height: var(--typography-lineheight-md);
+  display: block;
+}
+
+.floatingPosition {
+  position: fixed;
+  top: var(--dimension-space-200);
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.floatingToast {
+  backface-visibility: hidden;
+  -webkit-font-smoothing: subpixel-antialiased;
+  animation: toastFadeIn var(--effect-motion-short-2) forwards;
+}
+
+.floatingToast.closing {
+  animation: toastFadeOut var(--effect-motion-short-3) forwards;
+}
+
+@keyframes toastFadeIn {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes toastFadeOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); }
+}

package/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Banner } from './Banner';
+import { Button } from '../Button';
+
+const meta: Meta<typeof Banner> = {
+  title: 'Components/Banner',
+  component: Banner,
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+export const Intents: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 24 }}>
+      {(['brand', 'positive', 'negative', 'warning', 'caution', 'ai', 'neutral'] as const).map(intent => (
+        <Banner key={intent} intent={intent} contrast="faint" message={`This is a ${intent} banner.`} />
+      ))}
+    </div>
+  ),
+};
+
+export const Contrasts: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 24 }}>
+      {(['faint', 'medium', 'bold', 'strong'] as const).map(contrast => (
+        <Banner key={contrast} intent="brand" contrast={contrast} message={`Brand banner — ${contrast} contrast`} />
+      ))}
+    </div>
+  ),
+};
+
+export const WithHeader: Story = {
+  args: {
+    intent: 'positive',
+    contrast: 'faint',
+    message: 'Your changes have been saved successfully.',
+    header: true,
+  },
+};
+
+export const Dismissible: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+    return (
+      <div style={{ padding: 24 }}>
+        {visible ? (
+          <Banner
+            intent="warning"
+            contrast="faint"
+            message="This banner can be dismissed."
+            onDismiss={() => setVisible(false)}
+          />
+        ) : (
+          <Button variant="secondary" label="Show Banner" onClick={() => setVisible(true)} />
+        )}
+      </div>
+    );
+  },
+};
+
+export const FloatingToast: Story = {
+  render: () => {
+    const [show, setShow] = useState(false);
+    return (
+      <div style={{ padding: 24 }}>
+        <Button variant="primary" label="Show Toast" onClick={() => setShow(true)} />
+        {show && (
+          <Banner
+            intent="positive"
+            contrast="faint"
+            message="Operation completed!"
+            floating
+            onDismiss={() => setShow(false)}
+          />
+        )}
+      </div>
+    );
+  },
+};

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Surface } from '@/components/Surface';
+import { Text } from '@/components/Text';
+import { getCssTimeMs } from '@/utils/css-tokens';
+import styles from './Banner.module.css';
+
+const TOAST_DURATION_FALLBACK_MS = 4000;
+const FADE_OUT_DURATION_MS = 200;
+
+export type BannerIntent =
+  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'
+  | 'ai' | 'neutral' | 'walkthrough' | 'guide';
+
+export type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';
+
+export interface BannerProps {
+  intent: BannerIntent;
+  contrast: BannerContrast;
+  message: string;
+  header?: boolean;
+  className?: string;
+  floating?: boolean;
+  onDismiss?: () => void;
+}
+
+const getContentColorVar = (intent: BannerIntent, contrast: BannerContrast): string => {
+  if (contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';
+  const contentContrast = contrast === 'faint' ? 'bold' : contrast === 'medium' ? 'strong' : 'medium';
+  return `var(--color-foreground-${contentContrast}-${intent})`;
+};
+
+export const Banner: React.FC<BannerProps> = ({
+  intent,
+  contrast,
+  message,
+  header = false,
+  className = '',
+  floating = false,
+  onDismiss,
+}) => {
+  const toastDurationMs = getCssTimeMs('--effect-animation-delay-long-2', TOAST_DURATION_FALLBACK_MS);
+  const messageColor = getContentColorVar(intent, contrast);
+  const [isClosing, setIsClosing] = useState(false);
+  const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleDismiss = useCallback(() => {
+    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    dismissTimerRef.current = setTimeout(() => {
+      dismissTimerRef.current = null;
+      setIsClosing(true);
+      closeTimerRef.current = setTimeout(() => {
+        closeTimerRef.current = null;
+        onDismiss?.();
+      }, FADE_OUT_DURATION_MS);
+    }, toastDurationMs);
+  }, [onDismiss, toastDurationMs]);
+
+  useEffect(() => {
+    if (floating && message) scheduleDismiss();
+    return () => {
+      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, [floating, message, scheduleDismiss]);
+
+  const content = (
+    <div
+      className={`${styles.bannerWrapper} ${className}`.trim()}
+      style={{ '--banner-content': messageColor } as React.CSSProperties}
+    >
+      <Surface
+        elevation={floating ? 'floating' : 'elevated'}
+        intent={intent}
+        contrast={contrast}
+        radius="sm"
+        className={styles.banner}
+      >
+        {header && (
+          <div className={styles.bannerHeaderSurface}>
+            <div className={styles.bannerHeader} aria-hidden />
+          </div>
+        )}
+        <div className={styles.bannerBody}>
+          <Text variant="text-body-medium" as="span" className={styles.message}>
+            {message}
+          </Text>
+        </div>
+      </Surface>
+    </div>
+  );
+
+  if (floating) {
+    return createPortal(
+      <div className={styles.floatingPosition} style={{ zIndex: 9998 }}>
+        <div className={`${styles.floatingToast} ${isClosing ? styles.closing : ''}`}>
+          {content}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+
+  return content;
+};
+
+Banner.displayName = 'Banner';

package/src/components/Banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerIntent, BannerContrast } from './Banner';

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -0,0 +1,46 @@
+.breadcrumb {
+  display: flex;
+  align-items: center;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--dimension-space-050);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-050);
+}
+
+.link {
+  color: var(--color-foreground-secondary);
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: var(--dimension-space-025) var(--dimension-space-050);
+  border-radius: var(--dimension-radius-050);
+  cursor: pointer;
+  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);
+}
+
+.link:hover {
+  background-color: var(--color-interaction-hover);
+  color: var(--color-foreground-primary);
+}
+
+.link:active {
+  background-color: var(--color-interaction-pressed);
+}
+
+.separator {
+  color: var(--color-foreground-tertiary);
+  font-size: 12px;
+  -webkit-user-select: none;
+  user-select: none;
+}