rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-23 12:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(toggle-group): add spacing props

Browse Source
This commit is contained in:
shadcn
2025-10-20 21:28:40 +04:00
parent 62dbad36bb
commit 54e725d986
18 changed files with 272 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx
View File

@@ -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 (
<div className="flex flex-wrap items-start gap-4">
<ToggleGroup type="multiple">
<ToggleGroup type="multiple" spacing={2}>
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<BoldIcon />
</ToggleGroupItem>
@@ -54,12 +61,7 @@ export function ToggleGroupDemo() {
</ToggleGroupItem>
</ToggleGroup>
<ToggleGroup
type="single"
size="sm"
defaultValue="last-24-hours"
className="*:data-[slot=toggle-group-item]:px-3"
>
<ToggleGroup type="single" size="sm" defaultValue="last-24-hours">
<ToggleGroupItem
value="last-24-hours"
aria-label="Toggle last 24 hours"
@@ -70,6 +72,68 @@ export function ToggleGroupDemo() {
Last 7 days
</ToggleGroupItem>
</ToggleGroup>
<ToggleGroup type="single" size="sm" defaultValue="top" variant="outline">
<ToggleGroupItem value="top" aria-label="Toggle top">
Top
</ToggleGroupItem>
<ToggleGroupItem value="bottom" aria-label="Toggle bottom">
Bottom
</ToggleGroupItem>
<ToggleGroupItem value="left" aria-label="Toggle left">
Left
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Toggle right">
Right
</ToggleGroupItem>
</ToggleGroup>
<ToggleGroup
type="single"
size="sm"
defaultValue="top"
variant="outline"
spacing={2}
>
<ToggleGroupItem value="top" aria-label="Toggle top">
Top
</ToggleGroupItem>
<ToggleGroupItem value="bottom" aria-label="Toggle bottom">
Bottom
</ToggleGroupItem>
<ToggleGroupItem value="left" aria-label="Toggle left">
Left
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Toggle right">
Right
</ToggleGroupItem>
</ToggleGroup>
<ToggleGroup type="multiple" variant="outline" spacing={2} size="sm">
<ToggleGroupItem
value="star"
aria-label="Toggle star"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
>
<StarIcon />
Star
</ToggleGroupItem>
<ToggleGroupItem
value="heart"
aria-label="Toggle heart"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
>
<HeartIcon />
Heart
</ToggleGroupItem>
<ToggleGroupItem
value="bookmark"
aria-label="Toggle bookmark"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
>
<BookmarkIcon />
Bookmark
</ToggleGroupItem>
</ToggleGroup>
</div>
)
}

51
apps/v4/content/docs/components/toggle-group.mdx
View File

@@ -7,10 +7,7 @@ links:
api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference
---
<ComponentPreview
name="toggle-group-demo"
description="A toggle group with three items."
/>
<ComponentPreview name="toggle-group-spacing" />
## Installation
@@ -66,13 +63,6 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
## Examples
### Default
<ComponentPreview
name="toggle-group-demo"
description="A toggle group with three items."
/>
### Outline
<ComponentPreview
@@ -107,3 +97,42 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
name="toggle-group-disabled"
description="A disabled toggle group."
/>
### Spacing
Use `spacing={2}` to add spacing between toggle group items.
<ComponentPreview
name="toggle-group-spacing"
description="A toggle group with spacing."
/>
## 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
<ToggleGroup type="single" variant="outline" size="sm">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>
```
### 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` | |

11
apps/v4/public/r/styles/new-york-v4/registry.json
View File

@@ -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",

2
apps/v4/public/r/styles/new-york-v4/toggle-demo.json
View File

@@ -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 <Toggle aria-label=\"Toggle italic\">\n <Bold className=\"h-4 w-4\" />\n </Toggle>\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 <Toggle\n aria-label=\"Toggle bookmark\"\n size=\"sm\"\n variant=\"outline\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500\"\n >\n <BookmarkIcon />\n Bookmark\n </Toggle>\n )\n}\n",
"type": "registry:example"
}
]

15
apps/v4/public/r/styles/new-york-v4/toggle-group-spacing.json Normal file
View File

@@ -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 <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={2} size=\"sm\">\n <ToggleGroupItem\n value=\"star\"\n aria-label=\"Toggle star\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500\"\n >\n <StarIcon />\n Star\n </ToggleGroupItem>\n <ToggleGroupItem\n value=\"heart\"\n aria-label=\"Toggle heart\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500\"\n >\n <HeartIcon />\n Heart\n </ToggleGroupItem>\n <ToggleGroupItem\n value=\"bookmark\"\n aria-label=\"Toggle bookmark\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500\"\n >\n <BookmarkIcon />\n Bookmark\n </ToggleGroupItem>\n </ToggleGroup>\n )\n}\n",
"type": "registry:example"
}
]
}

2
apps/v4/public/r/styles/new-york-v4/toggle-group.json
View File

@@ -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<typeof toggleVariants>\n>({\n size: \"default\",\n variant: \"default\",\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants>) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n className={cn(\n \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-size={context.size || size}\n className={cn(\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n \"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\",\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\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<typeof toggleVariants> & {\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<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n }) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n data-spacing={spacing}\n style={{ \"--gap\": spacing } as React.CSSProperties}\n className={cn(\n \"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs\",\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-size={context.size || size}\n data-spacing={context.spacing}\n className={cn(\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n \"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\",\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
"type": "registry:ui"
}
]

11
apps/v4/registry.json
View File

@@ -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",

18
apps/v4/registry/__index__.tsx
View File

@@ -7442,6 +7442,24 @@ export const Index: Record<string, any> = {
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: "",

12
apps/v4/registry/new-york-v4/examples/toggle-demo.tsx
View File

@@ -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 (
<Toggle aria-label="Toggle italic">
<Bold className="h-4 w-4" />
<Toggle
aria-label="Toggle bookmark"
size="sm"
variant="outline"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
>
<BookmarkIcon />
Bookmark
</Toggle>
)
}

37
apps/v4/registry/new-york-v4/examples/toggle-group-spacing.tsx Normal file
View File

@@ -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 (
<ToggleGroup type="multiple" variant="outline" spacing={2} size="sm">
<ToggleGroupItem
value="star"
aria-label="Toggle star"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
>
<StarIcon />
Star
</ToggleGroupItem>
<ToggleGroupItem
value="heart"
aria-label="Toggle heart"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
>
<HeartIcon />
Heart
</ToggleGroupItem>
<ToggleGroupItem
value="bookmark"
aria-label="Toggle bookmark"
className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
>
<BookmarkIcon />
Bookmark
</ToggleGroupItem>
</ToggleGroup>
)
}

20
apps/v4/registry/new-york-v4/ui/toggle-group.tsx
View File

@@ -8,32 +8,40 @@ import { cn } from "@/lib/utils"
import { toggleVariants } from "@/registry/new-york-v4/ui/toggle"
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
VariantProps<typeof toggleVariants> & {
spacing?: number
}
>({
size: "default",
variant: "default",
spacing: 0,
})
function ToggleGroup({
className,
variant,
size,
spacing = 0,
children,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>) {
VariantProps<typeof toggleVariants> & {
spacing?: number
}) {
return (
<ToggleGroupPrimitive.Root
data-slot="toggle-group"
data-variant={variant}
data-size={size}
data-spacing={spacing}
style={{ "--gap": spacing } as React.CSSProperties}
className={cn(
"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
className
)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size }}>
<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
@@ -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}

11
apps/v4/registry/registry-examples.ts
View File

@@ -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",

2
apps/www/public/r/registries.json
View File

@@ -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",

2
apps/www/public/r/styles/new-york-v4/badge.json
View File

@@ -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<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant }), className)}\n {...props}\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<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nexport { Badge, badgeVariants }\n",
"type": "registry:ui"
}
]

11
apps/www/public/r/styles/new-york-v4/registry.json
View File

@@ -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",

2
apps/www/public/r/styles/new-york-v4/toggle-demo.json
View File

@@ -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 <Toggle aria-label=\"Toggle italic\">\n <Bold className=\"h-4 w-4\" />\n </Toggle>\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 <Toggle\n aria-label=\"Toggle bookmark\"\n size=\"sm\"\n variant=\"outline\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500\"\n >\n <BookmarkIcon />\n Bookmark\n </Toggle>\n )\n}\n",
"type": "registry:example"
}
]

15
apps/www/public/r/styles/new-york-v4/toggle-group-spacing.json Normal file
View File

@@ -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 <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={2} size=\"sm\">\n <ToggleGroupItem\n value=\"star\"\n aria-label=\"Toggle star\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500\"\n >\n <StarIcon />\n Star\n </ToggleGroupItem>\n <ToggleGroupItem\n value=\"heart\"\n aria-label=\"Toggle heart\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500\"\n >\n <HeartIcon />\n Heart\n </ToggleGroupItem>\n <ToggleGroupItem\n value=\"bookmark\"\n aria-label=\"Toggle bookmark\"\n className=\"data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500\"\n >\n <BookmarkIcon />\n Bookmark\n </ToggleGroupItem>\n </ToggleGroup>\n )\n}\n",
"type": "registry:example"
}
]
}

2
apps/www/public/r/styles/new-york-v4/toggle-group.json
View File

@@ -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<typeof toggleVariants>\n>({\n size: \"default\",\n variant: \"default\",\n})\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants>) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n className={cn(\n \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-size={context.size || size}\n className={cn(\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n \"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\",\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\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<typeof toggleVariants> & {\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<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n }) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n data-spacing={spacing}\n style={{ \"--gap\": spacing } as React.CSSProperties}\n className={cn(\n \"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs\",\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-size={context.size || size}\n data-spacing={context.spacing}\n className={cn(\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n \"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\",\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
"type": "registry:ui"
}
]