Establish NODE.DC design system baseline

2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { cn } from "./cn";
+
+export interface SegmentedItem<T extends string> {
+  value: T;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps<T extends string> {
+  value: T;
+  items: Array<SegmentedItem<T>>;
+  label: string;
+  className?: string;
+  onChange: (value: T) => void;
+}
+
+export function SegmentedControl<T extends string>({
+  value,
+  items,
+  label,
+  className,
+  onChange,
+}: SegmentedControlProps<T>) {
+  return (
+    <div className={cn("nodedc-segmented", className)} role="tablist" aria-label={label}>
+      {items.map((item) => (
+        <button
+          key={item.value}
+          type="button"
+          className="nodedc-segmented__item"
+          role="tab"
+          aria-selected={item.value === value}
+          data-active={item.value === value ? "true" : undefined}
+          disabled={item.disabled}
+          onClick={() => onChange(item.value)}
+        >
+          {item.icon}
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+