[V0_FILE]typescriptreact:file="components/ui/field.tsx" "use client" import { useMemo } from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Label } from '@/components/ui/label' import { Separator } from '@/components/ui/separator' function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { return (

[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className )} {...props} /> ) } function FieldLegend({ className, variant = "legend", ...props }: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) { return ( ) } function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { return (

[data-slot=field-group]]:gap-4", className )} {...props} /> ) } const fieldVariants = cva( "group/field flex w-full gap-3 data-[invalid=true]:text-destructive", { variants: { orientation: { vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"], horizontal: [ "flex-row items-center", "[&>[data-slot=field-label]]:flex-auto", "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", ], responsive: [ "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto", "@md/field-group:[&>[data-slot=field-label]]:flex-auto", "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", ], }, }, defaultVariants: { orientation: "vertical", }, } ) function Field({ className, orientation = "vertical", ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function FieldContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function FieldLabel({ className, ...props }: React.ComponentProps) { return ( [data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className )} {...props} /> ) } function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { return (

a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className )} {...props} /> ) } function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & { children?: React.ReactNode }) { return (

{children && ( {children} )}

) } function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & { errors?: Array<{ message?: string } | undefined> }) { const content = useMemo(() => { if (children) { return children } if (!errors) { return null } if (errors?.length === 1 && errors[0]?.message) { return errors[0].message } return (

{error.message}

) }, [children, errors]) if (!content) { return null } return (

{content}

) } export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, } [V0_FILE]typescriptreact:file="components/ui/button-group.tsx" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Separator } from '@/components/ui/separator' const buttonGroupVariants = cva( "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", { variants: { orientation: { horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none", vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none", }, }, defaultVariants: { orientation: "horizontal", }, } ) function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<"div"> & { asChild?: boolean }) { const Comp = asChild ? Slot : "div" return ( ) } function ButtonGroupSeparator({ className, orientation = "vertical", ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/input-group.tsx" "use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' function InputGroup({ className, ...props }: React.ComponentProps<"div">) { return (

textarea]:h-auto", // Variants based on alignment. "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", // Focus state. "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", // Error state. "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className )} {...props} /> ) } const inputGroupAddonVariants = cva( "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", { variants: { align: { "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]", "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]", "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5", "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5", }, }, defaultVariants: { align: "inline-start", }, } ) function InputGroupAddon({ className, align = "inline-start", ...props }: React.ComponentProps<"div"> & VariantProps) { return (

{ if ((e.target as HTMLElement).closest("button")) { return } e.currentTarget.parentElement?.querySelector("input")?.focus() }} {...props} /> ) } const inputGroupButtonVariants = cva( "text-sm shadow-none flex gap-2 items-center", { variants: { size: { xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2", sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5", "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0", "icon-sm": "size-8 p-0 has-[>svg]:p-0", }, }, defaultVariants: { size: "xs", }, } ) function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }: Omit, "size"> & VariantProps) { return (

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This