Wheel Picker

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