Segmented Control

1import * as React from "react";
2import { Radio } from "@base-ui/react/radio";
3import { RadioGroup } from "@base-ui/react/radio-group";
4import { cn } from "@/lib/utils";
5 
6function SegmentedControl({ className, ...props }: RadioGroup.Props) {
7  return (
8    <RadioGroup
9      className={cn("flex w-fit rounded-md bg-grey-100 dark:bg-grey-700", className)}
10      {...props}
11    >
12      {props.children}
13    </RadioGroup>
14  );
15}
16 
17function SegmentedControlItem({ className, children, ...props }: Radio.Root.Props) {
18  return (
19    <Radio.Root
20      className={cn(
21        "typography-body-medium flex h-6 cursor-default items-center justify-center rounded-md px-2 text-center text-black-500 outline-none select-none focus-visible:inset-ring focus-visible:inset-ring-blue-500 data-checked:border-grey-200 data-checked:bg-white-1000 data-checked:text-black-1000 data-checked:inset-ring data-checked:inset-ring-grey-200 focus-visible:data-checked:inset-ring-blue-500 data-disabled:text-black-400 dark:text-white-500 dark:data-checked:bg-grey-800 dark:data-checked:text-white-1000 dark:data-checked:inset-ring-grey-600 dark:data-disabled:text-white-400",
22        className,
23      )}
24      {...props}
25    >
26      {children}
27    </Radio.Root>
28  );
29}
30 
31export { SegmentedControl, SegmentedControlItem };