diff --git a/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx b/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx index ce8cad4021..b8c9fc4267 100644 --- a/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx @@ -1,4 +1,11 @@ -import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react" +import { + BoldIcon, + BookmarkIcon, + HeartIcon, + ItalicIcon, + StarIcon, + UnderlineIcon, +} from "lucide-react" import { ToggleGroup, @@ -8,7 +15,7 @@ import { export function ToggleGroupDemo() { return (
- + @@ -54,12 +61,7 @@ export function ToggleGroupDemo() { - + + + + Top + + + Bottom + + + Left + + + Right + + + + + + Top + + + Bottom + + + Left + + + Right + + + + + + + Star + + + + Heart + + + + Bookmark + +
) } diff --git a/apps/v4/content/docs/components/toggle-group.mdx b/apps/v4/content/docs/components/toggle-group.mdx index a1b4a1a7c7..856b46bd5f 100644 --- a/apps/v4/content/docs/components/toggle-group.mdx +++ b/apps/v4/content/docs/components/toggle-group.mdx @@ -7,10 +7,7 @@ links: api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference --- - + ## Installation @@ -66,13 +63,6 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" ## Examples -### Default - - - ### Outline + +### Spacing + +Use `spacing={2}` to add spacing between toggle group items. + + + +## API Reference + +### ToggleGroup + +The main component that wraps toggle group items. + +| Prop | Type | Default | +| ----------- | --------------------------- | ----------- | +| `type` | `"single" \| "multiple"` | `"single"` | +| `variant` | `"default" \| "outline"` | `"default"` | +| `size` | `"default" \| "sm" \| "lg"` | `"default"` | +| `spacing` | `number` | `0` | +| `className` | `string` | | + +```tsx + + A + B + +``` + +### ToggleGroupItem + +Individual toggle items within a toggle group. Remember to add an `aria-label` to each item for accessibility. + +| Prop | Type | Default | +| ----------- | -------- | -------- | +| `value` | `string` | Required | +| `className` | `string` | | diff --git a/apps/v4/public/r/styles/new-york-v4/registry.json b/apps/v4/public/r/styles/new-york-v4/registry.json index b82cc690c0..d0063dcc82 100644 --- a/apps/v4/public/r/styles/new-york-v4/registry.json +++ b/apps/v4/public/r/styles/new-york-v4/registry.json @@ -5723,6 +5723,17 @@ } ] }, + { + "name": "toggle-group-spacing", + "type": "registry:example", + "registryDependencies": ["toggle-group"], + "files": [ + { + "path": "registry/new-york-v4/examples/toggle-group-spacing.tsx", + "type": "registry:example" + } + ] + }, { "name": "toggle-demo", "type": "registry:example", diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-demo.json b/apps/v4/public/r/styles/new-york-v4/toggle-demo.json index b40477e66d..becc5e808a 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-demo.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-demo.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-demo.tsx", - "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDemo() {\n return (\n \n \n \n )\n}\n", + "content": "import { BookmarkIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDemo() {\n return (\n \n \n Bookmark\n \n )\n}\n", "type": "registry:example" } ] diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-spacing.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-spacing.json new file mode 100644 index 0000000000..8af78c7677 --- /dev/null +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-spacing.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "toggle-group-spacing", + "type": "registry:example", + "registryDependencies": [ + "toggle-group" + ], + "files": [ + { + "path": "registry/new-york-v4/examples/toggle-group-spacing.tsx", + "content": "import { BookmarkIcon, HeartIcon, StarIcon } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupSpacing() {\n return (\n \n \n \n Star\n \n \n \n Heart\n \n \n \n Bookmark\n \n \n )\n}\n", + "type": "registry:example" + } + ] +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group.json b/apps/v4/public/r/styles/new-york-v4/toggle-group.json index a818621788..7cd80e3ccb 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/new-york-v4/ui/toggle-group.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york-v4/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n VariantProps\n>({\n size: \"default\",\n variant: \"default\",\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n \n {children}\n \n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york-v4/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n VariantProps & {\n spacing?: number\n }\n>({\n size: \"default\",\n variant: \"default\",\n spacing: 0,\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n spacing = 0,\n children,\n ...props\n}: React.ComponentProps &\n VariantProps & {\n spacing?: number\n }) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n \n {children}\n \n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n", "type": "registry:ui" } ] diff --git a/apps/v4/registry.json b/apps/v4/registry.json index b82cc690c0..d0063dcc82 100644 --- a/apps/v4/registry.json +++ b/apps/v4/registry.json @@ -5723,6 +5723,17 @@ } ] }, + { + "name": "toggle-group-spacing", + "type": "registry:example", + "registryDependencies": ["toggle-group"], + "files": [ + { + "path": "registry/new-york-v4/examples/toggle-group-spacing.tsx", + "type": "registry:example" + } + ] + }, { "name": "toggle-demo", "type": "registry:example", diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx index 34d41e72b4..154df13fa0 100644 --- a/apps/v4/registry/__index__.tsx +++ b/apps/v4/registry/__index__.tsx @@ -7442,6 +7442,24 @@ export const Index: Record = { categories: undefined, meta: undefined, }, + "toggle-group-spacing": { + name: "toggle-group-spacing", + description: "", + type: "registry:example", + registryDependencies: ["toggle-group"], + files: [{ + path: "registry/new-york-v4/examples/toggle-group-spacing.tsx", + type: "registry:example", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/new-york-v4/examples/toggle-group-spacing.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name + return { default: mod.default || mod[exportName] } + }), + categories: undefined, + meta: undefined, + }, "toggle-demo": { name: "toggle-demo", description: "", diff --git a/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx b/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx index 3973251c1d..449f753415 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-demo.tsx @@ -1,11 +1,17 @@ -import { Bold } from "lucide-react" +import { BookmarkIcon } from "lucide-react" import { Toggle } from "@/registry/new-york-v4/ui/toggle" export default function ToggleDemo() { return ( - - + + + Bookmark ) } diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-spacing.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-spacing.tsx new file mode 100644 index 0000000000..0394578c94 --- /dev/null +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-spacing.tsx @@ -0,0 +1,37 @@ +import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react" + +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/new-york-v4/ui/toggle-group" + +export default function ToggleGroupSpacing() { + return ( + + + + Star + + + + Heart + + + + Bookmark + + + ) +} diff --git a/apps/v4/registry/new-york-v4/ui/toggle-group.tsx b/apps/v4/registry/new-york-v4/ui/toggle-group.tsx index fe69cdd495..d14943d4a3 100644 --- a/apps/v4/registry/new-york-v4/ui/toggle-group.tsx +++ b/apps/v4/registry/new-york-v4/ui/toggle-group.tsx @@ -8,32 +8,40 @@ import { cn } from "@/lib/utils" import { toggleVariants } from "@/registry/new-york-v4/ui/toggle" const ToggleGroupContext = React.createContext< - VariantProps + VariantProps & { + spacing?: number + } >({ size: "default", variant: "default", + spacing: 0, }) function ToggleGroup({ className, variant, size, + spacing = 0, children, ...props }: React.ComponentProps & - VariantProps) { + VariantProps & { + spacing?: number + }) { return ( - + {children} @@ -55,12 +63,14 @@ function ToggleGroupItem({ data-slot="toggle-group-item" data-variant={context.variant || variant} data-size={context.size || size} + data-spacing={context.spacing} className={cn( toggleVariants({ variant: context.variant || variant, size: context.size || size, }), - "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", + "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", + "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className )} {...props} diff --git a/apps/v4/registry/registry-examples.ts b/apps/v4/registry/registry-examples.ts index b172d29f23..69ed4aa65d 100644 --- a/apps/v4/registry/registry-examples.ts +++ b/apps/v4/registry/registry-examples.ts @@ -2368,6 +2368,17 @@ export const examples: Registry["items"] = [ }, ], }, + { + name: "toggle-group-spacing", + type: "registry:example", + registryDependencies: ["toggle-group"], + files: [ + { + path: "examples/toggle-group-spacing.tsx", + type: "registry:example", + }, + ], + }, { name: "toggle-demo", type: "registry:example", diff --git a/apps/www/public/r/registries.json b/apps/www/public/r/registries.json index 8606c68ef4..5ebcdb9603 100644 --- a/apps/www/public/r/registries.json +++ b/apps/www/public/r/registries.json @@ -15,6 +15,7 @@ "@blocks": "https://blocks.so/r/{name}.json", "@bucharitesh": "https://bucharitesh.in/r/{name}.json", "@clerk": "https://clerk.com/r/{name}.json", + "@coss": "https://coss.com/ui/r/{name}.json", "@cult-ui": "https://cult-ui.com/r/{name}.json", "@efferd-ui": "https://ui.efferd.com/r/{name}.json", "@eldoraui": "https://eldoraui.site/r/{name}.json", @@ -46,6 +47,7 @@ "@skiper-ui": "https://skiper-ui.com/registry/{name}.json", "@skyr": "https://ui-play.skyroc.me/r/{name}.json", "@smoothui": "https://smoothui.dev/r/{name}.json", + "@supabase": "https://supabase.com/ui/r/{name}.json", "@svgl": "https://svgl.app/r/{name}.json", "@tailark": "https://tailark.com/r/{name}.json", "@tweakcn": "https://tweakcn.com/r/themes/{name}.json", diff --git a/apps/www/public/r/styles/new-york-v4/badge.json b/apps/www/public/r/styles/new-york-v4/badge.json index 02a7d530ef..cfa969604f 100644 --- a/apps/www/public/r/styles/new-york-v4/badge.json +++ b/apps/www/public/r/styles/new-york-v4/badge.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/ui/badge.tsx", - "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n", + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n", "type": "registry:ui" } ] diff --git a/apps/www/public/r/styles/new-york-v4/registry.json b/apps/www/public/r/styles/new-york-v4/registry.json index b82cc690c0..d0063dcc82 100644 --- a/apps/www/public/r/styles/new-york-v4/registry.json +++ b/apps/www/public/r/styles/new-york-v4/registry.json @@ -5723,6 +5723,17 @@ } ] }, + { + "name": "toggle-group-spacing", + "type": "registry:example", + "registryDependencies": ["toggle-group"], + "files": [ + { + "path": "registry/new-york-v4/examples/toggle-group-spacing.tsx", + "type": "registry:example" + } + ] + }, { "name": "toggle-demo", "type": "registry:example", diff --git a/apps/www/public/r/styles/new-york-v4/toggle-demo.json b/apps/www/public/r/styles/new-york-v4/toggle-demo.json index b40477e66d..becc5e808a 100644 --- a/apps/www/public/r/styles/new-york-v4/toggle-demo.json +++ b/apps/www/public/r/styles/new-york-v4/toggle-demo.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-demo.tsx", - "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDemo() {\n return (\n \n \n \n )\n}\n", + "content": "import { BookmarkIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDemo() {\n return (\n \n \n Bookmark\n \n )\n}\n", "type": "registry:example" } ] diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group-spacing.json b/apps/www/public/r/styles/new-york-v4/toggle-group-spacing.json new file mode 100644 index 0000000000..8af78c7677 --- /dev/null +++ b/apps/www/public/r/styles/new-york-v4/toggle-group-spacing.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "toggle-group-spacing", + "type": "registry:example", + "registryDependencies": [ + "toggle-group" + ], + "files": [ + { + "path": "registry/new-york-v4/examples/toggle-group-spacing.tsx", + "content": "import { BookmarkIcon, HeartIcon, StarIcon } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupSpacing() {\n return (\n \n \n \n Star\n \n \n \n Heart\n \n \n \n Bookmark\n \n \n )\n}\n", + "type": "registry:example" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/styles/new-york-v4/toggle-group.json b/apps/www/public/r/styles/new-york-v4/toggle-group.json index a818621788..7cd80e3ccb 100644 --- a/apps/www/public/r/styles/new-york-v4/toggle-group.json +++ b/apps/www/public/r/styles/new-york-v4/toggle-group.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/new-york-v4/ui/toggle-group.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york-v4/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n VariantProps\n>({\n size: \"default\",\n variant: \"default\",\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n \n {children}\n \n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york-v4/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n VariantProps & {\n spacing?: number\n }\n>({\n size: \"default\",\n variant: \"default\",\n spacing: 0,\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n spacing = 0,\n children,\n ...props\n}: React.ComponentProps &\n VariantProps & {\n spacing?: number\n }) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n \n {children}\n \n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n", "type": "registry:ui" } ]