@ds-mo/ui 0.3.0 → 0.4.1

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

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

@@ -1,131 +0,0 @@
-import React, { forwardRef, useState, useRef, useEffect, useCallback, useId } 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 reactId = useId();
-    const triggerId = `${reactId}-trigger`;
-    const panelId = `${reactId}-panel`;
-
-    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"
-          id={triggerId}
-          className={styles.trigger}
-          onClick={() => !inactive && onToggle?.()}
-          aria-expanded={isExpanded}
-          aria-controls={panelId}
-          aria-disabled={inactive || undefined}
-          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
-          id={panelId}
-          role="region"
-          aria-labelledby={triggerId}
-          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,131 +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>
-  ),
-};
-
-export const AccessibleLabel: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Inspect the rendered HTML to see how the accessible name is composed. ' +
-          'Default is just the count. Pass `aria-label` for an explicit string, ' +
-          'or `labelFormat` for a count-aware formatter.',
-      },
-    },
-  },
-  render: () => (
-    <div style={{ ...col, fontFamily: 'sans-serif', fontSize: 12 }}>
-      <div style={row}>
-        <span style={{ ...labelStyle, minWidth: 220 }}>default (just count)</span>
-        <Badge count={3} />
-        <code style={{ color: '#888' }}>aria-label="3"</code>
-      </div>
-      <div style={row}>
-        <span style={{ ...labelStyle, minWidth: 220 }}>aria-label override</span>
-        <Badge count={3} aria-label="3 new notifications" />
-        <code style={{ color: '#888' }}>aria-label="3 new notifications"</code>
-      </div>
-      <div style={row}>
-        <span style={{ ...labelStyle, minWidth: 220 }}>labelFormat callback</span>
-        <Badge count={3} labelFormat={n => `${n} unread messages`} />
-        <code style={{ color: '#888' }}>aria-label="3 unread messages"</code>
-      </div>
-    </div>
-  ),
-};

package/src/components/Badge/Badge.tsx

@@ -1,40 +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;
-  /**
-   * Accessible label announced by screen readers. Takes precedence over `labelFormat`.
-   * Provide this when the badge has a specific meaning (e.g. `"3 unread messages"`).
-   */
-  'aria-label'?: string;
-  /**
-   * Formats the accessible label from the count. Used when `aria-label` is not provided.
-   * Defaults to returning the count as a string.
-   */
-  labelFormat?: (count: number) => string;
-}
-
-export const Badge: React.FC<BadgeProps> = ({
-  count,
-  isSelected = false,
-  className,
-  'aria-label': ariaLabel,
-  labelFormat,
-}) => {
-  if (count === 0) return null;
-  const displayText = count > 9 ? '+' : count.toString();
-  const accessibleLabel = ariaLabel ?? labelFormat?.(count) ?? String(count);
-  return (
-    <span className={`${styles.badge} ${className || ''}`} aria-label={accessibleLabel}>
-      <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,105 +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);
-  display: flex;
-  align-items: flex-start;
-  gap: var(--dimension-space-075);
-}
-
-.message {
-  color: var(--banner-content);
-  line-height: var(--typography-lineheight-md);
-  display: block;
-  flex: 1;
-  min-width: 0;
-}
-
-.dismiss {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: var(--dimension-space-025);
-  color: var(--banner-content);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: var(--dimension-radius-050);
-  position: relative;
-}
-
-.dismiss::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-color: transparent;
-  transition: var(--effect-transition-interaction-background-short-2);
-  pointer-events: none;
-}
-
-.dismiss:hover::before  { background-color: var(--color-interaction-hover); }
-.dismiss:active::before { background-color: var(--color-interaction-pressed); }
-
-.dismiss:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
-  outline-offset: var(--dimension-stroke-width-015);
-}
-
-.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>
-    );
-  },
-};