Group

import { Group } from "@/components/ui/group"

import { Group } from "@/components/ui/group"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function GroupExample() {
  return (
    <Group>
      <Input placeholder="Enter value..." />
      <Select defaultValue="option1">
        <SelectTrigger className="w-[120px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
          <SelectItem value="option3">Option 3</SelectItem>
        </SelectContent>
      </Select>
      <Button>Submit</Button>
    </Group>
  )
}

import { useGroup } from "@/components/ui/group"

function MyCustomInput() {
  const { position, attached } = useGroup()
  
  // position will be 'first', 'middle', 'last', or undefined
  // attached indicates if the group is in attached mode
}