@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/Accordion/Accordion.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Breadcrumb } from './Breadcrumb';
-
-const meta: Meta<typeof Breadcrumb> = {
-  title: 'Classic/Breadcrumb',
-  component: Breadcrumb,
-};
-
-export default meta;
-type Story = StoryObj<typeof Breadcrumb>;
-
-export const Playground: Story = {
-  args: {
-    items: [
-      { label: 'Home', onClick: () => {} },
-      { label: 'Products', onClick: () => {} },
-      { label: 'Widget Pro' },
-    ],
-  },
-};
-
-export const Default: Story = {
-  render: () => (
-    <Breadcrumb
-      items={[
-        { label: 'Home', onClick: () => {} },
-        { label: 'Settings', onClick: () => {} },
-        { label: 'General' },
-      ]}
-    />
-  ),
-};
-
-export const Deep: Story = {
-  render: () => (
-    <Breadcrumb
-      items={[
-        { label: 'Home', onClick: () => {} },
-        { label: 'Products', onClick: () => {} },
-        { label: 'Inventory', onClick: () => {} },
-        { label: 'Item #482', onClick: () => {} },
-        { label: 'Maintenance' },
-      ]}
-    />
-  ),
-};
-
-export const WithLinks: Story = {
-  render: () => (
-    <Breadcrumb
-      items={[
-        { label: 'Home', href: '#' },
-        { label: 'Products', href: '#' },
-        { label: 'Widget Pro' },
-      ]}
-    />
-  ),
-};
-
-export const CustomSeparator: Story = {
-  render: () => (
-    <Breadcrumb
-      separator=">"
-      items={[
-        { label: 'Dashboard', onClick: () => {} },
-        { label: 'Reports', onClick: () => {} },
-        { label: 'Q4 Summary' },
-      ]}
-    />
-  ),
-};