@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/Select/Select.tsx

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

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

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

@@ -1,161 +0,0 @@
-/* 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

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

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

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