@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Surface/Surface.tsx

@@ -1,219 +0,0 @@
-import React, { forwardRef } from 'react';
-import styles from './Surface.module.css';
-
-/**
- * Semantic intent for colored surfaces.
- * Each intent has four contrast levels (faint, medium, bold, strong).
- */
-export type SurfaceIntent =
-  | 'brand'
-  | 'positive'
-  | 'negative'
-  | 'warning'
-  | 'caution'
-  | 'ai'
-  | 'neutral'
-  | 'walkthrough'
-  | 'guide';
-
-/** Background type for non-intent surfaces. */
-export type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-
-/** Contrast level for semantic intents. */
-export type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';
-
-/** Elevation for depth/shadow effects. Progressive: none → flat → elevated → floating. */
-export type SurfaceElevation =
-  | 'none'
-  | 'depressed'
-  | 'depressed-md'
-  | 'flat'
-  | 'elevated'
-  | 'floating'
-  | 'overlayTop'
-  | 'overlayRight'
-  | 'overlayBottom'
-  | 'overlayLeft';
-
-/** Edge divider border direction. */
-export type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';
-
-/** Corner radius presets. */
-export type SurfaceRadiusPreset = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-
-/** Corner radius — preset, CSS variable, or custom string (e.g. '12px 12px 0 0'). */
-export type SurfaceRadius = SurfaceRadiusPreset | (string & {});
-
-/** HTML elements Surface can render as. */
-export type SurfaceElement =
-  | 'div'
-  | 'section'
-  | 'aside'
-  | 'article'
-  | 'header'
-  | 'footer'
-  | 'main'
-  | 'nav'
-  | 'span'
-  | 'button'
-  | 'td'
-  | 'th';
-
-/** Props shared by both surface modes. */
-interface SurfaceBaseProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-  /** Elevation for depth/shadow effects. Defaults to 'none'. */
-  elevation?: SurfaceElevation;
-  /** Edge divider border(s). Only applies when elevation is 'none'. */
-  edge?: SurfaceEdge | SurfaceEdge[];
-  /** Corner radius — preset or CSS variable. */
-  radius?: SurfaceRadius;
-  /** Enable hover/pressed interaction overlay. */
-  interactive?: boolean;
-  /** Apply selected background state. */
-  selected?: boolean;
-  /** Dim and disable pointer events. */
-  inactive?: boolean;
-  /** HTML element to render. Defaults to 'div'. */
-  as?: SurfaceElement;
-  /** Button type — only used when as='button'. */
-  type?: 'button' | 'submit' | 'reset';
-}
-
-/** Non-intent surface — uses a basic background color. */
-interface SurfaceDefaultProps extends SurfaceBaseProps {
-  /** Background color. Defaults to 'transparent'. */
-  background?: SurfaceBackground;
-  intent?: never;
-  contrast?: never;
-}
-
-/** Intent surface — uses a semantic color with contrast level. */
-interface SurfaceIntentProps extends SurfaceBaseProps {
-  /** Semantic intent color. */
-  intent: SurfaceIntent;
-  /** Contrast level for the intent background. Defaults to 'faint'. */
-  contrast?: SurfaceContrast;
-  background?: never;
-}
-
-export type SurfaceProps = SurfaceDefaultProps | SurfaceIntentProps;
-
-const backgroundClassMap: Record<SurfaceBackground, string> = {
-  primary: styles.bgPrimary,
-  secondary: styles.bgSecondary,
-  transparent: styles.bgTransparent,
-  translucent: styles.bgTranslucent,
-};
-
-const elevationClassMap: Record<SurfaceElevation, string> = {
-  none: styles.elevationNone,
-  depressed: styles.elevationDepressed,
-  'depressed-md': styles.elevationDepressedMd,
-  flat: styles.elevationFlat,
-  elevated: styles.elevationElevated,
-  floating: styles.elevationFloating,
-  overlayTop: styles.elevationOverlayTop,
-  overlayRight: styles.elevationOverlayRight,
-  overlayBottom: styles.elevationOverlayBottom,
-  overlayLeft: styles.elevationOverlayLeft,
-};
-
-const edgeClassMap: Record<SurfaceEdge, string> = {
-  top: styles.edgeTop,
-  right: styles.edgeRight,
-  bottom: styles.edgeBottom,
-  left: styles.edgeLeft,
-};
-
-const radiusClassMap: Record<SurfaceRadiusPreset, string> = {
-  none: styles.radiusNone,
-  xs: styles.radiusXs,
-  sm: styles.radiusSm,
-  md: styles.radiusMd,
-  lg: styles.radiusLg,
-  xl: styles.radiusXl,
-  '2xl': styles.radius2xl,
-  full: styles.radiusFull,
-};
-
-const getIntentContrastClass = (intent: SurfaceIntent, contrast: SurfaceContrast): string => {
-  const intentKey = intent.charAt(0).toUpperCase() + intent.slice(1);
-  const contrastKey = contrast.charAt(0).toUpperCase() + contrast.slice(1);
-  return styles[`intent${intentKey}${contrastKey}`] || '';
-};
-
-const isPresetRadius = (radius: SurfaceRadius): radius is SurfaceRadiusPreset =>
-  radius in radiusClassMap;
-
-export const Surface = forwardRef<HTMLElement, SurfaceProps>(
-  (
-    {
-      children,
-      background = 'transparent',
-      intent,
-      contrast = 'faint',
-      elevation = 'none',
-      edge,
-      radius,
-      interactive = false,
-      selected = false,
-      inactive = false,
-      as: Component = 'div',
-      className = '',
-      style,
-      type,
-      ...rest
-    },
-    ref
-  ) => {
-    const classes = [
-      styles.surface,
-      // Background or intent+contrast
-      intent
-        ? getIntentContrastClass(intent, contrast)
-        : backgroundClassMap[background],
-      // Elevation
-      elevationClassMap[elevation],
-      // Edge(s) — only when elevation is 'none'
-      ...(edge && elevation === 'none'
-        ? Array.isArray(edge)
-          ? edge.map(e => edgeClassMap[e])
-          : [edgeClassMap[edge]]
-        : []),
-      // Radius (preset only — custom handled via inline style)
-      radius && isPresetRadius(radius) ? radiusClassMap[radius] : '',
-      // States
-      interactive ? styles.interactive : '',
-      selected ? styles.selected : '',
-      inactive ? styles.inactive : '',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const computedStyle: React.CSSProperties = {
-      ...style,
-      ...(radius && !isPresetRadius(radius) ? { borderRadius: radius } : {}),
-    };
-
-    const hasStyle =
-      (radius && !isPresetRadius(radius)) || (style && Object.keys(style).length > 0);
-
-    const elementProps = {
-      ref,
-      className: classes,
-      style: hasStyle ? computedStyle : undefined,
-      disabled: Component === 'button' ? inactive : undefined,
-      type: Component === 'button' ? type || 'button' : undefined,
-      ...rest,
-    };
-
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      <Component {...(elementProps as any)}>{children}</Component>
-    );
-  }
-);
-
-Surface.displayName = 'Surface';

package/src/components/Surface/index.ts

@@ -1,12 +0,0 @@
-export { Surface } from './Surface';
-export type {
-  SurfaceProps,
-  SurfaceIntent,
-  SurfaceBackground,
-  SurfaceContrast,
-  SurfaceElevation,
-  SurfaceEdge,
-  SurfaceRadius,
-  SurfaceRadiusPreset,
-  SurfaceElement,
-} from './Surface';

package/src/components/Tab/Tab.module.css

@@ -1,66 +0,0 @@
-/* ==========================================================================
-   Tab — hover/pressed via direct background-color, no pseudo-element overlay.
-   ========================================================================== */
-
-.tab {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dimension-space-075);
-  background-color: transparent;
-  border: none;
-  border-radius: var(--dimension-radius-075);
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  color: var(--color-foreground-secondary);
-  position: relative;
-  will-change: color;
-  transition: color var(--effect-motion-short-2),
-              background-color var(--effect-motion-short-2);
-  flex-shrink: 0;
-  height: var(--dimension-size-400);
-  box-sizing: border-box;
-
-  /* Interaction — ghost defaults */
-  --_hover-bg: var(--color-interaction-hover);
-  --_pressed-bg: var(--color-interaction-pressed);
-}
-
-.tab:hover { background-color: var(--_hover-bg); }
-.tab:active { background-color: var(--_pressed-bg); }
-
-.tabSelected { color: var(--color-foreground-primary); }
-
-/* ==========================================================================
-   Background context — parent surface awareness
-   ========================================================================== */
-
-.onMedium {
-  --_hover-bg: var(--color-interaction-on-medium-background-hover);
-  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);
-}
-
-.onBold {
-  --_hover-bg: var(--color-interaction-on-bold-background-hover);
-  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);
-  color: var(--color-foreground-on-bold-background-secondary);
-}
-
-.onBold.tabSelected { color: var(--color-foreground-on-bold-background-primary); }
-
-.onStrong {
-  --_hover-bg: var(--color-interaction-on-strong-background-hover);
-  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);
-  color: var(--color-foreground-on-bold-background-secondary);
-}
-
-.onStrong.tabSelected { color: var(--color-foreground-on-bold-background-primary); }
-
-.onAlwaysDark {
-  --_hover-bg: var(--color-always-dark-interaction-hover);
-  --_pressed-bg: var(--color-always-dark-interaction-pressed);
-  color: var(--color-always-dark-foreground-secondary);
-}
-
-.onAlwaysDark.tabSelected { color: var(--color-always-dark-foreground-primary); }

package/src/components/Tab/Tab.stories.tsx

@@ -1,103 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tab } from './Tab';
-import type { TabBackground } from './Tab';
-import { Surface } from '@/components/Surface';
-
-const meta: Meta<typeof Tab> = {
-  title: 'Primitives/Tab',
-  component: Tab,
-};
-
-export default meta;
-type Story = StoryObj<typeof Tab>;
-
-export const Default: Story = {
-  render: () => {
-    const [selected, setSelected] = useState('overview');
-    const tabs = ['Overview', 'Activity', 'Settings', 'Members'];
-    return (
-      <div style={{ display: 'flex', gap: 0, padding: 24 }}>
-        {tabs.map(tab => (
-          <Tab
-            key={tab}
-            label={tab}
-            isSelected={selected === tab.toLowerCase()}
-            onClick={() => setSelected(tab.toLowerCase())}
-          />
-        ))}
-      </div>
-    );
-  },
-};
-
-export const SingleTab: Story = {
-  args: {
-    label: 'Selected Tab',
-    isSelected: true,
-  },
-};
-
-export const UnselectedTab: Story = {
-  args: {
-    label: 'Unselected Tab',
-    isSelected: false,
-  },
-};
-
-// ─── Background Context ──────────────────────────────────────────────────────
-
-const BG_CONTEXTS: { bg: TabBackground; contrast: 'faint' | 'medium' | 'bold' | 'strong' }[] = [
-  { bg: 'faint',  contrast: 'faint'  },
-  { bg: 'medium', contrast: 'medium' },
-  { bg: 'bold',   contrast: 'bold'   },
-  { bg: 'strong', contrast: 'strong' },
-];
-
-export const BackgroundContext: Story = {
-  parameters: { layout: 'padded' },
-  render: () => {
-    const [selected, setSelected] = useState<Record<string, string>>({
-      faint: 'overview', medium: 'overview', bold: 'overview', strong: 'overview', dark: 'overview',
-    });
-    const tabs = ['Overview', 'Activity', 'Settings'];
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-        {BG_CONTEXTS.map(({ bg, contrast }) => (
-          <Surface key={bg} intent="brand" contrast={contrast} radius="md" style={{ padding: 16 }}>
-            <span style={{ fontSize: 10, fontFamily: 'monospace', opacity: 0.7, display: 'block', marginBottom: 8 }}>
-              background="{bg}"
-            </span>
-            <div style={{ display: 'flex', gap: 0 }}>
-              {tabs.map(tab => (
-                <Tab
-                  key={tab}
-                  label={tab}
-                  background={bg}
-                  isSelected={selected[bg] === tab.toLowerCase()}
-                  onClick={() => setSelected(s => ({ ...s, [bg]: tab.toLowerCase() }))}
-                />
-              ))}
-            </div>
-          </Surface>
-        ))}
-        <div style={{ background: '#1a1a2e', borderRadius: 8, padding: 16 }}>
-          <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'rgba(255,255,255,0.5)', display: 'block', marginBottom: 8 }}>
-            background="always-dark"
-          </span>
-          <div style={{ display: 'flex', gap: 0 }}>
-            {tabs.map(tab => (
-              <Tab
-                key={tab}
-                label={tab}
-                background="always-dark"
-                isSelected={selected.dark === tab.toLowerCase()}
-                onClick={() => setSelected(s => ({ ...s, dark: tab.toLowerCase() }))}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/Tab/Tab.tsx

@@ -1,71 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Tab.module.css';
-
-export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-export interface TabProps {
-  /** id of this tab. Pair with the tabpanel's `aria-labelledby` to wire SR semantics. */
-  id?: string;
-  /** id of the tabpanel this tab controls. Sets `aria-controls`. */
-  controls?: string;
-  label: string;
-  isSelected?: boolean;
-  disabled?: boolean;
-  /** Parent surface context. Adjusts hover tokens and fg for tabs on colored backgrounds. */
-  background?: TabBackground;
-  onClick?: () => void;
-  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
-  /** Override tab order. Defaults to a roving pattern (0 when selected, -1 otherwise). */
-  tabIndex?: number;
-  className?: string;
-}
-
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(
-  (
-    {
-      id,
-      controls,
-      label,
-      isSelected = false,
-      disabled = false,
-      background,
-      onClick,
-      onKeyDown,
-      onFocus,
-      tabIndex,
-      className,
-    },
-    ref,
-  ) => {
-    const bgClass = background && background !== 'faint'
-      ? styles[background === 'always-dark' ? 'onAlwaysDark' : `on${background.charAt(0).toUpperCase() + background.slice(1)}`]
-      : undefined;
-    const effectiveTabIndex = tabIndex ?? (isSelected ? 0 : -1);
-    return (
-    <button
-      ref={ref}
-      id={id}
-      className={cn(styles.tab, isSelected && styles.tabSelected, bgClass, className)}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      onFocus={onFocus}
-      type="button"
-      role="tab"
-      aria-selected={isSelected}
-      aria-controls={controls}
-      aria-disabled={disabled || undefined}
-      disabled={disabled}
-      tabIndex={effectiveTabIndex}
-    >
-      <Text variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'} as="span">
-        {label}
-      </Text>
-    </button>
-    );
-  }
-);
-
-Tab.displayName = 'Tab';

package/src/components/Tab/index.ts

@@ -1,2 +0,0 @@
-export { Tab } from './Tab';
-export type { TabProps, TabBackground } from './Tab';

package/src/components/TabGroup/TabGroup.module.css

@@ -1,26 +0,0 @@
-.tabGroup {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.tabsRow {
-  display: flex;
-  gap: var(--dimension-space-025);
-}
-
-.track {
-  height: 2px;
-  background-color: var(--color-border-secondary);
-  position: relative;
-}
-
-.indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: var(--color-foreground-primary);
-  border-radius: 1px;
-  transition: transform var(--effect-motion-short-3), width var(--effect-motion-short-3);
-  will-change: transform, width;
-}

package/src/components/TabGroup/TabGroup.stories.tsx

@@ -1,91 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { TabGroup } from './TabGroup';
-
-const meta: Meta<typeof TabGroup> = {
-  title: 'Classic/TabGroup',
-  component: TabGroup,
-};
-
-export default meta;
-type Story = StoryObj<typeof TabGroup>;
-
-const TABS = [
-  { label: 'Overview', id: 'tab-overview', panelId: 'panel-overview' },
-  { label: 'Activity', id: 'tab-activity', panelId: 'panel-activity' },
-  { label: 'Settings', id: 'tab-settings', panelId: 'panel-settings' },
-  { label: 'Members', id: 'tab-members', panelId: 'panel-members' },
-];
-
-const Controlled = (props: Partial<React.ComponentProps<typeof TabGroup>>) => {
-  const tabs = props.tabs ?? TABS;
-  const [active, setActive] = useState(0);
-  const current = tabs[active];
-  return (
-    <div>
-      <TabGroup
-        tabs={tabs}
-        activeIndex={active}
-        onTabChange={setActive}
-        aria-label="Section navigation"
-        {...props}
-      />
-      <div
-        role="tabpanel"
-        id={current.panelId}
-        aria-labelledby={current.id}
-        tabIndex={0}
-        style={{ padding: '16px 0', color: 'var(--color-foreground-secondary)', fontSize: 14 }}
-      >
-        Content for: <strong>{current.label}</strong>
-      </div>
-    </div>
-  );
-};
-
-export const Playground: Story = {
-  render: () => <Controlled />,
-};
-
-export const Default: Story = {
-  render: () => <Controlled />,
-};
-
-export const ManyTabs: Story = {
-  render: () => (
-    <Controlled
-      tabs={[
-        { label: 'Dashboard', id: 'tab-dashboard', panelId: 'panel-dashboard' },
-        { label: 'Analytics', id: 'tab-analytics', panelId: 'panel-analytics' },
-        { label: 'Reports', id: 'tab-reports', panelId: 'panel-reports' },
-        { label: 'Users', id: 'tab-users', panelId: 'panel-users' },
-        { label: 'Settings', id: 'tab-settings-many', panelId: 'panel-settings-many' },
-        { label: 'Billing', id: 'tab-billing', panelId: 'panel-billing' },
-        { label: 'Integrations', id: 'tab-integrations', panelId: 'panel-integrations' },
-      ]}
-    />
-  ),
-};
-
-export const TwoTabs: Story = {
-  render: () => (
-    <Controlled
-      tabs={[
-        { label: 'Active', id: 'tab-active', panelId: 'panel-active' },
-        { label: 'Archived', id: 'tab-archived', panelId: 'panel-archived' },
-      ]}
-    />
-  ),
-};
-
-export const WithDisabledTab: Story = {
-  render: () => (
-    <Controlled
-      tabs={[
-        { label: 'Overview', id: 'tab-d-overview', panelId: 'panel-d-overview' },
-        { label: 'Activity', id: 'tab-d-activity', panelId: 'panel-d-activity', disabled: true },
-        { label: 'Settings', id: 'tab-d-settings', panelId: 'panel-d-settings' },
-      ]}
-    />
-  ),
-};