@ds-mo/ui 0.1.0

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Skeleton } from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Classic/Skeleton',
+  component: Skeleton,
+  args: {
+    variant: 'text',
+    animate: true,
+  },
+  argTypes: {
+    variant: { control: 'select', options: ['text', 'circular', 'rectangular'] },
+    animate: { control: 'boolean' },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    lines: { control: { type: 'number', min: 1, max: 10 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Playground: Story = {};
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 24 };
+const row: React.CSSProperties = { display: 'flex', gap: 16, alignItems: 'center' };
+const section = (text: string) => (
+  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555' }}>
+    {text}
+  </div>
+);
+
+export const Variants: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={col}>
+      {section('Text (single line)')}
+      <Skeleton variant="text" width={240} />
+      {section('Text (multiple lines)')}
+      <Skeleton variant="text" lines={4} width={320} />
+      {section('Circular')}
+      <div style={row}>
+        <Skeleton variant="circular" width={32} height={32} />
+        <Skeleton variant="circular" width={40} height={40} />
+        <Skeleton variant="circular" width={56} height={56} />
+      </div>
+      {section('Rectangular')}
+      <Skeleton variant="rectangular" width={320} height={120} />
+    </div>
+  ),
+};
+
+export const CardSkeleton: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, padding: 16, border: '1px solid var(--color-border-secondary)', borderRadius: 12, width: 320 }}>
+      <Skeleton variant="circular" width={48} height={48} />
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <Skeleton variant="text" width="60%" />
+        <Skeleton variant="text" lines={2} />
+      </div>
+    </div>
+  ),
+};
+
+export const TableSkeleton: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 400 }}>
+      {Array.from({ length: 5 }, (_, i) => (
+        <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+          <Skeleton variant="text" width={120} />
+          <Skeleton variant="text" width={80} />
+          <Skeleton variant="text" width={160} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div style={col}>
+      <Skeleton variant="text" width={200} animate={false} />
+      <Skeleton variant="rectangular" width={200} height={60} animate={false} />
+    </div>
+  ),
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import styles from './Skeleton.module.css';
+
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+
+export interface SkeletonProps {
+  /** Shape of the skeleton. */
+  variant?: SkeletonVariant;
+  /** Width (CSS value). */
+  width?: string | number;
+  /** Height (CSS value). */
+  height?: string | number;
+  /** Number of text lines to render. Only applies to 'text' variant. */
+  lines?: number;
+  /** Whether to animate the shimmer. */
+  animate?: boolean;
+  className?: string;
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    {
+      variant = 'text',
+      width,
+      height,
+      lines = 1,
+      animate = true,
+      className,
+    },
+    ref
+  ) => {
+    if (variant === 'text' && lines > 1) {
+      return (
+        <div ref={ref} className={cn(styles.textGroup, className)} style={{ width }}>
+          {Array.from({ length: lines }, (_, i) => (
+            <div
+              key={i}
+              className={cn(styles.skeleton, styles.text, animate && styles.animate)}
+              style={{
+                width: i === lines - 1 ? '60%' : '100%',
+                height,
+              }}
+            />
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.skeleton,
+          styles[variant],
+          animate && styles.animate,
+          className
+        )}
+        style={{ width, height }}
+        aria-hidden="true"
+      />
+    );
+  }
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton';

package/src/components/Slider/Slider.module.css

@@ -0,0 +1,62 @@
+.field { display: flex; flex-direction: column; gap: var(--dimension-space-050); width: 100%; }
+.labelRow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dimension-space-050); }
+
+.track {
+  position: relative; width: 100%; height: var(--dimension-size-400);
+  padding: 0 var(--dimension-space-025); border-radius: var(--dimension-radius-075); cursor: pointer; -webkit-user-select: none;
+  user-select: none;
+}
+
+.trackInner {
+  position: absolute; inset: 0; border-radius: inherit;
+  background-color: var(--color-background-primary);
+  box-shadow: var(--effect-elevation-depressed-sm); pointer-events: none; z-index: 1;
+}
+
+.fillTrack { position: absolute; top: var(--dimension-space-025); right: 0; bottom: var(--dimension-space-025); left: 0; z-index: 1; }
+
+.fill {
+  position: absolute; left: var(--dimension-space-025); top: 0; bottom: 0;
+  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));
+  background-color: var(--color-background-bold-brand);
+  box-shadow: var(--effect-elevation-elevated-sm);
+  border-radius: var(--dimension-radius-050);
+  transition: opacity var(--effect-motion-short-2);
+}
+
+.trackAtMin .fill { opacity: 0; }
+
+.thumb {
+  position: absolute; top: 0; bottom: 0;
+  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));
+  width: var(--dimension-size-150); padding: var(--dimension-space-025);
+  box-sizing: border-box; pointer-events: none; z-index: 2;
+}
+
+.thumb::before {
+  content: ''; position: absolute; inset: var(--dimension-space-025);
+  background-color: var(--color-background-primary);
+  box-shadow: var(--effect-elevation-elevated-sm);
+  border-radius: var(--dimension-radius-050);
+}
+
+.thumb::after {
+  content: ''; position: absolute; inset: var(--dimension-space-025);
+  background-color: transparent; border-radius: var(--dimension-radius-050);
+  transition: var(--effect-transition-interaction-background-instant);
+}
+
+.track:hover:not(.trackInactive) .thumb::after { background-color: var(--color-interaction-hover); }
+.track:active:not(.trackInactive) .thumb::after { background-color: var(--color-interaction-pressed); }
+
+.trackInactive { cursor: not-allowed; opacity: 0.5; }
+
+.input {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  margin: 0; padding: 0; opacity: 0; cursor: pointer;
+  -webkit-appearance: none; appearance: none; outline: none; z-index: 3;
+}
+
+.input:disabled { cursor: not-allowed; }
+.input:hover { cursor: grab; }
+.input:active { cursor: grabbing; }

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

@@ -0,0 +1,120 @@
+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>
+  ),
+};
+
+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

@@ -0,0 +1,74 @@
+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;
+}
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+  ({ value, onChange, min = 0, max = 100, step = 1, label, id: idProp, inactive = false, className }, 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-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={value}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';

package/src/components/Slider/index.ts

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

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

@@ -0,0 +1,222 @@
+/**
+ * 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;
+}