feat(input-component): support icons left/right

[IndyVC]

Using Icons inside an input field is something very common. Unfortunately, shadcn didn't truly provide it out of the box, while it easily could. This PR could solve it.

Following these issues:

• Feature Request: Icon Support for Input Fields #1562
• Proper way for Input with icon #1552

I've also extended docs:

And code example:

import { MapIcon, MapPin } from "lucide-react"

import { Input } from "@/components/ui/input"

export function InputWithIcons() {
  return (
    <div>
      <Input>
        <Input.Icon side="left">
          <MapIcon />
        </Input.Icon>
        <Input.Icon side="right">
          <MapPin />
        </Input.Icon>
      </Input>
    </div>
  )
}

[vercel]

@IndyVC is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[daanboschmans]

Can we have this merged? pls

[IndyVC]

@shadcn tagging you since I have no idea how this can get ever into shadcn with +- 700 prs 😅

[florinkrasniqi]

I’ve noticed one issue with composition. For my use case and most of the time when building other input components I’ve been playing with the padding-x property only on the side where the icon is added. This way, there’s no extra space on both sides from only one icon being present.

Something like this is what I thought could do the job:

 ...
 const Icons = useComposition(children, InputIcon.displayName);

    if (Icons.length > 0) {
      // Since we're sure that the children are InputIcon components, we can cast them to the correct type
      // to access the `side` prop
      type IconElement = React.ReactElement<InputIconProps>;

      const hasRightIcon = Icons.some(
        (icon) => (icon as IconElement).props.side === 'right',
      );
      const hasLeftIcon = Icons.some(
        (icon) =>
          (icon as IconElement).props.side === 'left' ||
          (icon as IconElement).props.side === undefined,
      );
      
      // conditionally check for composition (maybe add more variants such as left, right, true, false)
   ...

[IndyVC]

@florinkrasniqi I don't fully understand the comment:
do you mean I should be using px-3 instead of left-3 for example? (see iconVariants)

[florinkrasniqi]

Sorry for any confusion. The whole idea is to not have input padding on both sides if only one icon is present but instead only on the icon side.