V4

.storybook/preview.tsx

@@ -62,7 +62,7 @@ const withTheme: Decorator = (StoryFn, context) => {
       customThemes={isCustomTheme ? customThemes : undefined}
       storageKey={null}
     >
-      <div className="bg-background-primary p-4">
+      <div className="bg-background-primary p-4 isolate">
         <StoryFn />
       </div>
     </ThemeProvider>

CHANGELOG.md

@@ -1,5 +1,32 @@
 # @0xsequence/design-system
 
+## 4.0.0-alpha.3
+
+### Patch Changes
+
+- Updating Button styles, Alert styles, Progress, and Pagination
+
+## 4.0.0-alpha.2
+
+### Patch Changes
+
+- Card components — Added new Card component system (#142)
+- Dialog typing fix — Fixed Dialog and DialogTrigger Payload typing
+- Badge styling — Updated Badge component styling
+- Border-radius updates — Updated border-radius on Alert, Card, and Popover components
+
+## 4.0.0-alpha.1
+
+### Patch Changes
+
+- Added Sidebar component, removed old text classes in favor of default tailwind classes.
+
+## 4.0.0-alpha.0
+
+### Major Changes
+
+- Migrated to base-ui
+
 ## 3.2.9
 
 ### Patch Changes

README.md

@@ -18,7 +18,7 @@ pnpm add @0xsequence/design-system
 
 The design system relies on these peer dependencies to be installed in your application:
 
-- `pnpm add react react-dom motion`
+- `pnpm add react react-dom`
 
 ### Use
 
@@ -54,13 +54,13 @@ root.render(
 Then import components from the design system to build your UI:
 
 ```jsx
-import { Text, Button, useTheme } from '@0xsequence/design-system'
+import { Button, useTheme } from '@0xsequence/design-system'
 
 const App = () => (
   const { theme, setTheme } = useTheme()
 
   <div>
-    <Text variant="normal">Hello, World!</Text>
+    <span className="text-sm">Hello, World!</span>
     <Button variant="primary" label="Change theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
   </div>
 )
@@ -72,7 +72,7 @@ const App = () => (
 Clone the [Sequence Design System GitHub Project](https://github.com/0xsequence/design-system) then start Storybook.
 
 ```
-pnpm install && pnpm storybook
+pnpm install && pnpm dev
 ```
 
 #### Manual project updates
@@ -110,6 +110,35 @@ export default defineConfig({
 })
 ```
 
+## Migrating from v3 to v4
+
+V4 is a larger departure than previous releases and includes many breaking changes.
+
+1. Migrated from radix-ui components to base-ui. This should largely be a smooth transition, the most notable breaking change is that the @radix-ui/react-slot `asChild` behavior is no longer valid; base-ui uses a standard `render` prop https://base-ui.com/react/handbook/composition.
+
+2. `react-hook-form` dependency is removed as well as all controlled form components which depended on it, including `Form`, `ControlledTextInput`, `ControlledCheckbox`, `ControlledSelect`, etc. This is out of scope of the design system as it should not dictate how you should use the primitives or which form library. Check out https://ui.shadcn.com/docs/forms for details on how you could integrate the design-system primitives with a few different react form library options or simply copy over the Controlled implementations from v3.
+
+3. We no longer export string utils `capitalize`, `pluralize`, and `kebabize`. These were used internally in the design-system but never meant to be exported as they fall outside its scope.
+
+4. `Image` component is removed. This was superfluous and only served to add fade in animation support on image load.
+
+5. `Modal` component is removed. Use Dialog primitive components instead.
+
+6. `motion` dependency removed. We are opting to use css transistions and animation classes on primitive components instead so they can be easily overridden. If you want to use motion to animate you can do so within your individual project.
+
+7. IconButton component removed. Use <Button iconOnly><CloseIcon /></Button> instead
+
+8. Button.Helper component removed.
+
+9. Text component is removed. Use default text classes instead.
+
+10. textVariants have been removed. Use default tailwind text classes instead
+
+11. Collapsible now exports its primitives, use Collapsible.Helper for old behavior.
+
+12. Tooltip now exports its primitives, use Tooltip.Helper for old behavior.
+
+
 ## Migrating from v2 to v3
 
 V3 attemps to be mostly compatible but there are some breaking changes that will need to be addressed.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/design-system",
-  "version": "3.2.9",
+  "version": "4.0.0-alpha.3",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
@@ -43,76 +43,56 @@
     "knip": "knip"
   },
   "dependencies": {
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.1",
-    "tw-animate-css": "^1.4.0"
+    "@base-ui/react": "1.2.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.5.0",
+    "tailwindcss": "4.2.1",
+    "tw-animate-css": "1.4.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@changesets/changelog-github": "^0.5.2",
-    "@changesets/cli": "^2.29.8",
-    "@eslint/js": "^10.0.1",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "^10.2.13",
-    "@storybook/react-vite": "^10.2.13",
-    "@svgr/cli": "^8.1.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.3.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^9.39.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "10.2.13",
-    "happy-dom": "^20.7.0",
-    "husky": "^9.1.7",
-    "knip": "^5.85.0",
-    "motion": "^12.34.3",
-    "ox": "^0.13.1",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.2",
-    "storybook": "^10.2.13",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.0.18"
+    "@arethetypeswrong/cli": "0.18.2",
+    "@changesets/changelog-github": "0.5.2",
+    "@changesets/cli": "2.29.8",
+    "@eslint/js": "10.0.1",
+    "@storybook/addon-designs": "11.1.2",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/react-vite": "10.2.10",
+    "@svgr/cli": "8.1.0",
+    "@tailwindcss/vite": "4.2.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "25.3.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.4",
+    "@vitest/coverage-v8": "4.0.18",
+    "eslint": "9.39.1",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-storybook": "10.2.10",
+    "happy-dom": "20.7.0",
+    "husky": "9.1.7",
+    "knip": "5.85.0",
+    "ox": "0.13.1",
+    "prettier": "3.8.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "storybook": "10.2.10",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.56.1",
+    "vite": "7.3.1",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-eslint": "1.8.1",
+    "vite-tsconfig-paths": "6.1.1",
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
-    "motion": ">= 12",
     "react": ">= 17",
-    "react-dom": ">= 17",
-    "react-hook-form": ">= 7"
+    "react-dom": ">= 17"
   },
   "packageManager": "pnpm@10.30.1"
 }