fix: rename Toggle to ToggleGroupItem in toggle-group to resolve barrel file conflict

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
+  <ToggleGroup>
+-   <Toggle value="bold">Bold</Toggle>
++   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  </ToggleGroup>
+```
+
+**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.
+```

apps/ui/content/docs/(root)/meta.json

@@ -5,6 +5,7 @@
     "styling",
     "radix-migration",
     "skills",
+    "changelog",
     "roadmap"
   ],
   "title": "Overview"

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
 <ToggleGroup>
-  <Toggle>Bold</Toggle>
-  <Toggle>Italic</Toggle>
-  <Toggle>Underline</Toggle>
+  <ToggleGroupItem>Bold</ToggleGroupItem>
+  <ToggleGroupItem>Italic</ToggleGroupItem>
+  <ToggleGroupItem>Underline</ToggleGroupItem>
 </ToggleGroup>
 ```
 
@@ -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
 
 <ComponentPreview name="p-toggle-group-9" />
+
+## Changelog
+
+- [Mar 20, 2026](/ui/docs/changelog#toggle-group) — `Toggle` renamed to `ToggleGroupItem`

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",
 ];

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    <ToggleGroup defaultValue={[\"bold\"]}>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]}>\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup defaultValue={[\"bold\"]} size=\"sm\">\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]} size=\"sm\">\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup defaultValue={[\"bold\"]} size=\"lg\">\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]} size=\"lg\">\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup defaultValue={[\"bold\"]} variant=\"outline\">\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <ToggleGroupSeparator />\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <ToggleGroupSeparator />\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]} variant=\"outline\">\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupSeparator />\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupSeparator />\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup\n      defaultValue={[\"bold\"]}\n      orientation=\"vertical\"\n      variant=\"outline\"\n    >\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <ToggleGroupSeparator orientation=\"horizontal\" />\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <ToggleGroupSeparator orientation=\"horizontal\" />\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup\n      defaultValue={[\"bold\"]}\n      orientation=\"vertical\"\n      variant=\"outline\"\n    >\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupSeparator orientation=\"horizontal\" />\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupSeparator orientation=\"horizontal\" />\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup defaultValue={[\"bold\"]} disabled>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]} disabled>\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup defaultValue={[\"bold\"]}>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" disabled value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]}>\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle italic\" disabled value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <ToggleGroup defaultValue={[\"bold\"]} multiple>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\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    <ToggleGroup defaultValue={[\"bold\"]} multiple>\n      <ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </ToggleGroupItem>\n      <ToggleGroupItem aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],

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    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle bold\" value=\"bold\" />}\n          >\n            <BoldIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Bold</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle italic\" value=\"italic\" />}\n          >\n            <ItalicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Italic</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle underline\" value=\"underline\" />}\n          >\n            <UnderlineIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Underline</TooltipPopup>\n        </Tooltip>\n      </ToggleGroup>\n    </TooltipProvider>\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    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <Tooltip>\n          <TooltipTrigger\n            render={<ToggleGroupItem aria-label=\"Toggle bold\" value=\"bold\" />}\n          >\n            <BoldIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Bold</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <ToggleGroupItem aria-label=\"Toggle italic\" value=\"italic\" />\n            }\n          >\n            <ItalicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Italic</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <ToggleGroupItem\n                aria-label=\"Toggle underline\"\n                value=\"underline\"\n              />\n            }\n          >\n            <UnderlineIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Underline</TooltipPopup>\n        </Tooltip>\n      </ToggleGroup>\n    </TooltipProvider>\n  );\n}\n",
       "type": "registry:block"
     }
   ],