feat(toggle-group): simplify implementation

shadcn-ui · Nov 12, 2023 · d2d7213 · d2d7213
1 parent b858f95
commit d2d7213
Show file tree

Hide file tree

Showing 21 changed files with 134 additions and 132 deletions.
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -250,20 +250,20 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/ui/toast")),
       files: ["registry/default/ui/toast.tsx","registry/default/ui/use-toast.ts","registry/default/ui/toaster.tsx"],
     },
-    "toggle-group": {
-      name: "toggle-group",
-      type: "components:ui",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/ui/toggle-group")),
-      files: ["registry/default/ui/toggle-group.tsx"],
-    },
     "toggle": {
       name: "toggle",
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/toggle")),
       files: ["registry/default/ui/toggle.tsx"],
     },
+    "toggle-group": {
+      name: "toggle-group",
+      type: "components:ui",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/ui/toggle-group")),
+      files: ["registry/default/ui/toggle-group.tsx"],
+    },
     "tooltip": {
       name: "tooltip",
       type: "components:ui",
@@ -1329,20 +1329,20 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/ui/toast")),
       files: ["registry/new-york/ui/toast.tsx","registry/new-york/ui/use-toast.ts","registry/new-york/ui/toaster.tsx"],
     },
-    "toggle-group": {
-      name: "toggle-group",
-      type: "components:ui",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/new-york/ui/toggle-group")),
-      files: ["registry/new-york/ui/toggle-group.tsx"],
-    },
     "toggle": {
       name: "toggle",
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle")),
       files: ["registry/new-york/ui/toggle.tsx"],
     },
+    "toggle-group": {
+      name: "toggle-group",
+      type: "components:ui",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/new-york/ui/toggle-group")),
+      files: ["registry/new-york/ui/toggle-group.tsx"],
+    },
     "tooltip": {
       name: "tooltip",
       type: "components:ui",

diff --git a/apps/www/app/sink/page.tsx b/apps/www/app/sink/page.tsx
@@ -43,6 +43,7 @@ import TabsDemo from "@/registry/default/example/tabs-demo"
 import ToastDemo from "@/registry/default/example/toast-demo"
 import ToggleDemo from "@/registry/default/example/toggle-demo"
 import ToggleDisabled from "@/registry/default/example/toggle-disabled"
+import ToggleGroupDemo from "@/registry/default/example/toggle-group-demo"
 import ToggleOutline from "@/registry/default/example/toggle-outline"
 import ToggleWithText from "@/registry/default/example/toggle-with-text"
 import TooltipDemo from "@/registry/default/example/tooltip-demo"
@@ -126,6 +127,9 @@ export default function KitchenSinkPage() {
               <SwitchDemo />
               <SelectDemo />
             </ComponentWrapper>
+            <ComponentWrapper>
+              <ToggleGroupDemo />
+            </ComponentWrapper>
             <ComponentWrapper>
               <SeparatorDemo />
             </ComponentWrapper>

diff --git a/apps/www/content/docs/components/toggle-group.mdx b/apps/www/content/docs/components/toggle-group.mdx
@@ -1,6 +1,6 @@
 ---
 title: Toggle Group
-description: A group of two state buttons.
+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

diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
@@ -349,22 +349,25 @@
     "type": "components:ui"
   },
   {
-    "name": "toggle-group",
+    "name": "toggle",
     "dependencies": [
-      "@radix-ui/react-toggle-group"
+      "@radix-ui/react-toggle"
     ],
     "files": [
-      "ui/toggle-group.tsx"
+      "ui/toggle.tsx"
     ],
     "type": "components:ui"
   },
   {
-    "name": "toggle",
+    "name": "toggle-group",
     "dependencies": [
-      "@radix-ui/react-toggle"
+      "@radix-ui/react-toggle-group"
+    ],
+    "registryDependencies": [
+      "toggle"
     ],
     "files": [
-      "ui/toggle.tsx"
+      "ui/toggle-group.tsx"
     ],
     "type": "components:ui"
   },

diff --git a/apps/www/public/registry/styles/default/toggle-group.json b/apps/www/public/registry/styles/default/toggle-group.json
@@ -3,10 +3,13 @@
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
+  "registryDependencies": [
+    "toggle"
+  ],
   "files": [
     {
       "name": "toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleGroupItemVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst toggleGroupItemVariants = cva(\n  \"inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-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 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border-r border-input bg-transparent last:border-0 hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleGroupItemVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center overflow-hidden rounded-md border border-input bg-transparent shadow\",\n      className\n    )}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleGroupItemVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleGroupItemVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"flex items-center justify-center gap-1\", className)}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n"
     }
   ],
   "type": "components:ui"

diff --git a/apps/www/public/registry/styles/new-york/toggle-group.json b/apps/www/public/registry/styles/new-york/toggle-group.json
@@ -3,10 +3,13 @@
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
+  "registryDependencies": [
+    "toggle"
+  ],
   "files": [
     {
       "name": "toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleGroupItemVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst toggleGroupItemVariants = cva(\n  \"inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border-r border-input bg-transparent shadow-sm last:border-0 hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3\",\n        sm: \"h-8 px-2\",\n        lg: \"h-10 px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleGroupItemVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center overflow-hidden rounded-md border border-input bg-transparent shadow\",\n      className\n    )}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleGroupItemVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleGroupItemVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"flex items-center justify-center gap-1\", className)}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n"
     }
   ],
   "type": "components:ui"

diff --git a/apps/www/registry/default/example/toggle-group-demo.tsx b/apps/www/registry/default/example/toggle-group-demo.tsx
@@ -1,6 +1,9 @@
-import { Bold, Italic, Strikethrough } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react"
 
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
 
 export default function ToggleGroupDemo() {
   return (
@@ -12,7 +15,7 @@ export default function ToggleGroupDemo() {
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Strikethrough className="h-4 w-4" />
+        <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   )

diff --git a/apps/www/registry/default/example/toggle-group-disabled.tsx b/apps/www/registry/default/example/toggle-group-disabled.tsx
@@ -1,6 +1,9 @@
-import { Bold, Italic, Strikethrough } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react"
 
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
 
 export default function ToggleGroupDemo() {
   return (
@@ -12,7 +15,7 @@ export default function ToggleGroupDemo() {
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Strikethrough className="h-4 w-4" />
+        <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   )

diff --git a/apps/www/registry/default/example/toggle-group-lg.tsx b/apps/www/registry/default/example/toggle-group-lg.tsx
@@ -1,6 +1,9 @@
-import { Bold, Italic, Strikethrough } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react"
 
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
 
 export default function ToggleGroupDemo() {
   return (
@@ -12,7 +15,7 @@ export default function ToggleGroupDemo() {
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Strikethrough className="h-4 w-4" />
+        <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   )

diff --git a/apps/www/registry/default/example/toggle-group-outline.tsx b/apps/www/registry/default/example/toggle-group-outline.tsx
@@ -1,18 +1,21 @@
-import { Bold, Italic, Strikethrough } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react"
 
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
 
 export default function ToggleGroupDemo() {
   return (
-    <ToggleGroup variant={"outline"} type="multiple">
+    <ToggleGroup variant="outline" type="multiple">
       <ToggleGroupItem value="bold" aria-label="Toggle bold">
         <Bold className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Strikethrough className="h-4 w-4" />
+        <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   )

diff --git a/apps/www/registry/default/example/toggle-group-single.tsx b/apps/www/registry/default/example/toggle-group-single.tsx
@@ -1,6 +1,9 @@
-import { Bold, Italic, Strikethrough } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react"
 
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
 
 export default function ToggleGroupDemo() {
   return (
@@ -12,7 +15,7 @@ export default function ToggleGroupDemo() {
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Strikethrough className="h-4 w-4" />
+        <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   )

diff --git a/apps/www/registry/default/example/toggle-group-sm.tsx b/apps/www/registry/default/example/toggle-group-sm.tsx
@@ -1,6 +1,9 @@
-import { Bold, Italic, Strikethrough } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react"
 
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/default/ui/toggle-group"
 
 export default function ToggleGroupDemo() {
   return (
@@ -12,7 +15,7 @@ export default function ToggleGroupDemo() {
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Strikethrough className="h-4 w-4" />
+        <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   )