feat(input): use id instead of display name

packages/components/input/src/Input.tsx

@@ -17,8 +17,11 @@ export interface InputProps extends InputPrimitiveProps {
   onValueChange?: (value: string) => void
 }
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, asChild, onValueChange, onChange, onKeyDown, ...others }, ref) => {
+const Root = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, asChild, onValueChange, onChange, onKeyDown, disabled: disabledProp, ...others },
+    ref
+  ) => {
     const field = useFormFieldControl()
     const group = useInputGroup()
 
@@ -33,6 +36,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     } = group
     const Component = asChild ? Slot : 'input'
     const state = field.state ?? group.state
+    const disabled = group.disabled ?? disabledProp
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
       if (onChange) {
@@ -69,7 +73,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           hasTrailingIcon: !!hasTrailingIcon,
           hasClearButton: !!hasClearButton,
         })}
-        disabled={group.disabled}
+        disabled={disabled}
         required={isRequired}
         aria-describedby={description}
         aria-invalid={isInvalid}
@@ -81,4 +85,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   }
 )
 
+export const Input = Object.assign(Root, {
+  id: 'Input',
+})
+
 Input.displayName = 'Input'

packages/components/input/src/InputAddon.tsx

@@ -30,4 +30,4 @@ export const InputAddon = forwardRef<HTMLDivElement, PropsWithChildren<InputAddo
   }
 )
 
-InputAddon.displayName = 'InputAddon'
+InputAddon.displayName = 'InputGroup.Addon'

packages/components/input/src/InputClearButton.tsx

@@ -9,7 +9,7 @@ export interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'
   'aria-label': string
 }
 
-export const InputClearButton = forwardRef<HTMLButtonElement, InputClearButtonProps>(
+const Root = forwardRef<HTMLButtonElement, InputClearButtonProps>(
   ({ className, tabIndex = -1, onClick, ...others }, ref) => {
     const { onClear, hasTrailingIcon } = useInputGroup()
 
@@ -45,4 +45,8 @@ export const InputClearButton = forwardRef<HTMLButtonElement, InputClearButtonPr
   }
 )
 
+export const InputClearButton = Object.assign(Root, {
+  id: 'ClearButton',
+})
+
 InputClearButton.displayName = 'InputGroup.ClearButton'

packages/components/input/src/InputGroup.tsx

@@ -43,16 +43,16 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
     },
     forwardRef
   ) => {
-    const getDisplayName = (element?: ReactElement) => {
-      return element ? (element.type as FC).displayName : ''
+    const getElementId = (element?: ReactElement) => {
+      return element ? (element.type as FC & { id?: string }).id : ''
     }
 
     const findElement = (...values: string[]) => {
-      return children.find(child => values.includes(getDisplayName(child) || ''))
+      return children.find(child => values.includes(getElementId(child) || ''))
     }
 
     const children = Children.toArray(childrenProp).filter(isValidElement)
-    const input = findElement('Input', 'Textarea') as
+    const input = findElement('Input') as
       | DetailedReactHTMLElement<InputProps, HTMLInputElement>
       | undefined
     const props = input?.props || {}
@@ -67,17 +67,12 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
       props.onValueChange
     )
     const state = field.state ?? stateProp
-    const leadingAddon = findElement('InputGroup.LeadingAddon')
-    const leadingIcon = findElement('InputGroup.LeadingIcon', 'TextareaGroup.LeadingIcon')
-    const clearButton = findElement('InputGroup.ClearButton')
-    const trailingAddon = findElement('InputGroup.TrailingAddon')
-    const stateIndicator = findElement(
-      'InputGroup.StateIndicator',
-      'TextareaGroup.StateIndicator'
-    ) || <InputStateIndicator />
-    const trailingIcon = state
-      ? stateIndicator
-      : findElement('InputGroup.TrailingIcon', 'TextareaGroup.TrailingIcon')
+    const leadingAddon = findElement('LeadingAddon')
+    const leadingIcon = findElement('LeadingIcon')
+    const clearButton = findElement('ClearButton')
+    const trailingAddon = findElement('TrailingAddon')
+    const stateIndicator = findElement('StateIndicator') || <InputStateIndicator />
+    const trailingIcon = state ? stateIndicator : findElement('TrailingIcon')
     const hasLeadingAddon = !!leadingAddon
     const hasTrailingAddon = !!trailingAddon
     const hasLeadingIcon = !!leadingIcon

packages/components/input/src/InputIcon.tsx

@@ -9,7 +9,7 @@ export const InputIcon = ({ className, intent, children, ...others }: InputIconP
       intent={intent}
       className={cx(
         className,
-        'pointer-events-none absolute top-1/2 -translate-y-1/2',
+        'pointer-events-none absolute top-[calc(var(--sz-44)/2)] -translate-y-1/2',
         intent ? undefined : 'text-neutral peer-focus:text-outline-high'
       )}
       {...others}
@@ -19,4 +19,4 @@ export const InputIcon = ({ className, intent, children, ...others }: InputIconP
   )
 }
 
-InputIcon.displayName = 'InputIcon'
+InputIcon.displayName = 'InputGroup.Icon'

packages/components/input/src/InputLeadingAddon.tsx

@@ -5,14 +5,16 @@ import { InputAddon, InputAddonProps } from './InputAddon'
 
 export type InputLeadingAddonProps = InputAddonProps
 
-export const InputLeadingAddon = forwardRef<HTMLDivElement, InputLeadingAddonProps>(
-  ({ className, ...others }, ref) => (
-    <InputAddon
-      ref={ref}
-      className={cx(className, 'rounded-l-lg !rounded-r-none mr-[-1px]')}
-      {...others}
-    />
-  )
-)
+const Root = forwardRef<HTMLDivElement, InputLeadingAddonProps>(({ className, ...others }, ref) => (
+  <InputAddon
+    ref={ref}
+    className={cx(className, 'rounded-l-lg !rounded-r-none mr-[-1px]')}
+    {...others}
+  />
+))
+
+export const InputLeadingAddon = Object.assign(Root, {
+  id: 'LeadingAddon',
+})
 
 InputLeadingAddon.displayName = 'InputGroup.LeadingAddon'

packages/components/input/src/InputLeadingIcon.tsx

@@ -8,4 +8,5 @@ export const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps
   <InputIcon className={cx(className, 'left-lg')} {...others} />
 )
 
+InputLeadingIcon.id = 'LeadingIcon'
 InputLeadingIcon.displayName = 'InputGroup.LeadingIcon'

packages/components/input/src/InputStateIndicator.tsx

@@ -35,4 +35,5 @@ export const InputStateIndicator = ({
   )
 }
 
+InputStateIndicator.id = 'StateIndicator'
 InputStateIndicator.displayName = 'InputGroup.StateIndicator'

packages/components/input/src/InputTrailingAddon.tsx

@@ -5,7 +5,7 @@ import { InputAddon, InputAddonProps } from './InputAddon'
 
 export type InputTrailingAddonProps = InputAddonProps
 
-export const InputTrailingAddon = forwardRef<HTMLDivElement, InputTrailingAddonProps>(
+const Root = forwardRef<HTMLDivElement, InputTrailingAddonProps>(
   ({ className, ...others }, ref) => (
     <InputAddon
       ref={ref}
@@ -15,4 +15,8 @@ export const InputTrailingAddon = forwardRef<HTMLDivElement, InputTrailingAddonP
   )
 )
 
+export const InputTrailingAddon = Object.assign(Root, {
+  id: 'TrailingAddon',
+})
+
 InputTrailingAddon.displayName = 'InputGroup.TrailingAddon'

packages/components/input/src/InputTrailingIcon.tsx

@@ -8,4 +8,5 @@ export const InputTrailingIcon = ({ className, ...others }: InputTrailingIconPro
   <InputIcon className={cx(className, 'right-lg')} {...others} />
 )
 
+InputTrailingIcon.id = 'TrailingIcon'
 InputTrailingIcon.displayName = 'InputGroup.TrailingIcon'

packages/components/input/src/index.ts

@@ -33,10 +33,3 @@ export const InputGroup: FC<InputGroupProps> & {
   StateIndicator: InputStateIndicator,
   ClearButton: InputClearButton,
 })
-
-InputGroup.LeadingAddon.displayName = 'InputGroup.LeadingAddon'
-InputGroup.TrailingAddon.displayName = 'InputGroup.TrailingAddon'
-InputGroup.LeadingIcon.displayName = 'InputGroup.LeadingIcon'
-InputGroup.TrailingIcon.displayName = 'InputGroup.TrailingIcon'
-InputGroup.StateIndicator.displayName = 'InputGroup.StateIndicator'
-InputGroup.ClearButton.displayName = 'InputGroup.ClearButton'