@ds-mo/ui 0.2.4 → 0.4.0

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

@@ -1,89 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-.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

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

@@ -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;
-}