Collapsible form fields

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "settings-2") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group"
</script>

<template>
  <div class="h-54 w-full max-w-xs">
    <Card size="sm">
      <CardHeader>
        <CardTitle>Unit Pricing</CardTitle>
      </CardHeader>
      <CardContent>
        <Collapsible class="flex flex-col gap-3">
          <div class="flex items-end gap-2">
            <Field class="flex-1">
              <FieldLabel class="sr-only">Base Price</FieldLabel>
              <InputGroup>
                <InputGroupInput type="number" placeholder="0.00" value="19.00" />
                <InputGroupAddon align="inline-end">
                  <InputGroupText>$</InputGroupText>
                </InputGroupAddon>
              </InputGroup>
            </Field>
            <CollapsibleTrigger as-child>
              <Button variant="outline" size="icon" class="shrink-0">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  aria-hidden="true"
                  class="size-3.5"
                >
                  <path d="M14 17H5" />
                  <path d="M19 7h-9" />
                  <circle cx="17" cy="17" r="3" />
                  <circle cx="7" cy="7" r="3" />
                </svg>
              </Button>
            </CollapsibleTrigger>
          </div>

          <CollapsibleContent class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
            <FieldGroup class="gap-2">
              <Field>
                <FieldLabel>Tax Rate (%)</FieldLabel>
                <InputGroup>
                  <InputGroupInput type="number" placeholder="0" value="15" />
                  <InputGroupAddon align="inline-end">
                    <InputGroupText>%</InputGroupText>
                  </InputGroupAddon>
                </InputGroup>
              </Field>
              <Field>
                <FieldLabel>Discount (%)</FieldLabel>
                <InputGroup>
                  <InputGroupInput type="number" placeholder="0" value="0" />
                  <InputGroupAddon align="inline-end">
                    <InputGroupText>%</InputGroupText>
                  </InputGroupAddon>
                </InputGroup>
              </Field>
            </FieldGroup>
          </CollapsibleContent>
        </Collapsible>
      </CardContent>
    </Card>
  </div>
</template>