fix: build

.changeset/gorgeous-masks-rescue.md

@@ -0,0 +1,22 @@
+---
+'@saas-ui/modals-provider': major
+'@saas-ui/auth-provider': major
+'@saas-ui/use-hotkeys': major
+'@saas-ui/nprogress': major
+'@saas-ui/supabase': major
+'@saas-ui/assets': major
+'@saas-ui/charts': major
+'@saas-ui/modals': major
+'@saas-ui/storybook-addon': major
+'@saas-ui/auth0': major
+'@saas-ui/clerk': major
+'@saas-ui/forms': major
+'@saas-ui/hooks': major
+'@saas-ui/react': major
+'@saas-ui/core': major
+'saas-ui-storybook': major
+'@saas-ui/props-docs': major
+'@saas-ui/test-utils': major
+---
+
+Upgrade to Chakra v3

package.json

@@ -50,8 +50,8 @@
     "create:block": "yarn hygen blocks new",
     "build:web": "yarn w website build",
     "build:theme": "turbo run build --filter='./packages/saas-ui-theme'",
-    "build:tokens": "chakra typegen packages/saas-ui-core/src/preset.ts",
-    "build:tokens-dev": "cross-env LOCAL=1 chakra typegen packages/saas-ui-core/src/preset.ts",
+    "build:tokens": "chakra typegen packages/saas-ui-react/src/preset.ts",
+    "build:tokens-dev": "cross-env LOCAL=1 chakra typegen packages/saas-ui-react/src/preset.ts",
     "build:packages": "turbo run build --filter='./packages/saas-ui-*' --filter='!./packages/pro/*' --concurrency=5 --continue && yarn build:tokens",
     "build:packages:force": "turbo run build --filter='./packages/saas-ui-*' --filter='!./packages/pro/*' --concurrency=5 --continue --force && yarn build:tokens",
     "watch:theme": "turbo run build --filter='./packages/saas-ui-theme' -- --watch",
@@ -72,7 +72,7 @@
     "tooling/storybook-addon"
   ],
   "devDependencies": {
-    "@chakra-ui/cli": "^3.1.2",
+    "@chakra-ui/cli": "^3.2.0",
     "@changesets/cli": "^2.27.9",
     "@manypkg/get-packages": "^2.2.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -105,7 +105,7 @@
     "unist-util-visit": "4.0.0",
     "react": "18.2.0",
     "@emotion/react": "11.11.1",
-    "@chakra-ui/react": "3.0.2"
+    "@chakra-ui/react": "https://pkg.pr.new/chakra-ui/chakra-ui/@chakra-ui/react@9223#4"
   },
   "packageManager": "[email protected]"
 }

packages/saas-ui-charts/package.json

@@ -28,11 +28,10 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^2.12.1",
     "recharts": "^2.13.3"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=2.9.0 <3",
+    "@chakra-ui/react": "^3.0.0",
     "@emotion/react": ">=11",
     "react": ">=18",
     "react-dom": ">=18"

packages/saas-ui-charts/tsup.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   },
   clean: true,
   sourcemap: true,
-  external: ['react', 'recharts', '@chakra-ui/react', '@chakra-ui/utils'],
+  external: ['react', 'recharts', '@chakra-ui/react'],
   format: ['esm', 'cjs'],
   banner: {
     js: "'use client'",

packages/saas-ui-core/package.json

@@ -11,34 +11,34 @@
       "import": "./dist/index.js"
     },
     "./grid-list": {
-      "sui": "./src/grid-list/index.ts",
-      "require": "./dist/grid-list/index.cjs",
-      "types": "./dist/grid-list/index.d.ts",
-      "import": "./dist/grid-list/index.js"
+      "sui": "./src/components/grid-list/index.ts",
+      "require": "./dist/components/grid-list/index.cjs",
+      "types": "./dist/components/grid-list/index.d.ts",
+      "import": "./dist/components/grid-list/index.js"
     },
     "./navbar": {
-      "sui": "./src/navbar/index.ts",
-      "require": "./dist/navbar/index.cjs",
-      "types": "./dist/navbar/index.d.ts",
-      "import": "./dist/navbar/index.js"
+      "sui": "./src/components/navbar/index.ts",
+      "require": "./dist/components/navbar/index.cjs",
+      "types": "./dist/components/navbar/index.d.ts",
+      "import": "./dist/components/navbar/index.js"
     },
     "./error-boundary": {
-      "sui": "./src/error-boundary/index.ts",
-      "require": "./dist/error-boundary/index.cjs",
-      "types": "./dist/error-boundary/index.d.ts",
-      "import": "./dist/error-boundary/index.js"
+      "sui": "./src/components/error-boundary/index.ts",
+      "require": "./dist/components/error-boundary/index.cjs",
+      "types": "./dist/components/error-boundary/index.d.ts",
+      "import": "./dist/components/error-boundary/index.js"
     },
     "./sidebar": {
-      "sui": "./src/sidebar/index.ts",
-      "require": "./dist/sidebar/index.cjs",
-      "types": "./dist/sidebar/index.d.ts",
-      "import": "./dist/sidebar/index.js"
+      "sui": "./src/components/sidebar/index.ts",
+      "require": "./dist/components/sidebar/index.cjs",
+      "types": "./dist/components/sidebar/index.d.ts",
+      "import": "./dist/components/sidebar/index.js"
     },
     "./steps": {
-      "sui": "./src/steps/index.ts",
-      "require": "./dist/steps/index.cjs",
-      "types": "./dist/steps/index.d.ts",
-      "import": "./dist/steps/index.js"
+      "sui": "./src/components/steps/index.ts",
+      "require": "./dist/components/steps/index.cjs",
+      "types": "./dist/components/steps/index.d.ts",
+      "import": "./dist/components/steps/index.js"
     },
     "./utils": {
       "sui": "./src/utils/index.ts",
@@ -53,7 +53,7 @@
   },
   "scripts": {
     "clean": "rimraf --no-glob ./dist",
-    "build": "tsup src/index.ts src/utils/index.ts src/icons/index.ts --config tsup.config.ts",
+    "build": "tsup --config tsup.config.ts",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
@@ -91,6 +91,7 @@
   "dependencies": {
     "@ark-ui/react": "^4.4.4",
     "@react-aria/utils": "^3.25.3",
+    "@saas-ui/hooks": "workspace:*",
     "@zag-js/dom-event": "^0.77.1",
     "@zag-js/dom-utils": "^0.2.4"
   },

packages/saas-ui-core/src/grid-list/grid-list.context.ts → packages/saas-ui-core/src/components/grid-list/grid-list.context.ts

@@ -4,9 +4,7 @@ import { createContext } from '@chakra-ui/react'
 import { nextById, prevById, queryAll } from '@zag-js/dom-utils'
 
 import type { HTMLSystemProps } from '#system'
-import { dataAttr } from '#utils'
-
-import { callAll } from '../utils/call-all'
+import { callAll, dataAttr } from '#utils'
 
 interface GridListContext {
   id: string

packages/saas-ui-core/src/navbar/navbar.tsx → packages/saas-ui-core/src/components/navbar/navbar.tsx

@@ -47,7 +47,27 @@ export const NavbarRoot = forwardRef<HTMLDivElement, NavbarRootProps>(
   },
 )
 
-export const NavbarBrand = sui.div
-export const NavbarContent = sui.ul
-export const NavbarItem = sui.li
-export const NavbarLink = sui.a
+export const NavbarBrand = forwardRef<HTMLDivElement, HTMLSystemProps<'div'>>(
+  (props, ref) => {
+    return <sui.div {...props} ref={ref} />
+  },
+)
+
+export const NavbarContent = forwardRef<
+  HTMLUListElement,
+  HTMLSystemProps<'ul'>
+>((props, ref) => {
+  return <sui.ul {...props} ref={ref} />
+})
+
+export const NavbarItem = forwardRef<HTMLLIElement, HTMLSystemProps<'li'>>(
+  (props, ref) => {
+    return <sui.li {...props} ref={ref} />
+  },
+)
+
+export const NavbarLink = forwardRef<HTMLAnchorElement, HTMLSystemProps<'a'>>(
+  (props, ref) => {
+    return <sui.a {...props} ref={ref} />
+  },
+)

packages/saas-ui-core/src/navbar/use-navbar.ts → packages/saas-ui-core/src/components/navbar/use-navbar.ts

@@ -3,8 +3,7 @@ import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useResizeObserver } from '@react-aria/utils'
 import { useScrollPosition } from '@saas-ui/hooks'
 
-import { dataAttr } from '../utils/data-attr.ts'
-import { splitProps } from '../utils/split-props.ts'
+import { dataAttr, splitProps } from '#utils'
 
 export const splitNavbarProps = <T extends Record<string, any>>(props: T) =>
   splitProps(props, [

packages/saas-ui-core/src/sidebar/sidebar.context.tsx → packages/saas-ui-core/src/components/sidebar/sidebar.context.tsx

@@ -9,11 +9,11 @@ import {
 } from '@chakra-ui/react'
 
 import type { HTMLSystemProps } from '#system'
+import { callAll } from '#utils'
 
-import { callAll } from '../utils/call-all.ts'
 import type { SidebarProps } from './sidebar.types.ts'
 
-export type SidebarMode = 'flyout' | 'collapsible'
+export type SidebarMode = 'flyout' | 'collapsible' | 'compact'
 
 export interface UseSidebarReturn {
   open: boolean
@@ -33,8 +33,9 @@ const [SidebarContextProvider, useSidebar] = createContext<UseSidebarReturn>({
 export interface SidebarProviderProps extends SidebarProps {
   /**
    * The mode of the sidebar.
+   * @default 'collapsible'
    */
-  mode: SidebarMode
+  mode?: SidebarMode
   /**
    * Control the default visibility of the sidebar.
    */
@@ -59,7 +60,7 @@ export function SidebarProvider(props: SidebarProviderProps) {
     defaultOpen = true,
     open,
     onOpenChange,
-    mode: modeProp,
+    mode: modeProp = 'collapsible',
   } = props
 
   const isMobile = useBreakpointValue(

packages/saas-ui-core/src/sidebar/sidebar.tsx → packages/saas-ui-core/src/components/sidebar/sidebar.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef, useState } from 'react'
 import { Presence, type PresenceProps } from '@ark-ui/react'
 
 import { type HTMLSystemProps, sui } from '#system'
+import { callAll, dataAttr } from '#utils'
 
-import { callAll, dataAttr } from '../utils/index.ts'
 import { useSidebar, useSidebarTrigger } from './sidebar.context.tsx'
 import { SidebarProps } from './sidebar.types.ts'
 
@@ -148,17 +148,46 @@ export const SidebarTrack = forwardRef<HTMLDivElement, HTMLSystemProps<'div'>>(
   },
 )
 
-export const SidebarGroup = sui.div
+export const SidebarGroup = forwardRef<HTMLDivElement, HTMLSystemProps<'div'>>(
+  (props, ref) => {
+    return <sui.div ref={ref} {...props} />
+  },
+)
 
-export const SidebarGroupHeader = sui.div
+export const SidebarGroupHeader = forwardRef<
+  HTMLDivElement,
+  HTMLSystemProps<'div'>
+>((props, ref) => {
+  return <sui.div ref={ref} {...props} />
+})
 
-export const SidebarGroupTitle = sui.h5
+export const SidebarGroupTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLSystemProps<'h5'>
+>((props, ref) => {
+  return <sui.h5 ref={ref} {...props} />
+})
 
-export const SidebarGroupEndElement = sui.div
+export const SidebarGroupEndElement = forwardRef<
+  HTMLDivElement,
+  HTMLSystemProps<'div'>
+>((props, ref) => {
+  return <sui.div ref={ref} {...props} />
+})
 
-export const SidebarGroupContent = sui.div
+export const SidebarGroupContent = forwardRef<
+  HTMLDivElement,
+  HTMLSystemProps<'div'>
+>((props, ref) => {
+  return <sui.div ref={ref} {...props} />
+})
 
-export const SidebarNavItem = sui.div
+export const SidebarNavItem = forwardRef<
+  HTMLDivElement,
+  HTMLSystemProps<'div'>
+>((props, ref) => {
+  return <sui.div ref={ref} {...props} />
+})
 
 export interface SidebarNavButtonProps extends HTMLSystemProps<'button'> {
   active?: boolean
@@ -177,4 +206,9 @@ export const SidebarNavButton = forwardRef<
   )
 })
 
-export const SidebarNavItemEndElement = sui.div
+export const SidebarNavItemEndElement = forwardRef<
+  HTMLDivElement,
+  HTMLSystemProps<'div'>
+>((props, ref) => {
+  return <sui.div ref={ref} {...props} />
+})

packages/saas-ui-core/src/index.ts

@@ -1,9 +1,12 @@
-export { ErrorBoundary } from './error-boundary'
-export type { ErrorBoundaryProps, ErrorBoundaryState } from './error-boundary'
+export { ErrorBoundary } from './components/error-boundary'
+export type {
+  ErrorBoundaryProps,
+  ErrorBoundaryState,
+} from './components/error-boundary'
 
-export { GridList } from './grid-list'
-export { Navbar } from './navbar'
-export { Sidebar } from './sidebar'
+export { GridList } from './components/grid-list'
+export { Navbar } from './components/navbar'
+export { Sidebar } from './components/sidebar'
 
 export {
   useStepper,
@@ -12,6 +15,13 @@ export {
   useStepperContext,
   useStepperNextButton,
   useStepperPrevButton,
-} from './steps'
+} from './components/steps'
 
-export type { UseStepProps, UseStepperProps, UseStepperReturn } from './steps'
+export type {
+  UseStepProps,
+  UseStepperProps,
+  UseStepperReturn,
+} from './components/steps'
+
+export { sui } from './system/index.ts'
+export type { HTMLSystemProps } from './system/index.ts'

packages/saas-ui-core/tsup.config.ts

@@ -1,4 +1,8 @@
 import { defineConfig } from 'tsup'
+
 import config from '../../tsup.config'
 
-export default defineConfig(config)
+export default defineConfig({
+  ...config,
+  entry: ['src/index.ts', 'src/utils/index.ts', 'src/components/**/*.ts'],
+})

packages/saas-ui-forms/ajv/package.json

@@ -19,7 +19,6 @@
   "author": "Eelco Wiersma <[email protected]>",
   "license": "MIT",
   "peerDependencies": {
-    "@chakra-ui/utils": "^2.0.14",
     "@hookform/resolvers": "^3.0.0",
     "react-hook-form": "^7.43.9",
     "ajv": "^8.12.0",

packages/saas-ui-forms/ajv/tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'tsup'
+
 import config from '../../../tsup.config'
 
 export default defineConfig({
@@ -8,9 +9,7 @@ export default defineConfig({
     'ajv',
     'react-hook-form',
     '@saas-ui/forms',
-    '@saas-ui/modals',
     '@hookform/resolvers/ajv',
-    '@chakra-ui/utils',
   ],
   clean: false,
 })

packages/saas-ui-forms/src/create-step-form.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from 'react'
 
-import { runIfFn } from '@chakra-ui/utils'
 import { StepperProvider } from '@saas-ui/core'
+import { runIfFn } from '@saas-ui/core/utils'
 
 import {
   ArrayField,