@ds-mo/ui 0.1.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, useState, useRef } from 'react';
+import { Surface } from '@/components/Surface';
+import { Text } from '@/components/Text';
+import { Menu } from '@/components/Menu';
+import type { MenuItemData } from '@/components/Menu';
+import type { IconComponent } from '@/types';
+import styles from './Select.module.css';
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+}
+
+export interface SelectProps {
+  value: string | number;
+  onChange: (value: string | number) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  className?: string;
+  inactive?: boolean;
+  id?: string;
+  chevronIcon?: IconComponent;
+}
+
+export const Select = forwardRef<HTMLDivElement, SelectProps>(
+  ({ value, onChange, options, placeholder = 'Select option', className, inactive = false, id, chevronIcon: ChevronIcon }, ref) => {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    const selectedOption = options.find(opt => opt.value === value);
+    const selectedLabel = selectedOption?.label || placeholder;
+
+    const menuItems: MenuItemData[] = options.map(option => ({
+      label: option.label,
+      onClick: () => {
+        onChange(option.value);
+        setIsMenuOpen(false);
+      },
+      isSelected: option.value === value,
+    }));
+
+    const handleToggle = () => {
+      if (!inactive) setIsMenuOpen(prev => !prev);
+    };
+
+    return (
+      <div ref={ref} className={`${styles.selectWrapper} ${className || ''}`}>
+        <Surface
+          id={id}
+          ref={buttonRef as React.RefObject<HTMLElement>}
+          as="button"
+          type="button"
+          elevation="elevated"
+          radius="sm"
+          interactive
+          selected={isMenuOpen}
+          className={styles.selectButton}
+          onClick={handleToggle}
+          inactive={inactive}
+        >
+          <Text
+            variant="text-body-medium"
+            as="span"
+           
+            color={selectedOption ? 'primary' : 'secondary'}
+          >
+            {selectedLabel}
+          </Text>
+          {ChevronIcon && (
+            <span className={styles.chevron}>
+              <ChevronIcon size={16} />
+            </span>
+          )}
+        </Surface>
+        <Menu
+          isOpen={isMenuOpen}
+          onClose={() => setIsMenuOpen(false)}
+          anchorRef={buttonRef as React.RefObject<HTMLElement | null>}
+          items={menuItems}
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          alignOffset={-4}
+          matchAnchorWidth
+          matchAnchorWidthOffset={8}
+        />
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';

package/src/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,161 @@
+/* Sidebar */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--color-background-secondary);
+  border-right: var(--dimension-stroke-width-015) solid var(--color-border-primary);
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: width var(--effect-motion-short-2);
+}
+
+.sidebar.resizing { transition: none; }
+
+.sidebar.collapsed { width: 0 !important; border-right: none; }
+
+.sidebar.mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 9997;
+}
+
+.sidebar.mini .itemLabel { display: none; }
+.sidebar.mini .itemBadge { display: none; }
+.sidebar.mini .sectionHeader { display: none; }
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-background-shade);
+  z-index: 9996;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--dimension-space-050);
+  scrollbar-width: none;
+}
+
+.content::-webkit-scrollbar { display: none; }
+
+.footer {
+  flex-shrink: 0;
+  padding: var(--dimension-space-050);
+  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);
+}
+
+/* Resize Handle */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 10;
+}
+
+.resizeHandle:hover {
+  background-color: var(--color-border-brand);
+  opacity: 0.5;
+}
+
+/* Sections */
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+.section + .section {
+  margin-top: var(--dimension-space-050);
+  padding-top: var(--dimension-space-050);
+  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);
+}
+
+.sectionHeader {
+  padding: var(--dimension-space-050) var(--dimension-space-075);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.sectionHeaderClickable { cursor: pointer; }
+
+.sectionItems {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dimension-space-025);
+}
+
+/* Items */
+.itemWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-075);
+  padding: var(--dimension-space-075);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--dimension-radius-075);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  position: relative;
+  min-height: var(--dimension-size-400);
+  transition: background-color var(--effect-motion-short-2);
+}
+
+.item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: transparent;
+  border-radius: var(--dimension-radius-075);
+  transition: var(--effect-transition-interaction-background-short-2);
+  pointer-events: none;
+}
+
+.item:hover::before { background-color: var(--color-interaction-hover); }
+.item:active::before { background-color: var(--color-interaction-pressed); }
+
+.itemSelected { background-color: var(--color-background-faint-brand); }
+.itemSelected::before { display: none; }
+
+.itemDisabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+
+.itemIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--color-foreground-secondary);
+}
+
+.itemSelected .itemIcon { color: var(--color-foreground-primary); }
+
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+}
+
+.itemBadge {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Sub-items */
+.subItems {
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--dimension-space-300);
+  gap: var(--dimension-space-025);
+}

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Sidebar } from './Sidebar';
+import { SidebarSection } from './SidebarSection';
+import { SidebarItem } from './SidebarItem';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Layout/Sidebar',
+  component: Sidebar,
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('dashboard');
+    return (
+      <div style={{ height: 500, display: 'flex' }}>
+        <Sidebar>
+          <SidebarSection label="Main">
+            <SidebarItem label="Dashboard" isSelected={selected === 'dashboard'} onClick={() => setSelected('dashboard')} />
+            <SidebarItem label="Projects" isSelected={selected === 'projects'} onClick={() => setSelected('projects')} />
+            <SidebarItem label="Tasks" isSelected={selected === 'tasks'} onClick={() => setSelected('tasks')} />
+          </SidebarSection>
+          <SidebarSection label="Settings">
+            <SidebarItem label="Account" isSelected={selected === 'account'} onClick={() => setSelected('account')} />
+            <SidebarItem label="Preferences" isSelected={selected === 'preferences'} onClick={() => setSelected('preferences')} />
+          </SidebarSection>
+        </Sidebar>
+        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
+          Content: {selected}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Collapsible: Story = {
+  render: () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [selected, setSelected] = useState('dashboard');
+    return (
+      <div style={{ height: 500, display: 'flex' }}>
+        <Sidebar isCollapsed={collapsed} onToggle={() => setCollapsed(c => !c)}>
+          <SidebarSection label="Navigation">
+            <SidebarItem label="Dashboard" isSelected={selected === 'dashboard'} onClick={() => setSelected('dashboard')} />
+            <SidebarItem label="Analytics" isSelected={selected === 'analytics'} onClick={() => setSelected('analytics')} />
+            <SidebarItem label="Reports" isSelected={selected === 'reports'} onClick={() => setSelected('reports')} />
+          </SidebarSection>
+        </Sidebar>
+        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
+          Content area
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithSubitems: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('general');
+    return (
+      <div style={{ height: 500, display: 'flex' }}>
+        <Sidebar>
+          <SidebarSection label="Settings">
+            <SidebarItem label="General" isSelected={selected === 'general'} onClick={() => setSelected('general')}>
+              <SidebarItem label="Profile" isSelected={selected === 'profile'} onClick={() => setSelected('profile')} />
+              <SidebarItem label="Notifications" isSelected={selected === 'notifications'} onClick={() => setSelected('notifications')} />
+            </SidebarItem>
+            <SidebarItem label="Security" isSelected={selected === 'security'} onClick={() => setSelected('security')}>
+              <SidebarItem label="Password" isSelected={selected === 'password'} onClick={() => setSelected('password')} />
+              <SidebarItem label="Two Factor" isSelected={selected === '2fa'} onClick={() => setSelected('2fa')} />
+            </SidebarItem>
+          </SidebarSection>
+        </Sidebar>
+        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
+          Content: {selected}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CollapsibleSections: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('dashboard');
+    return (
+      <div style={{ height: 500, display: 'flex' }}>
+        <Sidebar>
+          <SidebarSection label="Main" collapsible>
+            <SidebarItem label="Dashboard" isSelected={selected === 'dashboard'} onClick={() => setSelected('dashboard')} />
+            <SidebarItem label="Projects" isSelected={selected === 'projects'} onClick={() => setSelected('projects')} />
+          </SidebarSection>
+          <SidebarSection label="Admin" collapsible defaultCollapsed>
+            <SidebarItem label="Users" isSelected={selected === 'users'} onClick={() => setSelected('users')} />
+            <SidebarItem label="Billing" isSelected={selected === 'billing'} onClick={() => setSelected('billing')} />
+          </SidebarSection>
+        </Sidebar>
+        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
+          Content: {selected}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithFooter: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('home');
+    return (
+      <div style={{ height: 500, display: 'flex' }}>
+        <Sidebar footer={<div style={{ padding: '12px 16px', fontSize: 12, color: 'var(--color-foreground-tertiary)' }}>v1.0.0</div>}>
+          <SidebarSection>
+            <SidebarItem label="Home" isSelected={selected === 'home'} onClick={() => setSelected('home')} />
+            <SidebarItem label="Explore" isSelected={selected === 'explore'} onClick={() => setSelected('explore')} />
+          </SidebarSection>
+        </Sidebar>
+        <div style={{ flex: 1, padding: 24, background: 'var(--color-background-secondary)' }}>
+          Content: {selected}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,129 @@
+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 MIN_DRAG_WIDTH = 180;
+const SNAP_THRESHOLD = 140;
+
+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 [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 startX = e.clientX;
+
+      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]);
+
+    // 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]);
+
+    if (isCollapsed && !isMobile) return null;
+
+    return (
+      <>
+        {/* Mobile backdrop */}
+        {isMobile && !isCollapsed && (
+          <div className={styles.backdrop} onClick={onToggle} aria-hidden />
+        )}
+        <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 }}
+          role="navigation"
+          aria-label="Sidebar"
+        >
+          <div className={styles.content}>
+            {children}
+          </div>
+          {footer && (
+            <div className={styles.footer}>
+              {footer}
+            </div>
+          )}
+          {resizable && !isMobile && (
+            <div
+              className={styles.resizeHandle}
+              onMouseDown={handleMouseDown}
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize sidebar"
+            />
+          )}
+        </aside>
+      </>
+    );
+  }
+);
+
+Sidebar.displayName = 'Sidebar';

package/src/components/Sidebar/SidebarItem.tsx

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

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

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

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