@ds-mo/ui 0.3.0 → 0.4.1

package/src/components/Banner/Banner.tsx

@@ -1,139 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { Cross } from '@ds-mo/icons';
-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;
-  /** Accessible label for the dismiss button. Defaults to "Dismiss". */
-  dismissLabel?: string;
-}
-
-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,
-  dismissLabel = 'Dismiss',
-}) => {
-  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 beginClose = useCallback(() => {
-    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
-    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    dismissTimerRef.current = null;
-    if (floating) {
-      setIsClosing(true);
-      closeTimerRef.current = setTimeout(() => {
-        closeTimerRef.current = null;
-        onDismiss?.();
-      }, FADE_OUT_DURATION_MS);
-    } else {
-      onDismiss?.();
-    }
-  }, [floating, onDismiss]);
-
-  const scheduleDismiss = useCallback(() => {
-    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
-    dismissTimerRef.current = setTimeout(() => {
-      dismissTimerRef.current = null;
-      beginClose();
-    }, toastDurationMs);
-  }, [beginClose, toastDurationMs]);
-
-  useEffect(() => {
-    if (floating && message) scheduleDismiss();
-    return () => {
-      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
-      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    };
-  }, [floating, message, scheduleDismiss]);
-
-  const isAssertive = intent === 'negative';
-  const role = isAssertive ? 'alert' : 'status';
-  const ariaLive = isAssertive ? undefined : 'polite';
-
-  const content = (
-    <div
-      className={`${styles.bannerWrapper} ${className}`.trim()}
-      style={{ '--banner-content': messageColor } as React.CSSProperties}
-      role={role}
-      aria-live={ariaLive}
-    >
-      <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>
-          {onDismiss && (
-            <button
-              type="button"
-              className={styles.dismiss}
-              onClick={beginClose}
-              aria-label={dismissLabel}
-            >
-              <Cross size={16} />
-            </button>
-          )}
-        </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' },
-      ]}
-    />
-  ),
-};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,68 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Breadcrumb.module.css';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-}
-
-export interface BreadcrumbProps {
-  /** Ordered list of breadcrumb items. Last item is treated as current page. */
-  items: BreadcrumbItem[];
-  /** Custom separator. Defaults to '/'. */
-  separator?: React.ReactNode;
-  className?: string;
-}
-
-export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ items, separator = '/', className }, ref) => (
-    <nav ref={ref} aria-label="Breadcrumb" className={cn(styles.breadcrumb, className)}>
-      <ol className={styles.list}>
-        {items.map((item, i) => {
-          const isLast = i === items.length - 1;
-          return (
-            <li key={i} className={styles.item}>
-              {isLast ? (
-                <Text variant="text-body-medium-emphasis" as="span" color="primary" aria-current="page">
-                  {item.label}
-                </Text>
-              ) : (
-                <>
-                  {item.href ? (
-                    <a
-                      href={item.href}
-                      className={styles.link}
-                      onClick={e => { if (item.onClick) { e.preventDefault(); item.onClick(); } }}
-                    >
-                      <Text variant="text-body-medium" as="span" color="inherit">
-                        {item.label}
-                      </Text>
-                    </a>
-                  ) : (
-                    <button
-                      type="button"
-                      className={styles.link}
-                      onClick={item.onClick}
-                    >
-                      <Text variant="text-body-medium" as="span" color="inherit">
-                        {item.label}
-                      </Text>
-                    </button>
-                  )}
-                  <span className={styles.separator} aria-hidden="true">
-                    {separator}
-                  </span>
-                </>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  )
-);
-
-Breadcrumb.displayName = 'Breadcrumb';

package/src/components/Breadcrumb/index.ts

@@ -1,2 +0,0 @@
-export { Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/src/components/Button/Button.mdx

@@ -1,143 +0,0 @@
-import { Meta, Title, Subtitle, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as ButtonStories from './Button.stories';
-
-<Meta of={ButtonStories} />
-
-<Title />
-
-<Subtitle>
-  Buttons trigger actions. They are the primary way users commit to a decision —
-  saving a record, opening a dialog, navigating somewhere meaningful.
-</Subtitle>
-
-A button should make its purpose obvious from its label, its visual weight, and
-its position on the page. The right button in the right place is invisible — it
-just feels like the next step. The wrong button competes for attention and slows
-the user down.
-
-## Playground
-
-Use the controls below to explore every prop the component accepts. This is the
-fastest way to understand how `variant`, `intent`, `contrast`, and `elevation`
-combine.
-
-<Primary />
-
-<Controls />
-
-## When to use
-
-Reach for a button when the user needs to perform an **action** — submit a form,
-delete a record, open a panel, run a process. If the user is navigating between
-pages or sections, prefer a link instead. Buttons are for verbs; links are for
-nouns.
-
-A page should have **one** clearly dominant button. If two actions look equally
-important, the user has to stop and read both before deciding — which is exactly
-the moment of friction good hierarchy avoids.
-
-## Variants
-
-`primary` is filled and carries the strongest visual weight. Use it for the one
-action you most want the user to take on a given screen.
-
-`secondary` is a softer treatment for actions that matter but should not compete
-with the primary action. Use `elevation="none"` to get the ghost treatment for
-tertiary actions like cancel, dismiss, or inline controls.
-
-<Canvas of={ButtonStories.Variants} />
-
-> **Do** pair one `primary` with one or more `secondary` buttons in a form footer.
->
-> **Don't** stack two `primary` buttons next to each other — only one action can
-> be the primary one.
-
-## Intent
-
-Intent communicates the **meaning** of the action through color. Most buttons
-should use `brand` (the default) or `neutral`. Reserve semantic intents for
-moments when the meaning genuinely matches.
-
-<Canvas of={ButtonStories.Intents} />
-
-- `brand` — the default for primary calls-to-action
-- `neutral` — for actions that should not draw color, like filters or toolbar controls
-- `negative` — for destructive actions (delete, remove, discard)
-- `positive` — for confirmations of a successful state, used sparingly
-- `warning` / `caution` — for actions that need a moment of pause
-- `ai` — reserved for AI-generated or AI-triggering actions
-- `none` — inverted styling for use on colored or dark surfaces
-
-> **Don't** use `negative` intent for a cancel button. Cancel is not destructive;
-> it is the absence of an action. Use `secondary` with no intent.
-
-## Sizes
-
-Pick a size from the surrounding density, not the importance of the action.
-Forms and dialogs use `md`. Compact toolbars and table rows use `sm` or `xs`.
-Hero sections and marketing surfaces can use `lg`.
-
-<Canvas of={ButtonStories.Sizes} />
-
-## Icons
-
-A leading icon can clarify a button's purpose at a glance — but only when the
-icon's meaning is unambiguous. If you have to think about which icon to pick,
-the label alone is doing a better job.
-
-<Canvas of={ButtonStories.IconAndLabel} />
-
-Icon-only buttons must always have an `aria-label`. Without it, screen readers
-announce nothing meaningful, and keyboard users lose all context.
-
-<Canvas of={ButtonStories.IconOnly} />
-
-## States
-
-Buttons have several states that communicate progress or availability:
-
-- `inactive` — the action is not currently available, but may become available
-- `loading` — the action is in flight; prevents double-submission
-- `rounded` — pill-shaped variant for filter chips and compact actions
-
-<Canvas of={ButtonStories.Loading} />
-
-<Canvas of={ButtonStories.Inactive} />
-
-> **Do** use `loading` for any async action that takes longer than ~200ms.
-> Without it, users will click again, often submitting twice.
-
-## Full width
-
-Use `fullWidth` inside narrow containers like mobile sheets, side panels, or
-form footers where the button should fill the available width. Avoid full-width
-buttons on wide desktop layouts — they read as banner CTAs and feel heavy.
-
-<Canvas of={ButtonStories.FullWidth} />
-
-## On colored surfaces
-
-When a button sits on a colored or dark surface, set the `background` prop so
-the button can adapt its contrast to remain legible. The `BackgroundContext`
-story below demonstrates every variant against every supported surface.
-
-<Canvas of={ButtonStories.BackgroundContext} />
-
-## Accessibility
-
-- Every button must have a discernible name — either visible text in `label` or
-  an `aria-label` for icon-only buttons.
-- The `inactive` state is **not** the same as the HTML `disabled` attribute.
-  `inactive` keeps the button focusable and announceable; truly disabled buttons
-  vanish from the tab order and frustrate users who can't tell why an action
-  isn't working.
-- Touch targets meet the 24×24 CSS pixel minimum at all sizes; `xs` is intended
-  for dense desktop UIs and should not be used on mobile.
-
-## Full reference matrix
-
-The matrix below renders every meaningful combination of `variant`, `intent`,
-`contrast`, `elevation`, `size`, and state on a single canvas. Use it as a
-visual regression reference when changing tokens or styles.
-
-<Canvas of={ButtonStories.Matrix} />