Publish DevRunbook source

2026-09-03 04:09:17 +02:00
commit cfd2804e27
928 changed files with 161642 additions and 0 deletions
@@ -0,0 +1,50 @@
+import { classNames } from '../lib/class-names'
+
+export interface SegmentedControlOption<Value extends string> {
+  readonly value: Value
+  readonly label: string
+  readonly disabled?: boolean
+}
+
+export interface SegmentedControlProps<Value extends string> {
+  readonly legend: string
+  readonly name: string
+  readonly value: Value
+  readonly options: readonly SegmentedControlOption<Value>[]
+  readonly onValueChange?: (value: Value) => void
+  readonly className?: string
+  readonly disabled?: boolean
+}
+
+export function SegmentedControl<Value extends string>({
+  legend,
+  name,
+  value,
+  options,
+  onValueChange,
+  className,
+  disabled = false,
+}: SegmentedControlProps<Value>) {
+  return (
+    <fieldset
+      className={classNames('drb-segmented-control', className)}
+      disabled={disabled}
+    >
+      <legend className="drb-visually-hidden">{legend}</legend>
+      {options.map((option) => (
+        <label className="drb-segmented-control__option" key={option.value}>
+          <input
+            className="drb-segmented-control__input"
+            type="radio"
+            name={name}
+            value={option.value}
+            checked={option.value === value}
+            disabled={option.disabled}
+            onChange={() => onValueChange?.(option.value)}
+          />
+          <span className="drb-segmented-control__label">{option.label}</span>
+        </label>
+      ))}
+    </fieldset>
+  )
+}