@ds-mo/ui 0.3.0 → 0.4.0

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,196 +0,0 @@
-import React, { forwardRef, useRef } 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[];
-  /** Accessible name for the group. One of `aria-label` or `aria-labelledby` is required. */
-  'aria-label'?: string;
-  /** ID of an element labeling the group. One of `aria-label` or `aria-labelledby` is required. */
-  'aria-labelledby'?: 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,
-      'aria-labelledby': ariaLabelledBy,
-      direction = 'vertical',
-      inactive = false,
-      className,
-    },
-    ref
-  ) => {
-    if (!ariaLabel && !ariaLabelledBy) {
-      const env = (globalThis as { process?: { env?: { NODE_ENV?: string } } })
-        .process?.env?.NODE_ENV;
-      if (env !== 'production') {
-        console.warn(
-          'RadioGroup: an accessible name is required. Pass either `aria-label` or `aria-labelledby`.'
-        );
-      }
-    }
-
-    const itemRefs = useRef<Array<HTMLDivElement | null>>([]);
-
-    const isActive = (i: number) =>
-      i >= 0 && i < options.length && !inactive && !options[i].inactive;
-
-    const activeIndices = options.reduce<number[]>((acc, _, i) => {
-      if (isActive(i)) acc.push(i);
-      return acc;
-    }, []);
-
-    const selectedIdx = options.findIndex(o => o.value === value);
-    const focusableIdx = isActive(selectedIdx)
-      ? selectedIdx
-      : (activeIndices[0] ?? -1);
-
-    const focusAndSelect = (i: number) => {
-      itemRefs.current[i]?.focus();
-      if (options[i].value !== value) onChange(options[i].value);
-    };
-
-    const moveFocus = (from: number, delta: 1 | -1) => {
-      if (activeIndices.length === 0) return;
-      const pos = activeIndices.indexOf(from);
-      // If focus somehow lands on an inactive radio, anchor at the boundary so
-      // the first arrow keystroke moves to the nearest active option.
-      const startPos = pos === -1 ? (delta === 1 ? -1 : 0) : pos;
-      const nextPos =
-        (startPos + delta + activeIndices.length) % activeIndices.length;
-      focusAndSelect(activeIndices[nextPos]);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLElement;
-      const idx = itemRefs.current.findIndex(el => el === target);
-      if (idx === -1) return;
-
-      switch (e.key) {
-        case 'ArrowDown':
-        case 'ArrowRight':
-          e.preventDefault();
-          moveFocus(idx, 1);
-          break;
-        case 'ArrowUp':
-        case 'ArrowLeft':
-          e.preventDefault();
-          moveFocus(idx, -1);
-          break;
-        case 'Home':
-          e.preventDefault();
-          if (activeIndices.length) focusAndSelect(activeIndices[0]);
-          break;
-        case 'End':
-          e.preventDefault();
-          if (activeIndices.length)
-            focusAndSelect(activeIndices[activeIndices.length - 1]);
-          break;
-      }
-    };
-
-    return (
-      <div
-        ref={ref}
-        role="radiogroup"
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          styles.group,
-          direction === 'horizontal' && styles.horizontal,
-          className
-        )}
-      >
-        {options.map((opt, i) => (
-          <RadioItem
-            key={opt.value}
-            ref={el => {
-              itemRefs.current[i] = el;
-            }}
-            label={opt.label}
-            checked={value === opt.value}
-            inactive={inactive || opt.inactive}
-            tabIndex={i === focusableIdx ? 0 : -1}
-            onChange={() => onChange(opt.value)}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-
-RadioGroup.displayName = 'RadioGroup';
-
-/* ─── Individual Radio Item ─────────────────────────────────────────────────── */
-
-export interface RadioItemProps {
-  label: string;
-  checked?: boolean;
-  onChange?: () => void;
-  inactive?: boolean;
-  /** Roving tabindex value. RadioGroup manages this; defaults to -1 when inactive, else 0. */
-  tabIndex?: number;
-  className?: string;
-}
-
-export const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(
-  (
-    { label, checked = false, onChange, inactive = false, tabIndex, className },
-    ref
-  ) => {
-    const handleActivate = () => {
-      if (!inactive && !checked) onChange?.();
-    };
-
-    const resolvedTabIndex = tabIndex ?? (inactive ? -1 : 0);
-
-    return (
-      <div
-        ref={ref}
-        role="radio"
-        aria-checked={checked}
-        aria-disabled={inactive || undefined}
-        tabIndex={resolvedTabIndex}
-        className={cn(styles.radio, inactive && styles.inactive, className)}
-        onClick={handleActivate}
-        onKeyDown={e => {
-          if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            handleActivate();
-          }
-        }}
-      >
-        <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,86 +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; }
-
-.content:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
-  outline-offset: calc(var(--dimension-space-025) * -1);
-}
-
-.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,201 +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);
-  const isScrollable = showThumb || showThumbH;
-
-  // A11y model: the custom thumbs are a visual reskin of the native scrollbar,
-  // not a separate widget. The `.content` div retains native `overflow: auto`,
-  // so when it is focusable the browser handles arrow keys, Page Up/Down,
-  // Home/End, and Space for free — implementing the full `role="scrollbar"`
-  // ARIA pattern would just re-create that behavior. We therefore expose the
-  // scroll container itself as the keyboard target (tabIndex=0 only when
-  // content overflows) and hide the decorative thumbs from assistive tech.
-  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}
-        tabIndex={isScrollable ? 0 : undefined}
-      >
-        {children}
-      </div>
-      {fadeOverlay}
-      {showThumb && (
-        <div className={styles.track} aria-hidden="true">
-          <div ref={thumbRef} className={styles.thumb} style={{ height: `${thumbHeight}px`, top: `${thumbTop}px` }} onMouseDown={handleThumbMouseDown} />
-        </div>
-      )}
-      {showThumbH && (
-        <div className={styles.trackHorizontal} aria-hidden="true">
-          <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;
-}