snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/base/input-group-block-start.tsx

@@ -0,0 +1,57 @@
+import { CopyIcon, FileCodeIcon } from "lucide-react"
+
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/styles/base-nova/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/styles/base-nova/ui/input-group"
+
+export function InputGroupBlockStart() {
+  return (
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="block-start-input">Input</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput
+            id="block-start-input"
+            placeholder="Enter your name"
+          />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>Full Name</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>Header positioned above the input.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="block-start-textarea">Textarea</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="block-start-textarea"
+            placeholder="console.log('Hello, world!');"
+            className="font-mono text-sm"
+          />
+          <InputGroupAddon align="block-start">
+            <FileCodeIcon className="text-muted-foreground" />
+            <InputGroupText className="font-mono">script.js</InputGroupText>
+            <InputGroupButton size="icon-xs" className="ml-auto">
+              <CopyIcon />
+              <span className="sr-only">Copy</span>
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          Header positioned above the textarea.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}