Input Group

1'use client';
2 
3import { type VariantProps, cva } from 'class-variance-authority';
4import * as React from 'react';
5 
6import { Button } from '@/components/ui/button';
7import {
8  Input,
9  type InputProps,
10  inputSizeDefinitions,
11  inputVariantStyles,
12} from '@/components/ui/input';
13import { Textarea } from '@/components/ui/textarea';
14import { cn } from '@/lib/utils';
15 
16// Focus state wrapper styles for default variant
17// Triggered by child input focus-visible OR data-open="true" on the wrapper
18const defaultFocusStyles = [
19  'has-[[data-slot=input-group-control]:focus-visible]:bg-stateslayer-overlay-active-inverse',
20  'has-[[data-slot=input-group-control]:focus-visible]:ring-stroke-status-focus',
21  'has-[[data-slot=input-group-control]:focus-visible]:shadow-elevation-0',
22  'data-[open=true]:bg-stateslayer-overlay-active-inverse',
23  'data-[open=true]:ring-stroke-status-focus',
24  'data-[open=true]:shadow-elevation-0',
25] as const;
26 
27// Per-size focus ring width for InputGroup default variant
28const inputGroupFocusRingWidth = {
29  sm: 'has-[[data-slot=input-group-control]:focus-visible]:ring-[1px] data-[open=true]:ring-[1px]',
30  default:
31    'has-[[data-slot=input-group-control]:focus-visible]:ring-[1px] data-[open=true]:ring-[1px]',
32  lg: 'has-[[data-slot=input-group-control]:focus-visible]:ring-[2px] data-[open=true]:ring-[2px]',
33} as const;
34 
35// Focus state wrapper styles for inline variant
36// Triggered by child input focus-visible OR data-open="true" on the wrapper
37const inlineFocusStyles = [
38  'has-[[data-slot=input-group-control]:focus-visible]:border-b-stroke-status-focus',
39  'has-[[data-slot=input-group-control]:focus-visible]:ring-0',
40  'has-[[data-slot=input-group-control]:focus-visible]:shadow-elevation-0',
41  'data-[open=true]:border-b-stroke-status-focus',
42  'data-[open=true]:ring-0',
43  'data-[open=true]:shadow-elevation-0',
44] as const;
45 
46// Per-size focus border-bottom width for InputGroup inline variant
47const inputGroupInlineFocusBorderWidth = {
48  sm: 'has-[[data-slot=input-group-control]:focus-visible]:border-b-[1px] data-[open=true]:border-b-[1px]',
49  default:
50    'has-[[data-slot=input-group-control]:focus-visible]:border-b-[1px] data-[open=true]:border-b-[1px]',
51  lg: 'has-[[data-slot=input-group-control]:focus-visible]:border-b-[2px] data-[open=true]:border-b-[2px]',
52} as const;
53 
54// Error state wrapper styles for default variant
55const defaultErrorStyles = [
56  'has-[[data-slot][aria-invalid=true]]:!border',
57// … truncated