@ds-mo/ui 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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