Toggle group

app/docs/components/toggle-group/page.tsx

@@ -0,0 +1,229 @@
+import { Metadata } from "next"
+import { Separator } from "@radix-ui/react-select"
+import { Bold, Italic, Underline } from "lucide-react"
+
+import { toggleGroupMetaData } from "@/lib/metadata"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/8bit/toggle-group"
+
+import CodeSnippet from "../code-snippet"
+import CopyCommandButton from "../copy-command-button"
+import InstallationCommands from "../installation-commands"
+import { OpenInV0Button } from "../open-in-v0-button"
+
+export const metadata: Metadata = {
+  title: "8bit Toggle Group",
+  description: "Displays Toggle Group Component.",
+  openGraph: { images: toggleGroupMetaData },
+}
+export default function ToggleGroupPage() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
+        <h1 className="text-3xl font-bold">Toggle Group</h1>
+        <CopyCommandButton
+          copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-toggle-group.json`}
+          command={"pnpm dlx shadcn@canary add 8bit-toggle-group"}
+        />
+      </div>
+      <p className="text-muted-foreground">
+        A set of two-state buttons that can be toggled on or off.
+      </p>
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            A simple 8-bit Toggle Group component
+          </h2>
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ToggleGroup type="multiple">
+            <ToggleGroupItem
+              variant="outline"
+              value="bold"
+              aria-label="Toggle bold"
+            >
+              <Bold className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Toggle italic">
+              <Italic className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="strikethrough"
+              aria-label="Toggle strikethrough"
+            >
+              <Underline className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+      <h3 className="text-lg font-bold">Installation</h3> <Separator />
+      <InstallationCommands
+        packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-toggle-group.json`}
+      />
+      <h3 className="text-lg font-bold">Examples</h3> <Separator />
+      <h3 className="text-lg font-bold">Default</h3>
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            Default example
+          </h2>
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ToggleGroup type="multiple">
+            <ToggleGroupItem value="bold" aria-label="Toggle bold">
+              <Bold className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Toggle italic">
+              <Italic className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="strikethrough"
+              aria-label="Toggle strikethrough"
+            >
+              <Underline className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+      <CodeSnippet>{`<ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+      <h3 className="text-lg font-bold">Outline</h3>
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            Outline example
+          </h2>
+          <div className="flex items-center gap-2">
+            <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[400px] relative">
+          <ToggleGroup type="multiple">
+            <ToggleGroupItem
+              variant="outline"
+              value="bold"
+              aria-label="Toggle bold"
+            >
+              <Bold className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              variant="outline"
+              value="italic"
+              aria-label="Toggle italic"
+            >
+              <Italic className="size-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              variant="outline"
+              value="strikethrough"
+              aria-label="Toggle strikethrough"
+            >
+              <Underline className="size-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <CodeSnippet>{`<ToggleGroup type="multiple" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+        <h3 className="text-lg font-bold">Single</h3>
+        <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm text-muted-foreground sm:pl-3">
+              Single example
+            </h2>
+            <div className="flex items-center gap-2">
+              <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+            </div>
+          </div>
+          <div className="flex items-center justify-center min-h-[400px] relative">
+            <ToggleGroup type="single">
+              <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="strikethrough"
+                aria-label="Toggle strikethrough"
+              >
+                <Underline className="size-4" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+        <CodeSnippet>{`<ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+        <h3 className="text-lg font-bold">Disabled</h3>
+        <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm text-muted-foreground sm:pl-3">
+              Disabled example
+            </h2>
+            <div className="flex items-center gap-2">
+              <OpenInV0Button name="8bit-toggle-group" className="w-fit" />
+            </div>
+          </div>
+          <div className="flex items-center justify-center min-h-[400px] relative">
+            <ToggleGroup type="multiple" disabled>
+              <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="h-1 w-1" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="h-1 w-1" />
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="strikethrough"
+                aria-label="Toggle strikethrough"
+              >
+                <Underline className="h-1 w-1" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+        <CodeSnippet>{`<ToggleGroup type="multiple" disabled>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+</ToggleGroup>`}</CodeSnippet>
+      </div>
+    </div>
+  )
+}

components/ui/8bit/toggle-group.tsx

@@ -0,0 +1,88 @@
+import { Press_Start_2P } from "next/font/google"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+import {
+  ToggleGroup as ShadcnToggleGroup,
+  ToggleGroupItem as ShadcnToggleGroupItem,
+} from "../toggle-group"
+
+const pressStart = Press_Start_2P({ weight: ["400"], subsets: ["latin"] })
+
+export const toggleGroupVariants = cva("", {
+  variants: {
+    font: { normal: "", retro: pressStart.className },
+    variant: {
+      default: "bg-transparent",
+      outline:
+        "bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-4 px-1.5 min-w-4",
+      lg: "h-10 px-2.5 min-w-10",
+    },
+  },
+  defaultVariants: { variant: "default", font: "retro", size: "default" },
+})
+
+export type BitToggleGroupProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+> &
+  VariantProps<typeof toggleGroupVariants>
+
+export type BitToggleGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> &
+  VariantProps<typeof toggleGroupVariants>
+
+function ToggleGroup({ ...props }: BitToggleGroupProps) {
+  const { className, font, children } = props
+
+  return (
+    <ShadcnToggleGroup
+      className={cn(
+        "gap-3",
+        className,
+        font !== "normal" && pressStart.className
+      )}
+      {...props}
+    >
+      {" "}
+      {children}{" "}
+    </ShadcnToggleGroup>
+  )
+}
+function ToggleGroupItem({ ...props }: BitToggleGroupItemProps) {
+  const { className, font, children, variant } = props
+  return (
+    <ShadcnToggleGroupItem
+      className={cn(
+        "relative transition-transform active:translate-x-1 active:translate-y-1",
+        className,
+        font !== "normal" && pressStart.className
+      )}
+      {...props}
+    >
+      {" "}
+      {children}{" "}
+      {variant === "outline" && (
+        <>
+          {" "}
+          <div
+            className="absolute inset-0 -my-1.5 border-y-6 border-foreground dark:border-ring pointer-events-none"
+            aria-hidden="true"
+          />{" "}
+          <div
+            className="absolute inset-0 -mx-1.5 border-x-6 border-foreground dark:border-ring pointer-events-none"
+            aria-hidden="true"
+          />{" "}
+        </>
+      )}{" "}
+    </ShadcnToggleGroupItem>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

config/nav-items.ts

@@ -166,6 +166,11 @@ export const navItems = {
           title: "Toggle",
           url: "/docs/components/toggle",
         },
+        {
+          title: "Toggle Group",
+          url: "/docs/components/toggle-group",
+          new: true,
+        },
         {
           title: "Tooltip",
           url: "/docs/components/tooltip",

lib/metadata.ts

@@ -45,3 +45,4 @@ export const resizableMetaData = "/assets/8bitcn-resizable-light.png"
 export const paginationMetaData = "/assets/8bitcn-pagination-light.png"
 export const scrollAreaMetaData = "/assets/8bitcn-scrollarea-light.png"
 export const chartMetaData = "/assets/8bitcn-chart-light.png"
+export const toggleGroupMetaData = "/assets/8bitcn-toggle-group-light.png"