diff --git a/packages/shadcn-ui/package.json b/packages/shadcn-ui/package.json index 281f5569..98705274 100644 --- a/packages/shadcn-ui/package.json +++ b/packages/shadcn-ui/package.json @@ -36,33 +36,33 @@ "postcss": "^8.5.3" }, "dependencies": { - "@hookform/resolvers": "^5.0.1", - "@radix-ui/react-accordion": "^1.2.10", - "@radix-ui/react-alert-dialog": "^1.1.13", - "@radix-ui/react-aspect-ratio": "^1.1.6", - "@radix-ui/react-avatar": "^1.1.9", - "@radix-ui/react-checkbox": "^1.3.1", - "@radix-ui/react-collapsible": "^1.1.10", - "@radix-ui/react-context-menu": "^2.2.14", - "@radix-ui/react-dialog": "^1.1.13", - "@radix-ui/react-dropdown-menu": "^2.1.14", - "@radix-ui/react-hover-card": "^1.1.13", + "@hookform/resolvers": "^5.2.2", + "@radix-ui/react-accordion": "^1.2.12", + "@radix-ui/react-alert-dialog": "^1.1.15", + "@radix-ui/react-aspect-ratio": "^1.1.7", + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-checkbox": "^1.3.3", + "@radix-ui/react-collapsible": "^1.1.12", + "@radix-ui/react-context-menu": "^2.2.16", + "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-dropdown-menu": "^2.1.16", + "@radix-ui/react-hover-card": "^1.1.15", "@radix-ui/react-label": "^2.1.7", - "@radix-ui/react-menubar": "^1.1.14", - "@radix-ui/react-navigation-menu": "^1.2.12", - "@radix-ui/react-popover": "^1.1.13", - "@radix-ui/react-progress": "^1.1.6", - "@radix-ui/react-radio-group": "^1.3.6", - "@radix-ui/react-scroll-area": "^1.2.8", - "@radix-ui/react-select": "^2.2.4", + "@radix-ui/react-menubar": "^1.1.16", + "@radix-ui/react-navigation-menu": "^1.2.14", + "@radix-ui/react-popover": "^1.1.15", + "@radix-ui/react-progress": "^1.1.7", + "@radix-ui/react-radio-group": "^1.3.8", + "@radix-ui/react-scroll-area": "^1.2.10", + "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.7", - "@radix-ui/react-slider": "^1.3.4", + "@radix-ui/react-slider": "^1.3.6", "@radix-ui/react-slot": "^1.2.3", - "@radix-ui/react-switch": "^1.2.4", - "@radix-ui/react-tabs": "^1.1.11", - "@radix-ui/react-toggle": "^1.1.8", - "@radix-ui/react-toggle-group": "^1.1.9", - "@radix-ui/react-tooltip": "^1.2.6", + "@radix-ui/react-switch": "^1.2.6", + "@radix-ui/react-tabs": "^1.1.13", + "@radix-ui/react-toggle": "^1.1.10", + "@radix-ui/react-toggle-group": "^1.1.11", + "@radix-ui/react-tooltip": "^1.2.8", "@tailwindcss/cli": "^4.1.5", "add": "^2.0.6", "class-variance-authority": "^0.7.1", @@ -78,14 +78,14 @@ "react": "^19.1.0", "react-day-picker": "9.11.1", "react-dom": "^19.1.0", - "react-hook-form": "^7.58.1", - "react-resizable-panels": "^3.0.1", - "recharts": "^2.15.3", - "sonner": "^2.0.3", + "react-hook-form": "^7.65.0", + "react-resizable-panels": "^3.0.6", + "recharts": "^2.15.4", + "sonner": "^2.0.7", "tailwind-merge": "^3.2.0", "tailwindcss": "^4.1.5", "tw-animate-css": "^1.2.9", "vaul": "^1.1.2", - "zod": "^3.25.36" + "zod": "^3.25.76" } } diff --git a/packages/shadcn-ui/src/components/accordion.tsx b/packages/shadcn-ui/src/components/accordion.tsx index e3b868fe..277a477c 100644 --- a/packages/shadcn-ui/src/components/accordion.tsx +++ b/packages/shadcn-ui/src/components/accordion.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDownIcon } from "lucide-react" diff --git a/packages/shadcn-ui/src/components/alert-dialog.tsx b/packages/shadcn-ui/src/components/alert-dialog.tsx index 793cc755..8e8fce66 100644 --- a/packages/shadcn-ui/src/components/alert-dialog.tsx +++ b/packages/shadcn-ui/src/components/alert-dialog.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" diff --git a/packages/shadcn-ui/src/components/aspect-ratio.tsx b/packages/shadcn-ui/src/components/aspect-ratio.tsx index 3df3fd02..9b491fb8 100644 --- a/packages/shadcn-ui/src/components/aspect-ratio.tsx +++ b/packages/shadcn-ui/src/components/aspect-ratio.tsx @@ -1,5 +1,3 @@ -"use client" - import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" function AspectRatio({ diff --git a/packages/shadcn-ui/src/components/avatar.tsx b/packages/shadcn-ui/src/components/avatar.tsx index 227995b0..e4dac9f7 100644 --- a/packages/shadcn-ui/src/components/avatar.tsx +++ b/packages/shadcn-ui/src/components/avatar.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" diff --git a/packages/shadcn-ui/src/components/badge.tsx b/packages/shadcn-ui/src/components/badge.tsx index cfa636ae..d0955d67 100644 --- a/packages/shadcn-ui/src/components/badge.tsx +++ b/packages/shadcn-ui/src/components/badge.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@repo/shadcn-ui/lib/utils" const badgeVariants = cva( - "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { diff --git a/packages/shadcn-ui/src/components/button.tsx b/packages/shadcn-ui/src/components/button.tsx index 4c970431..5f0ae60e 100644 --- a/packages/shadcn-ui/src/components/button.tsx +++ b/packages/shadcn-ui/src/components/button.tsx @@ -1,6 +1,6 @@ -import { Slot } from "@radix-ui/react-slot" -import { type VariantProps, cva } from "class-variance-authority" import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@repo/shadcn-ui/lib/utils" @@ -35,6 +35,7 @@ const buttonVariants = cva( }, } ) + function Button({ className, variant, @@ -46,6 +47,7 @@ function Button({ asChild?: boolean }) { const Comp = asChild ? Slot : "button" + return ( ) } + export { Button, buttonVariants } diff --git a/packages/shadcn-ui/src/components/calendar.tsx b/packages/shadcn-ui/src/components/calendar.tsx index 8f57f15c..49acaf80 100644 --- a/packages/shadcn-ui/src/components/calendar.tsx +++ b/packages/shadcn-ui/src/components/calendar.tsx @@ -1,12 +1,13 @@ -"use client" - import * as React from "react" +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from "lucide-react" import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker" -import { Button, buttonVariants } from "@repo/shadcn-ui/components/button" import { cn } from "@repo/shadcn-ui/lib/utils" -import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' - +import { Button, buttonVariants } from "@repo/shadcn-ui/components/button" function Calendar({ className, diff --git a/packages/shadcn-ui/src/components/card.tsx b/packages/shadcn-ui/src/components/card.tsx index e39d6227..384b4630 100644 --- a/packages/shadcn-ui/src/components/card.tsx +++ b/packages/shadcn-ui/src/components/card.tsx @@ -1,75 +1,92 @@ -import * as React from "react"; +import * as React from "react" -import { cn } from "@repo/shadcn-ui/lib/utils"; +import { cn } from "@repo/shadcn-ui/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return (
- ); + ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (
- ); + ) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (
- ); + ) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (
- ); + ) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (
- ); + ) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { - return
; + return ( +
+ ) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (
- ); + ) } -export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }; +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +} diff --git a/packages/shadcn-ui/src/components/carousel.tsx b/packages/shadcn-ui/src/components/carousel.tsx index e3f8429c..b5ec3626 100644 --- a/packages/shadcn-ui/src/components/carousel.tsx +++ b/packages/shadcn-ui/src/components/carousel.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import useEmblaCarousel, { type UseEmblaCarouselType, diff --git a/packages/shadcn-ui/src/components/chart.tsx b/packages/shadcn-ui/src/components/chart.tsx index 916d424c..d33a507c 100644 --- a/packages/shadcn-ui/src/components/chart.tsx +++ b/packages/shadcn-ui/src/components/chart.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as RechartsPrimitive from "recharts" @@ -179,70 +177,72 @@ function ChartTooltipContent({ > {!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 + {payload + .filter((item) => item.type !== "none") + .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]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", - indicator === "dot" && "items-center" - )} - > - {formatter && item?.value !== undefined && item.name ? ( - formatter(item.value, item.name, item, index, item.payload) - ) : ( - <> - {itemConfig?.icon ? ( - - ) : ( - !hideIndicator && ( -
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" + )} + > + {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} - +
+
+ {nestLabel ? tooltipLabel : null} + + {itemConfig?.label || item.name} + +
+ {item.value && ( + + {item.value.toLocaleString()} + + )}
- {item.value && ( - - {item.value.toLocaleString()} - - )} -
- - )} -
- ) - })} + + )} +
+ ) + })}
) @@ -275,31 +275,33 @@ function ChartLegendContent({ className )} > - {payload.map((item) => { - const key = `${nameKey || item.dataKey || "value"}` - const itemConfig = getPayloadConfigFromPayload(config, item, key) + {payload + .filter((item) => item.type !== "none") + .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} -
- ) - })} + return ( +
svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3" + )} + > + {itemConfig?.icon && !hideIcon ? ( + + ) : ( +
+ )} + {itemConfig?.label} +
+ ) + })}
) } diff --git a/packages/shadcn-ui/src/components/checkbox.tsx b/packages/shadcn-ui/src/components/checkbox.tsx index 558e42b8..5c26c94a 100644 --- a/packages/shadcn-ui/src/components/checkbox.tsx +++ b/packages/shadcn-ui/src/components/checkbox.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { CheckIcon } from "lucide-react" @@ -21,7 +19,7 @@ function Checkbox({ > diff --git a/packages/shadcn-ui/src/components/collapsible.tsx b/packages/shadcn-ui/src/components/collapsible.tsx index ae9fad04..77f86bed 100644 --- a/packages/shadcn-ui/src/components/collapsible.tsx +++ b/packages/shadcn-ui/src/components/collapsible.tsx @@ -1,5 +1,3 @@ -"use client" - import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" function Collapsible({ diff --git a/packages/shadcn-ui/src/components/command.tsx b/packages/shadcn-ui/src/components/command.tsx index e882e525..e8e30194 100644 --- a/packages/shadcn-ui/src/components/command.tsx +++ b/packages/shadcn-ui/src/components/command.tsx @@ -1,53 +1,63 @@ -"use client"; +"use client" -import { Command as CommandPrimitive } from "cmdk"; -import { SearchIcon } from "lucide-react"; -import * as React from "react"; +import * as React from "react" +import { Command as CommandPrimitive } from "cmdk" +import { SearchIcon } from "lucide-react" +import { cn } from "@repo/shadcn-ui/lib/utils" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, -} from "@repo/shadcn-ui/components/dialog"; -import { cn } from "@repo/shadcn-ui/lib/utils"; +} from "@repo/shadcn-ui/components/dialog" -function Command({ className, ...props }: React.ComponentProps) { +function Command({ + className, + ...props +}: React.ComponentProps) { return ( - ); + ) } function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, + className, + showCloseButton = true, ...props }: React.ComponentProps & { - title?: string; - description?: string; + title?: string + description?: string + className?: string + showCloseButton?: boolean }) { return ( - + {title} {description} - - + + {children} - ); + ) } function CommandInput({ @@ -55,10 +65,13 @@ function CommandInput({ ...props }: React.ComponentProps) { return ( -
- +
+
- ); + ) } -function CommandList({ className, ...props }: React.ComponentProps) { +function CommandList({ + className, + ...props +}: React.ComponentProps) { return ( - ); + ) } -function CommandEmpty({ ...props }: React.ComponentProps) { +function CommandEmpty({ + ...props +}: React.ComponentProps) { return ( - ); + ) } function CommandGroup({ @@ -95,14 +116,14 @@ function CommandGroup({ }: React.ComponentProps) { return ( - ); + ) } function CommandSeparator({ @@ -111,44 +132,53 @@ function CommandSeparator({ }: React.ComponentProps) { return ( - ); + ) } -function CommandItem({ className, ...props }: React.ComponentProps) { +function CommandItem({ + className, + ...props +}: React.ComponentProps) { return ( - ); + ) } -function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) { +function CommandShortcut({ + className, + ...props +}: React.ComponentProps<"span">) { return ( - ); + ) } export { Command, CommandDialog, + CommandInput, + CommandList, CommandEmpty, CommandGroup, - CommandInput, CommandItem, - CommandList, - CommandSeparator, CommandShortcut, -}; + CommandSeparator, +} diff --git a/packages/shadcn-ui/src/components/context-menu.tsx b/packages/shadcn-ui/src/components/context-menu.tsx index e774ad41..86ed06f9 100644 --- a/packages/shadcn-ui/src/components/context-menu.tsx +++ b/packages/shadcn-ui/src/components/context-menu.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as ContextMenuPrimitive from "@radix-ui/react-context-menu" import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" @@ -66,7 +64,7 @@ function ContextMenuSubTrigger({ data-slot="context-menu-sub-trigger" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} diff --git a/packages/shadcn-ui/src/components/dialog.tsx b/packages/shadcn-ui/src/components/dialog.tsx index a688681e..2e4b897d 100644 --- a/packages/shadcn-ui/src/components/dialog.tsx +++ b/packages/shadcn-ui/src/components/dialog.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { XIcon } from "lucide-react" @@ -49,8 +47,11 @@ function DialogOverlay({ function DialogContent({ className, children, + showCloseButton = true, ...props -}: React.ComponentProps) { +}: React.ComponentProps & { + showCloseButton?: boolean +}) { return ( @@ -63,10 +64,15 @@ function DialogContent({ {...props} > {children} - - - Close - + {showCloseButton && ( + + + Close + + )} ) diff --git a/packages/shadcn-ui/src/components/drawer.tsx b/packages/shadcn-ui/src/components/drawer.tsx index 159b29c2..a3941086 100644 --- a/packages/shadcn-ui/src/components/drawer.tsx +++ b/packages/shadcn-ui/src/components/drawer.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import { Drawer as DrawerPrimitive } from "vaul" @@ -76,7 +74,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { return (
) diff --git a/packages/shadcn-ui/src/components/dropdown-menu.tsx b/packages/shadcn-ui/src/components/dropdown-menu.tsx index 002ca70f..73f505fe 100644 --- a/packages/shadcn-ui/src/components/dropdown-menu.tsx +++ b/packages/shadcn-ui/src/components/dropdown-menu.tsx @@ -1,5 +1,3 @@ -"use client" - import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" @@ -211,7 +209,7 @@ function DropdownMenuSubTrigger({ data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", + "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} diff --git a/packages/shadcn-ui/src/components/field.tsx b/packages/shadcn-ui/src/components/field.tsx index 510fb6c4..10edb764 100644 --- a/packages/shadcn-ui/src/components/field.tsx +++ b/packages/shadcn-ui/src/components/field.tsx @@ -1,9 +1,9 @@ -import { type VariantProps, cva } from "class-variance-authority" import { useMemo } from "react" +import { cva, type VariantProps } from "class-variance-authority" +import { cn } from "@repo/shadcn-ui/lib/utils" import { Label } from "@repo/shadcn-ui/components/label" import { Separator } from "@repo/shadcn-ui/components/separator" -import { cn } from "@repo/shadcn-ui/lib/utils" function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { return ( @@ -198,7 +198,7 @@ function FieldError({ return null } - if (errors?.length === 1) { + if (errors?.length == 1) { return errors[0]?.message } @@ -206,7 +206,7 @@ function FieldError({
    {errors.map( (error, index) => - error?.message &&
  • {error.message}
    • + error?.message &&
  • {error.message}
    • )}
) @@ -229,10 +229,14 @@ function FieldError({ } export { - Field, FieldContent, FieldDescription, + Field, + FieldLabel, + FieldDescription, FieldError, - FieldGroup, FieldLabel, FieldLegend, + FieldGroup, + FieldLegend, FieldSeparator, - FieldSet, FieldTitle + FieldSet, + FieldContent, + FieldTitle, } - diff --git a/packages/shadcn-ui/src/components/form.tsx b/packages/shadcn-ui/src/components/form.tsx index ee5ae84a..6d7fa950 100644 --- a/packages/shadcn-ui/src/components/form.tsx +++ b/packages/shadcn-ui/src/components/form.tsx @@ -1,31 +1,33 @@ -"use client"; +"use client" -import * as LabelPrimitive from "@radix-ui/react-label"; -import { Slot } from "@radix-ui/react-slot"; -import * as React from "react"; +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { Slot } from "@radix-ui/react-slot" import { Controller, - type ControllerProps, - type FieldPath, - type FieldValues, FormProvider, useFormContext, useFormState, -} from "react-hook-form"; + type ControllerProps, + type FieldPath, + type FieldValues, +} from "react-hook-form" -import { Label } from "@repo/shadcn-ui/components/label"; -import { cn } from "@repo/shadcn-ui/lib/utils"; +import { cn } from "@repo/shadcn-ui/lib/utils" +import { Label } from "@repo/shadcn-ui/components/label" -const Form = FormProvider; +const Form = FormProvider type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { - name: TName; -}; + name: TName +} -const FormFieldContext = React.createContext({} as FormFieldContextValue); +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) const FormField = < TFieldValues extends FieldValues = FieldValues, @@ -37,21 +39,21 @@ const FormField = < - ); -}; + ) +} const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext); - const itemContext = React.useContext(FormItemContext); - const { getFieldState } = useFormContext(); - const formState = useFormState({ name: fieldContext.name }); - const fieldState = getFieldState(fieldContext.name, formState); + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState } = useFormContext() + const formState = useFormState({ name: fieldContext.name }) + const fieldState = getFieldState(fieldContext.name, formState) if (!fieldContext) { - throw new Error("useFormField should be used within "); + throw new Error("useFormField should be used within ") } - const { id } = itemContext; + const { id } = itemContext return { id, @@ -60,94 +62,106 @@ const useFormField = () => { formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, - }; -}; + } +} type FormItemContextValue = { - id: string; -}; + id: string +} -const FormItemContext = React.createContext({} as FormItemContextValue); +const FormItemContext = React.createContext( + {} as FormItemContextValue +) function FormItem({ className, ...props }: React.ComponentProps<"div">) { - const id = React.useId(); + const id = React.useId() return ( -
+
- ); + ) } -function FormLabel({ className, ...props }: React.ComponentProps) { - const { error, formItemId } = useFormField(); +function FormLabel({ + className, + ...props +}: React.ComponentProps) { + const { error, formItemId } = useFormField() return (