feat(www): add toggle group component, example & its docs

apps/www/components/examples/index.tsx

@@ -82,6 +82,12 @@ import { ToastDestructive } from "@/components/examples/toast/destructive"
 import { ToastSimple } from "@/components/examples/toast/simple"
 import { ToastWithAction } from "@/components/examples/toast/with-action"
 import { ToastWithTitle } from "@/components/examples/toast/with-title"
+import { ToggleGroupDemo } from "@/components/examples/toggle-group/demo"
+import { ToggleGroupDisabled } from "@/components/examples/toggle-group/disabled"
+import { ToggleGroupLg } from "@/components/examples/toggle-group/lg"
+import { ToggleGroupMultiple } from "@/components/examples/toggle-group/multiple"
+import { ToggleGroupOutline } from "@/components/examples/toggle-group/outline"
+import { ToggleGroupSm } from "@/components/examples/toggle-group/sm"
 import { ToggleDemo } from "@/components/examples/toggle/demo"
 import { ToggleDisabled } from "@/components/examples/toggle/disabled"
 import { ToggleLg } from "@/components/examples/toggle/lg"
@@ -210,4 +216,10 @@ export const examples = {
   ToggleOutline,
   ToggleDisabled,
   ToggleWithText,
+  ToggleGroupDemo,
+  ToggleGroupSm,
+  ToggleGroupLg,
+  ToggleGroupOutline,
+  ToggleGroupMultiple,
+  ToggleGroupDisabled,
 }

apps/www/components/examples/toggle-group/demo.tsx

@@ -0,0 +1,23 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export function ToggleGroupDemo() {
+  return (
+    <ToggleGroup
+      defaultValue="center"
+      aria-label="Text alignment"
+      type="single"
+    >
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight size={16} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}

apps/www/components/examples/toggle-group/disabled.tsx

@@ -0,0 +1,19 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export function ToggleGroupDisabled() {
+  return (
+    <ToggleGroup aria-label="Text alignment" type="single" disabled>
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight size={16} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}

apps/www/components/examples/toggle-group/lg.tsx

@@ -0,0 +1,24 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export function ToggleGroupLg() {
+  return (
+    <ToggleGroup
+      defaultValue="center"
+      aria-label="Text alignment"
+      type="single"
+      size="lg"
+    >
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight size={16} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}

apps/www/components/examples/toggle-group/multiple.tsx

@@ -0,0 +1,23 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export function ToggleGroupMultiple() {
+  return (
+    <ToggleGroup
+      defaultValue={["center", "left"]}
+      aria-label="Text alignment"
+      type="multiple"
+    >
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight size={16} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}

apps/www/components/examples/toggle-group/outline.tsx

@@ -0,0 +1,26 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export function ToggleGroupOutline() {
+  return (
+    <>
+      <ToggleGroup
+        defaultValue="center"
+        aria-label="Text alignment"
+        type="single"
+        variant="outline"
+      >
+        <ToggleGroupItem value="left" aria-label="Left aligned">
+          <AlignLeft size={16} />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="center" aria-label="Center aligned">
+          <AlignCenter size={16} />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" aria-label="Right aligned">
+          <AlignRight size={16} />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </>
+  )
+}

apps/www/components/examples/toggle-group/sm.tsx

@@ -0,0 +1,24 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export function ToggleGroupSm() {
+  return (
+    <ToggleGroup
+      defaultValue="center"
+      aria-label="Text alignment"
+      type="single"
+      size="sm"
+    >
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter size={16} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight size={16} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}

apps/www/components/ui/toggle-group.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleGroupVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const toggleGroupVariants = cva(
+  "inline-flex items-center justify-center  text-muted-foreground text-sm font-medium transition-colors data-[state=on]:bg-accent-foreground/5 dark:data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground first:rounded-l last:rounded-r",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "bg-transparent data-[state=on]:bg-muted",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleGroupVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors  disabled:pointer-events-none disabled:opacity-50",
+      "bg-accent/50",
+      variant === "outline" ? "border border-input bg-transparent" : "",
+      className
+    )}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleGroupVariants({
+          variant: context?.variant,
+          size: context?.size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

apps/www/config/components.ts

@@ -202,6 +202,12 @@ export const components = [
     dependencies: ["@radix-ui/react-toggle"],
     files: ["components/ui/toggle.tsx"],
   },
+  {
+    component: "toggle-group",
+    name: "Toggle Group",
+    dependencies: ["@radix-ui/react-toggle-group"],
+    files: ["components/ui/toggle-group.tsx"],
+  },
   {
     component: "tooltip",
     name: "Tooltip",

apps/www/config/docs.ts

@@ -288,6 +288,12 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/toggle",
           items: [],
         },
+        {
+          title: "Toggle Group",
+          href: "/docs/components/toggle-group",
+          label: "New",
+          items: [],
+        },
         {
           title: "Tooltip",
           href: "/docs/components/tooltip",

apps/www/content/docs/components/toggle-group.mdx

@@ -0,0 +1,111 @@
+---
+title: Toggle Group
+description: A set of two-state buttons that can be toggled on or off.
+component: true
+radix:
+  link: https://www.radix-ui.com/docs/primitives/components/toggle-group
+  api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference
+---
+
+<ComponentExample src="/components/examples/toggle-group/demo.tsx">
+  <ToggleGroupDemo />
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-ui add toggle-group
+```
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="manual-installation">
+    <AccordionTrigger>Manual Installation</AccordionTrigger>
+    <AccordionContent>
+
+1. Install the `@radix-ui/react-toggle-group` component from radix-ui:
+
+```bash
+npm install @radix-ui/react-toggle-group
+```
+
+2. Copy and paste the following code into your project.
+
+<ComponentSource src="/components/ui/toggle-group.tsx" />
+
+<Callout>
+  This is the `<ToggleGroup />` primitive. You can place it in a file at
+  `components/ui/toggle-group.tsx`.
+</Callout>
+
+    </AccordionContent>
+
+  </AccordionItem>
+</Accordion>
+
+## Usage
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+```
+
+```tsx
+<ToggleGroup>
+  <ToggleGroupItem value="left" aria-label="Left aligned">
+    <AlignLeft size={16} />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Center aligned">
+    <AlignCenter size={16} />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="right" aria-label="Right aligned">
+    <AlignRight size={16} />
+  </ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Examples
+
+### Default
+
+<ComponentExample src="/components/examples/toggle-group/demo.tsx">
+  <ToggleGroupDemo />
+</ComponentExample>
+
+---
+
+### Outline
+
+<ComponentExample src="/components/examples/toggle-group/outline.tsx">
+  <ToggleGroupOutline />
+</ComponentExample>
+
+---
+
+### Small
+
+<ComponentExample src="/components/examples/toggle-group/sm.tsx">
+  <ToggleGroupSm />
+</ComponentExample>
+
+---
+
+### Large
+
+<ComponentExample src="/components/examples/toggle-group/lg.tsx">
+  <ToggleGroupLg />
+</ComponentExample>
+
+---
+
+### Multiple
+
+<ComponentExample src="/components/examples/toggle-group/multiple.tsx">
+  <ToggleGroupMultiple />
+</ComponentExample>
+
+---
+
+### Disabled
+
+<ComponentExample src="/components/examples/toggle-group/disabled.tsx">
+  <ToggleGroupDisabled />
+</ComponentExample>