50: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"] 51: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"] 52:T56ca,"use client" import * as React from "react" import { flushSync } from "react-dom" import { Input as InputPrimitive } from "@base-ui/react/input" import { IconEye, IconEyeOff, IconX } from "@tabler/icons-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" import { easeOut, prefersReducedMotion, useSizeMorph } from "@/lib/motion" import { Button } from "@/components/ui/button" import { useAutosize } from "@/hooks/use-autosize" import { useComposedRef } from "@/hooks/use-composed-ref" import { useInvalidShake } from "@/hooks/use-invalid-shake" import { useMergedRef } from "@/hooks/use-merged-ref" import { Input, InputCount, type InputControl, type InputCountProps, } from "@/components/ui/input" type InputGroupSize = "sm" | "default" | "lg" type InputGroupContextValue = { size: InputGroupSize controlRef: React.RefObject value: string maxLength: number | null disabled: boolean readOnly: boolean revealed: boolean setRevealed: (revealed: boolean) => void sync: () => void clearRef: React.RefObject<(() => void) | null> } const InputGroupContext = React.createContext( null ) function useInputGroup(part: string) { const context = React.useContext(InputGroupContext) if (!context) { throw new Error(`<${part}> must be used within .`) } return context } function noop() {} function useControlContext() { const context = React.useContext(InputGroupContext) const controlRef = React.useRef(null) const clearRef = React.useRef<(() => void) | null>(null) const fallback = React.useMemo( () => ({ size: "default", controlRef, clearRef, value: "", maxLength: null, disabled: false, readOnly: false, revealed: false, setRevealed: noop, sync: noop, }), [] ) return context ?? fallback } type ControlSnapshot = Pick< InputGroupContextValue, "value" | "maxLength" | "disabled" | "readOnly" > const emptySnapshot: ControlSnapshot = { value: "", maxLength: null, disabled: false, readOnly: false, } function readControl(control: InputControl | null): ControlSnapshot { if (!control) { return emptySnapshot } return { value: control.value, maxLength: control.maxLength > 0 ? control.maxLength : null, disabled: control.disabled, readOnly: control.readOnly, } } function sameSnapshot(a: ControlSnapshot, b: ControlSnapshot) { return ( a.value === b.value && a.maxLength === b.maxLength && a.disabled === b.disabled && a.readOnly === b.readOnly ) } const control = "[data-slot=input-group-control]" const inputGroupVariants = cva( "group/input-group relative flex w-full min-w-0 items-center rounded-(--input-group-radius) bg-transparent text-sm inset-ring-(length:--hairline) inset-ring-input transition-[color,background-color,box-shadow] duration-150 ease-out-cubic outline-none [--input-group-radius:var(--radius-md)] focus-visible:outline-hidden has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus]:ring-3 has-[[data-slot=input-group-control]:focus]:ring-focus-ring has-[[data-slot=input-group-control]:focus]:inset-ring-ring has-[[data-slot=input-group-control]:user-invalid]:inset-ring-destructive has-[[data-slot=input-group-control]:user-invalid:focus]:ring-destructive/20 has-[[data-slot=input-group-control][aria-invalid=true]]:inset-ring-destructive has-[[data-slot=input-group-control][aria-invalid=true]:focus]:ring-destructive/20 has-[[data-slot=input-group-control][data-invalid]]:inset-ring-destructive has-[[data-slot=input-group-control][data-invalid]:focus]:ring-destructive/20 has-[[data-slot=input-group-control][readonly]]:bg-muted/40 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:items-stretch has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:items-stretch has-[>textarea]:h-auto has-[>textarea]:items-stretch data-shake:motion-safe:animate-button-shake motion-reduce:transition-none dark:bg-input/30 dark:has-[[data-slot=input-group-control]:user-invalid:focus]:ring-destructive/40 dark:has-[[data-slot=input-group-control][aria-invalid=true]:focus]:ring-destructive/40 dark:has-[[data-slot=input-group-control][data-invalid]:focus]:ring-destructive/40 dark:has-[[data-slot=input-group-control][readonly]]:bg-input/20 forced-colors:border data-disabled:cursor-not-allowed data-disabled:opacity-50 [@media(hover:hover)]:hover:not-has-[[data-slot=input-group-control]:focus]:not-has-[[data-slot=input-group-control][aria-invalid=true]]:not-has-[[data-slot=input-group-control][data-invalid]]:not-has-[[data-slot=input-group-control]:user-invalid]:not-has-[[data-slot=input-group-control]:disabled]:not-has-[[data-slot=input-group-control][readonly]]:not-data-disabled:inset-ring-ring/70", { variants: { size: { sm: "h-(--input-group-height) [--input-group-height:calc(var(--spacing)*8)]", default: "h-(--input-group-height) [--input-group-height:calc(var(--spacing)*9)]", lg: "h-(--input-group-height) [--input-group-height:calc(var(--spacing)*10)]", }, }, defaultVariants: { size: "default", }, } ) type InputGroupProps = React.ComponentProps<"div"> & VariantProps function InputGroup({ className, size = "default", ...props }: InputGroupProps) { const resolvedSize = size ?? "default" const controlRef = React.useRef(null) const clearRef = React.useRef<(() => void) | null>(null) const [snapshot, setSnapshot] = React.useState(emptySnapshot) const [revealed, setRevealed] = React.useState(false) const sync = React.useCallback(() => { const next = readControl(controlRef.current) setSnapshot((previous) => (sameSnapshot(previous, next) ? previous : next)) }, []) const context = React.useMemo( () => ({ size: resolvedSize, controlRef, ...snapshot, revealed, setRevealed, sync, clearRef, }), [resolvedSize, snapshot, revealed, sync] ) return (

) } function useControlSync( context: InputGroupContextValue, value: unknown, extra: { disabled?: boolean; readOnly?: boolean; maxLength?: number } ) { const { controlRef, sync, setRevealed } = context React.useLayoutEffect(() => { sync() }, [sync, value, extra.disabled, extra.readOnly, extra.maxLength]) React.useEffect(() => { const element = controlRef.current if (!element) { return } const form = element.form let timer: ReturnType | undefined const onReset = () => { clearTimeout(timer) timer = setTimeout(sync) } const onSubmit = () => { flushSync(() => setRevealed(false)) } const onInput = (event: Event) => { if (event.target === element) { sync() } } window.addEventListener("input", onInput) form?.addEventListener("reset", onReset) form?.addEventListener("submit", onSubmit) return () => { window.removeEventListener("input", onInput) form?.removeEventListener("reset", onReset) form?.removeEventListener("submit", onSubmit) clearTimeout(timer) } }, [controlRef, sync, setRevealed]) } function handleClearKey( event: React.KeyboardEvent, context: InputGroupContextValue ) { if ( event.key !== "Escape" || event.defaultPrevented || event.nativeEvent.isComposing || !context.clearRef.current || !event.currentTarget.value || event.currentTarget.readOnly ) { return } event.preventDefault() event.stopPropagation() context.clearRef.current() } const buttonSizes = "has-[>[data-addon-button][data-size=xs]]:[--input-group-button-size:calc(var(--spacing)*6)] has-[>[data-addon-button][data-size=icon-xs]]:[--input-group-button-size:calc(var(--spacing)*6)] has-[>[data-addon-button][data-size=sm]]:[--input-group-button-size:calc(var(--spacing)*8)] has-[>[data-addon-button][data-size=icon-sm]]:[--input-group-button-size:calc(var(--spacing)*8)] has-[>kbd]:[--input-group-button-size:calc(var(--spacing)*5)]" const insetAddon = "has-[>[data-addon-button]]:ps-(--input-group-addon-inset) has-[>kbd]:ps-(--input-group-addon-inset)" const insetBlockEdges = "has-[>[data-addon-button]:first-child]:ps-(--input-group-addon-inset) has-[>[data-addon-button]:last-child]:pe-(--input-group-addon-inset)" const inputGroupAddonVariants = cva( cn( "flex h-auto min-w-0 cursor-text items-center gap-1.5 text-sm text-muted-foreground select-none [--input-group-addon-inset:max(calc(var(--spacing)*0.5),calc((var(--input-group-height)-var(--input-group-button-size,calc(var(--spacing)*6)))/2))] group-has-[[data-slot=input-group-control]:disabled]/input-group:cursor-not-allowed group-data-disabled/input-group:cursor-not-allowed data-morphing:overflow-clip [&>kbd]:inline-flex [&>kbd]:h-5 [&>kbd]:min-w-5 [&>kbd]:items-center [&>kbd]:justify-center [&>kbd]:rounded-[max(calc(var(--radius-sm)*0.5),calc(var(--input-group-radius)-var(--input-group-addon-inset)))] [&>kbd]:bg-muted [&>kbd]:px-1 [&>kbd]:font-sans [&>kbd]:text-xs [&>kbd]:text-muted-foreground [&>kbd]:inset-ring-(length:--hairline) [&>kbd]:inset-ring-border [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4", buttonSizes ), { variants: { align: { "inline-start": cn( "order-first shrink-0 self-stretch ps-3", insetAddon ), "inline-end": "order-last shrink-0 self-stretch pe-3 has-[>[data-addon-button]]:pe-(--input-group-addon-inset) has-[>kbd]:pe-(--input-group-addon-inset)", "block-start": cn( "order-first w-full justify-start px-3 pt-2.5 [--input-group-addon-inset:max(calc(var(--spacing)*1.5),calc((var(--input-group-height)-var(--input-group-button-size,calc(var(--spacing)*6)))/2))] has-[>[data-addon-button]]:pt-(--input-group-addon-inset) data-separator:pb-2.5 data-separator:shadow-[inset_0_calc(-1*var(--hairline))_0_var(--color-border)] has-[>[data-addon-button]]:data-separator:pb-(--input-group-addon-inset)", insetBlockEdges ), "block-end": cn( "order-last w-full justify-start px-3 pb-2.5 [--input-group-addon-inset:max(calc(var(--spacing)*1.5),calc((var(--input-group-height)-var(--input-group-button-size,calc(var(--spacing)*6)))/2))] has-[>[data-addon-button]]:pb-(--input-group-addon-inset) data-separator:pt-2.5 data-separator:shadow-[inset_0_var(--hairline)_0_var(--color-border)] has-[>[data-addon-button]]:data-separator:pt-(--input-group-addon-inset)", insetBlockEdges ), }, }, defaultVariants: { align: "inline-start", }, } ) type InputGroupAddonProps = React.ComponentProps<"div"> & VariantProps & { separator?: boolean } function focusControl(event: React.MouseEvent) { const target = event.target as HTMLElement if (target.closest("button, a, input, textarea, select, [tabindex]")) { return } const group = event.currentTarget.closest("[data-slot=input-group]") const field = group?.querySelector(control) if (field && !field.matches(":disabled")) { event.preventDefault() field.focus() } } function InputGroupAddon({ className, align = "inline-start", separator = false, onMouseDown, ref, ...props }: InputGroupAddonProps) { const resolvedAlign = align ?? "inline-start" const morphRef = useSizeMorph({ axis: "width", enabled: resolvedAlign.startsWith("inline"), duration: 220, }) const setRef = useMergedRef(ref, morphRef) return (

{ onMouseDown?.(event) if (!event.defaultPrevented) { focusControl(event) } }} {...props} /> ) } const inputGroupButtonVariants = cva( "rounded-[max(calc(var(--radius-sm)*0.5),calc(var(--input-group-radius)-var(--input-group-addon-inset)))]" ) type InputGroupButtonProps = Omit< React.ComponentProps, "size" > & { size?: "xs" | "sm" | "icon-xs" | "icon-sm" } function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }: InputGroupButtonProps) { return (