diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx new file mode 100644 index 000000000..8980f9df2 --- /dev/null +++ b/apps/ui/content/docs/(root)/changelog.mdx @@ -0,0 +1,30 @@ +--- +title: Changelog +description: Breaking changes, migration guides, and notable updates. +--- + +## Mar 20, 2026 + +### Toggle Group + +`Toggle` was renamed to `ToggleGroupItem` in `toggle-group.tsx` to avoid a naming conflict with the standalone `Toggle` export. + +**Migration:** + +```diff +- import { Toggle, ToggleGroup } from "@/components/ui/toggle-group" ++ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" +``` + +```diff + +- Bold ++ Bold + +``` + +**Agent migration prompt:** + +```text +In my codebase, rename all usages of `Toggle` imported from `toggle-group` to `ToggleGroupItem`. Update both the import statements and JSX usage. Do not change `Toggle` imports from `toggle.tsx` (standalone toggle). Only change files that import `Toggle` from the `toggle-group` module. +``` diff --git a/apps/ui/content/docs/(root)/meta.json b/apps/ui/content/docs/(root)/meta.json index b0cbf2ea6..95a9eb447 100644 --- a/apps/ui/content/docs/(root)/meta.json +++ b/apps/ui/content/docs/(root)/meta.json @@ -5,6 +5,7 @@ "styling", "radix-migration", "skills", + "changelog", "roadmap" ], "title": "Overview" diff --git a/apps/ui/content/docs/components/toggle-group.mdx b/apps/ui/content/docs/components/toggle-group.mdx index c7cf1d58e..fd22c6c27 100644 --- a/apps/ui/content/docs/components/toggle-group.mdx +++ b/apps/ui/content/docs/components/toggle-group.mdx @@ -46,14 +46,14 @@ npm install @base-ui/react ## Usage ```tsx -import { Toggle, ToggleGroup } from "@/components/ui/toggle-group" +import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" ``` ```tsx - Bold - Italic - Underline + Bold + Italic + Underline ``` @@ -68,9 +68,9 @@ Root component. Styled wrapper for `ToggleGroup.Root` from Base UI. Provides sha | `variant` | `"default" \| "outline"` | `"default"` | Controls the styling of all child toggles | | `size` | `"default" \| "sm" \| "lg"` | `"default"` | Controls the size of all child toggles | -### Toggle +### ToggleGroupItem -Individual toggle button within the group. Styled wrapper for `ToggleGroup.Item` from Base UI. Inherits variant and size from parent ToggleGroup context. Also exported as `ToggleGroupItem`. +Individual toggle button within the group. Styled wrapper for `Toggle` from Base UI. Inherits variant and size from parent ToggleGroup context. ### ToggleGroupSeparator @@ -109,3 +109,7 @@ Visual separator between toggle buttons. ### With Tooltips + +## Changelog + +- [Mar 20, 2026](/ui/docs/changelog#toggle-group) — `Toggle` renamed to `ToggleGroupItem` diff --git a/apps/ui/lib/docs.ts b/apps/ui/lib/docs.ts index 0ee260c86..369e9fdc7 100644 --- a/apps/ui/lib/docs.ts +++ b/apps/ui/lib/docs.ts @@ -1,6 +1,7 @@ export const PAGES_NEW = [ // "/docs/components/{component-name}", "/docs/skills", + "/docs/changelog", "/docs/components/drawer", "/docs/components/input-otp", ]; diff --git a/apps/ui/public/r/p-toggle-group-1.json b/apps/ui/public/r/p-toggle-group-1.json index 05ecd24fa..883172c69 100644 --- a/apps/ui/public/r/p-toggle-group-1.json +++ b/apps/ui/public/r/p-toggle-group-1.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-1.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-2.json b/apps/ui/public/r/p-toggle-group-2.json index e6fb02681..e0d9cdb1f 100644 --- a/apps/ui/public/r/p-toggle-group-2.json +++ b/apps/ui/public/r/p-toggle-group-2.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-2.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-3.json b/apps/ui/public/r/p-toggle-group-3.json index fec7dd8df..910d3fb8d 100644 --- a/apps/ui/public/r/p-toggle-group-3.json +++ b/apps/ui/public/r/p-toggle-group-3.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-3.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-4.json b/apps/ui/public/r/p-toggle-group-4.json index e4b42632d..a4828ff86 100644 --- a/apps/ui/public/r/p-toggle-group-4.json +++ b/apps/ui/public/r/p-toggle-group-4.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-4.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n Toggle,\n ToggleGroup,\n ToggleGroupSeparator,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n ToggleGroupSeparator,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-5.json b/apps/ui/public/r/p-toggle-group-5.json index c5432493c..f223b2177 100644 --- a/apps/ui/public/r/p-toggle-group-5.json +++ b/apps/ui/public/r/p-toggle-group-5.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-5.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n Toggle,\n ToggleGroup,\n ToggleGroupSeparator,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n ToggleGroupSeparator,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-6.json b/apps/ui/public/r/p-toggle-group-6.json index ab39df593..b98cf91a4 100644 --- a/apps/ui/public/r/p-toggle-group-6.json +++ b/apps/ui/public/r/p-toggle-group-6.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-6.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-7.json b/apps/ui/public/r/p-toggle-group-7.json index c879dc690..94782958c 100644 --- a/apps/ui/public/r/p-toggle-group-7.json +++ b/apps/ui/public/r/p-toggle-group-7.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-7.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function ParticleItem() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function ParticleItem() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-8.json b/apps/ui/public/r/p-toggle-group-8.json index 81d1cc7a9..23e3cbcdc 100644 --- a/apps/ui/public/r/p-toggle-group-8.json +++ b/apps/ui/public/r/p-toggle-group-8.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-8.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toggle-group-9.json b/apps/ui/public/r/p-toggle-group-9.json index 4ed822069..98ea0236c 100644 --- a/apps/ui/public/r/p-toggle-group-9.json +++ b/apps/ui/public/r/p-toggle-group-9.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/default/particles/p-toggle-group-9.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n Tooltip,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n return (\n \n \n \n }\n >\n \n \n Bold\n \n \n }\n >\n \n \n Italic\n \n \n }\n >\n \n \n Underline\n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\nimport {\n Tooltip,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n return (\n \n \n \n }\n >\n \n \n Bold\n \n \n \n }\n >\n \n \n Italic\n \n \n \n }\n >\n \n \n Underline\n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-toolbar-1.json b/apps/ui/public/r/p-toolbar-1.json index ffe770cf8..e5778b05f 100644 --- a/apps/ui/public/r/p-toolbar-1.json +++ b/apps/ui/public/r/p-toolbar-1.json @@ -15,7 +15,7 @@ "files": [ { "path": "registry/default/particles/p-toolbar-1.tsx", - "content": "\"use client\";\n\nimport {\n AlignCenterIcon,\n AlignLeftIcon,\n AlignRightIcon,\n DollarSignIcon,\n PercentIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n Select,\n SelectItem,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n Toolbar,\n ToolbarButton,\n ToolbarGroup,\n ToolbarSeparator,\n} from \"@/registry/default/ui/toolbar\";\nimport {\n Tooltip,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst items = [\n { label: \"Helvetica\", value: \"helvetica\" },\n { label: \"Arial\", value: \"arial\" },\n { label: \"Times New Roman\", value: \"times-new-roman\" },\n];\n\nexport default function Particle() {\n return (\n \n \n \n \n }\n >\n \n \n }\n />\n Align left\n \n \n }\n >\n \n \n }\n />\n Align center\n \n \n }\n >\n \n \n }\n />\n Align right\n \n \n \n \n \n }\n >\n \n \n }\n />\n Format as currency\n \n \n }\n >\n \n \n }\n />\n Format as percent\n \n \n \n \n \n \n \n \n }>Save\n \n \n \n );\n}\n", + "content": "\"use client\";\n\nimport {\n AlignCenterIcon,\n AlignLeftIcon,\n AlignRightIcon,\n DollarSignIcon,\n PercentIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n Select,\n SelectItem,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\nimport {\n Toolbar,\n ToolbarButton,\n ToolbarGroup,\n ToolbarSeparator,\n} from \"@/registry/default/ui/toolbar\";\nimport {\n Tooltip,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst items = [\n { label: \"Helvetica\", value: \"helvetica\" },\n { label: \"Arial\", value: \"arial\" },\n { label: \"Times New Roman\", value: \"times-new-roman\" },\n];\n\nexport default function Particle() {\n return (\n \n \n \n \n }\n >\n \n \n }\n />\n Align left\n \n \n \n }\n >\n \n \n }\n />\n Align center\n \n \n \n }\n >\n \n \n }\n />\n Align right\n \n \n \n \n \n }\n >\n \n \n }\n />\n Format as currency\n \n \n }\n >\n \n \n }\n />\n Format as percent\n \n \n \n \n \n \n \n \n }>Save\n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-tooltip-2.json b/apps/ui/public/r/p-tooltip-2.json index da2559fb2..c659f8524 100644 --- a/apps/ui/public/r/p-tooltip-2.json +++ b/apps/ui/public/r/p-tooltip-2.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/default/particles/p-tooltip-2.tsx", - "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n Tooltip,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n return (\n \n \n \n }\n >\n \n \n Bold\n \n \n }\n >\n \n \n Italic\n \n \n }\n >\n \n \n Underline\n \n \n \n );\n}\n", + "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\nimport {\n Tooltip,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n return (\n \n \n \n }\n >\n \n \n Bold\n \n \n \n }\n >\n \n \n Italic\n \n \n \n }\n >\n \n \n Underline\n \n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/p-tooltip-3.json b/apps/ui/public/r/p-tooltip-3.json index bb25aca55..0f104c40c 100644 --- a/apps/ui/public/r/p-tooltip-3.json +++ b/apps/ui/public/r/p-tooltip-3.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/default/particles/p-tooltip-3.tsx", - "content": "\"use client\";\n\nimport { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n Tooltip,\n TooltipCreateHandle,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst tooltipHandle = TooltipCreateHandle();\n\nconst BoldContent = () => {\n return Make text bold;\n};\n\nconst ItalicContent = () => {\n return Apply italic formatting to text;\n};\n\nconst UnderlineContent = () => {\n return Underline text;\n};\n\nexport default function Particle() {\n return (\n \n \n }\n >\n \n \n }\n >\n \n \n }\n >\n \n \n \n\n \n {({ payload: Payload }) => (\n {Payload !== undefined && }\n )}\n \n \n );\n}\n", + "content": "\"use client\";\n\nimport { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\nimport {\n Tooltip,\n TooltipCreateHandle,\n TooltipPopup,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst tooltipHandle = TooltipCreateHandle();\n\nconst BoldContent = () => {\n return Make text bold;\n};\n\nconst ItalicContent = () => {\n return Apply italic formatting to text;\n};\n\nconst UnderlineContent = () => {\n return Underline text;\n};\n\nexport default function Particle() {\n return (\n \n \n }\n >\n \n \n }\n >\n \n \n \n }\n >\n \n \n \n\n \n {({ payload: Payload }) => (\n {Payload !== undefined && }\n )}\n \n \n );\n}\n", "type": "registry:block" } ], diff --git a/apps/ui/public/r/toggle-group.json b/apps/ui/public/r/toggle-group.json index c4c673197..143a34900 100644 --- a/apps/ui/public/r/toggle-group.json +++ b/apps/ui/public/r/toggle-group.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/default/ui/toggle-group.tsx", - "content": "\"use client\";\n\nimport type { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n Toggle as ToggleComponent,\n type toggleVariants,\n} from \"@/registry/default/ui/toggle\";\n\nexport const ToggleGroupContext: React.Context<\n VariantProps\n> = React.createContext>({\n size: \"default\",\n variant: \"default\",\n});\n\nexport function ToggleGroup({\n className,\n variant = \"default\",\n size = \"default\",\n orientation = \"horizontal\",\n children,\n ...props\n}: ToggleGroupPrimitive.Props &\n VariantProps): React.ReactElement {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function Toggle({\n className,\n children,\n variant,\n size,\n ...props\n}: TogglePrimitive.Props &\n VariantProps): React.ReactElement {\n const context = React.useContext(ToggleGroupContext);\n\n const resolvedVariant = context.variant || variant;\n const resolvedSize = context.size || size;\n\n return (\n \n {children}\n \n );\n}\n\nexport function ToggleGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: {\n className?: string;\n} & React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport { ToggleGroupPrimitive, Toggle as ToggleGroupItem };\n", + "content": "\"use client\";\n\nimport type { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n Toggle as ToggleComponent,\n type toggleVariants,\n} from \"@/registry/default/ui/toggle\";\n\nexport const ToggleGroupContext: React.Context<\n VariantProps\n> = React.createContext>({\n size: \"default\",\n variant: \"default\",\n});\n\nexport function ToggleGroup({\n className,\n variant = \"default\",\n size = \"default\",\n orientation = \"horizontal\",\n children,\n ...props\n}: ToggleGroupPrimitive.Props &\n VariantProps): React.ReactElement {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: TogglePrimitive.Props &\n VariantProps): React.ReactElement {\n const context = React.useContext(ToggleGroupContext);\n\n const resolvedVariant = context.variant || variant;\n const resolvedSize = context.size || size;\n\n return (\n \n {children}\n \n );\n}\n\nexport function ToggleGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: {\n className?: string;\n} & React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport { ToggleGroupPrimitive };\n", "type": "registry:ui" } ], diff --git a/apps/ui/registry/default/particles/p-toggle-group-1.tsx b/apps/ui/registry/default/particles/p-toggle-group-1.tsx index 9fe7153b6..4716565d7 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-1.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-1.tsx @@ -1,18 +1,21 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; export default function Particle() { return ( - + - - + + - - + + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-2.tsx b/apps/ui/registry/default/particles/p-toggle-group-2.tsx index 4dd6bd96d..a6f5536a5 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-2.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-2.tsx @@ -1,18 +1,21 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; export default function Particle() { return ( - + - - + + - - + + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-3.tsx b/apps/ui/registry/default/particles/p-toggle-group-3.tsx index 6e321aa08..b76744725 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-3.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-3.tsx @@ -1,18 +1,21 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; export default function Particle() { return ( - + - - + + - - + + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-4.tsx b/apps/ui/registry/default/particles/p-toggle-group-4.tsx index 44f117735..8868d1203 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-4.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-4.tsx @@ -1,24 +1,24 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; import { - Toggle, ToggleGroup, + ToggleGroupItem, ToggleGroupSeparator, } from "@/registry/default/ui/toggle-group"; export default function Particle() { return ( - + - + - + - + - + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-5.tsx b/apps/ui/registry/default/particles/p-toggle-group-5.tsx index 49d110e88..fef1994fb 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-5.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-5.tsx @@ -1,7 +1,7 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; import { - Toggle, ToggleGroup, + ToggleGroupItem, ToggleGroupSeparator, } from "@/registry/default/ui/toggle-group"; @@ -12,17 +12,17 @@ export default function Particle() { orientation="vertical" variant="outline" > - + - + - + - + - + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-6.tsx b/apps/ui/registry/default/particles/p-toggle-group-6.tsx index 516849845..1539901b7 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-6.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-6.tsx @@ -1,18 +1,21 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; export default function Particle() { return ( - + - - + + - - + + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-7.tsx b/apps/ui/registry/default/particles/p-toggle-group-7.tsx index 817a99719..c27888840 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-7.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-7.tsx @@ -1,18 +1,21 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; export default function ParticleItem() { return ( - + - - + + - - + + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-8.tsx b/apps/ui/registry/default/particles/p-toggle-group-8.tsx index 74020a248..eb2ef77db 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-8.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-8.tsx @@ -1,18 +1,21 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; export default function Particle() { return ( - + - - + + - - + + - + ); } diff --git a/apps/ui/registry/default/particles/p-toggle-group-9.tsx b/apps/ui/registry/default/particles/p-toggle-group-9.tsx index 4db02db88..da6e7fc63 100644 --- a/apps/ui/registry/default/particles/p-toggle-group-9.tsx +++ b/apps/ui/registry/default/particles/p-toggle-group-9.tsx @@ -1,5 +1,8 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; import { Tooltip, TooltipPopup, @@ -13,7 +16,7 @@ export default function Particle() { } + render={} > @@ -21,7 +24,9 @@ export default function Particle() { } + render={ + + } > @@ -29,7 +34,12 @@ export default function Particle() { } + render={ + + } > diff --git a/apps/ui/registry/default/particles/p-toolbar-1.tsx b/apps/ui/registry/default/particles/p-toolbar-1.tsx index 1f1a90ce1..58aa1d0dc 100644 --- a/apps/ui/registry/default/particles/p-toolbar-1.tsx +++ b/apps/ui/registry/default/particles/p-toolbar-1.tsx @@ -15,7 +15,10 @@ import { SelectTrigger, SelectValue, } from "@/registry/default/ui/select"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; import { Toolbar, ToolbarButton, @@ -45,7 +48,7 @@ export default function Particle() { render={ } + render={} > @@ -58,7 +61,12 @@ export default function Particle() { render={ } + render={ + + } > @@ -71,7 +79,9 @@ export default function Particle() { render={ } + render={ + + } > diff --git a/apps/ui/registry/default/particles/p-tooltip-2.tsx b/apps/ui/registry/default/particles/p-tooltip-2.tsx index 4db02db88..da6e7fc63 100644 --- a/apps/ui/registry/default/particles/p-tooltip-2.tsx +++ b/apps/ui/registry/default/particles/p-tooltip-2.tsx @@ -1,5 +1,8 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; import { Tooltip, TooltipPopup, @@ -13,7 +16,7 @@ export default function Particle() { } + render={} > @@ -21,7 +24,9 @@ export default function Particle() { } + render={ + + } > @@ -29,7 +34,12 @@ export default function Particle() { } + render={ + + } > diff --git a/apps/ui/registry/default/particles/p-tooltip-3.tsx b/apps/ui/registry/default/particles/p-tooltip-3.tsx index 5289167b9..e2df5f642 100644 --- a/apps/ui/registry/default/particles/p-tooltip-3.tsx +++ b/apps/ui/registry/default/particles/p-tooltip-3.tsx @@ -2,7 +2,10 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"; import type { ComponentType } from "react"; -import { Toggle, ToggleGroup } from "@/registry/default/ui/toggle-group"; +import { + ToggleGroup, + ToggleGroupItem, +} from "@/registry/default/ui/toggle-group"; import { Tooltip, TooltipCreateHandle, @@ -33,7 +36,7 @@ export default function Particle() { className="after:absolute after:left-full after:h-full after:w-1" handle={tooltipHandle} payload={BoldContent} - render={} + render={} > ``` @@ -61,6 +61,7 @@ Controlled toggle group: const [value, setValue] = useState(["bold"]) + Bold ... ``` diff --git a/apps/ui/skills/coss/references/primitives/toolbar.md b/apps/ui/skills/coss/references/primitives/toolbar.md index 7f01c891e..208035e62 100644 --- a/apps/ui/skills/coss/references/primitives/toolbar.md +++ b/apps/ui/skills/coss/references/primitives/toolbar.md @@ -21,27 +21,27 @@ npm install @base-ui/react ```tsx import { Button } from "@/components/ui/button" +import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "@/components/ui/toolbar" -import { Toggle } from "@/components/ui/toggle-group" ``` ## Minimal pattern ```tsx - - } aria-label="Bold"> - Bold + + }> + - } aria-label="Underline"> - Underline + }> + - + }> @@ -53,7 +53,7 @@ import { Toggle } from "@/components/ui/toggle-group" ## Patterns from coss particles -- **Part composition via `render`**: use `ToolbarButton render={}` or `render={