گروه ورودی (Input Group)

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@parto-system-design/ui';

export default function MyComponent() {
  return (
    <InputGroup dir="ltr">
      <InputGroupAddon>https://</InputGroupAddon>
      <InputGroupInput placeholder="example.com" type="url" />
    </InputGroup>
  );
}

import { Icons } from '@parto-system-design/ui';

<InputGroup>
  <InputGroupAddon>
    <Icons.search className="w-4 h-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="جستجو..." />
</InputGroup>

<InputGroup>
  <InputGroupInput placeholder="ایمیل شما" />
  <InputGroupAddon>
    <InputGroupButton>ارسال</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

<InputGroup>
  <InputGroupAddon align="block-start">
    عنوان
  </InputGroupAddon>
  <InputGroupInput />
  <InputGroupAddon align="block-end">
    توضیحات پایین
  </InputGroupAddon>
</InputGroup>

<InputGroup>
  <InputGroupAddon align="block-start">
    پیام شما
  </InputGroupAddon>
  <InputGroupTextarea rows={4} />
</InputGroup>

{/* URL - کل گروه LTR */}
<InputGroup dir="ltr">
  <InputGroupAddon>https://</InputGroupAddon>
  <InputGroupInput placeholder="example.com" type="url" />
</InputGroup>

{/* ایمیل - کل گروه LTR */}
<InputGroup dir="ltr">
  <InputGroupAddon>@</InputGroupAddon>
  <InputGroupInput placeholder="username" type="email" />
</InputGroup>

{/* مبلغ - گروه RTL ولی عدد LTR */}
<InputGroup>
  <InputGroupAddon align="inline-end">تومان</InputGroupAddon>
  <InputGroupInput placeholder="مبلغ" type="number" />
</InputGroup>