@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Slider/Slider.stories.tsx

@@ -1,145 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Slider } from './Slider';
-
-const meta: Meta<typeof Slider> = {
-  title: 'Primitives/Slider',
-  component: Slider,
-  args: {
-    label: 'Value',
-    min: 0,
-    max: 100,
-    step: 1,
-    inactive: false,
-  },
-  argTypes: {
-    label: { control: 'text' },
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    inactive: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Slider>;
-
-const Controlled = (props: Omit<React.ComponentProps<typeof Slider>, 'value' | 'onChange'> & { initialValue?: number }) => {
-  const [value, setValue] = useState(props.initialValue ?? 50);
-  return <Slider {...props} value={value} onChange={setValue} />;
-};
-
-export const Playground: Story = {
-  render: (args) => <Controlled {...args} />,
-};
-
-// ─── Matrix ───────────────────────────────────────────────────────────────────
-
-const SNAPSHOTS = [0, 25, 50, 75, 100];
-
-const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 12 };
-const row: React.CSSProperties = { display: 'flex', gap: 16, alignItems: 'center' };
-const labelStyle: React.CSSProperties = { fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 72, flexShrink: 0 };
-const sliderCell: React.CSSProperties = { width: 200, flexShrink: 0 };
-const section = (text: string) => (
-  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555', marginTop: 8 }}>
-    {text}
-  </div>
-);
-const divider = <hr style={{ border: 'none', borderTop: '1px solid #e0e0e0', margin: '16px 0' }} />;
-
-export const Matrix: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ ...col, fontFamily: 'sans-serif', gap: 0 }}>
-
-      {section('Values (0–100)')}
-      <div style={{ ...col, marginTop: 12 }}>
-        {SNAPSHOTS.map(v => (
-          <div key={v} style={row}>
-            <span style={labelStyle}>{v}%</span>
-            <div style={sliderCell}>
-              <Slider label="Volume" value={v} onChange={() => {}} />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {divider}
-
-      {section('States')}
-      <div style={{ ...col, marginTop: 12 }}>
-        <div style={row}>
-          <span style={labelStyle}>enabled</span>
-          <div style={sliderCell}><Controlled label="Brightness" initialValue={60} /></div>
-        </div>
-        <div style={row}>
-          <span style={labelStyle}>Inactive</span>
-          <div style={sliderCell}><Slider label="Brightness" value={60} inactive onChange={() => {}} /></div>
-        </div>
-        <div style={row}>
-          <span style={labelStyle}>at min</span>
-          <div style={sliderCell}><Slider label="Brightness" value={0} onChange={() => {}} /></div>
-        </div>
-        <div style={row}>
-          <span style={labelStyle}>at max</span>
-          <div style={sliderCell}><Slider label="Brightness" value={100} onChange={() => {}} /></div>
-        </div>
-      </div>
-
-    </div>
-  ),
-};
-
-// ─── Individual stories ───────────────────────────────────────────────────────
-
-export const Default: Story = {
-  render: () => (
-    <div style={{ width: 280 }}>
-      <Controlled label="Volume" initialValue={50} />
-    </div>
-  ),
-};
-
-export const CustomRange: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 280 }}>
-      <Controlled label="Rating (0–10)" min={0} max={10} step={1} initialValue={7} />
-      <Controlled label="Opacity (0–1)" min={0} max={1} step={0.1} initialValue={0.8} />
-    </div>
-  ),
-};
-
-const SIGNAL_LABELS = ['Off', 'Low', 'Medium', 'High', 'Max'];
-
-const SignalSlider = () => {
-  const [value, setValue] = useState(2);
-  return (
-    <Slider
-      label="Signal strength"
-      min={0}
-      max={4}
-      step={1}
-      value={value}
-      onChange={setValue}
-      valueText={SIGNAL_LABELS[value]}
-    />
-  );
-};
-
-export const NonNumericValueText: Story = {
-  render: () => (
-    <div style={{ width: 280 }}>
-      <SignalSlider />
-    </div>
-  ),
-};
-
-export const Inactive: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 280 }}>
-      <Slider label="Brightness" value={30} inactive onChange={() => {}} />
-      <Slider label="Contrast" value={70} inactive onChange={() => {}} />
-    </div>
-  ),
-};

package/src/components/Slider/Slider.tsx

@@ -1,74 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Slider.module.css';
-
-export interface SliderProps {
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  label: string;
-  id?: string;
-  inactive?: boolean;
-  className?: string;
-  /** Human-readable text for assistive tech when the numeric value alone isn't meaningful (e.g. "Low", "Medium", "High"). Maps to `aria-valuetext`. */
-  valueText?: string;
-}
-
-export const Slider = forwardRef<HTMLDivElement, SliderProps>(
-  ({ value, onChange, min = 0, max = 100, step = 1, label, id: idProp, inactive = false, className, valueText }, ref) => {
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [pct, setPct] = useState(() => {
-      const range = max - min;
-      return range === 0 ? 0 : Math.round(((value - min) / range) * 100);
-    });
-
-    const sync = useCallback(() => {
-      const range = max - min;
-      setPct(range === 0 ? 0 : Math.round(((value - min) / range) * 100));
-    }, [value, min, max]);
-
-    useEffect(() => { sync(); }, [sync]);
-
-    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange(Number(e.target.value));
-    };
-
-    return (
-      <div ref={ref} className={cn(styles.field, className)}>
-        <div className={styles.labelRow}>
-          <Text variant="text-body-small-emphasis" as="label" htmlFor={id}>{label}</Text>
-          <Text variant="text-body-small-emphasis" as="span">{value}</Text>
-        </div>
-        <div
-          ref={containerRef}
-          className={cn(styles.track, inactive && styles.trackInactive, pct === 0 && styles.trackAtMin)}
-          style={{ '--slider-pct': pct } as React.CSSProperties}
-        >
-          <div className={styles.trackInner}>
-            <div className={styles.fillTrack}><div className={styles.fill} /></div>
-            <div className={styles.thumb} />
-          </div>
-          <input
-            type="range"
-            id={id}
-            min={min}
-            max={max}
-            step={step}
-            value={value}
-            onChange={handleInput}
-            disabled={inactive}
-            className={styles.input}
-            aria-valuetext={valueText}
-          />
-        </div>
-      </div>
-    );
-  }
-);
-
-Slider.displayName = 'Slider';

package/src/components/Slider/index.ts

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

package/src/components/Surface/Surface.module.css

@@ -1,222 +0,0 @@
-/**
- * Surface — lean container primitive.
- * Backgrounds, elevation, edges, radius, and interactive states.
- * Hover/pressed via direct background-color + color-mix(). No pseudo-element overlays.
- */
-
-.surface {
-  box-sizing: border-box;
-  position: relative;
-  /* Reset native button/anchor chrome when rendered as those elements */
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  background: none;
-  text-decoration: none;
-  text-align: left;
-  cursor: default;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-/* ==========================================================================
-   Backgrounds
-   ========================================================================== */
-
-.bgPrimary {
-  background-color: var(--color-background-primary);
-}
-
-.bgSecondary {
-  background-color: var(--color-background-secondary);
-}
-
-.bgTransparent {
-  background-color: transparent;
-}
-
-.bgTranslucent {
-  background-color: var(--color-background-translucent);
-  backdrop-filter: blur(var(--effect-blur-md));
-  -webkit-backdrop-filter: blur(var(--effect-blur-md));
-}
-
-/* ==========================================================================
-   Semantic Intent Backgrounds — intent{Intent}{Contrast}
-   ========================================================================== */
-
-/* Brand */
-.intentBrandFaint { background-color: var(--color-background-faint-brand); }
-.intentBrandMedium { background-color: var(--color-background-medium-brand); }
-.intentBrandBold { background-color: var(--color-background-bold-brand); }
-.intentBrandStrong { background-color: var(--color-background-strong-brand); }
-
-/* Positive */
-.intentPositiveFaint { background-color: var(--color-background-faint-positive); }
-.intentPositiveMedium { background-color: var(--color-background-medium-positive); }
-.intentPositiveBold { background-color: var(--color-background-bold-positive); }
-.intentPositiveStrong { background-color: var(--color-background-strong-positive); }
-
-/* Negative */
-.intentNegativeFaint { background-color: var(--color-background-faint-negative); }
-.intentNegativeMedium { background-color: var(--color-background-medium-negative); }
-.intentNegativeBold { background-color: var(--color-background-bold-negative); }
-.intentNegativeStrong { background-color: var(--color-background-strong-negative); }
-
-/* Warning */
-.intentWarningFaint { background-color: var(--color-background-faint-warning); }
-.intentWarningMedium { background-color: var(--color-background-medium-warning); }
-.intentWarningBold { background-color: var(--color-background-bold-warning); }
-.intentWarningStrong { background-color: var(--color-background-strong-warning); }
-
-/* Caution */
-.intentCautionFaint { background-color: var(--color-background-faint-caution); }
-.intentCautionMedium { background-color: var(--color-background-medium-caution); }
-.intentCautionBold { background-color: var(--color-background-bold-caution); }
-.intentCautionStrong { background-color: var(--color-background-strong-caution); }
-
-/* AI */
-.intentAiFaint { background-color: var(--color-background-faint-ai); }
-.intentAiMedium { background-color: var(--color-background-medium-ai); }
-.intentAiBold { background-color: var(--color-background-bold-ai); }
-.intentAiStrong { background-color: var(--color-background-strong-ai); }
-
-/* Neutral */
-.intentNeutralFaint { background-color: var(--color-background-faint-neutral); }
-.intentNeutralMedium { background-color: var(--color-background-medium-neutral); }
-.intentNeutralBold { background-color: var(--color-background-bold-neutral); }
-.intentNeutralStrong { background-color: var(--color-background-strong-neutral); }
-
-/* Walkthrough */
-.intentWalkthroughFaint { background-color: var(--color-background-faint-walkthrough); }
-.intentWalkthroughMedium { background-color: var(--color-background-medium-walkthrough); }
-.intentWalkthroughBold { background-color: var(--color-background-bold-walkthrough); }
-.intentWalkthroughStrong { background-color: var(--color-background-strong-walkthrough); }
-
-/* Guide */
-.intentGuideFaint { background-color: var(--color-background-faint-guide); }
-.intentGuideMedium { background-color: var(--color-background-medium-guide); }
-.intentGuideBold { background-color: var(--color-background-bold-guide); }
-.intentGuideStrong { background-color: var(--color-background-strong-guide); }
-
-/* ==========================================================================
-   Elevation — progressive: none → flat → elevated → floating
-   ========================================================================== */
-
-.elevationNone {}
-
-.elevationDepressed {
-  box-shadow: var(--effect-elevation-depressed-sm);
-}
-
-.elevationDepressedMd {
-  box-shadow: var(--effect-elevation-depressed-md);
-}
-
-.elevationFlat {
-  box-shadow: var(--effect-elevation-elevated-sm);
-}
-
-.elevationElevated {
-  box-shadow: var(--effect-elevation-elevated-md);
-}
-
-.elevationFloating {
-  box-shadow: var(--effect-elevation-elevated-floating);
-}
-
-.elevationOverlayTop {
-  box-shadow: var(--effect-elevation-elevated-panel-top);
-}
-
-.elevationOverlayRight {
-  box-shadow: var(--effect-elevation-elevated-panel-right);
-}
-
-.elevationOverlayBottom {
-  box-shadow: var(--effect-elevation-elevated-panel-bottom);
-}
-
-.elevationOverlayLeft {
-  box-shadow: var(--effect-elevation-elevated-panel-left);
-}
-
-/* ==========================================================================
-   Edge Borders (only when elevation='none')
-   ========================================================================== */
-
-.edgeTop { border-top: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }
-.edgeRight { border-right: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }
-.edgeBottom { border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }
-.edgeLeft { border-left: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }
-
-/* ==========================================================================
-   Corner Radius
-   ========================================================================== */
-
-.radiusNone { border-radius: var(--dimension-radius-000); }
-.radiusXs { border-radius: var(--dimension-radius-050); }
-.radiusSm { border-radius: var(--dimension-radius-075); }
-.radiusMd { border-radius: var(--dimension-radius-100); }
-.radiusLg { border-radius: var(--dimension-radius-125); }
-.radiusXl { border-radius: var(--dimension-radius-175); }
-.radius2xl { border-radius: var(--dimension-radius-200); }
-.radiusFull { border-radius: var(--dimension-radius-half); }
-
-/* ==========================================================================
-   Interactive States — direct background-color, no pseudo-elements
-   ========================================================================== */
-
-.interactive {
-  cursor: pointer;
-  transition: transform var(--effect-motion-short-2);
-
-  /* Interaction — ghost defaults */
-  --_hover-bg: var(--color-interaction-hover);
-  --_pressed-bg: var(--color-interaction-pressed);
-}
-
-.interactive:hover {
-  background-color: var(--_hover-bg);
-}
-
-.interactive:active {
-  background-color: var(--_pressed-bg);
-  transform: scale(var(--dimension-scale-subtle));
-}
-
-.interactive:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
-  outline-offset: var(--dimension-space-025);
-}
-
-/* ==========================================================================
-   Selected State — persistent overlay on any background via ::before
-   ========================================================================== */
-
-.selected::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  z-index: 0;
-  background-color: var(--color-interaction-hover);
-}
-
-.selected > * {
-  position: relative;
-  z-index: 1;
-}
-
-/* ==========================================================================
-   Inactive State
-   ========================================================================== */
-
-.inactive {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}

package/src/components/Surface/Surface.stories.tsx

@@ -1,213 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { Surface } from './Surface';
-import type { SurfaceIntent, SurfaceContrast, SurfaceElevation } from './Surface';
-
-const INTENTS: SurfaceIntent[]   = ['brand', 'positive', 'negative', 'warning', 'caution', 'ai', 'neutral'];
-const CONTRASTS: SurfaceContrast[] = ['faint', 'medium', 'bold', 'strong'];
-const ELEVATIONS: SurfaceElevation[] = ['none', 'depressed', 'depressed-md', 'flat', 'elevated', 'floating'];
-
-const meta: Meta<typeof Surface> = {
-  title: 'Primitives (Reviewed)/Surface',
-  component: Surface,
-  args: {
-    background: 'primary',
-    elevation: 'elevated',
-    radius: 'lg',
-    children: 'Surface content',
-  },
-  argTypes: {
-    background: { control: 'select', options: ['primary', 'secondary', 'transparent', 'translucent'] },
-    intent:     { control: 'select', options: INTENTS },
-    contrast:   { control: 'select', options: CONTRASTS },
-    elevation:  { control: 'select', options: [...ELEVATIONS, 'overlayTop', 'overlayRight', 'overlayBottom', 'overlayLeft'] },
-    radius:     { control: 'select', options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'] },
-    interactive:{ control: 'boolean' },
-    selected:   { control: 'boolean' },
-    inactive:   { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Surface>;
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-const monoLabel = (text: string, minWidth = 80) => (
-  <span style={{ fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)', minWidth, flexShrink: 0 }}>
-    {text}
-  </span>
-);
-
-const divider = <hr style={{ border: 'none', borderTop: '1px solid var(--color-border-tertiary)', margin: '16px 0' }} />;
-
-// ─── Stories ──────────────────────────────────────────────────────────────────
-
-export const Playground: Story = {
-  args: {
-    style: { padding: 24, minWidth: 240, minHeight: 100 },
-  },
-};
-
-export const Elevations: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    /* Secondary background provides the contrast needed to see depressed vs elevated */
-    <div style={{ background: 'var(--color-background-secondary)', padding: 40, borderRadius: 16, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start' }}>
-      {ELEVATIONS.map(elevation => (
-        <Surface
-          key={elevation}
-          background="primary"
-          elevation={elevation}
-          radius="lg"
-          style={{ padding: '20px 24px', minWidth: 130, textAlign: 'center', fontSize: 11, fontFamily: 'monospace' }}
-        >
-          {elevation}
-        </Surface>
-      ))}
-    </div>
-  ),
-};
-
-export const PanelOverlays: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
-      {(['overlayTop', 'overlayBottom', 'overlayLeft', 'overlayRight'] as const).map(elevation => {
-        const isTop    = elevation === 'overlayTop';
-        const isBottom = elevation === 'overlayBottom';
-        const isLeft   = elevation === 'overlayLeft';
-        return (
-          <div key={elevation} style={{ position: 'relative', height: 120, overflow: 'hidden', borderRadius: 10, background: 'var(--color-background-secondary)' }}>
-            <Surface
-              background="primary"
-              elevation={elevation}
-              style={{
-                position: 'absolute',
-                textAlign: 'center',
-                fontSize: 11,
-                fontFamily: 'monospace',
-                ...(isTop    ? { top: 0, left: 0, right: 0, padding: 16 } : {}),
-                ...(isBottom ? { bottom: 0, left: 0, right: 0, padding: 16 } : {}),
-                ...(isLeft   ? { top: 0, bottom: 0, left: 0, width: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
-                ...(!isTop && !isBottom && !isLeft ? { top: 0, bottom: 0, right: 0, width: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
-              }}
-            >
-              {elevation}
-            </Surface>
-          </div>
-        );
-      })}
-    </div>
-  ),
-};
-
-export const IntentMatrix: Story = {
-  name: 'Intent × Contrast',
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-      {/* Header */}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 4, marginLeft: 88 }}>
-        {CONTRASTS.map(c => (
-          <span key={c} style={{ minWidth: 140, textAlign: 'center', fontSize: 10, fontFamily: 'monospace', color: 'var(--color-foreground-tertiary)' }}>{c}</span>
-        ))}
-      </div>
-      {INTENTS.map(intent => (
-        <div key={intent} style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
-          {monoLabel(intent, 88)}
-          {CONTRASTS.map(contrast => (
-            <Surface
-              key={contrast}
-              intent={intent}
-              contrast={contrast}
-              radius="md"
-              style={{ minWidth: 140, padding: '10px 16px', fontSize: 11, fontFamily: 'monospace', textAlign: 'center' }}
-            >
-              {intent} / {contrast}
-            </Surface>
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Backgrounds: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', gap: 16 }}>
-      {(['primary', 'secondary', 'translucent', 'transparent'] as const).map(bg => (
-        <div key={bg} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
-          <Surface
-            background={bg}
-            elevation="flat"
-            radius="lg"
-            style={{ width: 140, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace' }}
-          >
-            {bg}
-          </Surface>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const Interactive: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-      {([
-        { label: 'default',            props: {} },
-        { label: 'interactive',        props: { interactive: true } },
-        { label: 'selected',           props: { interactive: true, selected: true } },
-        { label: 'inactive',           props: { inactive: true } },
-        { label: 'as="button"',        props: { interactive: true, as: 'button' as const } },
-      ]).map(({ label, props }) => (
-        <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
-          <Surface
-            background="primary"
-            elevation="elevated"
-            radius="lg"
-            style={{ width: 160, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace', cursor: props.interactive ? 'pointer' : 'default' }}
-            {...props}
-          >
-            {label}
-          </Surface>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const EdgeDividers: Story = {
-  parameters: { layout: 'padded' },
-  render: () => (
-    <div style={{ display: 'flex', gap: 40, alignItems: 'flex-start' }}>
-      {/* Single edge variants */}
-      <div style={{ display: 'flex', gap: 16 }}>
-        {(['top', 'right', 'bottom', 'left'] as const).map(edge => (
-          <div key={edge} style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
-            {monoLabel(edge)}
-            <Surface
-              edge={edge}
-              style={{ width: 80, height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: 'monospace' }}
-            >
-              {edge}
-            </Surface>
-          </div>
-        ))}
-      </div>
-      {divider}
-      {/* Stacked sections pattern */}
-      <div>
-        {monoLabel('stacked sections')}
-        <div style={{ width: 200, marginTop: 8 }}>
-          <Surface edge="bottom" style={{ padding: '12px 16px', fontSize: 12 }}>Section 1</Surface>
-          <Surface edge="bottom" style={{ padding: '12px 16px', fontSize: 12 }}>Section 2</Surface>
-          <Surface style={{ padding: '12px 16px', fontSize: 12 }}>Section 3</Surface>
-        </div>
-      </div>
-    </div>
-  ),
-};