@ds-mo/ui 0.1.0

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardElevation, CardRadius } from './Card';

package/src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,47 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-050);
+  padding: var(--dimension-space-075);
+  height: var(--dimension-size-400);
+  box-sizing: border-box;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  border-radius: var(--dimension-radius-075);
+  transition: background-color var(--effect-motion-short-2);
+}
+
+.checkbox:hover { background-color: var(--color-interaction-hover); }
+.checkbox:active { background-color: var(--color-interaction-pressed); }
+
+.inactive {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Fallback checkbox box (when no icon components provided) */
+.box {
+  width: 20px;
+  height: 20px;
+  border: 1.5px solid var(--color-foreground-secondary);
+  border-radius: var(--dimension-radius-050);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all var(--effect-motion-short-2);
+}
+
+.boxChecked {
+  background-color: var(--color-foreground-primary);
+  border-color: var(--color-foreground-primary);
+}
+
+.checkmark {
+  color: var(--color-foreground-on-bold-background-primary);
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 700;
+}

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Primitives/Checkbox',
+  component: Checkbox,
+  args: {
+    label: 'Accept terms',
+    checked: false,
+    indeterminate: false,
+    inactive: false,
+  },
+  argTypes: {
+    label: { control: 'text' },
+    checked: { control: 'boolean' },
+    indeterminate: { control: 'boolean' },
+    inactive: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+const Controlled = (props: React.ComponentProps<typeof Checkbox>) => {
+  const [checked, setChecked] = useState(props.checked ?? false);
+  return <Checkbox {...props} checked={checked} onChange={setChecked} />;
+};
+
+export const Playground: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+// ─── Matrix ───────────────────────────────────────────────────────────────────
+
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 10 };
+const row: React.CSSProperties = { display: 'flex', gap: 32, alignItems: 'center' };
+const labelStyle: React.CSSProperties = { fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 80, flexShrink: 0 };
+const section = (text: string) => (
+  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555', marginTop: 8 }}>
+    {text}
+  </div>
+);
+
+export const Matrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ ...col, fontFamily: 'sans-serif', gap: 0 }}>
+      {section('States × Enabled / Disabled')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={labelStyle}></span>
+          <span style={{ ...labelStyle, textAlign: 'center' }}>enabled</span>
+          <span style={{ ...labelStyle, textAlign: 'center' }}>disabled</span>
+        </div>
+        <div style={row}>
+          <span style={labelStyle}>unchecked</span>
+          <Controlled label="Option" checked={false} />
+          <Checkbox label="Option" checked={false} inactive onChange={() => {}} />
+        </div>
+        <div style={row}>
+          <span style={labelStyle}>checked</span>
+          <Controlled label="Option" checked={true} />
+          <Checkbox label="Option" checked={true} inactive onChange={() => {}} />
+        </div>
+        <div style={row}>
+          <span style={labelStyle}>indeterminate</span>
+          <Checkbox label="Select all" checked={false} indeterminate onChange={() => {}} />
+          <Checkbox label="Select all" checked={false} indeterminate inactive onChange={() => {}} />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ─── Individual stories ───────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: () => <Controlled label="Accept terms and conditions" />,
+};
+
+export const Checked: Story = {
+  render: () => <Controlled label="Checked option" checked />,
+};
+
+export const Indeterminate: Story = {
+  render: () => (
+    <Checkbox
+      label="Select all (3 of 5 selected)"
+      checked={false}
+      indeterminate
+      onChange={() => {}}
+    />
+  ),
+};
+
+export const Inactive: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Checkbox label="Disabled unchecked" checked={false} inactive onChange={() => {}} />
+      <Checkbox label="Disabled checked" checked={true} inactive onChange={() => {}} />
+      <Checkbox label="Disabled indeterminate" checked={false} indeterminate inactive onChange={() => {}} />
+    </div>
+  ),
+};
+
+export const Group: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Set<string>>(new Set(['option-b']));
+    const toggle = (key: string) => setSelected(prev => {
+      const next = new Set(prev);
+      next.has(key) ? next.delete(key) : next.add(key);
+      return next;
+    });
+    const options = ['Option A', 'Option B', 'Option C', 'Option D'];
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {options.map(opt => (
+          <Checkbox
+            key={opt}
+            label={opt}
+            checked={selected.has(opt.toLowerCase().replace(' ', '-'))}
+            onChange={() => toggle(opt.toLowerCase().replace(' ', '-'))}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import type { IconComponent } from '@/types/icons';
+import styles from './Checkbox.module.css';
+
+export interface CheckboxProps {
+  label: string;
+  checked?: boolean;
+  indeterminate?: boolean;
+  onChange?: (checked: boolean) => void;
+  inactive?: boolean;
+  className?: string;
+  /** Icon for checked state. */
+  checkedIcon?: IconComponent;
+  /** Icon for unchecked state. */
+  uncheckedIcon?: IconComponent;
+  /** Icon for indeterminate state. */
+  indeterminateIcon?: IconComponent;
+}
+
+export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
+  (
+    {
+      label,
+      checked = false,
+      indeterminate = false,
+      onChange,
+      inactive = false,
+      className,
+      checkedIcon: CheckedIcon,
+      uncheckedIcon: UncheckedIcon,
+      indeterminateIcon: IndeterminateIcon,
+    },
+    ref
+  ) => {
+    const handleClick = () => {
+      if (!inactive) onChange?.(!checked);
+    };
+
+    const iconColor = indeterminate || checked ? 'var(--color-foreground-primary)' : 'var(--color-foreground-secondary)';
+    const Icon = indeterminate ? IndeterminateIcon : checked ? CheckedIcon : UncheckedIcon;
+
+    return (
+      <div
+        ref={ref}
+        role="checkbox"
+        aria-checked={indeterminate ? 'mixed' : checked}
+        aria-inactive={inactive}
+        tabIndex={inactive ? -1 : 0}
+        className={cn(styles.checkbox, inactive && styles.inactive, className)}
+        onClick={handleClick}
+        onKeyDown={e => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); handleClick(); } }}
+      >
+        {Icon ? <Icon size={20} color={iconColor} /> : (
+          <span className={cn(styles.box, (checked || indeterminate) && styles.boxChecked)}>
+            {(checked || indeterminate) && <span className={styles.checkmark}>{indeterminate ? '−' : '✓'}</span>}
+          </span>
+        )}
+        <Text variant="text-body-medium" as="span" color="inherit">
+          {label}
+        </Text>
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/components/Checkbox/index.ts

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

package/src/components/Divider/Divider.module.css

@@ -0,0 +1,19 @@
+.divider {
+  border: none;
+  margin: 0;
+  flex-shrink: 0;
+  background-color: var(--color-border-secondary);
+}
+
+/* Horizontal (default) */
+.divider:not(.vertical) {
+  width: 100%;
+  height: 1px;
+}
+
+/* Vertical */
+.vertical {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Divider } from './Divider';
+import { Text } from '@/components/Text';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Classic/Divider',
+  component: Divider,
+  args: {
+    orientation: 'horizontal',
+  },
+  argTypes: {
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Playground: Story = {};
+
+export const Horizontal: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
+      <Text variant="text-body-medium" as="p">Section one content above the divider.</Text>
+      <Divider />
+      <Text variant="text-body-medium" as="p">Section two content below the divider.</Text>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16, height: 40 }}>
+      <Text variant="text-body-medium" as="span">Left</Text>
+      <Divider orientation="vertical" />
+      <Text variant="text-body-medium" as="span">Right</Text>
+    </div>
+  ),
+};
+
+export const InList: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', width: 280 }}>
+      {['Item 1', 'Item 2', 'Item 3', 'Item 4'].map((item, i) => (
+        <React.Fragment key={item}>
+          {i > 0 && <Divider />}
+          <div style={{ padding: '12px 0' }}>
+            <Text variant="text-body-medium" as="span">{item}</Text>
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  ),
+};

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import styles from './Divider.module.css';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+export interface DividerProps {
+  /** Direction of the divider line. */
+  orientation?: DividerOrientation;
+  className?: string;
+}
+
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(
+  ({ orientation = 'horizontal', className }, ref) => (
+    <hr
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      className={cn(
+        styles.divider,
+        orientation === 'vertical' && styles.vertical,
+        className
+      )}
+    />
+  )
+);
+
+Divider.displayName = 'Divider';

package/src/components/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerOrientation } from './Divider';

package/src/components/EmptyState/EmptyState.module.css

@@ -0,0 +1,8 @@
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+  width: 100%;
+}

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EmptyState } from './EmptyState';
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+};
+
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+
+export const NoContent: Story = {
+  args: {
+    type: 'no-content',
+  },
+};
+
+export const NoResults: Story = {
+  args: {
+    type: 'no-results',
+  },
+};
+
+export const NoResultsFilter: Story = {
+  args: {
+    type: 'no-results-filter',
+  },
+};
+
+export const NoAccess: Story = {
+  args: {
+    type: 'no-access',
+  },
+};
+
+export const CustomMessage: Story = {
+  args: {
+    type: 'no-content',
+    message: 'Create your first project to get started.',
+  },
+};
+
+export const AllTypes: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, padding: 24 }}>
+      {(['no-content', 'no-results', 'no-results-filter', 'no-access'] as const).map(type => (
+        <div key={type} style={{ border: '1px solid var(--color-border-tertiary)', borderRadius: 8, padding: 24 }}>
+          <EmptyState type={type} />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import styles from './EmptyState.module.css';
+
+export type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';
+
+const defaultMessages: Record<EmptyStateType, string> = {
+  'no-content': 'No page contents to display.',
+  'no-results': 'No results found.',
+  'no-results-filter': 'No results found. Please update search criteria.',
+  'no-access': "You don't have access to this page.",
+};
+
+export interface EmptyStateProps {
+  type?: EmptyStateType;
+  message?: string;
+  className?: string;
+}
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ type = 'no-content', message, className }, ref) => (
+    <div ref={ref} className={cn(styles.emptyState, className)}>
+      <Text variant="text-body-medium" as="p" color="secondary">
+        {message || defaultMessages[type]}
+      </Text>
+    </div>
+  )
+);
+
+EmptyState.displayName = 'EmptyState';

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateType } from './EmptyState';

package/src/components/ErrorBoundary/ErrorBoundary.module.css

@@ -0,0 +1,18 @@
+.errorBoundary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  padding: var(--dimension-space-400);
+  gap: var(--dimension-space-200);
+}
+
+.errorDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dimension-space-200);
+  max-width: 600px;
+  text-align: center;
+}

package/src/components/ErrorBoundary/ErrorBoundary.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ErrorBoundary } from './ErrorBoundary';
+
+const meta: Meta<typeof ErrorBoundary> = {
+  title: 'Components/ErrorBoundary',
+  component: ErrorBoundary,
+};
+
+export default meta;
+type Story = StoryObj<typeof ErrorBoundary>;
+
+const ThrowingComponent = () => {
+  throw new Error('Something went wrong!');
+};
+
+export const WithError: Story = {
+  render: () => (
+    <ErrorBoundary>
+      <ThrowingComponent />
+    </ErrorBoundary>
+  ),
+};
+
+export const WithCustomFallback: Story = {
+  render: () => (
+    <ErrorBoundary fallback={<div style={{ padding: 24, color: 'var(--color-foreground-bold-negative)' }}>Custom error UI</div>}>
+      <ThrowingComponent />
+    </ErrorBoundary>
+  ),
+};
+
+export const NoError: Story = {
+  render: () => (
+    <ErrorBoundary>
+      <div style={{ padding: 24 }}>This content renders normally.</div>
+    </ErrorBoundary>
+  ),
+};

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,50 @@
+import React, { Component, ReactNode } from 'react';
+import { EmptyState } from '@/components/EmptyState';
+import { Text } from '@/components/Text';
+import styles from './ErrorBoundary.module.css';
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  override render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return (
+        <div className={styles.errorBoundary}>
+          <EmptyState type="no-content" />
+          <div className={styles.errorDetails}>
+            <Text variant="text-body-small" as="p" color="secondary">
+              Something went wrong. Please refresh the page.
+            </Text>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/components/ErrorBoundary/index.ts

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

package/src/components/Fade/Fade.module.css

@@ -0,0 +1,31 @@
+.fade {
+  position: absolute;
+  pointer-events: none;
+  z-index: 10;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade { transition: none; }
+}
+
+.fadeTop {
+  top: 0; left: 0; right: 0;
+  background: linear-gradient(to bottom, var(--background) 0%, var(--background) 50%, transparent 100%);
+}
+
+.fadeBottom {
+  bottom: 0; left: 0; right: 0;
+  background: linear-gradient(to top, var(--background) 0%, transparent 100%);
+}
+
+.fadeLeft {
+  top: 0; bottom: 0; left: 0;
+  background: linear-gradient(to right, var(--background) 0%, transparent 100%);
+}
+
+.fadeRight {
+  top: 0; bottom: 0; right: 0;
+  background: linear-gradient(to left, var(--background) 0%, transparent 100%);
+}

package/src/components/Fade/Fade.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Fade } from './Fade';
+
+const meta: Meta<typeof Fade> = {
+  title: 'Layout/Fade',
+  component: Fade,
+};
+
+export default meta;
+type Story = StoryObj<typeof Fade>;
+
+export const Sides: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, padding: 24 }}>
+      {(['top', 'bottom', 'left', 'right'] as const).map(side => (
+        <div
+          key={side}
+          style={{
+            position: 'relative',
+            height: 120,
+            background: 'var(--color-background-secondary)',
+            borderRadius: 8,
+            overflow: 'hidden',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span>{side}</span>
+          <Fade side={side} height="40px" />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/Fade/Fade.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import styles from './Fade.module.css';
+
+export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
+
+export interface FadeProps {
+  side: FadeSide;
+  height: string;
+  background?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const sideClassMap: Record<FadeSide, string> = {
+  top: 'fadeTop',
+  bottom: 'fadeBottom',
+  left: 'fadeLeft',
+  right: 'fadeRight',
+};
+
+export const Fade = forwardRef<HTMLDivElement, FadeProps>(
+  ({ side, height, background = 'var(--color-background-secondary)', className, style = {} }, ref) => (
+    <div
+      ref={ref}
+      className={cn(styles.fade, styles[sideClassMap[side]], className)}
+      style={{ ...style, height, '--background': background } as React.CSSProperties}
+      aria-hidden="true"
+    />
+  )
+);
+
+Fade.displayName = 'Fade';

package/src/components/Fade/index.ts

@@ -0,0 +1,2 @@
+export { Fade } from './Fade';
+export type { FadeProps, FadeSide } from './Fade';