& {
+ icon?: ReactNode;
+ shortcut?: string;
+}) => (
+
+ {icon && {icon}}
+ {children}
+ {shortcut && {shortcut}}
+
+);
+
+export const MenuSeparator = () => (
+
+);
+
+export const MenuSurface = ({ children }: { children: ReactNode }) => (
+ {children}
+);
+
+export const MenuRow = ({
+ icon,
+ shortcut,
+ children,
+}: {
+ icon?: ReactNode;
+ shortcut?: string;
+ children: ReactNode;
+}) => (
+
+ {icon && {icon}}
+ {children}
+ {shortcut && {shortcut}}
+
+);
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) => (
+
+
+
+);
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) => (
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+);
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,
+ '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) => (
+ v && onValueChange(v)}
+ {...props}
+ >
+ {items.map((it) => (
+
+ {it.label}
+
+ ))}
+
+);
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 & {
+ placeholder?: string;
+ items: Array<{ value: string; label: string }>;
+ 'aria-label'?: string;
+};
+
+export const Select = ({ placeholder, items, ...rest }: SelectProps) => (
+
+
+
+
+
+
+
+
+
+
+ {items.map((it) => (
+
+ {it.label}
+
+
+
+
+ ))}
+
+
+
+
+);
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) => (
+
+
+
+);
+
+export const Checkbox = (props: ComponentPropsWithoutRef) => (
+
+
+
+
+
+);
+
+export const RadioGroup = RRadioGroup.Root;
+
+export const RadioItem = ({
+ value,
+ ...props
+}: ComponentPropsWithoutRef) => (
+
+
+
+);
+
+export const Control = ({
+ children,
+ control,
+}: {
+ children: ReactNode;
+ control: ReactNode;
+}) => (
+
+);
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) => (
+
+
+
+
+
+
+);
+
+export const Stepper = ({
+ onDecrement,
+ onIncrement,
+}: {
+ onDecrement: () => void;
+ onIncrement: () => void;
+}) => (
+
+
+
+
+);
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 (
+
+
+
+ );
+};
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'>) => (
+
+);
+
+export const THead = (p: ComponentPropsWithoutRef<'thead'>) => ;
+export const TBody = (p: ComponentPropsWithoutRef<'tbody'>) => ;
+
+export const Tr = ({
+ selected,
+ className,
+ ...props
+}: ComponentPropsWithoutRef<'tr'> & { selected?: boolean }) => (
+ |
+);
+
+export const Th = (p: ComponentPropsWithoutRef<'th'>) => | ;
+export const Td = (p: ComponentPropsWithoutRef<'td'>) => | ;
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,
+ 'children'
+>) => (
+
+ {items.map((it) => (
+
+ {it.label}
+
+ ))}
+
+);
+
+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>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+TextField.displayName = 'TextField';
+
+export const TextArea = forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+TextArea.displayName = 'TextArea';
+
+export const SearchField = ({
+ icon,
+ ...props
+}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
+
+ {icon}
+
+
+);
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, 'children'>;
+
+export const Tooltip = ({
+ content,
+ children,
+ delayDuration,
+ open,
+ defaultOpen,
+ onOpenChange,
+ sideOffset = 6,
+ className,
+ ...contentProps
+}: TooltipProps) => (
+
+ {children}
+
+
+ {content}
+
+
+
+);
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) =>
- 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(
- ({ variant = 'key', size, iconOnly, className, ...props }, ref) => (
-
- ),
-);
-Button.displayName = 'Button';
-
-/* ---------- TEXT FIELD ---------- */
-export const TextField = forwardRef<
- HTMLInputElement,
- ComponentPropsWithoutRef<'input'>
->(({ className, ...props }, ref) => (
-
-));
-TextField.displayName = 'TextField';
-
-export const TextArea = forwardRef<
- HTMLTextAreaElement,
- ComponentPropsWithoutRef<'textarea'>
->(({ className, ...props }, ref) => (
-
-));
-TextArea.displayName = 'TextArea';
-
-export const SearchField = ({
- icon,
- ...props
-}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
-
- {icon}
-
-
-);
-
-/* ---------- 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) => (
-
-
-
-
-
-
-
-
-
-
- {items.map((it) => (
-
- {it.label}
-
-
-
-
- ))}
-
-
-
-
-);
-
-/* ---------- SWITCH ---------- */
-export const Switch = (
- props: ComponentPropsWithoutRef,
-) => (
-
-
-
-);
-
-/* ---------- CHECKBOX ---------- */
-export const Checkbox = (
- props: ComponentPropsWithoutRef,
-) => (
-
-
-
-
-
-);
-
-/* ---------- RADIO GROUP ---------- */
-export const RadioGroup = RRadioGroup.Root;
-export const RadioItem = ({
- value,
- ...props
-}: ComponentPropsWithoutRef) => (
-
-
-
-);
-
-/* control + label row helper */
-export const Control = ({
- children,
- control,
-}: {
- children: ReactNode;
- control: ReactNode;
-}) => (
-
-);
-
-/* ---------- 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) => (
- v && onValueChange(v)}
- >
- {items.map((it) => (
-
- {it.label}
-
- ))}
-
-);
-
-/* ---------- SLIDER ---------- */
-export const Slider = (
- props: ComponentPropsWithoutRef,
-) => (
-
-
-
-
-
-
-);
-
-/* ---------- STEPPER ---------- */
-export const Stepper = ({
- onDecrement,
- onIncrement,
-}: {
- onDecrement: () => void;
- onIncrement: () => void;
-}) => (
-
-
-
-
-);
-
-/* ---------- TABS ---------- */
-export const Tabs = RTabs.Root;
-export const TabsList = ({
- items,
-}: {
- items: Array<{ value: string; label: string }>;
-}) => (
-
- {items.map((it) => (
-
- {it.label}
-
- ))}
-
-);
-export const TabsContent = RTabs.Content;
-
-/* ---------- PROGRESS ---------- */
-export const Progress = ({ value = 0 }: { value?: number }) => (
-
-
-
-);
-
-/* ---------- BADGE ---------- */
-type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';
-export const Badge = ({
- variant = 'neutral',
- dot,
- className,
- children,
- ...props
-}: ComponentPropsWithoutRef<'span'> & {
- variant?: BadgeVariant;
- dot?: boolean;
-}) => (
-
- {children}
-
-);
-
-/* ---------- CHIP ---------- */
-export const Chip = ({
- children,
- onRemove,
-}: {
- children: ReactNode;
- onRemove?: () => void;
-}) => (
-
- {children}
- {onRemove && (
-
- )}
-
-);
-
-/* ---------- CARD ---------- */
-export const Card = ({
- className,
- ...props
-}: ComponentPropsWithoutRef<'div'>) => (
-
-);
-
-/* ---------- LIST ---------- */
-export const List = ({
- className,
- ...props
-}: ComponentPropsWithoutRef<'div'>) => (
-
-);
-export const Row = ({
- selected,
- className,
- ...props
-}: ComponentPropsWithoutRef<'div'> & { selected?: boolean }) => (
-
-);
-
-/* ---------- DROPDOWN MENU (Radix) ---------- */
-export const Menu = RMenu.Root;
-export const MenuTrigger = RMenu.Trigger;
-export const MenuContent = ({
- children,
- ...props
-}: ComponentPropsWithoutRef) => (
-
-
- {children}
-
-
-);
-export const MenuItem = ({
- icon,
- shortcut,
- children,
- ...props
-}: ComponentPropsWithoutRef & {
- icon?: ReactNode;
- shortcut?: string;
-}) => (
-
- {icon && {icon}}
- {children}
- {shortcut && {shortcut}}
-
-);
-export const MenuSeparator = () => (
-
-);
-
-/* Static menu surface — for showcasing the menu without a trigger. */
-export const MenuSurface = ({ children }: { children: ReactNode }) => (
- {children}
-);
-export const MenuRow = ({
- icon,
- shortcut,
- children,
-}: {
- icon?: ReactNode;
- shortcut?: string;
- children: ReactNode;
-}) => (
-
- {icon && {icon}}
- {children}
- {shortcut && {shortcut}}
-
-);
-
-/* ---------- TOOLTIP (Radix) ---------- */
-export const Tooltip = ({
- content,
- children,
-}: {
- content: ReactNode;
- children: ReactNode;
-}) => (
-
- {children}
-
-
- {content}
-
-
-
-);
-
-/* ---------- ICON BUTTON ---------- */
-type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
- variant?: BtnVariant;
- size?: 'sm' | 'lg';
-};
-export const IconButton = forwardRef(
- ({ variant = 'key', size, className, ...props }, ref) => (
-
- ),
-);
-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 (
-
-
-
- );
-};
-
-/* ---------- CALLOUT ---------- */
-type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
-export const Callout = ({
- variant = 'info',
- icon,
- children,
-}: {
- variant?: CalloutVariant;
- icon?: ReactNode;
- children: ReactNode;
-}) => (
-
- {icon &&
{icon}}
-
{children}
-
|
-);
-export const Th = (p: ComponentPropsWithoutRef<'th'>) => | ;
-export const Td = (p: ComponentPropsWithoutRef<'td'>) => | ;
-
-/* ---------- SCROLL AREA (Radix) ---------- */
-export const ScrollArea = ({
- children,
- className,
- style,
-}: {
- children: ReactNode;
- className?: string;
- style?: CSSProperties;
-}) => (
-
-
- {children}
-
-
-
-
-
-
-
-
-
-);
-
-/* ---------- 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;
-}) => (
-
- {trigger && {trigger}}
-
-
-
- {title}
- {description && (
-
- {description}
-
- )}
- {children && {children}
}
- {footer && {footer}
}
-
-
-
-
-
-
-
-
-);
-/* 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;
-}) => (
-
- {trigger && {trigger}}
-
-
-
-
- {title}
-
- {description && (
-
- {description}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-);
-
-/* ---------- WINDOW CHROME ---------- */
-export const Window = ({
- title,
- badge,
- children,
- ...props
-}: ComponentPropsWithoutRef<'div'> & {
- title: string;
- badge?: ReactNode;
-}) => (
-
-
-
-
-
-
{title}
- {badge && (
-
- {badge}
-
- )}
-
- {children}
-
+
+
+
+
+
{title}
+ {badge && (
+
+ {badge}
+
+ )}
+
+ {children}
+