@ds-mo/ui 0.1.0

package/src/stories/Dimensions.stories.tsx

@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Design System/Dimensions',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const S: Record<string, React.CSSProperties> = {
+  page: { fontFamily: 'var(--typography-font-family, system-ui)', padding: 24, display: 'flex', flexDirection: 'column', gap: 40 },
+  section: { display: 'flex', flexDirection: 'column', gap: 12 },
+  heading: { fontSize: 18, fontWeight: 600, color: 'var(--color-foreground-primary)', margin: 0, letterSpacing: -0.3 },
+  subheading: { fontSize: 13, fontWeight: 500, color: 'var(--color-foreground-secondary)', margin: 0 },
+  row: { display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0' },
+  label: { fontSize: 11, color: 'var(--color-foreground-secondary)', minWidth: 140, flexShrink: 0, fontFamily: 'monospace' },
+};
+
+function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
+  return (
+    <div style={S.section}>
+      <div>
+        <h2 style={S.heading}>{title}</h2>
+        {subtitle && <p style={{ ...S.subheading, marginTop: 2 }}>{subtitle}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Stories ───────────────────────────────────────────────────────────────────
+
+const SPACE_TOKENS = ['000', '012', '025', '050', '075', '100', '125', '150', '175', '200', '250', '300', '400', '600', '800'] as const;
+
+function Spacing() {
+  return (
+    <div style={S.page}>
+      <Section title="Spacing" subtitle="--dimension-space-* (base: 8px)">
+        {SPACE_TOKENS.map(token => (
+          <div key={token} style={S.row}>
+            <span style={S.label}>space-{token}</span>
+            <div style={{
+              width: `var(--dimension-space-${token})`,
+              height: 20,
+              backgroundColor: 'var(--color-background-bold-brand)',
+              borderRadius: 2,
+              minWidth: token === '000' ? 0 : 1,
+              transition: 'width 0.2s',
+            }} />
+          </div>
+        ))}
+      </Section>
+    </div>
+  );
+}
+
+const SIZE_TOKENS = ['000', '050', '100', '150', '200', '250', '300', '400', '500', '600', '800'] as const;
+
+function Sizes() {
+  return (
+    <div style={S.page}>
+      <Section title="Size" subtitle="--dimension-size-* — element width/height (base: 8px)">
+        {SIZE_TOKENS.map(token => (
+          <div key={token} style={S.row}>
+            <span style={S.label}>size-{token}</span>
+            <div style={{
+              width: `var(--dimension-size-${token})`,
+              height: `var(--dimension-size-${token})`,
+              backgroundColor: 'var(--color-background-faint-brand)',
+              border: '1px solid var(--color-border-brand)',
+              borderRadius: 4,
+              minWidth: token === '000' ? 0 : 1,
+              minHeight: token === '000' ? 0 : 1,
+            }} />
+          </div>
+        ))}
+      </Section>
+
+      <Section title="Iconography Sizes" subtitle="--dimension-iconography-* — semantic icon size aliases">
+        {['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].map(token => (
+          <div key={token} style={S.row}>
+            <span style={S.label}>iconography-{token}</span>
+            <div style={{
+              width: `var(--dimension-iconography-${token})`,
+              height: `var(--dimension-iconography-${token})`,
+              backgroundColor: 'var(--color-foreground-secondary)',
+              borderRadius: 'var(--dimension-radius-050)',
+            }} />
+          </div>
+        ))}
+      </Section>
+    </div>
+  );
+}
+
+const RADIUS_TOKENS = ['000', '012', '025', '037', '050', '075', '100', '125', '150', '175', '200', '250', '275', '300', '400', '600', 'half'] as const;
+
+function Radii() {
+  return (
+    <div style={S.page}>
+      <Section title="Border Radius" subtitle="--dimension-radius-* (base: 8px, half: 9999px)">
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 12 }}>
+          {RADIUS_TOKENS.map(token => (
+            <div key={token} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+              <div style={{
+                width: 64,
+                height: 64,
+                backgroundColor: 'var(--color-background-bold-brand)',
+                borderRadius: `var(--dimension-radius-${token})`,
+              }} />
+              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
+                radius-{token}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+const STROKE_TOKENS = ['012', '015', '018', '025', '037', '050'] as const;
+
+function Strokes() {
+  return (
+    <div style={S.page}>
+      <Section title="Stroke Widths" subtitle="--dimension-stroke-width-*">
+        {STROKE_TOKENS.map(token => (
+          <div key={token} style={S.row}>
+            <span style={S.label}>stroke-width-{token}</span>
+            <div style={{
+              width: 200,
+              height: 0,
+              borderTop: `var(--dimension-stroke-width-${token}) solid var(--color-foreground-primary)`,
+            }} />
+          </div>
+        ))}
+      </Section>
+
+      <Section title="Z-Index Layers" subtitle="--dimension-z-index-*">
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          {[
+            { token: 'base', value: '0' },
+            { token: 'raised', value: '50' },
+            { token: 'overlay', value: '250' },
+            { token: 'modal', value: '450' },
+            { token: 'floating', value: '500' },
+            { token: 'tooltip', value: '750' },
+          ].map(z => (
+            <div key={z.token} style={{
+              padding: '12px 16px',
+              backgroundColor: 'var(--color-background-faint-neutral)',
+              border: '1px solid var(--color-border-tertiary)',
+              borderRadius: 8,
+              textAlign: 'center',
+            }}>
+              <div style={{ fontSize: 20, fontWeight: 600, color: 'var(--color-foreground-primary)' }}>{z.value}</div>
+              <div style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', marginTop: 4 }}>z-index-{z.token}</div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section title="Component Widths" subtitle="Cards, modals, forms, menus, panels">
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 8 }}>
+          {[
+            { group: 'card-width', tokens: ['sm', 'md', 'lg'], values: ['400', '600', '800'] },
+            { group: 'modal-width', tokens: ['sm', 'md', 'lg'], values: ['400', '600', '800'] },
+            { group: 'menu-width', tokens: ['sm', 'md', 'lg'], values: ['200', '400', '600'] },
+            { group: 'panel-width', tokens: ['xs', 'sm', 'md', 'lg', 'xl'], values: ['200', '300', '400', '500', '600'] },
+          ].map(group => (
+            <div key={group.group} style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
+              <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--color-foreground-secondary)' }}>{group.group}</span>
+              {group.tokens.map((token, i) => (
+                <div key={token} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <span style={{ ...S.label, minWidth: 80 }}>{token}</span>
+                  <div style={{
+                    width: `min(var(--dimension-${group.group}-${token}), 100%)`,
+                    height: 16,
+                    backgroundColor: 'var(--color-background-medium-brand)',
+                    borderRadius: 2,
+                  }} />
+                  <span style={{ fontSize: 10, color: 'var(--color-foreground-tertiary)' }}>{group.values[i]}px</span>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+export const SpacingStory: StoryObj = { name: 'Spacing', render: () => <Spacing /> };
+export const SizesStory: StoryObj = { name: 'Sizes', render: () => <Sizes /> };
+export const RadiiStory: StoryObj = { name: 'Radii', render: () => <Radii /> };
+export const StrokesAndMore: StoryObj = { name: 'Strokes & Layers', render: () => <Strokes /> };

package/src/stories/Effects.stories.tsx

@@ -0,0 +1,231 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Design System/Effects',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const S: Record<string, React.CSSProperties> = {
+  page: { fontFamily: 'var(--typography-font-family, system-ui)', padding: 24, display: 'flex', flexDirection: 'column', gap: 40 },
+  section: { display: 'flex', flexDirection: 'column', gap: 16 },
+  heading: { fontSize: 18, fontWeight: 600, color: 'var(--color-foreground-primary)', margin: 0, letterSpacing: -0.3 },
+  subheading: { fontSize: 13, fontWeight: 500, color: 'var(--color-foreground-secondary)', margin: 0 },
+};
+
+function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
+  return (
+    <div style={S.section}>
+      <div>
+        <h2 style={S.heading}>{title}</h2>
+        {subtitle && <p style={{ ...S.subheading, marginTop: 2 }}>{subtitle}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Stories ───────────────────────────────────────────────────────────────────
+
+const ELEVATION_LEVELS = [
+  { token: 'elevated-none', label: 'None' },
+  { token: 'depressed-sm', label: 'Depressed SM' },
+  { token: 'depressed-md', label: 'Depressed MD' },
+  { token: 'elevated-sm', label: 'Elevated SM' },
+  { token: 'elevated-md', label: 'Elevated MD' },
+  { token: 'elevated-floating', label: 'Floating' },
+] as const;
+
+const PANEL_LEVELS = [
+  { token: 'elevated-panel-top', label: 'Panel Top' },
+  { token: 'elevated-panel-right', label: 'Panel Right' },
+  { token: 'elevated-panel-bottom', label: 'Panel Bottom' },
+  { token: 'elevated-panel-left', label: 'Panel Left' },
+] as const;
+
+function Elevation() {
+  return (
+    <div style={S.page}>
+      <Section title="Elevation" subtitle="--effect-elevation-* — combined shadow + highlight">
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24, padding: 24 }}>
+          {ELEVATION_LEVELS.map(level => (
+            <div key={level.token} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+              <div style={{
+                width: 120,
+                height: 80,
+                backgroundColor: 'var(--color-background-primary)',
+                borderRadius: 8,
+                boxShadow: `var(--effect-elevation-${level.token})`,
+              }} />
+              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
+                {level.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section title="Panel Shadows" subtitle="Directional shadows for attached panels">
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24, padding: 24 }}>
+          {PANEL_LEVELS.map(level => (
+            <div key={level.token} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+              <div style={{
+                width: 120,
+                height: 80,
+                backgroundColor: 'var(--color-background-primary)',
+                borderRadius: 8,
+                boxShadow: `var(--effect-elevation-${level.token})`,
+              }} />
+              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
+                {level.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+const DURATION_TOKENS = [
+  { token: 'instant', ms: '0' },
+  { token: 'short-1', ms: '50' },
+  { token: 'short-2', ms: '100' },
+  { token: 'short-3', ms: '200' },
+  { token: 'medium-1', ms: '300' },
+  { token: 'medium-2', ms: '400' },
+  { token: 'medium-3', ms: '500' },
+  { token: 'long-1', ms: '750' },
+  { token: 'long-2', ms: '1000' },
+  { token: 'long-3', ms: '2000' },
+] as const;
+
+function MotionDemo({ token, ms }: { token: string; ms: string }) {
+  const [active, setActive] = React.useState(false);
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
+      <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', minWidth: 100, fontFamily: 'monospace' }}>
+        {token}
+      </span>
+      <span style={{ fontSize: 10, color: 'var(--color-foreground-tertiary)', minWidth: 50 }}>{ms}ms</span>
+      <div
+        style={{
+          width: 200,
+          height: 24,
+          backgroundColor: 'var(--color-background-faint-neutral)',
+          borderRadius: 12,
+          position: 'relative',
+          cursor: 'pointer',
+        }}
+        onMouseEnter={() => setActive(true)}
+        onMouseLeave={() => setActive(false)}
+      >
+        <div style={{
+          position: 'absolute',
+          top: 2,
+          left: active ? 'calc(100% - 22px)' : '2px',
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          backgroundColor: 'var(--color-background-bold-brand)',
+          transition: `left var(--effect-motion-${token})`,
+        }} />
+      </div>
+    </div>
+  );
+}
+
+function EasingDemo({ token, bezier }: { token: string; bezier: string }) {
+  const [active, setActive] = React.useState(false);
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
+      <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', minWidth: 140, fontFamily: 'monospace' }}>
+        {token}
+      </span>
+      <span style={{ fontSize: 10, color: 'var(--color-foreground-tertiary)', minWidth: 160, fontFamily: 'monospace' }}>
+        cubic-bezier({bezier})
+      </span>
+      <div
+        style={{
+          width: 200,
+          height: 24,
+          backgroundColor: 'var(--color-background-faint-neutral)',
+          borderRadius: 12,
+          position: 'relative',
+          cursor: 'pointer',
+        }}
+        onMouseEnter={() => setActive(true)}
+        onMouseLeave={() => setActive(false)}
+      >
+        <div style={{
+          position: 'absolute',
+          top: 2,
+          left: active ? 'calc(100% - 22px)' : '2px',
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          backgroundColor: 'var(--color-background-bold-positive)',
+          transition: `left var(--effect-animation-duration-medium-3) var(--effect-animation-easing-${token})`,
+        }} />
+      </div>
+    </div>
+  );
+}
+
+function Motion() {
+  return (
+    <div style={S.page}>
+      <Section title="Motion Presets" subtitle="--effect-motion-* — hover to animate">
+        {DURATION_TOKENS.map(d => (
+          <MotionDemo key={d.token} token={d.token} ms={d.ms} />
+        ))}
+      </Section>
+
+      <Section title="Easing Curves" subtitle="--effect-animation-easing-* — hover to compare curves (all use 500ms duration)">
+        {[
+          { token: 'ease-in', bezier: '0.47, 0, 0.75, 0.72' },
+          { token: 'ease-out', bezier: '0.17, 0.84, 0.44, 1' },
+          { token: 'ease-in-out', bezier: '0.77, 0, 0.18, 1' },
+          { token: 'ease-in-out-back', bezier: '0.22, 0.61, 0.01, 1.03' },
+        ].map(easing => (
+          <EasingDemo key={easing.token} token={easing.token} bezier={easing.bezier} />
+        ))}
+      </Section>
+
+      <Section title="Blur" subtitle="--effect-blur-*">
+        <div style={{ display: 'flex', gap: 24 }}>
+          {['sm', 'md', 'lg'].map(size => (
+            <div key={size} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+              <div style={{
+                width: 120,
+                height: 80,
+                borderRadius: 8,
+                overflow: 'hidden',
+                position: 'relative',
+                background: 'linear-gradient(135deg, var(--color-background-bold-brand), var(--color-background-bold-negative))',
+              }}>
+                <div style={{
+                  position: 'absolute',
+                  inset: 0,
+                  backdropFilter: `blur(var(--effect-blur-${size}))`,
+                  WebkitBackdropFilter: `blur(var(--effect-blur-${size}))`,
+                  backgroundColor: 'var(--color-background-translucent)',
+                }} />
+              </div>
+              <span style={{ fontSize: 11, color: 'var(--color-foreground-secondary)', fontFamily: 'monospace' }}>
+                blur-{size}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+export const ElevationStory: StoryObj = { name: 'Elevation', render: () => <Elevation /> };
+export const MotionStory: StoryObj = { name: 'Motion & Blur', render: () => <Motion /> };

package/src/stories/Icons.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import * as Icons from '@ds-mo/icons';
+import type { IconComponent } from '@ds-mo/icons';
+
+const meta: Meta = {
+  title: 'Design System/Icons',
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const allIcons = Object.entries(Icons).filter(
+  ([name, v]) => name !== 'createIcon' && v != null
+) as [string, IconComponent][];
+
+const SIZE_OPTIONS = [12, 16, 20, 24, 32] as const;
+type Size = typeof SIZE_OPTIONS[number];
+
+// ── Story ─────────────────────────────────────────────────────────────────────
+
+function IconGrid() {
+  const [search, setSearch]   = useState('');
+  const [size, setSize]       = useState<Size>(20);
+  const [copied, setCopied]   = useState<string | null>(null);
+
+  const filtered = allIcons.filter(([name]) =>
+    name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const copy = (name: string) => {
+    navigator.clipboard.writeText(name);
+    setCopied(name);
+    setTimeout(() => setCopied(null), 1500);
+  };
+
+  return (
+    <div style={{ fontFamily: 'var(--font-family-sans, system-ui)', padding: 24 }}>
+
+      {/* Toolbar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
+        <input
+          type="search"
+          placeholder={`Search ${allIcons.length} icons…`}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          style={{
+            flex: '1 1 240px',
+            minWidth: 200,
+            maxWidth: 400,
+            height: 36,
+            padding: '0 12px',
+            border: '1px solid var(--color-border-tertiary, #e0e0e0)',
+            borderRadius: 6,
+            fontSize: 14,
+            outline: 'none',
+            background: 'var(--color-background-primary, #fff)',
+            color: 'var(--color-foreground-primary, #111)',
+          }}
+        />
+        <div style={{ display: 'flex', gap: 4 }}>
+          {SIZE_OPTIONS.map(s => (
+            <button
+              key={s}
+              onClick={() => setSize(s)}
+              style={{
+                height: 36,
+                padding: '0 12px',
+                border: '1px solid var(--color-border-tertiary, #e0e0e0)',
+                borderRadius: 6,
+                fontSize: 13,
+                cursor: 'pointer',
+                fontWeight: size === s ? 600 : 400,
+                background: size === s
+                  ? 'var(--color-background-faint-brand, #eff3ff)'
+                  : 'var(--color-background-primary, #fff)',
+                color: size === s
+                  ? 'var(--color-foreground-bold-brand, #3a5ccc)'
+                  : 'var(--color-foreground-secondary, #555)',
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+        <span style={{ fontSize: 13, color: 'var(--color-foreground-secondary, #888)', marginLeft: 'auto' }}>
+          {filtered.length} {filtered.length === 1 ? 'icon' : 'icons'}
+        </span>
+      </div>
+
+      {/* Grid */}
+      {filtered.length === 0 ? (
+        <p style={{ color: 'var(--color-foreground-secondary, #888)', fontSize: 14 }}>
+          No icons match "{search}"
+        </p>
+      ) : (
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+          gap: 4,
+        }}>
+          {filtered.map(([name, Icon]) => (
+            <button
+              key={name}
+              onClick={() => copy(name)}
+              title={`Click to copy: ${name}`}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+                padding: '12px 8px',
+                border: '1px solid transparent',
+                borderRadius: 8,
+                cursor: 'pointer',
+                background: copied === name
+                  ? 'var(--color-background-faint-brand, #eff3ff)'
+                  : 'transparent',
+                color: 'var(--color-foreground-primary, #111)',
+                transition: 'background 0.12s',
+                textAlign: 'center',
+              }}
+              onMouseEnter={e => {
+                if (copied !== name)
+                  (e.currentTarget as HTMLElement).style.background =
+                    'var(--color-background-faint-neutral, #f5f5f5)';
+              }}
+              onMouseLeave={e => {
+                if (copied !== name)
+                  (e.currentTarget as HTMLElement).style.background = 'transparent';
+              }}
+            >
+              <Icon size={size} />
+              <span style={{
+                fontSize: 10,
+                lineHeight: 1.3,
+                color: copied === name
+                  ? 'var(--color-foreground-bold-brand, #3a5ccc)'
+                  : 'var(--color-foreground-secondary, #888)',
+                wordBreak: 'break-word',
+                maxWidth: '100%',
+              }}>
+                {copied === name ? '✓ copied' : name}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const AllIcons: StoryObj = {
+  name: 'All Icons',
+  render: () => <IconGrid />,
+};