Toggle Group

npm install @kuzenbo/core

import { ToggleGroup } from "@kuzenbo/core";
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

function Example() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroup.Item value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="underline" aria-label="Toggle underline">
        <UnderlineIcon />
      </ToggleGroup.Item>
    </ToggleGroup>
  );
}

<ToggleGroup type="single" defaultValue="left">
  <ToggleGroup.Item value="left" aria-label="Align left">
    <AlignLeftIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="center" aria-label="Align center">
    <AlignCenterIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="right" aria-label="Align right">
    <AlignRightIcon />
  </ToggleGroup.Item>
</ToggleGroup>

<ToggleGroup type="multiple" defaultValue={["bold", "italic"]}>
  <ToggleGroup.Item value="bold">
    <BoldIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic">
    <ItalicIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="underline">
    <UnderlineIcon />
  </ToggleGroup.Item>
</ToggleGroup>

<ToggleGroup type="single" variant="outline">
  <ToggleGroup.Item value="list">
    <ListIcon />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="grid">
    <GridIcon />
  </ToggleGroup.Item>
</ToggleGroup>

<ToggleGroup type="single" orientation="vertical">
  <ToggleGroup.Item value="option1">Option 1</ToggleGroup.Item>
  <ToggleGroup.Item value="option2">Option 2</ToggleGroup.Item>
  <ToggleGroup.Item value="option3">Option 3</ToggleGroup.Item>
</ToggleGroup>

<ToggleGroup type="single" spacing={2}>
  <ToggleGroup.Item value="1">1</ToggleGroup.Item>
  <ToggleGroup.Item value="2">2</ToggleGroup.Item>
  <ToggleGroup.Item value="3">3</ToggleGroup.Item>
</ToggleGroup>

<div className="space-y-4">
  <ToggleGroup type="single" size="xs">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  </ToggleGroup>
  <ToggleGroup type="single" size="sm">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  </ToggleGroup>
  <ToggleGroup type="single" size="lg">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  </ToggleGroup>
</div>

const [value, setValue] = useState<string[]>([]);

<ToggleGroup
  type="multiple"
  value={value}
  onValueChange={setValue}
>
  <ToggleGroup.Item value="bold"><BoldIcon /></ToggleGroup.Item>
  <ToggleGroup.Item value="italic"><ItalicIcon /></ToggleGroup.Item>
</ToggleGroup>