- {payload.map((item) => {
- const key = `${nameKey || item.dataKey || "value"}`
+ return
{value}
+ }, [
+ label,
+ labelFormatter,
+ payload,
+ hideLabel,
+ labelClassName,
+ config,
+ labelKey,
+ ])
+
+ if (!active || !payload?.length) {
+ return null
+ }
+
+ const nestLabel = payload.length === 1 && indicator !== "dot"
+
+ return (
+
+ {!nestLabel ? tooltipLabel : null}
+
+ {payload.map((item, index) => {
+ const key = `${nameKey || item.name || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
+ const indicatorColor = color || item.payload.fill || item.color
return (
svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+ "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+ indicator === "dot" && "items-center"
)}
>
- {itemConfig?.icon && !hideIcon ? (
-
+ {formatter && item?.value !== undefined && item.name ? (
+ formatter(item.value, item.name, item, index, item.payload)
) : (
-
+ <>
+ {itemConfig?.icon ? (
+
+ ) : (
+ !hideIndicator && (
+
+ )
+ )}
+
+
+ {nestLabel ? tooltipLabel : null}
+
+ {itemConfig?.label || item.name}
+
+
+ {item.value && (
+
+ {item.value.toLocaleString()}
+
+ )}
+
+ >
)}
- {itemConfig?.label}
)
})}
- )
+
+ )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+ className,
+ hideIcon = false,
+ payload,
+ verticalAlign = "bottom",
+ nameKey,
+}: React.ComponentProps<"div"> &
+ Pick
& {
+ hideIcon?: boolean
+ nameKey?: string
+ }) {
+ const { config } = useChart()
+
+ if (!payload?.length) {
+ return null
}
-)
-ChartLegendContent.displayName = "ChartLegend"
+
+ return (
+
+ {payload.map((item) => {
+ const key = `${nameKey || item.dataKey || "value"}`
+ const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+ return (
+
svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+ )}
+ >
+ {itemConfig?.icon && !hideIcon ? (
+
+ ) : (
+
+ )}
+ {itemConfig?.label}
+
+ )
+ })}
+
+ )
+}
// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 7d2b3c3b..fa0e4b59 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -2,29 +2,31 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "@radix-ui/react-icons"
+import { CheckIcon } from "lucide-react"
import { cn } from "@/lib/utils"
-const Checkbox = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
- ) {
+ return (
+
-
-
-
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+
+
+
+ )
+}
export { Checkbox }
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
index 9fa48946..ae9fad04 100644
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -2,10 +2,32 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-const Collapsible = CollapsiblePrimitive.Root
+function Collapsible({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+function CollapsibleTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+function CollapsibleContent({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index c52980e8..f336ef72 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
) {
+ return
+}
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+function ContextMenuTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const ContextMenuGroup = ContextMenuPrimitive.Group
+function ContextMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+function ContextMenuPortal({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const ContextMenuSub = ContextMenuPrimitive.Sub
+function ContextMenuSub({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+function ContextMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const ContextMenuSubTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
->(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
-
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
- & {
+ inset?: boolean
+}) {
+ return (
+
-
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+ >
+ {children}
+
+
+ )
+}
-const ContextMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
->(({ className, inset, ...props }, ref) => (
-
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-))
-ContextMenuCheckboxItem.displayName =
- ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
->(({ className, inset, ...props }, ref) => (
-
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
+function ContextMenuSubContent({
className,
...props
-}: React.HTMLAttributes) => {
+}: React.ComponentProps) {
return (
-
+ )
+}
+
+function ContextMenuContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function ContextMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+
+ )
+}
+
+function ContextMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function ContextMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function ContextMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ )
+}
+
+function ContextMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function ContextMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+
)
}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
export {
ContextMenu,
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 95b0d38a..7d7a9d31 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -2,121 +2,134 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
-const Dialog = DialogPrimitive.Root
+function Dialog({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DialogTrigger = DialogPrimitive.Trigger
+function DialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DialogPortal = DialogPrimitive.Portal
+function DialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DialogClose = DialogPrimitive.Close
+function DialogClose({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
- ) {
+ return (
+
- {children}
-
-
- Close
-
-
-
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+ />
+ )
+}
-const DialogHeader = ({
+function DialogContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogTitle({
className,
...props
-}: React.HTMLAttributes) => (
-
-)
-DialogHeader.displayName = "DialogHeader"
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const DialogFooter = ({
+function DialogDescription({
className,
...props
-}: React.HTMLAttributes) => (
-
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+}: React.ComponentProps) {
+ return (
+
+ )
+}
export {
Dialog,
- DialogPortal,
- DialogOverlay,
- DialogTrigger,
DialogClose,
DialogContent,
- DialogHeader,
- DialogFooter,
- DialogTitle,
DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
}
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 6a0ef53d..199023b9 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -5,104 +5,118 @@ import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/lib/utils"
-const Drawer = ({
- shouldScaleBackground = true,
+function Drawer({
...props
-}: React.ComponentProps) => (
-
-)
-Drawer.displayName = "Drawer"
+}: React.ComponentProps) {
+ return
+}
-const DrawerTrigger = DrawerPrimitive.Trigger
+function DrawerTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DrawerPortal = DrawerPrimitive.Portal
+function DrawerPortal({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DrawerClose = DrawerPrimitive.Close
+function DrawerClose({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const DrawerOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
- ) {
+ return (
+
-
- {children}
-
-
-))
-DrawerContent.displayName = "DrawerContent"
+ />
+ )
+}
-const DrawerHeader = ({
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ {children}
+
+
+ )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DrawerTitle({
className,
...props
-}: React.HTMLAttributes) => (
-
-)
-DrawerHeader.displayName = "DrawerHeader"
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const DrawerFooter = ({
+function DrawerDescription({
className,
...props
-}: React.HTMLAttributes) => (
-
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+}: React.ComponentProps) {
+ return (
+
+ )
+}
export {
Drawer,
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 46cbfd8e..ec51e9cc 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -2,204 +2,256 @@
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import {
- CheckIcon,
- ChevronRightIcon,
- DotFilledIcon,
-} from "@radix-ui/react-icons"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
->(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
-
-))
-DropdownMenuSubTrigger.displayName =
- DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DropdownMenuSubContent.displayName =
- DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, sideOffset = 4, ...props }, ref) => (
-
-
-
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
->(({ className, inset, ...props }, ref) => (
- svg]:size-4 [&>svg]:shrink-0",
- inset && "pl-8",
- className
- )}
- {...props}
- />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-))
-DropdownMenuCheckboxItem.displayName =
- DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
->(({ className, inset, ...props }, ref) => (
-
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
- className,
+function DropdownMenu({
...props
-}: React.HTMLAttributes) => {
+}: React.ComponentProps) {
+ return
+}
+
+function DropdownMenuPortal({
+ ...props
+}: React.ComponentProps) {
return (
+
+ )
+}
+
+function DropdownMenuTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuContent({
+ className,
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+ )
+}
+
+function DropdownMenuSub({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
)
}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
+ DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
DropdownMenuRadioItem,
- DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
- DropdownMenuGroup,
- DropdownMenuPortal,
DropdownMenuSub,
- DropdownMenuSubContent,
DropdownMenuSubTrigger,
- DropdownMenuRadioGroup,
+ DropdownMenuSubContent,
}
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
index e54d91cf..e7541864 100644
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -5,25 +5,40 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
import { cn } from "@/lib/utils"
-const HoverCard = HoverCardPrimitive.Root
+function HoverCard({
+ ...props
+}: React.ComponentProps) {
+ return
+}
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+function HoverCardTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
-const HoverCardContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+function HoverCardContent({
+ className,
+ align = "center",
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index 84d07209..614f70e3 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,48 +1,57 @@
"use client"
import * as React from "react"
-import { DashIcon } from "@radix-ui/react-icons"
import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
import { cn } from "@/lib/utils"
-const InputOTP = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, containerClassName, ...props }, ref) => (
-
-))
-InputOTP.displayName = "InputOTP"
+function InputOTP({
+ className,
+ containerClassName,
+ ...props
+}: React.ComponentProps & {
+ containerClassName?: string
+}) {
+ return (
+
+ )
+}
-const InputOTPGroup = React.forwardRef<
- React.ElementRef<"div">,
- React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
-const InputOTPSlot = React.forwardRef<
- React.ElementRef<"div">,
- React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
+function InputOTPSlot({
+ index,
+ className,
+ ...props
+}: React.ComponentProps<"div"> & {
+ index: number
+}) {
const inputOTPContext = React.useContext(OTPInputContext)
- const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+ const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
return (
)}
)
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+}
-const InputOTPSeparator = React.forwardRef<
- React.ElementRef<"div">,
- React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-