From 22afa7e1a5a2c51ad33de7cf9b3fe7b1f126cc77 Mon Sep 17 00:00:00 2001
From: ollyhearn <longcat512@gmail.com>
Date: Sun, 31 May 2026 17:49:29 +0300
Subject: [PATCH] feat: structure

---
 .storybook/main.ts                         |   8 +-
 .storybook/preview-head.html               |  12 +
 .storybook/preview.tsx                     |   5 +-
 src/components/alert-dialog/index.tsx      |  57 ++
 src/components/badge/index.tsx             |  44 ++
 src/components/button/index.tsx            |  27 +
 src/components/callout/index.tsx           |  19 +
 src/components/card/index.tsx              |   6 +
 src/components/dialog/index.tsx            |  55 ++
 src/components/icon-button/index.tsx       |  25 +
 src/components/list/index.tsx              |  17 +
 src/components/menu/index.tsx              |  56 ++
 src/components/progress/index.tsx          |  16 +
 src/components/scroll-area/index.tsx       |  22 +
 src/components/segmented-control/index.tsx |  39 ++
 src/components/select/index.tsx            |  42 ++
 src/components/selection/index.tsx         |  53 ++
 src/components/slider/index.tsx            |  28 +
 src/components/spinner/index.tsx           |  45 ++
 src/components/table/index.tsx             |  24 +
 src/components/tabs/index.tsx              |  28 +
 src/components/text-field/index.tsx        |  26 +
 src/components/tooltip/index.tsx           |  42 ++
 src/components/ui.tsx                      | 700 +--------------------
 src/components/utils.ts                    |   2 +
 src/components/window/index.tsx            |  26 +
 src/stories/AlertDialog.stories.tsx        |  64 ++
 src/stories/Dialog.stories.tsx             |  54 ++
 src/styles/components.css                  |   2 +-
 29 files changed, 860 insertions(+), 684 deletions(-)
 create mode 100644 .storybook/preview-head.html
 create mode 100644 src/components/alert-dialog/index.tsx
 create mode 100644 src/components/badge/index.tsx
 create mode 100644 src/components/button/index.tsx
 create mode 100644 src/components/callout/index.tsx
 create mode 100644 src/components/card/index.tsx
 create mode 100644 src/components/dialog/index.tsx
 create mode 100644 src/components/icon-button/index.tsx
 create mode 100644 src/components/list/index.tsx
 create mode 100644 src/components/menu/index.tsx
 create mode 100644 src/components/progress/index.tsx
 create mode 100644 src/components/scroll-area/index.tsx
 create mode 100644 src/components/segmented-control/index.tsx
 create mode 100644 src/components/select/index.tsx
 create mode 100644 src/components/selection/index.tsx
 create mode 100644 src/components/slider/index.tsx
 create mode 100644 src/components/spinner/index.tsx
 create mode 100644 src/components/table/index.tsx
 create mode 100644 src/components/tabs/index.tsx
 create mode 100644 src/components/text-field/index.tsx
 create mode 100644 src/components/tooltip/index.tsx
 create mode 100644 src/components/utils.ts
 create mode 100644 src/components/window/index.tsx
 create mode 100644 src/stories/AlertDialog.stories.tsx
 create mode 100644 src/stories/Dialog.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index f5bf784..98a0d2a 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -4,6 +4,7 @@ import type { StorybookConfig } from 'storybook-react-rsbuild';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-docs'],
+  staticDirs: ['../src/assets'],
   framework: {
     name: 'storybook-react-rsbuild',
     options: {},
@@ -13,9 +14,12 @@ const config: StorybookConfig = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      // Keep our own props; drop the noise inherited from node_modules.
+      // Keep our own props + Radix primitives; drop other node_modules noise.
       propFilter: (prop) =>
-        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+        prop.parent
+          ? !/node_modules/.test(prop.parent.fileName) ||
+            /node_modules\/radix-ui/.test(prop.parent.fileName)
+          : true,
     },
   },
 };
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..6d62926
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,12 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+@font-face {
+  font-family: 'Anta';
+  src: url('/Anta-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+</style>
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index cc693e6..7c144f8 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,8 +2,9 @@ import { useEffect, type ReactNode } from 'react';
 import type { Preview, Decorator } from 'storybook-react-rsbuild';
 import { Tooltip } from 'radix-ui';
 
-/* The shipped library surface, exactly as a consumer would load it. */
-import '../src/styles/fonts.css';
+/* The shipped library surface, exactly as a consumer would load it.
+   Fonts are loaded via preview-head.html (Google Fonts link + Anta @font-face)
+   to avoid bundler inlining the @import url() mid-stylesheet. */
 import '../src/styles/index.css';
 /* Storybook-only canvas styling (background, docs blocks). */
 import './preview.css';
diff --git a/src/components/alert-dialog/index.tsx b/src/components/alert-dialog/index.tsx
new file mode 100644
index 0000000..02b06be
--- /dev/null
+++ b/src/components/alert-dialog/index.tsx
@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { AlertDialog as RAlertDialog } from 'radix-ui';
+import { Button } from '../button';
+
+export const AlertDialog = ({
+  trigger,
+  title,
+  description,
+  cancelLabel = 'Cancel',
+  actionLabel = 'Confirm',
+  destructive,
+  onAction,
+  open,
+  defaultOpen,
+  onOpenChange,
+}: {
+  trigger?: ReactNode;
+  title: string;
+  description?: ReactNode;
+  cancelLabel?: string;
+  actionLabel?: string;
+  destructive?: boolean;
+  onAction?: () => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (o: boolean) => void;
+}) => (
+  <RAlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+    {trigger && <RAlertDialog.Trigger asChild>{trigger}</RAlertDialog.Trigger>}
+    <RAlertDialog.Portal>
+      <RAlertDialog.Overlay className="modern-sk-overlay" />
+      <RAlertDialog.Content className="modern-sk-dialog">
+        <RAlertDialog.Title className="modern-sk-dialog__title">
+          {title}
+        </RAlertDialog.Title>
+        {description && (
+          <RAlertDialog.Description className="modern-sk-dialog__desc">
+            {description}
+          </RAlertDialog.Description>
+        )}
+        <div className="modern-sk-dialog__footer">
+          <RAlertDialog.Cancel asChild>
+            <Button variant="ghost">{cancelLabel}</Button>
+          </RAlertDialog.Cancel>
+          <RAlertDialog.Action asChild>
+            <Button
+              variant={destructive ? 'ember' : 'primary'}
+              onClick={onAction}
+            >
+              {actionLabel}
+            </Button>
+          </RAlertDialog.Action>
+        </div>
+      </RAlertDialog.Content>
+    </RAlertDialog.Portal>
+  </RAlertDialog.Root>
+);
diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx
new file mode 100644
index 0000000..b6c9526
--- /dev/null
+++ b/src/components/badge/index.tsx
@@ -0,0 +1,44 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { cx } from '../utils';
+
+type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';
+
+export const Badge = ({
+  variant = 'neutral',
+  dot,
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'span'> & {
+  variant?: BadgeVariant;
+  dot?: boolean;
+}) => (
+  <span
+    className={cx(
+      'modern-sk-badge',
+      `modern-sk-badge--${variant}`,
+      dot && 'modern-sk-badge--dot',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </span>
+);
+
+export const Chip = ({
+  children,
+  onRemove,
+}: {
+  children: ReactNode;
+  onRemove?: () => void;
+}) => (
+  <span className="modern-sk-chip">
+    {children}
+    {onRemove && (
+      <button type="button" className="x" onClick={onRemove} aria-label="Remove">
+        ×
+      </button>
+    )}
+  </span>
+);
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
new file mode 100644
index 0000000..9e8390c
--- /dev/null
+++ b/src/components/button/index.tsx
@@ -0,0 +1,27 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+
+export type BtnVariant = 'key' | 'primary' | 'ember' | 'ghost';
+
+type ButtonProps = ComponentPropsWithoutRef<'button'> & {
+  variant?: BtnVariant;
+  size?: 'sm';
+  iconOnly?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'key', size, iconOnly, className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cx(
+        'modern-sk-btn',
+        variant !== 'key' && `modern-sk-btn--${variant}`,
+        size === 'sm' && 'modern-sk-btn--sm',
+        iconOnly && 'modern-sk-btn--icon',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Button.displayName = 'Button';
diff --git a/src/components/callout/index.tsx b/src/components/callout/index.tsx
new file mode 100644
index 0000000..0180bd9
--- /dev/null
+++ b/src/components/callout/index.tsx
@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { cx } from '../utils';
+
+type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
+
+export const Callout = ({
+  variant = 'info',
+  icon,
+  children,
+}: {
+  variant?: CalloutVariant;
+  icon?: ReactNode;
+  children: ReactNode;
+}) => (
+  <div className={cx('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
+    {icon && <span className="modern-sk-callout__icon">{icon}</span>}
+    <div className="modern-sk-callout__body">{children}</div>
+  </div>
+);
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
new file mode 100644
index 0000000..f6be7a2
--- /dev/null
+++ b/src/components/card/index.tsx
@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+
+export const Card = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (
+  <div className={cx('modern-sk-card', className)} {...props} />
+);
diff --git a/src/components/dialog/index.tsx b/src/components/dialog/index.tsx
new file mode 100644
index 0000000..95b015b
--- /dev/null
+++ b/src/components/dialog/index.tsx
@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { Dialog as RDialog } from 'radix-ui';
+import { X } from '@phosphor-icons/react';
+import { IconButton } from '../icon-button';
+
+export const Dialog = ({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal,
+}: {
+  trigger?: ReactNode;
+  title: string;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (o: boolean) => void;
+  modal?: boolean;
+}) => (
+  <RDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
+    {trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
+    <RDialog.Portal>
+      <RDialog.Overlay className="modern-sk-overlay" />
+      <RDialog.Content className="modern-sk-dialog">
+        <RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
+        {description && (
+          <RDialog.Description className="modern-sk-dialog__desc">
+            {description}
+          </RDialog.Description>
+        )}
+        {children && <div className="modern-sk-dialog__body">{children}</div>}
+        {footer && <div className="modern-sk-dialog__footer">{footer}</div>}
+        <RDialog.Close asChild>
+          <IconButton
+            variant="ghost"
+            size="sm"
+            className="modern-sk-dialog__close"
+            aria-label="Close"
+          >
+            <X size={14} weight="bold" />
+          </IconButton>
+        </RDialog.Close>
+      </RDialog.Content>
+    </RDialog.Portal>
+  </RDialog.Root>
+);
+
+export const DialogClose = RDialog.Close;
diff --git a/src/components/icon-button/index.tsx b/src/components/icon-button/index.tsx
new file mode 100644
index 0000000..f315dbc
--- /dev/null
+++ b/src/components/icon-button/index.tsx
@@ -0,0 +1,25 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+import type { BtnVariant } from '../button';
+
+type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
+  variant?: BtnVariant;
+  size?: 'sm' | 'lg';
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ variant = 'key', size, className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cx(
+        'modern-sk-btn',
+        'modern-sk-iconbtn',
+        variant !== 'key' && `modern-sk-btn--${variant}`,
+        size && `modern-sk-iconbtn--${size}`,
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+IconButton.displayName = 'IconButton';
diff --git a/src/components/list/index.tsx b/src/components/list/index.tsx
new file mode 100644
index 0000000..64fc754
--- /dev/null
+++ b/src/components/list/index.tsx
@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+
+export const List = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (
+  <div className={cx('modern-sk-list', className)} {...props} />
+);
+
+export const Row = ({
+  selected,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & { selected?: boolean }) => (
+  <div
+    className={cx('modern-sk-row', selected && 'is-selected', className)}
+    {...props}
+  />
+);
diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
new file mode 100644
index 0000000..9fdad60
--- /dev/null
+++ b/src/components/menu/index.tsx
@@ -0,0 +1,56 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { DropdownMenu as RMenu } from 'radix-ui';
+
+export const Menu = RMenu.Root;
+export const MenuTrigger = RMenu.Trigger;
+
+export const MenuContent = ({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
+  <RMenu.Portal>
+    <RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
+      {children}
+    </RMenu.Content>
+  </RMenu.Portal>
+);
+
+export const MenuItem = ({
+  icon,
+  shortcut,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
+  icon?: ReactNode;
+  shortcut?: string;
+}) => (
+  <RMenu.Item className="modern-sk-menu-item" {...props}>
+    {icon && <span className="ph">{icon}</span>}
+    {children}
+    {shortcut && <span className="sc">{shortcut}</span>}
+  </RMenu.Item>
+);
+
+export const MenuSeparator = () => (
+  <RMenu.Separator className="modern-sk-menu-sep" />
+);
+
+export const MenuSurface = ({ children }: { children: ReactNode }) => (
+  <div className="modern-sk-menu">{children}</div>
+);
+
+export const MenuRow = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: ReactNode;
+  shortcut?: string;
+  children: ReactNode;
+}) => (
+  <div className="modern-sk-menu-item">
+    {icon && <span className="ph">{icon}</span>}
+    {children}
+    {shortcut && <span className="sc">{shortcut}</span>}
+  </div>
+);
diff --git a/src/components/progress/index.tsx b/src/components/progress/index.tsx
new file mode 100644
index 0000000..ad6f07f
--- /dev/null
+++ b/src/components/progress/index.tsx
@@ -0,0 +1,16 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Progress as RProgress } from 'radix-ui';
+import { cx } from '../utils';
+
+export const Progress = ({
+  value = 0,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof RProgress.Root>) => (
+  <RProgress.Root className={cx('modern-sk-progress', className)} value={value} {...props}>
+    <RProgress.Indicator
+      className="modern-sk-progress__indicator"
+      style={{ width: `${value}%` }}
+    />
+  </RProgress.Root>
+);
diff --git a/src/components/scroll-area/index.tsx b/src/components/scroll-area/index.tsx
new file mode 100644
index 0000000..ef01ca5
--- /dev/null
+++ b/src/components/scroll-area/index.tsx
@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { ScrollArea as RScrollArea } from 'radix-ui';
+import { cx } from '../utils';
+
+export const ScrollArea = ({
+  children,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof RScrollArea.Root>) => (
+  <RScrollArea.Root className={cx('modern-sk-scroll', className)} {...props}>
+    <RScrollArea.Viewport className="modern-sk-scroll__viewport">
+      {children}
+    </RScrollArea.Viewport>
+    <RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="vertical">
+      <RScrollArea.Thumb className="modern-sk-scroll__thumb" />
+    </RScrollArea.Scrollbar>
+    <RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="horizontal">
+      <RScrollArea.Thumb className="modern-sk-scroll__thumb" />
+    </RScrollArea.Scrollbar>
+    <RScrollArea.Corner />
+  </RScrollArea.Root>
+);
diff --git a/src/components/segmented-control/index.tsx b/src/components/segmented-control/index.tsx
new file mode 100644
index 0000000..8195804
--- /dev/null
+++ b/src/components/segmented-control/index.tsx
@@ -0,0 +1,39 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { ToggleGroup as RToggleGroup } from 'radix-ui';
+import { cx } from '../utils';
+
+type SegProps = Omit<
+  ComponentPropsWithoutRef<typeof RToggleGroup.Root>,
+  'type' | 'onValueChange' | 'defaultValue' | 'value'
+> & {
+  value: string;
+  defaultValue?: string;
+  onValueChange: (v: string) => void;
+  items: Array<{ value: string; label: string }>;
+};
+
+export const SegmentedControl = ({
+  value,
+  onValueChange,
+  items,
+  className,
+  ...props
+}: SegProps) => (
+  <RToggleGroup.Root
+    type="single"
+    className={cx('modern-sk-seg', className)}
+    value={value}
+    onValueChange={(v) => v && onValueChange(v)}
+    {...props}
+  >
+    {items.map((it) => (
+      <RToggleGroup.Item
+        key={it.value}
+        value={it.value}
+        className="modern-sk-seg__item"
+      >
+        {it.label}
+      </RToggleGroup.Item>
+    ))}
+  </RToggleGroup.Root>
+);
diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
new file mode 100644
index 0000000..a56d797
--- /dev/null
+++ b/src/components/select/index.tsx
@@ -0,0 +1,42 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Select as RSelect } from 'radix-ui';
+import { Check, CaretDown } from '@phosphor-icons/react';
+
+type SelectProps = ComponentPropsWithoutRef<typeof RSelect.Root> & {
+  placeholder?: string;
+  items: Array<{ value: string; label: string }>;
+  'aria-label'?: string;
+};
+
+export const Select = ({ placeholder, items, ...rest }: SelectProps) => (
+  <RSelect.Root {...rest}>
+    <RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
+      <RSelect.Value placeholder={placeholder} />
+      <RSelect.Icon className="modern-sk-select__icon">
+        <CaretDown size={12} weight="bold" />
+      </RSelect.Icon>
+    </RSelect.Trigger>
+    <RSelect.Portal>
+      <RSelect.Content
+        className="modern-sk-select__content"
+        position="popper"
+        sideOffset={6}
+      >
+        <RSelect.Viewport>
+          {items.map((it) => (
+            <RSelect.Item
+              key={it.value}
+              value={it.value}
+              className="modern-sk-select__item"
+            >
+              <RSelect.ItemText>{it.label}</RSelect.ItemText>
+              <RSelect.ItemIndicator className="modern-sk-select__item-indicator">
+                <Check size={14} weight="bold" />
+              </RSelect.ItemIndicator>
+            </RSelect.Item>
+          ))}
+        </RSelect.Viewport>
+      </RSelect.Content>
+    </RSelect.Portal>
+  </RSelect.Root>
+);
diff --git a/src/components/selection/index.tsx b/src/components/selection/index.tsx
new file mode 100644
index 0000000..c3fd38b
--- /dev/null
+++ b/src/components/selection/index.tsx
@@ -0,0 +1,53 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import {
+  Switch as RSwitch,
+  Checkbox as RCheckbox,
+  RadioGroup as RRadioGroup,
+} from 'radix-ui';
+
+export const Switch = (props: ComponentPropsWithoutRef<typeof RSwitch.Root>) => (
+  <RSwitch.Root className="modern-sk-switch" {...props}>
+    <RSwitch.Thumb className="modern-sk-switch__thumb" />
+  </RSwitch.Root>
+);
+
+export const Checkbox = (props: ComponentPropsWithoutRef<typeof RCheckbox.Root>) => (
+  <RCheckbox.Root className="modern-sk-check" {...props}>
+    <RCheckbox.Indicator className="modern-sk-check__indicator">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="var(--lime-ink)"
+        strokeWidth={3.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M4 12l5 5L20 6" />
+      </svg>
+    </RCheckbox.Indicator>
+  </RCheckbox.Root>
+);
+
+export const RadioGroup = RRadioGroup.Root;
+
+export const RadioItem = ({
+  value,
+  ...props
+}: ComponentPropsWithoutRef<typeof RRadioGroup.Item>) => (
+  <RRadioGroup.Item className="modern-sk-radio" value={value} {...props}>
+    <RRadioGroup.Indicator className="modern-sk-radio__indicator" />
+  </RRadioGroup.Item>
+);
+
+export const Control = ({
+  children,
+  control,
+}: {
+  children: ReactNode;
+  control: ReactNode;
+}) => (
+  <label className="modern-sk-control">
+    {control}
+    {children}
+  </label>
+);
diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx
new file mode 100644
index 0000000..0697090
--- /dev/null
+++ b/src/components/slider/index.tsx
@@ -0,0 +1,28 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Slider as RSlider } from 'radix-ui';
+
+export const Slider = (props: ComponentPropsWithoutRef<typeof RSlider.Root>) => (
+  <RSlider.Root className="modern-sk-slider" {...props}>
+    <RSlider.Track className="modern-sk-slider__track">
+      <RSlider.Range className="modern-sk-slider__range" />
+    </RSlider.Track>
+    <RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
+  </RSlider.Root>
+);
+
+export const Stepper = ({
+  onDecrement,
+  onIncrement,
+}: {
+  onDecrement: () => void;
+  onIncrement: () => void;
+}) => (
+  <div className="modern-sk-stepper">
+    <button type="button" onClick={onDecrement} aria-label="Decrease">
+      −
+    </button>
+    <button type="button" onClick={onIncrement} aria-label="Increase">
+      +
+    </button>
+  </div>
+);
diff --git a/src/components/spinner/index.tsx b/src/components/spinner/index.tsx
new file mode 100644
index 0000000..684fb6f
--- /dev/null
+++ b/src/components/spinner/index.tsx
@@ -0,0 +1,45 @@
+import { useId, type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+
+export const Spinner = ({
+  size,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
+  const gid = `modern-sk-groove-${useId()}`;
+  return (
+    <span
+      role="status"
+      aria-label="Loading"
+      className={cx('modern-sk-spinner', size && `modern-sk-spinner--${size}`, className)}
+      {...props}
+    >
+      <svg viewBox="0 0 36 36" fill="none">
+        <defs>
+          <linearGradient
+            id={gid}
+            x1="18"
+            y1="4"
+            x2="18"
+            y2="32"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="var(--spin-groove-1)" />
+            <stop offset="1" stopColor="var(--spin-groove-2)" />
+          </linearGradient>
+        </defs>
+        <circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
+        <circle
+          className="modern-sk-spinner__arc"
+          cx="18"
+          cy="18"
+          r="14"
+          stroke="var(--lime)"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeDasharray="22 88"
+        />
+      </svg>
+    </span>
+  );
+};
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
new file mode 100644
index 0000000..f5f7f9b
--- /dev/null
+++ b/src/components/table/index.tsx
@@ -0,0 +1,24 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+
+export const Table = ({ children, ...props }: ComponentPropsWithoutRef<'table'>) => (
+  <div className="modern-sk-table-wrap">
+    <table className="modern-sk-table" {...props}>
+      {children}
+    </table>
+  </div>
+);
+
+export const THead = (p: ComponentPropsWithoutRef<'thead'>) => <thead {...p} />;
+export const TBody = (p: ComponentPropsWithoutRef<'tbody'>) => <tbody {...p} />;
+
+export const Tr = ({
+  selected,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'tr'> & { selected?: boolean }) => (
+  <tr className={cx(selected && 'is-selected', className)} {...props} />
+);
+
+export const Th = (p: ComponentPropsWithoutRef<'th'>) => <th {...p} />;
+export const Td = (p: ComponentPropsWithoutRef<'td'>) => <td {...p} />;
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
new file mode 100644
index 0000000..df63206
--- /dev/null
+++ b/src/components/tabs/index.tsx
@@ -0,0 +1,28 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Tabs as RTabs } from 'radix-ui';
+import { cx } from '../utils';
+
+export const Tabs = RTabs.Root;
+
+export const TabsList = ({
+  items,
+  className,
+  ...props
+}: { items: Array<{ value: string; label: string }> } & Omit<
+  ComponentPropsWithoutRef<typeof RTabs.List>,
+  'children'
+>) => (
+  <RTabs.List className={cx('modern-sk-tabs', className)} {...props}>
+    {items.map((it) => (
+      <RTabs.Trigger
+        key={it.value}
+        value={it.value}
+        className="modern-sk-tabs__trigger"
+      >
+        {it.label}
+      </RTabs.Trigger>
+    ))}
+  </RTabs.List>
+);
+
+export const TabsContent = RTabs.Content;
diff --git a/src/components/text-field/index.tsx b/src/components/text-field/index.tsx
new file mode 100644
index 0000000..17666fb
--- /dev/null
+++ b/src/components/text-field/index.tsx
@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { cx } from '../utils';
+
+export const TextField = forwardRef<HTMLInputElement, ComponentPropsWithoutRef<'input'>>(
+  ({ className, ...props }, ref) => (
+    <input ref={ref} className={cx('modern-sk-field', className)} {...props} />
+  ),
+);
+TextField.displayName = 'TextField';
+
+export const TextArea = forwardRef<HTMLTextAreaElement, ComponentPropsWithoutRef<'textarea'>>(
+  ({ className, ...props }, ref) => (
+    <textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
+  ),
+);
+TextArea.displayName = 'TextArea';
+
+export const SearchField = ({
+  icon,
+  ...props
+}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
+  <div className="modern-sk-search">
+    <span className="ph">{icon}</span>
+    <TextField {...props} />
+  </div>
+);
diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
new file mode 100644
index 0000000..1261fe9
--- /dev/null
+++ b/src/components/tooltip/index.tsx
@@ -0,0 +1,42 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Tooltip as RTooltip } from 'radix-ui';
+import { cx } from '../utils';
+
+type TooltipProps = {
+  content: ReactNode;
+  children: ReactNode;
+  delayDuration?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (o: boolean) => void;
+} & Omit<ComponentPropsWithoutRef<typeof RTooltip.Content>, 'children'>;
+
+export const Tooltip = ({
+  content,
+  children,
+  delayDuration,
+  open,
+  defaultOpen,
+  onOpenChange,
+  sideOffset = 6,
+  className,
+  ...contentProps
+}: TooltipProps) => (
+  <RTooltip.Root
+    delayDuration={delayDuration}
+    open={open}
+    defaultOpen={defaultOpen}
+    onOpenChange={onOpenChange}
+  >
+    <RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
+    <RTooltip.Portal>
+      <RTooltip.Content
+        className={cx('modern-sk-tooltip', className)}
+        sideOffset={sideOffset}
+        {...contentProps}
+      >
+        {content}
+      </RTooltip.Content>
+    </RTooltip.Portal>
+  </RTooltip.Root>
+);
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 021b4de..e9bbc53 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -1,679 +1,21 @@
-/* ============================================================
-   ModernSK UI — Radix Primitives wrapped in the ModernSK look.
-   Logic/accessibility from Radix; every pixel from the tokens in
-   styles/tokens.css + styles/components.css.
-   ============================================================ */
-import {
-  forwardRef,
-  useId,
-  type ComponentPropsWithoutRef,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-import {
-  Switch as RSwitch,
-  Checkbox as RCheckbox,
-  RadioGroup as RRadioGroup,
-  Tabs as RTabs,
-  Slider as RSlider,
-  DropdownMenu as RMenu,
-  Tooltip as RTooltip,
-  Progress as RProgress,
-  Select as RSelect,
-  ToggleGroup as RToggleGroup,
-  Dialog as RDialog,
-  AlertDialog as RAlertDialog,
-  ScrollArea as RScrollArea,
-} from 'radix-ui';
-import { Check, CaretDown, X } from '@phosphor-icons/react';
-
-const cx = (...c: Array<string | false | undefined>) =>
-  c.filter(Boolean).join(' ');
-
-/* ---------- BUTTON ---------- */
-type BtnVariant = 'key' | 'primary' | 'ember' | 'ghost';
-type ButtonProps = ComponentPropsWithoutRef<'button'> & {
-  variant?: BtnVariant;
-  size?: 'sm';
-  iconOnly?: boolean;
-};
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'key', size, iconOnly, className, ...props }, ref) => (
-    <button
-      ref={ref}
-      className={cx(
-        'modern-sk-btn',
-        variant !== 'key' && `modern-sk-btn--${variant}`,
-        size === 'sm' && 'modern-sk-btn--sm',
-        iconOnly && 'modern-sk-btn--icon',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Button.displayName = 'Button';
-
-/* ---------- TEXT FIELD ---------- */
-export const TextField = forwardRef<
-  HTMLInputElement,
-  ComponentPropsWithoutRef<'input'>
->(({ className, ...props }, ref) => (
-  <input ref={ref} className={cx('modern-sk-field', className)} {...props} />
-));
-TextField.displayName = 'TextField';
-
-export const TextArea = forwardRef<
-  HTMLTextAreaElement,
-  ComponentPropsWithoutRef<'textarea'>
->(({ className, ...props }, ref) => (
-  <textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
-));
-TextArea.displayName = 'TextArea';
-
-export const SearchField = ({
-  icon,
-  ...props
-}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
-  <div className="modern-sk-search">
-    <span className="ph">{icon}</span>
-    <TextField {...props} />
-  </div>
-);
-
-/* ---------- SELECT (Radix) ---------- */
-type SelectProps = {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (v: string) => void;
-  placeholder?: string;
-  items: Array<{ value: string; label: string }>;
-  'aria-label'?: string;
-};
-export const Select = ({
-  value,
-  defaultValue,
-  onValueChange,
-  placeholder,
-  items,
-  ...rest
-}: SelectProps) => (
-  <RSelect.Root
-    value={value}
-    defaultValue={defaultValue}
-    onValueChange={onValueChange}
-  >
-    <RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
-      <RSelect.Value placeholder={placeholder} />
-      <RSelect.Icon className="modern-sk-select__icon">
-        <CaretDown size={12} weight="bold" />
-      </RSelect.Icon>
-    </RSelect.Trigger>
-    <RSelect.Portal>
-      <RSelect.Content
-        className="modern-sk-select__content"
-        position="popper"
-        sideOffset={6}
-      >
-        <RSelect.Viewport>
-          {items.map((it) => (
-            <RSelect.Item
-              key={it.value}
-              value={it.value}
-              className="modern-sk-select__item"
-            >
-              <RSelect.ItemText>{it.label}</RSelect.ItemText>
-              <RSelect.ItemIndicator className="modern-sk-select__item-indicator">
-                <Check size={14} weight="bold" />
-              </RSelect.ItemIndicator>
-            </RSelect.Item>
-          ))}
-        </RSelect.Viewport>
-      </RSelect.Content>
-    </RSelect.Portal>
-  </RSelect.Root>
-);
-
-/* ---------- SWITCH ---------- */
-export const Switch = (
-  props: ComponentPropsWithoutRef<typeof RSwitch.Root>,
-) => (
-  <RSwitch.Root className="modern-sk-switch" {...props}>
-    <RSwitch.Thumb className="modern-sk-switch__thumb" />
-  </RSwitch.Root>
-);
-
-/* ---------- CHECKBOX ---------- */
-export const Checkbox = (
-  props: ComponentPropsWithoutRef<typeof RCheckbox.Root>,
-) => (
-  <RCheckbox.Root className="modern-sk-check" {...props}>
-    <RCheckbox.Indicator className="modern-sk-check__indicator">
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="var(--lime-ink)"
-        strokeWidth={3.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M4 12l5 5L20 6" />
-      </svg>
-    </RCheckbox.Indicator>
-  </RCheckbox.Root>
-);
-
-/* ---------- RADIO GROUP ---------- */
-export const RadioGroup = RRadioGroup.Root;
-export const RadioItem = ({
-  value,
-  ...props
-}: ComponentPropsWithoutRef<typeof RRadioGroup.Item>) => (
-  <RRadioGroup.Item className="modern-sk-radio" value={value} {...props}>
-    <RRadioGroup.Indicator className="modern-sk-radio__indicator" />
-  </RRadioGroup.Item>
-);
-
-/* control + label row helper */
-export const Control = ({
-  children,
-  control,
-}: {
-  children: ReactNode;
-  control: ReactNode;
-}) => (
-  <label className="modern-sk-control">
-    {control}
-    {children}
-  </label>
-);
-
-/* ---------- SEGMENTED CONTROL (ToggleGroup single) ---------- */
-type SegProps = {
-  value: string;
-  onValueChange: (v: string) => void;
-  items: Array<{ value: string; label: string }>;
-};
-export const SegmentedControl = ({
-  value,
-  onValueChange,
-  items,
-}: SegProps) => (
-  <RToggleGroup.Root
-    type="single"
-    className="modern-sk-seg"
-    value={value}
-    onValueChange={(v) => v && onValueChange(v)}
-  >
-    {items.map((it) => (
-      <RToggleGroup.Item
-        key={it.value}
-        value={it.value}
-        className="modern-sk-seg__item"
-      >
-        {it.label}
-      </RToggleGroup.Item>
-    ))}
-  </RToggleGroup.Root>
-);
-
-/* ---------- SLIDER ---------- */
-export const Slider = (
-  props: ComponentPropsWithoutRef<typeof RSlider.Root>,
-) => (
-  <RSlider.Root className="modern-sk-slider" {...props}>
-    <RSlider.Track className="modern-sk-slider__track">
-      <RSlider.Range className="modern-sk-slider__range" />
-    </RSlider.Track>
-    <RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
-  </RSlider.Root>
-);
-
-/* ---------- STEPPER ---------- */
-export const Stepper = ({
-  onDecrement,
-  onIncrement,
-}: {
-  onDecrement: () => void;
-  onIncrement: () => void;
-}) => (
-  <div className="modern-sk-stepper">
-    <button type="button" onClick={onDecrement} aria-label="Decrease">
-      −
-    </button>
-    <button type="button" onClick={onIncrement} aria-label="Increase">
-      +
-    </button>
-  </div>
-);
-
-/* ---------- TABS ---------- */
-export const Tabs = RTabs.Root;
-export const TabsList = ({
-  items,
-}: {
-  items: Array<{ value: string; label: string }>;
-}) => (
-  <RTabs.List className="modern-sk-tabs">
-    {items.map((it) => (
-      <RTabs.Trigger
-        key={it.value}
-        value={it.value}
-        className="modern-sk-tabs__trigger"
-      >
-        {it.label}
-      </RTabs.Trigger>
-    ))}
-  </RTabs.List>
-);
-export const TabsContent = RTabs.Content;
-
-/* ---------- PROGRESS ---------- */
-export const Progress = ({ value = 0 }: { value?: number }) => (
-  <RProgress.Root className="modern-sk-progress" value={value}>
-    <RProgress.Indicator
-      className="modern-sk-progress__indicator"
-      style={{ width: `${value}%` }}
-    />
-  </RProgress.Root>
-);
-
-/* ---------- BADGE ---------- */
-type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';
-export const Badge = ({
-  variant = 'neutral',
-  dot,
-  className,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<'span'> & {
-  variant?: BadgeVariant;
-  dot?: boolean;
-}) => (
-  <span
-    className={cx(
-      'modern-sk-badge',
-      `modern-sk-badge--${variant}`,
-      dot && 'modern-sk-badge--dot',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </span>
-);
-
-/* ---------- CHIP ---------- */
-export const Chip = ({
-  children,
-  onRemove,
-}: {
-  children: ReactNode;
-  onRemove?: () => void;
-}) => (
-  <span className="modern-sk-chip">
-    {children}
-    {onRemove && (
-      <button type="button" className="x" onClick={onRemove} aria-label="Remove">
-        ×
-      </button>
-    )}
-  </span>
-);
-
-/* ---------- CARD ---------- */
-export const Card = ({
-  className,
-  ...props
-}: ComponentPropsWithoutRef<'div'>) => (
-  <div className={cx('modern-sk-card', className)} {...props} />
-);
-
-/* ---------- LIST ---------- */
-export const List = ({
-  className,
-  ...props
-}: ComponentPropsWithoutRef<'div'>) => (
-  <div className={cx('modern-sk-list', className)} {...props} />
-);
-export const Row = ({
-  selected,
-  className,
-  ...props
-}: ComponentPropsWithoutRef<'div'> & { selected?: boolean }) => (
-  <div
-    className={cx('modern-sk-row', selected && 'is-selected', className)}
-    {...props}
-  />
-);
-
-/* ---------- DROPDOWN MENU (Radix) ---------- */
-export const Menu = RMenu.Root;
-export const MenuTrigger = RMenu.Trigger;
-export const MenuContent = ({
-  children,
-  ...props
-}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
-  <RMenu.Portal>
-    <RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
-      {children}
-    </RMenu.Content>
-  </RMenu.Portal>
-);
-export const MenuItem = ({
-  icon,
-  shortcut,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
-  icon?: ReactNode;
-  shortcut?: string;
-}) => (
-  <RMenu.Item className="modern-sk-menu-item" {...props}>
-    {icon && <span className="ph">{icon}</span>}
-    {children}
-    {shortcut && <span className="sc">{shortcut}</span>}
-  </RMenu.Item>
-);
-export const MenuSeparator = () => (
-  <RMenu.Separator className="modern-sk-menu-sep" />
-);
-
-/* Static menu surface — for showcasing the menu without a trigger. */
-export const MenuSurface = ({ children }: { children: ReactNode }) => (
-  <div className="modern-sk-menu">{children}</div>
-);
-export const MenuRow = ({
-  icon,
-  shortcut,
-  children,
-}: {
-  icon?: ReactNode;
-  shortcut?: string;
-  children: ReactNode;
-}) => (
-  <div className="modern-sk-menu-item">
-    {icon && <span className="ph">{icon}</span>}
-    {children}
-    {shortcut && <span className="sc">{shortcut}</span>}
-  </div>
-);
-
-/* ---------- TOOLTIP (Radix) ---------- */
-export const Tooltip = ({
-  content,
-  children,
-}: {
-  content: ReactNode;
-  children: ReactNode;
-}) => (
-  <RTooltip.Root>
-    <RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
-    <RTooltip.Portal>
-      <RTooltip.Content className="modern-sk-tooltip" sideOffset={6}>
-        {content}
-      </RTooltip.Content>
-    </RTooltip.Portal>
-  </RTooltip.Root>
-);
-
-/* ---------- ICON BUTTON ---------- */
-type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
-  variant?: BtnVariant;
-  size?: 'sm' | 'lg';
-};
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ variant = 'key', size, className, ...props }, ref) => (
-    <button
-      ref={ref}
-      className={cx(
-        'modern-sk-btn',
-        'modern-sk-iconbtn',
-        variant !== 'key' && `modern-sk-btn--${variant}`,
-        size && `modern-sk-iconbtn--${size}`,
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-IconButton.displayName = 'IconButton';
-
-/* ---------- SPINNER ----------
-   Carved donut groove (sunk like the switch well, dark rim at top →
-   light catch at the bottom) with a glossy lime arc spinning inside it. */
-export const Spinner = ({
-  size,
-  className,
-  ...props
-}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
-  const gid = `modern-sk-groove-${useId()}`;
-  return (
-    <span
-      role="status"
-      aria-label="Loading"
-      className={cx('modern-sk-spinner', size && `modern-sk-spinner--${size}`, className)}
-      {...props}
-    >
-      <svg viewBox="0 0 36 36" fill="none">
-        <defs>
-          <linearGradient
-            id={gid}
-            x1="18"
-            y1="4"
-            x2="18"
-            y2="32"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0" stopColor="var(--spin-groove-1)" />
-            <stop offset="1" stopColor="var(--spin-groove-2)" />
-          </linearGradient>
-        </defs>
-        {/* carved channel */}
-        <circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
-        {/* glossy lime arc, nested inside the groove with rounded ends */}
-        <circle
-          className="modern-sk-spinner__arc"
-          cx="18"
-          cy="18"
-          r="14"
-          stroke="var(--lime)"
-          strokeWidth="3"
-          strokeLinecap="round"
-          strokeDasharray="22 88"
-        />
-      </svg>
-    </span>
-  );
-};
-
-/* ---------- CALLOUT ---------- */
-type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
-export const Callout = ({
-  variant = 'info',
-  icon,
-  children,
-}: {
-  variant?: CalloutVariant;
-  icon?: ReactNode;
-  children: ReactNode;
-}) => (
-  <div className={cx('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
-    {icon && <span className="modern-sk-callout__icon">{icon}</span>}
-    <div className="modern-sk-callout__body">{children}</div>
-  </div>
-);
-
-/* ---------- TABLE ---------- */
-export const Table = ({
-  children,
-  ...props
-}: ComponentPropsWithoutRef<'table'>) => (
-  <div className="modern-sk-table-wrap">
-    <table className="modern-sk-table" {...props}>
-      {children}
-    </table>
-  </div>
-);
-export const THead = (p: ComponentPropsWithoutRef<'thead'>) => <thead {...p} />;
-export const TBody = (p: ComponentPropsWithoutRef<'tbody'>) => <tbody {...p} />;
-export const Tr = ({
-  selected,
-  className,
-  ...props
-}: ComponentPropsWithoutRef<'tr'> & { selected?: boolean }) => (
-  <tr className={cx(selected && 'is-selected', className)} {...props} />
-);
-export const Th = (p: ComponentPropsWithoutRef<'th'>) => <th {...p} />;
-export const Td = (p: ComponentPropsWithoutRef<'td'>) => <td {...p} />;
-
-/* ---------- SCROLL AREA (Radix) ---------- */
-export const ScrollArea = ({
-  children,
-  className,
-  style,
-}: {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}) => (
-  <RScrollArea.Root className={cx('modern-sk-scroll', className)} style={style}>
-    <RScrollArea.Viewport className="modern-sk-scroll__viewport">
-      {children}
-    </RScrollArea.Viewport>
-    <RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="vertical">
-      <RScrollArea.Thumb className="modern-sk-scroll__thumb" />
-    </RScrollArea.Scrollbar>
-    <RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="horizontal">
-      <RScrollArea.Thumb className="modern-sk-scroll__thumb" />
-    </RScrollArea.Scrollbar>
-    <RScrollArea.Corner />
-  </RScrollArea.Root>
-);
-
-/* ---------- DIALOG / MODAL (Radix Dialog) ---------- */
-export const Dialog = ({
-  trigger,
-  title,
-  description,
-  children,
-  footer,
-  open,
-  onOpenChange,
-}: {
-  trigger?: ReactNode;
-  title: string;
-  description?: ReactNode;
-  children?: ReactNode;
-  footer?: ReactNode;
-  open?: boolean;
-  onOpenChange?: (o: boolean) => void;
-}) => (
-  <RDialog.Root open={open} onOpenChange={onOpenChange}>
-    {trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
-    <RDialog.Portal>
-      <RDialog.Overlay className="modern-sk-overlay" />
-      <RDialog.Content className="modern-sk-dialog">
-        <RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
-        {description && (
-          <RDialog.Description className="modern-sk-dialog__desc">
-            {description}
-          </RDialog.Description>
-        )}
-        {children && <div className="modern-sk-dialog__body">{children}</div>}
-        {footer && <div className="modern-sk-dialog__footer">{footer}</div>}
-        <RDialog.Close asChild>
-          <IconButton
-            variant="ghost"
-            size="sm"
-            className="modern-sk-dialog__close"
-            aria-label="Close"
-          >
-            <X size={14} weight="bold" />
-          </IconButton>
-        </RDialog.Close>
-      </RDialog.Content>
-    </RDialog.Portal>
-  </RDialog.Root>
-);
-/* Low-level Dialog parts (for custom compositions). */
-export const DialogClose = RDialog.Close;
-
-/* ---------- ALERT DIALOG (Radix AlertDialog) ---------- */
-export const AlertDialog = ({
-  trigger,
-  title,
-  description,
-  cancelLabel = 'Cancel',
-  actionLabel = 'Confirm',
-  destructive,
-  onAction,
-  open,
-  onOpenChange,
-}: {
-  trigger?: ReactNode;
-  title: string;
-  description?: ReactNode;
-  cancelLabel?: string;
-  actionLabel?: string;
-  destructive?: boolean;
-  onAction?: () => void;
-  open?: boolean;
-  onOpenChange?: (o: boolean) => void;
-}) => (
-  <RAlertDialog.Root open={open} onOpenChange={onOpenChange}>
-    {trigger && <RAlertDialog.Trigger asChild>{trigger}</RAlertDialog.Trigger>}
-    <RAlertDialog.Portal>
-      <RAlertDialog.Overlay className="modern-sk-overlay" />
-      <RAlertDialog.Content className="modern-sk-dialog">
-        <RAlertDialog.Title className="modern-sk-dialog__title">
-          {title}
-        </RAlertDialog.Title>
-        {description && (
-          <RAlertDialog.Description className="modern-sk-dialog__desc">
-            {description}
-          </RAlertDialog.Description>
-        )}
-        <div className="modern-sk-dialog__footer">
-          <RAlertDialog.Cancel asChild>
-            <Button variant="ghost">{cancelLabel}</Button>
-          </RAlertDialog.Cancel>
-          <RAlertDialog.Action asChild>
-            <Button
-              variant={destructive ? 'ember' : 'primary'}
-              onClick={onAction}
-            >
-              {actionLabel}
-            </Button>
-          </RAlertDialog.Action>
-        </div>
-      </RAlertDialog.Content>
-    </RAlertDialog.Portal>
-  </RAlertDialog.Root>
-);
-
-/* ---------- WINDOW CHROME ---------- */
-export const Window = ({
-  title,
-  badge,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<'div'> & {
-  title: string;
-  badge?: ReactNode;
-}) => (
-  <div className="modern-sk-window" {...props}>
-    <div className="modern-sk-titlebar">
-      <span className="modern-sk-traffic r" />
-      <span className="modern-sk-traffic y" />
-      <span className="modern-sk-traffic g" />
-      <span className="ttl">{title}</span>
-      {badge && (
-        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
-          {badge}
-        </div>
-      )}
-    </div>
-    {children}
-  </div>
-);
+export * from './button';
+export * from './icon-button';
+export * from './text-field';
+export * from './select';
+export * from './selection';
+export * from './segmented-control';
+export * from './slider';
+export * from './tabs';
+export * from './progress';
+export * from './badge';
+export * from './card';
+export * from './list';
+export * from './menu';
+export * from './tooltip';
+export * from './spinner';
+export * from './callout';
+export * from './table';
+export * from './scroll-area';
+export * from './dialog';
+export * from './alert-dialog';
+export * from './window';
diff --git a/src/components/utils.ts b/src/components/utils.ts
new file mode 100644
index 0000000..e672f9d
--- /dev/null
+++ b/src/components/utils.ts
@@ -0,0 +1,2 @@
+export const cx = (...c: Array<string | false | undefined>) =>
+  c.filter(Boolean).join(' ');
diff --git a/src/components/window/index.tsx b/src/components/window/index.tsx
new file mode 100644
index 0000000..0478774
--- /dev/null
+++ b/src/components/window/index.tsx
@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+
+export const Window = ({
+  title,
+  badge,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & {
+  title: string;
+  badge?: ReactNode;
+}) => (
+  <div className="modern-sk-window" {...props}>
+    <div className="modern-sk-titlebar">
+      <span className="modern-sk-traffic r" />
+      <span className="modern-sk-traffic y" />
+      <span className="modern-sk-traffic g" />
+      <span className="ttl">{title}</span>
+      {badge && (
+        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
+          {badge}
+        </div>
+      )}
+    </div>
+    {children}
+  </div>
+);
diff --git a/src/stories/AlertDialog.stories.tsx b/src/stories/AlertDialog.stories.tsx
new file mode 100644
index 0000000..a818975
--- /dev/null
+++ b/src/stories/AlertDialog.stories.tsx
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { AlertDialog, Button } from '../components/ui';
+
+const meta = {
+  title: 'Overlays/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Confirmation dialog built on Radix AlertDialog. Use for destructive or irreversible actions — focus is trapped and the cancel button is always reachable. Set `destructive` to switch the action button to the ember (red) variant.',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    cancelLabel: { control: 'text' },
+    actionLabel: { control: 'text' },
+    destructive: { control: 'boolean' },
+    trigger: { control: false },
+  },
+  args: {
+    title: 'Delete this project?',
+    description: 'This action cannot be undone.',
+    actionLabel: 'Delete',
+    cancelLabel: 'Cancel',
+    destructive: true,
+    trigger: <Button variant="ember">Delete…</Button>,
+    onAction: () => {},
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Destructive: Story = {
+  render: () => (
+    <AlertDialog
+      trigger={<Button variant="ember">Delete account</Button>}
+      title="Delete your account?"
+      description="All data will be permanently removed. This cannot be undone."
+      actionLabel="Delete account"
+      cancelLabel="Keep account"
+      destructive
+      onAction={() => {}}
+    />
+  ),
+};
+
+export const Confirm: Story = {
+  render: () => (
+    <AlertDialog
+      trigger={<Button variant="primary">Publish</Button>}
+      title="Publish changes?"
+      description="This will make your changes visible to all users."
+      actionLabel="Publish"
+      cancelLabel="Cancel"
+      onAction={() => {}}
+    />
+  ),
+};
diff --git a/src/stories/Dialog.stories.tsx b/src/stories/Dialog.stories.tsx
new file mode 100644
index 0000000..a123f36
--- /dev/null
+++ b/src/stories/Dialog.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Dialog, Button, TextField } from '../components/ui';
+
+const meta = {
+  title: 'Overlays/Dialog',
+  component: Dialog,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Modal dialog built on Radix Dialog. Pass a `trigger` to wire open/close automatically, or control it with `open` / `onOpenChange`. Title is required; description, body, and footer are optional slots.',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    trigger: { control: false },
+    children: { control: false },
+    footer: { control: false },
+  },
+  args: {
+    title: 'Rename project',
+    description: 'Choose a new name for this project.',
+    trigger: <Button variant="primary">Open dialog</Button>,
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const WithBody: Story = {
+  name: 'With body',
+  render: () => (
+    <Dialog
+      trigger={<Button variant="primary">Open dialog</Button>}
+      title="Rename project"
+      description="Choose a new name for this project."
+      footer={<Button variant="primary">Save</Button>}
+    >
+      <TextField label="Project name" defaultValue="My project" />
+    </Dialog>
+  ),
+};
+
+export const NoDescription: Story = {
+  name: 'No description',
+  args: {
+    description: undefined,
+    title: 'Confirm action',
+  },
+};
diff --git a/src/styles/components.css b/src/styles/components.css
index a62661e..ef88cd2 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -310,7 +310,7 @@ textarea.modern-sk-field{ resize:vertical; min-height:64px; line-height:1.5; }
 .modern-sk-overlay{ position:fixed; inset:0; z-index:80; background:rgba(8,9,6,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
 .modern-sk-overlay[data-state="open"]{ animation:modern-sk-fade-in var(--dur-base) var(--ease-out); }
 .modern-sk-overlay[data-state="closed"]{ animation:modern-sk-fade-out var(--dur-quick) var(--ease-out); }
-.modern-sk-dialog{ position:fixed; z-index:81; top:50%; left:50%; transform:translate(-50%,-50%); width:min(92vw,460px); max-height:85vh; overflow:auto; border-radius:var(--r-xl); border:1px solid var(--hair-strong); background:var(--steel-800); box-shadow:var(--shadow-window); padding:22px 22px 20px; transform-origin:center; }
+.modern-sk-dialog{ position:fixed; z-index:81; top:50%; left:50%; translate:-50% -50%; width:min(92vw,460px); max-height:85vh; overflow:auto; border-radius:var(--r-xl); border:1px solid var(--hair-strong); background:var(--steel-800); box-shadow:var(--shadow-window); padding:22px 22px 20px; transform-origin:center; font-family:var(--font-sans); }
 .modern-sk-dialog[data-state="open"]{ animation:modern-sk-scale-in var(--dur-base) var(--ease-out); }
 .modern-sk-dialog[data-state="closed"]{ animation:modern-sk-scale-out var(--dur-quick) var(--ease-out); }
 .modern-sk-dialog__title{ font-family:var(--font-sans); font-size:var(--text-lg); font-weight:600; color:var(--fg-1); letter-spacing:var(--track-snug); }