feat: structure

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>
+);