@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/Radio/Radio.module.css

@@ -1,61 +0,0 @@
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-025);
-}
-
-.horizontal {
-  flex-direction: row;
-  gap: var(--dimension-space-100);
-}
-
-/* ─── Radio item ────────────────────────────────────────────────────────────── */
-
-.radio {
-  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);
-}
-
-.radio:hover { background-color: var(--color-interaction-hover); }
-.radio:active { background-color: var(--color-interaction-pressed); }
-
-.inactive {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* ─── Circle indicator ──────────────────────────────────────────────────────── */
-
-.circle {
-  width: 20px;
-  height: 20px;
-  border: 1.5px solid var(--color-foreground-secondary);
-  border-radius: var(--dimension-radius-half);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all var(--effect-motion-short-2);
-  box-sizing: border-box;
-}
-
-.circleChecked {
-  border-color: var(--color-foreground-primary);
-}
-
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: var(--dimension-radius-half);
-  background-color: var(--color-foreground-primary);
-}

package/src/components/Radio/Radio.stories.tsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { RadioGroup } from './Radio';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: 'Classic/RadioGroup',
-  component: RadioGroup,
-  args: {
-    direction: 'vertical',
-    inactive: false,
-  },
-  argTypes: {
-    direction: { control: 'select', options: ['vertical', 'horizontal'] },
-    inactive: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-const OPTIONS = [
-  { label: 'Option A', value: 'a' },
-  { label: 'Option B', value: 'b' },
-  { label: 'Option C', value: 'c' },
-  { label: 'Option D', value: 'd' },
-];
-
-const Controlled = (props: Partial<React.ComponentProps<typeof RadioGroup>>) => {
-  const [value, setValue] = useState('b');
-  return (
-    <RadioGroup
-      value={value}
-      onChange={setValue}
-      options={OPTIONS}
-      aria-label="Demo radio group"
-      {...props}
-    />
-  );
-};
-
-export const Playground: Story = {
-  render: args => <Controlled {...args} />,
-};
-
-// ─── Matrix ───────────────────────────────────────────────────────────────────
-
-const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 24 };
-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}>
-      {section('Vertical (default)')}
-      <Controlled />
-      {section('Horizontal')}
-      <Controlled direction="horizontal" />
-      {section('Inactive')}
-      <RadioGroup
-        value="b"
-        onChange={() => {}}
-        options={OPTIONS}
-        inactive
-        aria-label="Disabled group"
-      />
-      {section('With inactive individual option')}
-      <Controlled
-        options={[
-          { label: 'Available', value: 'a' },
-          { label: 'Available', value: 'b' },
-          { label: 'Unavailable', value: 'c', inactive: true },
-          { label: 'Available', value: 'd' },
-        ]}
-      />
-    </div>
-  ),
-};
-
-export const Default: Story = {
-  render: () => <Controlled />,
-};
-
-export const Horizontal: Story = {
-  render: () => <Controlled direction="horizontal" />,
-};
-
-export const Inactive: Story = {
-  render: () => (
-    <RadioGroup
-      value="a"
-      onChange={() => {}}
-      options={OPTIONS}
-      inactive
-      aria-label="Disabled group"
-    />
-  ),
-};

package/src/components/Radio/Radio.tsx

@@ -1,108 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Radio.module.css';
-
-export interface RadioOption {
-  label: string;
-  value: string;
-  inactive?: boolean;
-}
-
-export interface RadioGroupProps {
-  /** Currently selected value. */
-  value: string;
-  /** Called when selection changes. */
-  onChange: (value: string) => void;
-  /** Radio options to render. */
-  options: RadioOption[];
-  /** Group label for accessibility. */
-  'aria-label'?: string;
-  /** Layout direction. */
-  direction?: 'vertical' | 'horizontal';
-  /** Disables the entire group. */
-  inactive?: boolean;
-  className?: string;
-}
-
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  (
-    {
-      value,
-      onChange,
-      options,
-      'aria-label': ariaLabel,
-      direction = 'vertical',
-      inactive = false,
-      className,
-    },
-    ref
-  ) => (
-    <div
-      ref={ref}
-      role="radiogroup"
-      aria-label={ariaLabel}
-      className={cn(
-        styles.group,
-        direction === 'horizontal' && styles.horizontal,
-        className
-      )}
-    >
-      {options.map(opt => (
-        <RadioItem
-          key={opt.value}
-          label={opt.label}
-          checked={value === opt.value}
-          inactive={inactive || opt.inactive}
-          onChange={() => onChange(opt.value)}
-        />
-      ))}
-    </div>
-  )
-);
-
-RadioGroup.displayName = 'RadioGroup';
-
-/* ─── Individual Radio Item ─────────────────────────────────────────────────── */
-
-export interface RadioItemProps {
-  label: string;
-  checked?: boolean;
-  onChange?: () => void;
-  inactive?: boolean;
-  className?: string;
-}
-
-export const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(
-  ({ label, checked = false, onChange, inactive = false, className }, ref) => {
-    const handleClick = () => {
-      if (!inactive && !checked) onChange?.();
-    };
-
-    return (
-      <div
-        ref={ref}
-        role="radio"
-        aria-checked={checked}
-        tabIndex={inactive ? -1 : 0}
-        className={cn(styles.radio, inactive && styles.inactive, className)}
-        onClick={handleClick}
-        onKeyDown={e => {
-          if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            handleClick();
-          }
-        }}
-      >
-        <span className={cn(styles.circle, checked && styles.circleChecked)}>
-          {checked && <span className={styles.dot} />}
-        </span>
-        <Text variant="text-body-medium" as="span" color="inherit">
-          {label}
-        </Text>
-      </div>
-    );
-  }
-);
-
-RadioItem.displayName = 'RadioItem';

package/src/components/Radio/index.ts

@@ -1,2 +0,0 @@
-export { RadioGroup, RadioItem } from './Radio';
-export type { RadioGroupProps, RadioItemProps, RadioOption } from './Radio';

package/src/components/Scrollbar/Scrollbar.module.css

@@ -1,81 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.content {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.content::-webkit-scrollbar { display: none; }
-
-.track {
-  position: absolute;
-  top: 0; right: 0; bottom: 0;
-  width: var(--dimension-size-050, 4px);
-  pointer-events: none;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity var(--effect-motion-short-2);
-}
-
-.container[data-show-track='true'] .track {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.thumb {
-  position: absolute;
-  right: 0;
-  width: var(--dimension-size-050, 4px);
-  cursor: grab;
-  border-radius: 0;
-  background-color: var(--color-foreground-quaternary);
-  transition: background-color var(--effect-motion-short-2);
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.thumb:active { cursor: grabbing; }
-
-.trackHorizontal {
-  position: absolute;
-  left: 0; right: 0; bottom: 0;
-  height: var(--dimension-size-050, 4px);
-  pointer-events: none;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity var(--effect-motion-short-2);
-}
-
-.container[data-show-track='true'] .trackHorizontal {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.thumbHorizontal {
-  position: absolute;
-  bottom: 0;
-  height: var(--dimension-size-050, 4px);
-  cursor: grab;
-  border-radius: 0;
-  background-color: var(--color-foreground-quaternary);
-  transition: background-color var(--effect-motion-short-2);
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.thumbHorizontal:active { cursor: grabbing; }
-
-.thick .track { width: var(--dimension-size-100, 8px); }
-.thick .thumb { width: var(--dimension-size-100, 8px); }
-.thick .trackHorizontal { height: var(--dimension-size-100, 8px); }
-.thick .thumbHorizontal { height: var(--dimension-size-100, 8px); }

package/src/components/Scrollbar/Scrollbar.stories.tsx

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Scrollbar } from './Scrollbar';
-
-const meta: Meta<typeof Scrollbar> = {
-  title: 'Layout/Scrollbar',
-  component: Scrollbar,
-};
-
-export default meta;
-type Story = StoryObj<typeof Scrollbar>;
-
-const longContent = Array.from({ length: 30 }, (_, i) => (
-  <div key={i} style={{ padding: '8px 12px', borderBottom: '1px solid var(--color-border-tertiary)' }}>
-    Item {i + 1}
-  </div>
-));
-
-export const Default: Story = {
-  render: () => (
-    <div style={{ height: 300, width: 260, padding: 24 }}>
-      <Scrollbar>
-        {longContent}
-      </Scrollbar>
-    </div>
-  ),
-};
-
-export const Thick: Story = {
-  render: () => (
-    <div style={{ height: 300, width: 260, padding: 24 }}>
-      <Scrollbar variant="thick">
-        {longContent}
-      </Scrollbar>
-    </div>
-  ),
-};
-
-export const ShowTrackOnHover: Story = {
-  render: () => (
-    <div style={{ height: 300, width: 260, padding: 24 }}>
-      <Scrollbar showTrackOnHover>
-        {longContent}
-      </Scrollbar>
-    </div>
-  ),
-};

package/src/components/Scrollbar/Scrollbar.tsx

@@ -1,187 +0,0 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { cn } from '@/utils/cn';
-import styles from './Scrollbar.module.css';
-
-export type ScrollbarVariant = 'default' | 'thick';
-
-export interface ScrollbarProps {
-  children: React.ReactNode;
-  className?: string;
-  variant?: ScrollbarVariant;
-  showTrackOnHover?: boolean;
-  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
-  fadeOverlay?: React.ReactNode;
-  contentRef?: React.RefObject<HTMLDivElement>;
-}
-
-export const Scrollbar: React.FC<ScrollbarProps> = ({
-  children,
-  className,
-  variant = 'default',
-  showTrackOnHover = true,
-  onScroll,
-  fadeOverlay,
-  contentRef: externalContentRef,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const internalContentRef = useRef<HTMLDivElement>(null);
-  const contentRef = externalContentRef || internalContentRef;
-  const thumbRef = useRef<HTMLDivElement>(null);
-  const thumbHRef = useRef<HTMLDivElement>(null);
-  const [thumbHeight, setThumbHeight] = useState(0);
-  const [thumbTop, setThumbTop] = useState(0);
-  const [thumbWidth, setThumbWidth] = useState(0);
-  const [thumbLeft, setThumbLeft] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isDraggingH, setIsDraggingH] = useState(false);
-  const [isPointerInside, setIsPointerInside] = useState(false);
-  const dragStartY = useRef(0);
-  const dragStartScrollTop = useRef(0);
-  const dragStartX = useRef(0);
-  const dragStartScrollLeft = useRef(0);
-
-  const handleMouseEnter = useCallback(() => {
-    if (showTrackOnHover) setIsPointerInside(true);
-  }, [showTrackOnHover]);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsPointerInside(false);
-  }, []);
-
-  const updateThumb = useCallback(() => {
-    const container = containerRef.current;
-    const content = contentRef.current;
-    if (!container || !content) return;
-
-    const containerHeight = container.clientHeight;
-    const containerWidth = container.clientWidth;
-    const contentHeight = content.scrollHeight;
-    const contentWidth = content.scrollWidth;
-    const scrollTop = content.scrollTop;
-    const scrollLeft = content.scrollLeft;
-
-    if (contentHeight <= containerHeight) {
-      setThumbHeight(0);
-    } else {
-      const ratio = containerHeight / contentHeight;
-      const h = Math.max(20, containerHeight * ratio);
-      setThumbHeight(h);
-      setThumbTop((scrollTop / (contentHeight - containerHeight)) * (containerHeight - h));
-    }
-
-    if (contentWidth <= containerWidth) {
-      setThumbWidth(0);
-    } else {
-      const ratio = containerWidth / contentWidth;
-      const w = Math.max(20, containerWidth * ratio);
-      setThumbWidth(w);
-      setThumbLeft((scrollLeft / (contentWidth - containerWidth)) * (containerWidth - w));
-    }
-  }, [contentRef]);
-
-  useEffect(() => {
-    const content = contentRef.current;
-    if (!content) return;
-    const handleScroll = (e: Event) => {
-      updateThumb();
-      if (onScroll) onScroll(e as unknown as React.UIEvent<HTMLDivElement>);
-    };
-    content.addEventListener('scroll', handleScroll);
-    return () => content.removeEventListener('scroll', handleScroll);
-  }, [updateThumb, onScroll, contentRef]);
-
-  useEffect(() => {
-    const content = contentRef.current;
-    if (!content) return;
-    const handleResize = () => updateThumb();
-    window.addEventListener('resize', handleResize);
-    if (typeof ResizeObserver !== 'undefined') {
-      const observer = new ResizeObserver(handleResize);
-      observer.observe(content);
-      return () => { window.removeEventListener('resize', handleResize); observer.disconnect(); };
-    }
-    return () => window.removeEventListener('resize', handleResize);
-  }, [updateThumb, contentRef]);
-
-  useEffect(() => { updateThumb(); }, [updateThumb, children]);
-
-  const handleThumbMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const content = contentRef.current;
-    if (!content) return;
-    setIsDragging(true);
-    dragStartY.current = e.clientY;
-    dragStartScrollTop.current = content.scrollTop;
-    const handleMouseMove = (e: MouseEvent) => {
-      const container = containerRef.current;
-      if (!container || !content) return;
-      const deltaY = e.clientY - dragStartY.current;
-      const scrollableHeight = content.scrollHeight - container.clientHeight;
-      const scrollRatio = scrollableHeight / (container.clientHeight - thumbHeight);
-      content.scrollTop = Math.max(0, Math.min(scrollableHeight, dragStartScrollTop.current + deltaY * scrollRatio));
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, [thumbHeight, contentRef]);
-
-  const handleThumbHMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const content = contentRef.current;
-    if (!content) return;
-    setIsDraggingH(true);
-    dragStartX.current = e.clientX;
-    dragStartScrollLeft.current = content.scrollLeft;
-    const handleMouseMove = (e: MouseEvent) => {
-      const container = containerRef.current;
-      if (!container || !content) return;
-      const deltaX = e.clientX - dragStartX.current;
-      const scrollableWidth = content.scrollWidth - container.clientWidth;
-      const scrollRatio = scrollableWidth / (container.clientWidth - thumbWidth);
-      content.scrollLeft = Math.max(0, Math.min(scrollableWidth, dragStartScrollLeft.current + deltaX * scrollRatio));
-    };
-    const handleMouseUp = () => {
-      setIsDraggingH(false);
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, [thumbWidth, contentRef]);
-
-  const showThumb = thumbHeight > 0;
-  const showThumbH = thumbWidth > 0;
-  const showTrack = showTrackOnHover && (isPointerInside || isDragging || isDraggingH);
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn(styles.container, variant === 'thick' && styles.thick, className)}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-dragging={isDragging || isDraggingH}
-      data-show-track={showTrack ? 'true' : 'false'}
-    >
-      <div ref={contentRef} className={styles.content}>{children}</div>
-      {fadeOverlay}
-      {showThumb && (
-        <div className={styles.track}>
-          <div ref={thumbRef} className={styles.thumb} style={{ height: `${thumbHeight}px`, top: `${thumbTop}px` }} onMouseDown={handleThumbMouseDown} />
-        </div>
-      )}
-      {showThumbH && (
-        <div className={styles.trackHorizontal}>
-          <div ref={thumbHRef} className={styles.thumbHorizontal} style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }} onMouseDown={handleThumbHMouseDown} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-Scrollbar.displayName = 'Scrollbar';

package/src/components/Scrollbar/index.ts

@@ -1,2 +0,0 @@
-export { Scrollbar } from './Scrollbar';
-export type { ScrollbarProps, ScrollbarVariant } from './Scrollbar';

package/src/components/Select/Select.module.css

@@ -1,31 +0,0 @@
-.selectWrapper {
-  width: 100%;
-  position: relative;
-}
-
-.selectButton {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: var(--dimension-size-400);
-  padding: 0 var(--dimension-space-075);
-  gap: var(--dimension-space-050);
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  border: none;
-  outline: none;
-}
-
-.selectButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.chevron {
-  display: flex;
-  align-items: center;
-  color: var(--color-foreground-secondary);
-  flex-shrink: 0;
-}

package/src/components/Select/Select.stories.tsx

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './Select';
-
-const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
-  component: Select,
-};
-
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-const fruitOptions = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-];
-
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | number>('');
-    return (
-      <div style={{ width: 260, padding: 24 }}>
-        <Select
-          value={value}
-          onChange={setValue}
-          options={fruitOptions}
-          placeholder="Select a fruit"
-        />
-      </div>
-    );
-  },
-};
-
-export const WithValue: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | number>('cherry');
-    return (
-      <div style={{ width: 260, padding: 24 }}>
-        <Select value={value} onChange={setValue} options={fruitOptions} />
-      </div>
-    );
-  },
-};
-
-export const Inactive: Story = {
-  render: () => (
-    <div style={{ width: 260, padding: 24 }}>
-      <Select
-        value="banana"
-        onChange={() => {}}
-        options={fruitOptions}
-        inactive
-      />
-    </div>
-  ),
-};