twenty-ui 2.42.0 → 2.43.0

package/CHANGELOG.md

@@ -4,9 +4,21 @@
 
 ### Breaking Changes
 
+- `Card` is now a compound component. Import `Card` from `twenty-ui/primitives/surfaces`, replace `<Card>` with `<Card.Root>`, and replace the removed `CardHeader`, `CardContent`, and `CardFooter` exports with `Card.Header`, `Card.Content`, and `Card.Footer`. Use `Card.Root` in styled wrappers and prop types. Rendering, styling, props, and independent use of the parts are unchanged. See the [Card migration guide](https://docs.twenty.com/ui/primitives/surfaces/card#migration).
+- The in-repo Slack app still uses the separately versioned `twenty-ui@^1.0.0-alpha.1` package. Migrate its `twenty-ui/surfaces` import and `<Card>` usage together with its UI dependency upgrade; that published version does not expose `Card.Root`.
+- Removed the unused `useScreenSize` export. `useIsMobile` and `useIsTouchDevice` remain available from `twenty-ui/utilities` and now subscribe to native `matchMedia` changes. Both return `false` during server rendering, initial hydration, and when `matchMedia` is unavailable. `react-responsive` context overrides no longer affect these hooks; use `overrideMediaQueryMatches` from `twenty-ui/testing` to force a result in stories.
+- All theme exports now live in `twenty-ui/theme`. The `twenty-ui/theme-constants` entry, `ThemeContext`, `ThemeScopeContext`, and `ThemeContextType` are removed. Read values with `useTheme`, `useThemeColorScheme`, and `useThemeContainer`; configure them with `ThemeProvider`. The top-level theme stylesheet URLs and token values are unchanged.
+- Worker apps retain provider-less CSS-variable values. Apps that supplied a context value can pass `THEME_LIGHT` or `THEME_DARK` directly through `ThemeProvider`'s `theme` prop. The in-repo call-recorder, companion, fireflies, Granola, Slack, and Teams apps import `twenty-ui/theme-constants` and must move those imports to `twenty-ui/theme` when they upgrade; call-recorder and Granola must also replace their `ThemeContext` providers with the `theme` prop. Their current pinned UI versions expose neither, so each app needs a coordinated source and dependency upgrade.
+- `twenty-ui/testing` no longer exports `RouterDecorator`, `ComponentWithRouterDecorator`, `RouteParams`, `isRouteParams`, or `computeLocation`. Use application-owned router decorators when routing is needed, or `ComponentDecorator` for router-free stories. React Router is no longer a peer dependency.
+- `ResizeHandle` owns pointer and keyboard resizing through `value`/`onValueChange` or `defaultValue`, with configurable `min`, `max`, and `step`. The public `useResizeHandle` hook is removed.
 - **Public module ownership changes without a deprecation window.** This release removes 55 public React exports and the `twenty-ui/primitives/json-visualizer` entry point. Applications using the removed imports must migrate when upgrading; compatibility exports are not provided.
 - Import shared compositions, including `JsonTree`, menu presets, and Toast components and hooks, from `twenty-ui/components`. Foundational controls retain `twenty-ui/primitives/<family>` imports. The optional code editor retains `twenty-ui/components/code-editor`.
 - Field displays, application links, placeholders, and feature animations are no longer package exports. External applications must own these integrations or compose supported primitives. Internal implementation parts are private.
 - `Info` uses `href` and `render` in place of `to`. Replace `AnimatedEaseInOut` with `AnimatedExpandableContainer`.
+- `SegmentedControl` is a radio group. Use `aria-label` or `aria-labelledby` (one is required), `value` or `defaultValue`, and `onValueChange(value, eventDetails)` in place of `ariaLabel`, `value`, and `onChange(value)`. Options take `startIcon` and `'aria-label'` in place of `Icon` and `ariaLabel`. `role` and `width` are removed: use `Tabs` for tab lists and `className` or `style` to size the control. Arrow keys select the next option, Enter no longer selects, and choosing the selected option again no longer calls `onValueChange`.
 
 Keep `twenty-ui`, `twenty-sdk`, and `twenty-client-sdk` versions aligned when upgrading Twenty apps.
+
+### Added
+
+- `twenty-ui/utilities` exports `useMediaQuery`, `MOBILE_MEDIA_QUERY`, and `TOUCH_DEVICE_MEDIA_QUERY`. `twenty-ui/testing` exports `overrideMediaQueryMatches`.

package/README.md

@@ -35,7 +35,7 @@ For Twenty apps, follow [Using Twenty UI components](https://docs.twenty.com/dev
 For a standalone React application, import the base styles once, pick a theme stylesheet, and wrap your app in `ThemeProvider`:
 
 ```tsx
-import { ThemeProvider } from 'twenty-ui/theme-constants';
+import { ThemeProvider } from 'twenty-ui/theme';
 import { Button } from 'twenty-ui/primitives/input';
 
 import 'twenty-ui/style.css';
@@ -72,9 +72,8 @@ import { Button } from 'twenty-ui/primitives/input';
 | `twenty-ui/primitives/navigation`    | Action links, list items, and tabs                                    |
 | `twenty-ui/primitives/surfaces`      | Cards, dialogs, menus, popovers, and tooltips                         |
 | `twenty-ui/primitives/typography`    | Text and headings                                                     |
-| `twenty-ui/testing`                  | Storybook and test decorators                                         |
-| `twenty-ui/theme`                    | Theme types and helpers                                               |
-| `twenty-ui/theme-constants`          | Design tokens, `ThemeProvider`, and `useTheme`                        |
+| `twenty-ui/testing`                  | Storybook and test decorators and helpers                             |
+| `twenty-ui/theme`          | Design tokens, `ThemeProvider`, and `useTheme`                        |
 | `twenty-ui/utilities`                | Hooks and shared utilities                                            |
 
 # Theming
@@ -83,6 +82,12 @@ import { Button } from 'twenty-ui/primitives/input';
 - `twenty-ui/theme-light.css` and `twenty-ui/theme-dark.css` define the design-token CSS variables for each color scheme.
 - `ThemeProvider` exposes the active theme through `useTheme()` and applies the `light` / `dark` class. Pass `applyToRoot={false}` with `overrides` to scope a theme to a subtree instead of the document root.
 
+# Responsive hooks
+
+- `useIsMobile` matches `MOBILE_MEDIA_QUERY` (up to and including `MOBILE_VIEWPORT`). `useIsTouchDevice` matches `TOUCH_DEVICE_MEDIA_QUERY` and is independent of width: branch interaction behavior on it, and layout on `useIsMobile`.
+- `useMediaQuery(query)` subscribes to native `matchMedia` changes and shares one `MediaQueryList` per query. It returns `false` during server rendering and the first hydration render, and wherever `window.matchMedia` is unavailable, including the front component sandbox.
+- To force a result in a story, return `overrideMediaQueryMatches({ [MOBILE_MEDIA_QUERY]: true })` from `beforeEach`; the returned cleanup restores the native `matchMedia`.
+
 # Development
 
 Shared component sources live in `src/components/{data-display,feedback,input,layout,navigation,typography}`, with the optional editor in `src/components/code-editor`. Keep each component's types, stories, tests, and private parts beside its implementation. The generated `components` barrel provides the public imports.
@@ -118,8 +123,8 @@ twenty-ui is released under the [MIT](https://github.com/twentyhq/twenty/blob/ma
 
 Primitives provide foundational interaction and presentation. Shared components compose primitives into reusable presets, pickers, menu rows, notifications, and the JSON viewer. Both layers accept data, labels, and callbacks from their host.
 
-Routing adapters, record formatting, product illustrations, and feature-specific animation belong to `twenty-front`. Implementation parts live in `internal` or `parts` directories and are excluded from published barrels.
+Record formatting, product illustrations, and feature-specific animation belong to `twenty-front`. Implementation parts live in `internal` or `parts` directories and are excluded from published barrels.
 
 Run `node --import tsx scripts/checkModuleOwnership.ts` from this package after changing the public interface. When intentionally adding or removing a public React component, regenerate `docs/module-ownership.json` with `node --import tsx scripts/checkModuleOwnership.ts --write` and review the snapshot diff. CI checks the committed snapshot and the dependency boundaries without updating them.
 
-`twenty-ui/testing` includes routing decorators and requires the optional `react-router-dom` peer. The package check verifies each published entry point, allowing that peer only in testing and the Monaco peers only in `twenty-ui/components/code-editor`.
+The package check allows the optional Monaco peers only in `twenty-ui/components/code-editor`.