@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Card/index.ts

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

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

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

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

@@ -1,71 +0,0 @@
-import React, { forwardRef, useId } 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 labelId = useId();
-    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-disabled={inactive || undefined}
-        aria-labelledby={labelId}
-        data-inactive={inactive || undefined}
-        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 id={labelId} variant="text-body-medium" as="span" color="inherit">
-          {label}
-        </Text>
-      </div>
-    );
-  }
-);
-
-Checkbox.displayName = 'Checkbox';

package/src/components/Checkbox/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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