51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1885,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/default/button/button"; import { Input, type InputProps } from "@/registry/default/input/input"; import { Textarea } from "@/registry/default/textarea/textarea"; const inputGroupVariants = cva( [ "group/input-group relative flex w-full items-center rounded-lg border bg-clip-padding", "min-w-0 has-[>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]:outline-ring/50 has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:outline-offset-2 has-[[data-slot=input-group-control]:focus-visible]:outline-solid", // Error state. "has-[[data-slot][aria-invalid=true]]:outline-destructive/50 has-[[data-slot][aria-invalid=true]]:outline-2 has-[[data-slot][aria-invalid=true]]:outline-offset-2 has-[[data-slot][aria-invalid=true]]:outline-solid", // Transition outline "outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out", ], { variants: { variant: { // Opaque "lifted" bg — use on the page or any non-elevated substrate. default: "bg-input", // Translucent overlay — use inside Cards, Dialogs, or any surface // where the opaque default would collapse into its parent. elevated: "bg-input-elevated", }, }, defaultVariants: { variant: "default", }, }, ); function InputGroup({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps) { return (

); } 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-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-60", { 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.45rem] 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} /> ); } // Sizes here are deliberately smaller than the standalone Button's — the button // must fit inside the input's border and track the input's height, not the // viewport. Note the name collision: `xs` here is 24px vs the Button's 32px. // Intentional; don't "reconcile" them with the Button scale. const inputGroupButtonVariants = cva( "text-sm shadow-none flex gap-2 items-center min-h-0", { variants: { size: { xs: "h-6 sm: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 sm:h-8 px-2 gap-1.5 rounded-[calc(var(--radius)-5px)] has-[>svg]:px-2", icon_xs: "size-6 sm:size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0", icon_sm: "size-8 sm:size-8 p-0 has-[>svg]:p-0", }, }, defaultVariants: { size: "xs", }, }, ); function InputGroupButton({ className, variant = "ghost", size = "xs", ...props }: Omit, "size"> & VariantProps) { return (