diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx index 24d405e65..14cd575ba 100644 --- a/apps/ui/content/docs/(root)/changelog.mdx +++ b/apps/ui/content/docs/(root)/changelog.mdx @@ -3,6 +3,92 @@ title: Changelog description: Breaking changes, migration guides, and notable updates. --- +## October 20, 2026 + +### Segmented Control component + +**`@coss/segmented-control`** is now a component at **`components/ui/segmented-control.tsx`** instead of a styling library at **`lib/segmented-control.ts`**. It exports **`SegmentedControl`** and **`SegmentedControlItem`**. The element you pass to **`render`** still decides the behavior — a Radio Group, links, or a Toggle Group — so the semantics stay those of the primitive you choose. + +```tsx +} +> + }> + Monthly + + }> + Yearly + + +``` + +The sliding indicator is built in. **`SegmentedControl`** renders it after its children, so there is nothing to add or order by hand, and before hydration the active item paints its own static pill. **`size`** is set once on **`SegmentedControl`** and inherited by its items; an item can still override it. One item recipe now covers **`data-checked`**, **`aria-current="page"`**, and **`data-pressed`**, so there is no **`state`** option. + +These exports were removed: **`segmentedControlRootClassName`**, **`segmentedControlItemVariants`**, **`segmentedControlIndicatorClassName`**, and **`SegmentedControlIndicator`**. The **`@coss/segmented-control-indicator`** registry item no longer exists. **`SegmentedControlSize`**, **`segmentedControlItemSizeClassNames`**, **`segmentedControlItemLayoutClassName`**, and **`segmentedControlIndicatorSurfaceClassName`** are still exported, from the component file. Tabs imports them from there, and **`@coss/tabs`** declares the component as a registry dependency. + +**Migration:** + +Install the component, then update Tabs so it no longer imports from the library: + +```bash +npx shadcn@latest add @coss/segmented-control @coss/tabs +``` + +If you maintain a local Tabs, change its import instead of overwriting it: + +```diff +- } from "@/lib/segmented-control" ++ } from "@/components/ui/segmented-control" +``` + +Replace class-based compositions. Move the root class and the indicator into **`SegmentedControl`**, and each item recipe into **`SegmentedControlItem`**, keeping behavior props on the rendered element: + +```diff +- +- ++ } ++ > ++ }> + Monthly +- +- +- ++ ++ +``` + +Navigation follows the same shape, with the **`