Wheel Picker

1import "@ncdai/react-wheel-picker/style.css";
2 
3import * as WheelPickerPrimitive from "@ncdai/react-wheel-picker";
4 
5import { cn } from "@/lib/utils";
6 
7type WheelPickerValue = WheelPickerPrimitive.WheelPickerValue;
8 
9type WheelPickerOption<T extends WheelPickerValue = string> =
10  WheelPickerPrimitive.WheelPickerOption<T>;
11 
12type WheelPickerClassNames = WheelPickerPrimitive.WheelPickerClassNames;
13 
14function WheelPickerWrapper({
15  className,
16  ...props
17}: React.ComponentProps<typeof WheelPickerPrimitive.WheelPickerWrapper>) {
18  return (
19    <WheelPickerPrimitive.WheelPickerWrapper
20      className={cn(
21        "w-56 rounded-lg border border-zinc-200 bg-white px-1 shadow-xs dark:border-zinc-700/80 dark:bg-zinc-900",
22        "*:data-rwp:first:*:data-rwp-highlight-wrapper:rounded-s-md",
23        "*:data-rwp:last:*:data-rwp-highlight-wrapper:rounded-e-md",
24        className
25      )}
26      {...props}
27    />
28  );
29}
30 
31function WheelPicker<T extends WheelPickerValue = string>({
32  classNames,
33  ...props
34}: WheelPickerPrimitive.WheelPickerProps<T>) {
35  return (
36    <WheelPickerPrimitive.WheelPicker
37      classNames={{
38        optionItem: "text-zinc-400 dark:text-zinc-500",
39        highlightWrapper:
40          "bg-zinc-100 text-zinc-950 dark:bg-zinc-800 dark:text-zinc-50",
41        ...classNames,
42      }}
43      {...props}
44    />
45  );
46}
47 
48export { WheelPicker, WheelPickerWrapper };
49export type { WheelPickerClassNames, WheelPickerOption };