Toggle Group

import {
  AlignCenterIcon,
  AlignJustifyIcon,
  AlignLeftIcon,
  AlignRightIcon,
} from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup
      variant="outline"
      spacing={0}
      defaultValue={["left"]}
      aria-label="Wyrównanie tekstu"
    >
      <ToggleGroupItem value="left" aria-label="Wyrównaj do lewej">
        <AlignLeftIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Wyśrodkuj">
        <AlignCenterIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Wyrównaj do prawej">
        <AlignRightIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="justify" aria-label="Wyjustuj">
        <AlignJustifyIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

import {
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
} from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export default function ToggleGroupMultiple() {
  return (
    <ToggleGroup
      multiple
      defaultValue={["bold", "italic"]}
      aria-label="Styl tekstu"
    >
      <ToggleGroupItem value="bold" aria-label="Pogrubienie">
        <BoldIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Kursywa">
        <ItalicIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Podkreślenie">
        <UnderlineIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="strikethrough" aria-label="Przekreślenie">
        <StrikethroughIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

"use client"

import * as React from "react"
import { LayoutGridIcon, ListIcon } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { cn } from "@/lib/utils"

const projects = ["Atlas", "Beacon", "Cinder", "Delta"]

export default function ToggleGroupViewSwitcher() {
  const [view, setView] = React.useState("grid")

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex items-center justify-between">
        <span id="view-label" className="text-sm font-medium">
          Projekty
        </span>
        <ToggleGroup
          variant="outline"
          size="sm"
          spacing={0}
          value={[view]}
          // Single selection: ignore attempts to deselect the active view.
          onValueChange={(value) => value.length > 0 && setView(value[0])}
          aria-labelledby="view-label"
        >
          <ToggleGroupItem value="grid" aria-label="Widok siatki">
            <LayoutGridIcon />
          </ToggleGroupItem>
          <ToggleGroupItem value="list" aria-label="Widok listy">
            <ListIcon />
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
      <ul
        className={cn(
          "grid gap-2",
          view === "grid" ? "grid-cols-2" : "grid-cols-1"
        )}
      >
        {projects.map((project) => (
          <li
            key={project}
            className={cn(
              "rounded-lg border bg-card px-3 text-sm shadow-raised",
              view === "grid"
                ? "flex h-16 items-end pb-2"
                : "flex h-10 items-center"
            )}
          >
            {project}
          </li>
        ))}
      </ul>
    </div>
  )
}

import {
  MousePointer2Icon,
  PenToolIcon,
  SquareIcon,
  TypeIcon,
} from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export default function ToggleGroupVertical() {
  return (
    <ToggleGroup
      orientation="vertical"
      defaultValue={["select"]}
      aria-label="Narzędzia"
      className="rounded-xl border bg-card p-1 shadow-raised"
    >
      <ToggleGroupItem value="select" aria-label="Zaznaczanie">
        <MousePointer2Icon />
      </ToggleGroupItem>
      <ToggleGroupItem value="pen" aria-label="Pióro">
        <PenToolIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="shape" aria-label="Prostokąt">
        <SquareIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="text" aria-label="Tekst">
        <TypeIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

const sizes = ["sm", "default", "lg"] as const

export default function ToggleGroupSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      {sizes.map((size) => (
        <ToggleGroup
          key={size}
          variant="outline"
          size={size}
          spacing={0}
          defaultValue={["monthly"]}
          aria-label={`Okres rozliczeniowy (${size})`}
        >
          <ToggleGroupItem value="monthly">Miesięcznie</ToggleGroupItem>
          <ToggleGroupItem value="yearly">Rocznie</ToggleGroupItem>
        </ToggleGroup>
      ))}
    </div>
  )
}