Group

import { Group, type GroupItem } from "@vortex/ui-cals"
 
const [value, setValue] = useState<Record<string, unknown>>({
  name: "",
  age: "",
})
 
const items: GroupItem[] = [
  {
    key: "name",
    label: "이름",
    renderItem: ({ value: v, onChange, disabled }) => (
      <input
        placeholder="이름"
        value={(v as string) ?? ""}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
      />
    ),
  },
  {
    key: "age",
    label: "나이",
    renderItem: ({ value: v, onChange, disabled }) => (
      <input
        type="number"
        placeholder="나이"
        value={(v as string) ?? ""}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
      />
    ),
  },
]
 
<Group items={items} value={value} onChange={setValue} />

const items: GroupItem[] = [
  {
    key: "a",
    renderItem: ({ disabled }) => <button disabled={disabled}>A</button>,
  },
  {
    key: "b",
    renderItem: ({ disabled }) => <button disabled={disabled}>B</button>,
  },
]
 
// 전체 비활성화
<Group items={items} disabled />
 
// 개별 항목 비활성화
<Group items={[{ key: "a", disabled: true, ... }, ...]} />

<Group direction="vertical" gap={12}>
  <div>항목 1</div>
  <div>항목 2</div>
  <div>항목 3</div>
</Group>