@ds-mo/ui 0.3.0 → 0.4.0

package/src/components/Sidebar/Sidebar.tsx

@@ -1,227 +0,0 @@
-import React, { forwardRef, useRef, useCallback, useEffect, useState } from 'react';
-import { cn } from '@/utils/cn';
-import styles from './Sidebar.module.css';
-
-export type SidebarWidth = 'mini' | 'default' | number;
-
-export interface SidebarProps {
-  children: React.ReactNode;
-  isCollapsed?: boolean;
-  onToggle?: () => void;
-  width?: SidebarWidth;
-  onWidthChange?: (width: SidebarWidth) => void;
-  resizable?: boolean;
-  footer?: React.ReactNode;
-  className?: string;
-  isMobile?: boolean;
-}
-
-const MINI_WIDTH = 56;
-const DEFAULT_WIDTH = 240;
-const MAX_WIDTH = 480;
-const MIN_DRAG_WIDTH = 180;
-const SNAP_THRESHOLD = 140;
-const KEYBOARD_STEP = 16;
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',');
-
-export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
-  ({
-    children,
-    isCollapsed = false,
-    onToggle,
-    width = 'default',
-    onWidthChange,
-    resizable = true,
-    footer,
-    className,
-    isMobile = false,
-  }, ref) => {
-    const internalRef = useRef<HTMLElement>(null);
-    const sidebarRef = (ref as React.RefObject<HTMLElement>) || internalRef;
-    const triggerRef = useRef<HTMLElement | null>(null);
-    const [isResizing, setIsResizing] = useState(false);
-
-    const isMini = width === 'mini';
-    const resolvedWidth = width === 'mini' ? MINI_WIDTH : width === 'default' ? DEFAULT_WIDTH : width;
-
-    const handleMouseDown = useCallback((e: React.MouseEvent) => {
-      if (!resizable || !onWidthChange) return;
-      e.preventDefault();
-      setIsResizing(true);
-
-      const handleMouseMove = (e: MouseEvent) => {
-        const newWidth = e.clientX;
-        if (newWidth < SNAP_THRESHOLD) {
-          onWidthChange('mini');
-        } else if (newWidth < MIN_DRAG_WIDTH) {
-          onWidthChange('default');
-        } else {
-          onWidthChange(newWidth);
-        }
-      };
-
-      const handleMouseUp = () => {
-        setIsResizing(false);
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-      };
-
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-    }, [resizable, onWidthChange]);
-
-    // Keyboard resize: arrows step, Home → mini, End → max.
-    // Stepping below MIN_DRAG_WIDTH snaps to 'mini'; stepping up from 'mini' snaps to 'default'.
-    const handleResizeKeyDown = useCallback((e: React.KeyboardEvent) => {
-      if (!resizable || !onWidthChange) return;
-      switch (e.key) {
-        case 'ArrowLeft': {
-          e.preventDefault();
-          if (width === 'mini') return;
-          const next = resolvedWidth - KEYBOARD_STEP;
-          onWidthChange(next < MIN_DRAG_WIDTH ? 'mini' : next);
-          break;
-        }
-        case 'ArrowRight': {
-          e.preventDefault();
-          if (width === 'mini') {
-            onWidthChange('default');
-            return;
-          }
-          const next = Math.min(resolvedWidth + KEYBOARD_STEP, MAX_WIDTH);
-          onWidthChange(next);
-          break;
-        }
-        case 'Home':
-          e.preventDefault();
-          onWidthChange('mini');
-          break;
-        case 'End':
-          e.preventDefault();
-          onWidthChange(MAX_WIDTH);
-          break;
-      }
-    }, [resizable, onWidthChange, width, resolvedWidth]);
-
-    // Close sidebar on Escape (mobile)
-    useEffect(() => {
-      if (!isMobile || isCollapsed) return;
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') onToggle?.();
-      };
-      document.addEventListener('keydown', handleEscape);
-      return () => document.removeEventListener('keydown', handleEscape);
-    }, [isMobile, isCollapsed, onToggle]);
-
-    // Mobile dialog: capture trigger, focus first element, trap Tab, restore focus on close.
-    const isMobileOpen = isMobile && !isCollapsed;
-    useEffect(() => {
-      if (!isMobileOpen) return;
-      triggerRef.current = (document.activeElement as HTMLElement) ?? null;
-
-      const container = sidebarRef.current;
-      if (!container) return;
-
-      const focusables = () =>
-        Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
-          (el) => !el.hasAttribute('aria-hidden') && el.offsetParent !== null,
-        );
-
-      const initial = focusables();
-      (initial[0] ?? container).focus();
-
-      const handleTab = (e: KeyboardEvent) => {
-        if (e.key !== 'Tab') return;
-        const items = focusables();
-        if (items.length === 0) {
-          e.preventDefault();
-          container.focus();
-          return;
-        }
-        const first = items[0];
-        const last = items[items.length - 1];
-        const active = document.activeElement as HTMLElement | null;
-        if (e.shiftKey && (active === first || !container.contains(active))) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && (active === last || !container.contains(active))) {
-          e.preventDefault();
-          first.focus();
-        }
-      };
-
-      document.addEventListener('keydown', handleTab);
-      return () => {
-        document.removeEventListener('keydown', handleTab);
-        triggerRef.current?.focus?.();
-        triggerRef.current = null;
-      };
-    }, [isMobileOpen, sidebarRef]);
-
-    if (isCollapsed && !isMobile) return null;
-
-    const dialogProps = isMobileOpen
-      ? { role: 'dialog' as const, 'aria-modal': true, tabIndex: -1 }
-      : { role: 'navigation' as const };
-
-    return (
-      <>
-        {/* Mobile backdrop — mouse-only convenience; Escape handler covers keyboard. */}
-        {isMobile && !isCollapsed && (
-          <div className={styles.backdrop} onClick={onToggle} aria-hidden="true" />
-        )}
-        <aside
-          ref={sidebarRef}
-          className={cn(
-            styles.sidebar,
-            isMini && styles.mini,
-            isMobile && styles.mobile,
-            isCollapsed && styles.collapsed,
-            isResizing && styles.resizing,
-            className
-          )}
-          style={{ width: isCollapsed ? 0 : resolvedWidth }}
-          aria-label="Sidebar"
-          {...dialogProps}
-        >
-          <div className={styles.content}>
-            {children}
-          </div>
-          {footer && (
-            <div className={styles.footer}>
-              {footer}
-            </div>
-          )}
-          {resizable && !isMobile && (
-            <div
-              className={styles.resizeHandle}
-              onMouseDown={handleMouseDown}
-              onKeyDown={handleResizeKeyDown}
-              role="separator"
-              aria-orientation="vertical"
-              aria-label="Resize sidebar"
-              aria-valuenow={resolvedWidth}
-              aria-valuemin={MINI_WIDTH}
-              aria-valuemax={MAX_WIDTH}
-              tabIndex={0}
-            />
-          )}
-        </aside>
-      </>
-    );
-  }
-);
-
-Sidebar.displayName = 'Sidebar';

package/src/components/Sidebar/SidebarItem.tsx

@@ -1,57 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import type { IconComponent } from '@/types';
-import styles from './Sidebar.module.css';
-
-export interface SidebarItemProps {
-  label: string;
-  icon?: IconComponent;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  onClick?: () => void;
-  badge?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export const SidebarItem = forwardRef<HTMLButtonElement, SidebarItemProps>(
-  ({ label, icon: Icon, isSelected = false, isDisabled = false, onClick, badge, children, className }, ref) => (
-    <div className={cn(styles.itemWrapper, className)}>
-      <button
-        ref={ref}
-        className={cn(
-          styles.item,
-          isSelected && styles.itemSelected,
-          isDisabled && styles.itemDisabled
-        )}
-        onClick={onClick}
-        disabled={isDisabled}
-        type="button"
-        aria-current={isSelected ? 'page' : undefined}
-      >
-        {Icon && (
-          <span className={styles.itemIcon}>
-            <Icon size={20} />
-          </span>
-        )}
-        <Text
-          variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'}
-          as="span"
-          className={styles.itemLabel}
-          lineTruncation={1}
-        >
-          {label}
-        </Text>
-        {badge && <span className={styles.itemBadge}>{badge}</span>}
-      </button>
-      {children && isSelected && (
-        <div className={styles.subItems}>
-          {children}
-        </div>
-      )}
-    </div>
-  )
-);
-
-SidebarItem.displayName = 'SidebarItem';

package/src/components/Sidebar/SidebarSection.tsx

@@ -1,42 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Sidebar.module.css';
-
-export interface SidebarSectionProps {
-  label?: string;
-  children: React.ReactNode;
-  collapsible?: boolean;
-  defaultCollapsed?: boolean;
-  className?: string;
-}
-
-export const SidebarSection = forwardRef<HTMLDivElement, SidebarSectionProps>(
-  ({ label, children, collapsible = false, defaultCollapsed = false, className }, ref) => {
-    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-
-    return (
-      <div ref={ref} className={cn(styles.section, className)}>
-        {label && (
-          <div
-            className={cn(styles.sectionHeader, collapsible && styles.sectionHeaderClickable)}
-            onClick={collapsible ? () => setIsCollapsed(prev => !prev) : undefined}
-            role={collapsible ? 'button' : undefined}
-            aria-expanded={collapsible ? !isCollapsed : undefined}
-          >
-            <Text variant="text-caption-emphasis" as="span" color="tertiary">
-              {label}
-            </Text>
-          </div>
-        )}
-        {!isCollapsed && (
-          <div className={styles.sectionItems}>
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-SidebarSection.displayName = 'SidebarSection';

package/src/components/Sidebar/index.ts

@@ -1,6 +0,0 @@
-export { Sidebar } from './Sidebar';
-export type { SidebarProps, SidebarWidth } from './Sidebar';
-export { SidebarSection } from './SidebarSection';
-export type { SidebarSectionProps } from './SidebarSection';
-export { SidebarItem } from './SidebarItem';
-export type { SidebarItemProps } from './SidebarItem';

package/src/components/Skeleton/Skeleton.module.css

@@ -1,53 +0,0 @@
-.skeleton {
-  background-color: var(--color-background-secondary);
-  position: relative;
-  overflow: hidden;
-}
-
-/* ─── Variants ──────────────────────────────────────────────────────────────── */
-
-.text {
-  height: 14px;
-  border-radius: var(--dimension-radius-050);
-  width: 100%;
-}
-
-.circular {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--dimension-radius-half);
-}
-
-.rectangular {
-  width: 100%;
-  height: 80px;
-  border-radius: var(--dimension-radius-075);
-}
-
-/* ─── Text group ────────────────────────────────────────────────────────────── */
-
-.textGroup {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-075);
-}
-
-/* ─── Shimmer animation ─────────────────────────────────────────────────────── */
-
-.animate::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    var(--color-interaction-hover) 50%,
-    transparent 100%
-  );
-  animation: shimmer 1.5s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}

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,66 +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; pointer-events: none;
-}
-
-.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);
-  pointer-events: none;
-}
-
-.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; }