Bar picker
Choose a value from segmented columns, with one wider, brighter selection and exact accessible amounts.
Implementation
1"use client";2 3import {4 useId,5 useRef,6 useState,7 type CSSProperties,8 type HTMLAttributes,9 type KeyboardEvent,10} from "react";11 12export type BarPickerBar = {13 id: string;14 label: string;15 name?: string;16 /** A non-negative amount. Null, negative and non-finite values are unavailable. */17 value: number | null;18 disabled?: boolean;19};20 21export type BarPickerProps = Omit<22 HTMLAttributes<HTMLDivElement>,23 "children" | "onChange" | "defaultValue"24> & {25 data: readonly BarPickerBar[];26 label?: string;27 value?: number;28 defaultValue?: number;