feat(v3): Let there be ark (#8393)

* chore: init

* feat: implement file upload component from ark

* perf: replace split props

* fix: split props

* fix: tsconfig + eslint parser

* chore: prefer empty slot styles

* refactor: tokens and text styles

* refactor: replace popover, tooltip and add hovercard

* chore: add use client

* chore: export styles

* test: prefer tests from ark

* refactor: file upload to recipe

* refactor: use ark anatomy

* docs: add changeset

* chore: rm framer-motion example

* refactor: env

* refactor: dialog and drawer to use ark

* fix(v3): update Button migration guide (#8397)

Update Button migration guiide

- change isDisabled to disabled
- change colorScheme to colorPalette

* chore: update box components

* refactor: slider and range-slider -> ark

* refactor: tsconfig and files

* fix(deps): update dependency framer-motion to v11.0.25 (#8401)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* refactor: accordion

* refactor: menu component

* refactor: use pandacss valid prop

* ci: update actions

* refactor: test utils

* refactor: vitest -> vite

* refactor: as child + ark

* fix: examples and website

* feat: rm framer-motion

* chore: pin ark versions

* chore: update popover z-index

* chore(deps): update react monorepo (#8472)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update commitlint monorepo (#8441)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: update menu stories

* chore: update slider example

---------

Co-authored-by: Ivica Batinić <ivicabatinic123@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.changeset/many-lamps-provide.md

@@ -0,0 +1,8 @@
+---
+"@chakra-ui/react": minor
+---
+
+- Integrate Ark UI components to reduce maintenance surface.
+- Add `FileUpload` component
+- Remove `trigger=hover` in favor of `HoverCard`
+- Replace `Tooltip`, `Popover` and `HoverCard` with those from Ark UI

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: segunadebayo
 patreon: segunadebayo
 open_collective: chakra-ui
 ko_fi: # Replace with a single Ko-fi username

.github/composite-actions/install/action.yml

@@ -7,7 +7,7 @@ runs:
     - name: Install dependencies
       uses: pnpm/action-setup@v2.2.4
       with:
-        version: 8
+        version: 9
 
     - name: Setup Node.js
       uses: actions/setup-node@v3

.storybook/main.ts

@@ -9,13 +9,11 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: "@storybook/react-vite",
-    options: {},
-  },
-  features: {
-    buildStoriesJson: true,
+    options: { builder: {} },
   },
   core: {
     disableTelemetry: true,
+    disableProjectJson: true,
   },
   typescript: {
     reactDocgen: false,

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import { withThemeByClassName } from "@storybook/addon-themes"
-import { Preview, ReactRenderer } from "@storybook/react"
+import type { Preview, ReactRenderer } from "@storybook/react"
 import React from "react"
 import { ChakraProvider, defaultSystem } from "../packages/react/src"
 

MIGRATION.md

@@ -83,7 +83,8 @@ Renamed all `container` parts to `root`. Kindly update your theme to reflect
 ### Removed Components and Packages
 
 - Removed `ControlBox` component
-- Removed `@chakra-ui/icons` package. Prefer to use [`lucide-react`](https://lucide.dev/guide/packages/lucide-react) or
+- Removed `@chakra-ui/icons` package. Prefer to use
+  [`lucide-react`](https://lucide.dev/guide/packages/lucide-react) or
   `react-icons` instead.
 
 ### Root component and types
@@ -391,6 +392,16 @@ After:
 - Removed `containerProps` in favor of rendering the `Dialog.Positioner`
   component to better control this element.
 - Renamed `ModalOverlay` to `Dialog.Backdrop`
+- Renamed `initialFocusRef` to `initialFocusEl` which is now a function that
+  returns the element to focus on
+- Renamed `finalFocusRef` to `finalFocusEl` which is now a function that returns
+  the element to focus on
+- Renamed `returnFocusOnClose` to `restoreFocus`
+- Renamed `blockScrollOnMount` to `preventScroll`
+- Removed `preserveScrollBarGap` and `allowPinZoom`
+- `onOpen` and `onClose` -> `onOpenChange`
+- Now requires an explicit `Portal` component to render the dialog outside the
+  DOM tree
 
 Before:
 
@@ -426,6 +437,8 @@ After:
 
 - Same changes as `Dialog` above
 - Renamed `DrawerOverlay` to `Drawer.Backdrop`
+- Removed `isFullHeight` in favor of setting `height=100dvh` on the content
+  directly.
 
 ### Alert Dialog
 
@@ -1125,3 +1138,11 @@ toast({
 
 - Now requires the `Slider.Control` to work properly
 - Added new `Slider.ValueText` and `Slider.Label` components
+
+### Environment
+
+- Rename `EnvironmentProvider` to `Environment`
+- Rename `useEnvironment` to `useEnvironmentContext`
+- Environment is no longer automatically provided by `ChakraProvider`. You must
+  wrap your app in `Environment` to use it and provide the `getRootNode`
+  function

examples/next-app/package.json

@@ -15,7 +15,6 @@
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
-    "framer-motion": "^11.0.22",
     "next": "^14.1.4",
     "next-themes": "^0.3.0",
     "lucide-react": "^0.363.0",

examples/next-app/tsconfig.json

@@ -21,7 +21,9 @@
     "customConditions": ["source"],
     "plugins": [{ "name": "next" }],
     "paths": {
-      "@chakra-ui/react": ["../../packages/react/src"]
+      "@chakra-ui/react": ["../../packages/react/src"],
+      "@chakra-ui/hooks": ["../../packages/hooks/src"],
+      "@chakra-ui/utils": ["../../packages/utils/src"]
     }
   },
   "exclude": ["node_modules"],

examples/next-pages/package.json

@@ -15,7 +15,6 @@
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
-    "framer-motion": "^11.0.22",
     "next": "^14.1.4",
     "next-themes": "^0.3.0",
     "lucide-react": "^0.363.0",

examples/next-pages/tsconfig.json

@@ -20,7 +20,9 @@
     "incremental": true,
     "customConditions": ["source"],
     "paths": {
-      "@chakra-ui/react": ["../../packages/react/src"]
+      "@chakra-ui/react": ["../../packages/react/src"],
+      "@chakra-ui/hooks": ["../../packages/hooks/src"],
+      "@chakra-ui/utils": ["../../packages/utils/src"]
     }
   },
   "exclude": ["node_modules"],

examples/vite-ts/vite.config.ts

@@ -1,10 +1,15 @@
 import react from "@vitejs/plugin-react"
+import { resolve } from "path"
 import { defineConfig } from "vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
-    conditions: ["source"],
+    alias: {
+      "@chakra-ui/utils": resolve("..", "..", "packages/utils/src"),
+      "@chakra-ui/react": resolve("..", "..", "packages/react/src"),
+      "@chakra-ui/hooks": resolve("..", "..", "packages/hooks/src"),
+    },
   },
 })

package.json

@@ -13,6 +13,7 @@
     "clean:emotion-types": "rimraf node_modules/@emotion/core/types",
     "postinstall": "pnpm clean:emotion-types",
     "build:tokens": "chakra-cli tokens packages/react/src/preset.ts",
+    "build:tokens-dev": "cross-env LOCAL=1 chakra-cli tokens packages/react/src/preset.ts",
     "build:prop-docs": "pnpm typedocs && pnpm --filter=*props-docs build",
     "build": "pnpm --filter=./packages/* build",
     "build:fast": "pnpm --filter=./packages/* build:fast",
@@ -41,10 +42,9 @@
   },
   "version": "2.0.0",
   "dependencies": {
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
+    "@babel/core": "7.24.3",
+    "@babel/eslint-parser": "7.24.1",
     "@chakra-ui/cli": "workspace:*",
-    "@chakra-ui/test-utils": "workspace:*",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@changesets/get-release-plan": "4.0.0",
@@ -55,23 +55,25 @@
     "@rollup/plugin-alias": "5.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
-    "@storybook/addon-a11y": "^8.0.4",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-themes": "^8.0.4",
-    "@storybook/cli": "^8.0.4",
-    "@storybook/manager-api": "^8.0.4",
-    "@storybook/react": "^8.0.4",
-    "@storybook/react-vite": "^8.0.4",
-    "@storybook/theming": "^8.0.4",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/edit-json-file": "^1.7.3",
+    "@storybook/addon-a11y": "8.0.4",
+    "@storybook/addon-essentials": "8.0.4",
+    "@storybook/addon-themes": "8.0.4",
+    "@storybook/cli": "8.0.4",
+    "@storybook/manager-api": "8.0.4",
+    "@storybook/react": "8.0.4",
+    "@storybook/react-vite": "8.0.4",
+    "@storybook/theming": "8.0.4",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.2",
+    "@testing-library/user-event": "14.5.2",
+    "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@types/edit-json-file": "1.7.3",
     "@types/execa": "2.0.0",
     "@types/fs-extra": "11.0.4",
     "@types/mkdirp": "1.0.2",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/node": "20.11.30",
+    "@types/react": "18.2.72",
+    "@types/react-dom": "18.2.22",
     "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "7.4.0",
     "@typescript-eslint/parser": "7.4.0",
@@ -89,36 +91,36 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-testing-library": "6.2.0",
     "execa": "8.0.1",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "3.3.2",
     "find-packages": "10.0.4",
-    "find-up": "^7.0.0",
+    "find-up": "7.0.0",
     "fs-extra": "11.2.0",
-    "husky": "^9.0.11",
-    "jsdom": "^24.0.0",
+    "husky": "9.0.11",
+    "jsdom": "24.0.0",
     "lint-staged": "15.2.2",
     "node-fetch": "3.3.2",
-    "npm-run-all": "^4.1.5",
-    "outdent": "^0.8.0",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "npm-run-all": "4.1.5",
+    "outdent": "0.8.0",
+    "prettier": "3.2.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rimraf": "5.0.5",
-    "rollup": "^4.13.0",
-    "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^8.0.4",
-    "tsup": "^8.0.2",
-    "tsx": "^4.7.1",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.6",
-    "vitest": "^1.4.0",
-    "vitest-axe": "^0.1.0",
-    "vitest-matchmedia-mock": "^1.0.4"
+    "rollup": "4.13.0",
+    "rollup-plugin-esbuild": "6.1.1",
+    "rollup-plugin-preserve-directives": "0.4.0",
+    "storybook": "8.0.4",
+    "tsup": "8.0.2",
+    "tsx": "4.7.1",
+    "typescript": "5.4.3",
+    "vite": "5.2.6",
+    "vitest": "1.4.0",
+    "vitest-axe": "0.1.0",
+    "vitest-matchmedia-mock": "1.0.4"
   },
   "pnpm": {
     "overrides": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
+      "react": "18.2.0",
+      "react-dom": "18.2.0",
       "prism-react-renderer": "2.3.1"
     }
   },

packages/cli/package.json

@@ -44,6 +44,7 @@
     "typecheck": " tsc --noEmit"
   },
   "dependencies": {
+    "@pandacss/is-valid-prop": "0.39.1",
     "@clack/prompts": "0.7.0",
     "bundle-n-require": "1.1.1",
     "chokidar": "3.6.0",

packages/cli/src/generate-prop-types.ts

@@ -1,4 +1,4 @@
-import { SystemContext } from "@chakra-ui/react"
+import type { SystemContext } from "@chakra-ui/react"
 import { pretty } from "./shared.js"
 
 export async function generatePropTypes(sys: SystemContext, strict = false) {
@@ -8,10 +8,29 @@ export async function generatePropTypes(sys: SystemContext, strict = false) {
     `
   import type { ConditionalValue, CssProperties } from "../css.types"
   import type { Tokens } from "./token.gen"
-  
-  interface PropertyValueTypes {`,
+
+  type AnyString = (string & {})
+  `,
   ]
 
+  if (strict) {
+    result.push(`
+  type WithColorOpacityModifier<T> = T extends string ? \`$\{T}/\${string}\` : T
+
+  type ImportantMark = "!" | "!important"
+  type WhitespaceImportant = \` \${ImportantMark}\`
+  type Important = ImportantMark | WhitespaceImportant
+  
+  type WithImportant<T> = T extends string ? \`\${T}\${Important}\` & { __important?: true } : T;
+  type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
+    `)
+  }
+
+  result.push(`
+
+  interface PropertyValueTypes {
+  `)
+
   const types = utility.getTypes()
 
   for (const [prop, values] of types.entries()) {
@@ -20,10 +39,17 @@ export async function generatePropTypes(sys: SystemContext, strict = false) {
 
   result.push("}", "\n")
 
-  result.push(`
+  if (strict) {
+    result.push(`
     // eslint-disable-next-line
-    type PropOrCondition<Key, Value> = ConditionalValue<Value | (string & {})>
-  `)
+    type PropOrCondition<Value> = ConditionalValue<WithEscapeHatch<Value>>
+    `)
+  } else {
+    result.push(`
+    // eslint-disable-next-line
+    type PropOrCondition<Value> = ConditionalValue<Value | AnyString>
+    `)
+  }
 
   result.push(`
     type CssValue<T> = T extends keyof CssProperties ? CssProperties[T] : never
@@ -43,18 +69,18 @@ export async function generatePropTypes(sys: SystemContext, strict = false) {
 
   result.push(`
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
-    ? PropOrCondition<T, PropertyTypes[T] | CssValue<T>>
+    ? PropOrCondition<PropertyTypes[T] | CssValue<T>>
     : never;
   
   type CssPropertyValue<T extends string> = T extends keyof CssProperties
-    ? PropOrCondition<T, CssProperties[T]>
+    ? PropOrCondition<CssProperties[T]>
     : never;
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
     ? PropertyTypeValue<T>
     : T extends keyof CssProperties
       ? CssPropertyValue<T>
-      : PropOrCondition<T, string | number>
+      : PropOrCondition<string | number>
   `)
 
   return pretty(result.join("\n"))

packages/cli/src/generate-system-types.ts

@@ -1,5 +1,5 @@
 import type { SystemContext } from "@chakra-ui/react"
-import { allCssProperties } from "@chakra-ui/react"
+import { allCssProperties } from "@pandacss/is-valid-prop"
 import { pretty } from "./shared.js"
 
 export async function generateSystemTypes(sys: SystemContext) {
@@ -8,9 +8,9 @@ export async function generateSystemTypes(sys: SystemContext) {
   )
 
   const result = `
-  import { ConditionalValue } from "../css.types"
-  import { PropertyValue } from "./prop-types.gen"
-  import { Token } from "./token.gen"
+  import type { ConditionalValue } from "../css.types"
+  import type { PropertyValue } from "./prop-types.gen"
+  import type { Token } from "./token.gen"
 
   export type CssVarProperties = {
       [key in \`--\${string}\`]?: ConditionalValue<Token | (string & {}) | (number & {})>

packages/cli/src/generate-tokens.ts

@@ -1,4 +1,4 @@
-import { SystemContext } from "@chakra-ui/react"
+import type { SystemContext } from "@chakra-ui/react"
 import { capitalize, pretty, unionType } from "./shared.js"
 
 export async function generateTokens(sys: SystemContext) {