Toggle button group

"use client";import { ToggleButton } from "@/components/vip-ui/toggle-button";import { ToggleButtonGroup } from "@/components/vip-ui/toggle-button-group";export function ToggleButtonGroupDemo() {  return (    <ToggleButtonGroup      aria-label="Calendar view"      selectionMode="single"      defaultSelectedKeys={["week"]}      disallowEmptySelection    >      <ToggleButton id="day" variant="segmented">        Day      </ToggleButton>      <ToggleButton id="week" variant="segmented">        Week      </ToggleButton>      <ToggleButton id="month" variant="segmented">        Month      </ToggleButton>    </ToggleButtonGroup>  );}

"use client";import {  TextBIcon,  TextItalicIcon,  TextUnderlineIcon,} from "@phosphor-icons/react";import { useState } from "react";import type { Key } from "react-aria-components";import { ToggleButton } from "@/components/vip-ui/toggle-button";import { ToggleButtonGroup } from "@/components/vip-ui/toggle-button-group";export function ToggleButtonGroupEditorDemo() {  const [selected, setSelected] = useState(new Set<Key>(["bold"]));  return (    <div className="grid w-full max-w-md gap-4">      <ToggleButtonGroup        aria-label="Text styles"        selectionMode="multiple"        selectedKeys={selected}        onSelectionChange={setSelected}      >        <ToggleButton id="bold" variant="segmented" iconOnly aria-label="Bold">          <TextBIcon aria-hidden="true" />        </ToggleButton>        <ToggleButton          id="italic"          variant="segmented"          iconOnly          aria-label="Italic"        >          <TextItalicIcon aria-hidden="true" />        </ToggleButton>        <ToggleButton          id="underline"          variant="segmented"          iconOnly          aria-label="Underline"        >          <TextUnderlineIcon aria-hidden="true" />        </ToggleButton>      </ToggleButtonGroup>      <div className="rounded-lg border border-border p-3 text-sm">        <p className="text-xs text-muted-foreground">Selection preview</p>        <p          className={`mt-2 ${selected.has("bold") ? "font-bold" : ""} ${selected.has("italic") ? "italic" : ""} ${selected.has("underline") ? "underline" : ""}`}        >          The quick brown fox jumps over the lazy dog.        </p>      </div>    </div>  );}

"use client";import { ToggleButton } from "@/components/vip-ui/toggle-button";import { ToggleButtonGroup } from "@/components/vip-ui/toggle-button-group";export function ToggleButtonGroupSizesDemo() {  return (    <div className="flex flex-col items-start gap-3">      <ToggleButtonGroup        size="xs"        aria-label="Chart range"        selectionMode="single"        defaultSelectedKeys={["week"]}        disallowEmptySelection      >        <ToggleButton id="day" variant="segmented">          Day        </ToggleButton>        <ToggleButton id="week" variant="segmented">          Week        </ToggleButton>        <ToggleButton id="month" variant="segmented">          Month        </ToggleButton>      </ToggleButtonGroup>      <ToggleButtonGroup        size="sm"        aria-label="Chart range"        selectionMode="single"        defaultSelectedKeys={["week"]}        disallowEmptySelection      >        <ToggleButton id="day" variant="segmented">          Day        </ToggleButton>        <ToggleButton id="week" variant="segmented">          Week        </ToggleButton>        <ToggleButton id="month" variant="segmented">          Month        </ToggleButton>      </ToggleButtonGroup>      <ToggleButtonGroup        size="md"        aria-label="Chart range"        selectionMode="single"        defaultSelectedKeys={["week"]}        disallowEmptySelection      >        <ToggleButton id="day" variant="segmented">          Day        </ToggleButton>        <ToggleButton id="week" variant="segmented">          Week        </ToggleButton>        <ToggleButton id="month" variant="segmented">          Month        </ToggleButton>      </ToggleButtonGroup>    </div>  );}