feat: removed deprecated chakra ui dependency

.changeset/great-plums-study.md

@@ -0,0 +1,12 @@
+---
+'@saas-ui/command-bar': minor
+'@saas-ui/date-picker': minor
+'@saas-ui/file-upload': minor
+'@saas-ui/hotkeys': minor
+'@saas-ui/modals': minor
+'@saas-ui/forms': minor
+'@saas-ui/react': minor
+'@saas-ui/core': minor
+---
+
+Removed deprecated Chakra UI dependency

apps/palette/src/client/providers/editor.tsx

@@ -1,4 +1,4 @@
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 import { debounce } from 'lodash'
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { usePalette } from './palette'
@@ -60,5 +60,5 @@ interface EditorState {
 
 export type UseEditorReturn = [
   EditorState,
-  Dispatch<SetStateAction<EditorState>>
+  Dispatch<SetStateAction<EditorState>>,
 ]

packages/saas-ui-command-bar/package.json

@@ -74,7 +74,6 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/styled-system": "^2.11.1",
     "@chakra-ui/theme": "^3.4.5",
     "@chakra-ui/theme-tools": "^2.2.5",

packages/saas-ui-command-bar/src/command-bar-context.ts

@@ -3,8 +3,8 @@ import {
   ThemingProps,
   useDisclosure,
 } from '@chakra-ui/react'
-import { createContext } from '@chakra-ui/react-utils'
-import { callAllHandlers } from '@chakra-ui/utils'
+
+import { callAllHandlers, createContext } from '@chakra-ui/utils'
 import { useCallback } from 'react'
 
 export interface CommandBarOptions {

packages/saas-ui-core/package.json

@@ -81,7 +81,6 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/styled-system": "^2.11.1",
     "@chakra-ui/theme-tools": "^2.2.5",
     "@chakra-ui/utils": "^2.2.1",

packages/saas-ui-core/src/app-shell/app-shell-context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 import { useBreakpointValue, useDisclosure } from '@chakra-ui/react'
 import { Breakpoints, getBreakpoints } from '../sidebar/sidebar-utils'
 

packages/saas-ui-core/src/banner/banner.tsx

@@ -14,9 +14,7 @@ import {
   createStylesContext,
   Icon,
 } from '@chakra-ui/react'
-import { callAllHandlers, cx } from '@chakra-ui/utils'
-
-import { createContext } from '@chakra-ui/react-utils'
+import { callAllHandlers, cx, createContext } from '@chakra-ui/utils'
 
 import { InfoIcon, WarningIcon, CheckIcon } from './icons'
 

packages/saas-ui-core/src/collapse/use-collapse.ts

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { createContext, PropGetter } from '@chakra-ui/react-utils'
 import { useDisclosure } from '@chakra-ui/react'
-import { cx } from '@chakra-ui/utils'
+import { cx, createContext, PropGetter } from '@chakra-ui/utils'
 
 export const [CollapseProvider, useCollapseContext] =
   createContext<UseCollapseReturn>({

packages/saas-ui-core/src/menu/context-menu.tsx

@@ -11,10 +11,10 @@ import {
   useMenuContext,
   useEventListener,
   forwardRef,
+  mergeRefs,
 } from '@chakra-ui/react'
 
-import { createContext, mergeRefs } from '@chakra-ui/react-utils'
-import { callAllHandlers, runIfFn } from '@chakra-ui/utils'
+import { callAllHandlers, runIfFn, createContext } from '@chakra-ui/utils'
 
 // @todo migrate this to Ark-ui ContextMenu
 import { useLongPress } from '@react-aria/interactions'

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

@@ -1,30 +1,11 @@
-import {
-  HTMLChakraProps,
-  ThemingProps,
-  chakra,
-  forwardRef,
-  useMultiStyleConfig,
-} from '@chakra-ui/react'
-import { HTMLMotionProps, motion } from 'framer-motion'
-import { UseNavbarProps, useNavbar } from './use-navbar'
+import { chakra, forwardRef, useMultiStyleConfig } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
+import { useNavbar, type NavbarProps } from './use-navbar'
 import { NavBarStylesProvider, NavbarProvider } from './navbar-context'
 import { cx } from '@saas-ui/react-utils'
 
 const MotionBox = chakra(motion.nav)
 
-type MotionProps = Pick<
-  HTMLMotionProps<'div'>,
-  'onAnimationStart' | 'onDrag' | 'onDragStart' | 'onDragEnd'
->
-
-export interface NavbarProps
-  extends Omit<UseNavbarProps, 'hideOnScroll' | 'ref'>,
-    Omit<HTMLChakraProps<'div'>, keyof MotionProps | 'height'>,
-    MotionProps,
-    ThemingProps<'SuiNavbar'> {
-  children?: React.ReactNode | React.ReactNode[]
-}
-
 export const Navbar = forwardRef<NavbarProps, 'div'>((props, ref) => {
   const { children, ...otherProps } = props
 
@@ -56,7 +37,7 @@ export const Navbar = forwardRef<NavbarProps, 'div'>((props, ref) => {
             visible: { y: 0, transition: { ease: 'easeInOut' } },
           }}
           className={cx('sui-navbar', props.className)}
-          {...context.getContainerProps()}
+          {...context.getContainerProps(props)}
         >
           {content}
         </MotionBox>

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

@@ -1,9 +1,29 @@
-import { PropGetterV2 } from '@chakra-ui/react-utils'
-import { dataAttr } from '@chakra-ui/utils'
+import { dataAttr, PropGetter } from '@chakra-ui/utils'
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { useResizeObserver } from '@react-aria/utils'
 import { useScrollPosition } from '@saas-ui/hooks'
 import { HTMLMotionProps } from 'framer-motion'
+import type { HTMLChakraProps, ThemingProps } from '@chakra-ui/react'
+
+type MotionProps = Pick<
+  HTMLMotionProps<'div'>,
+  | 'animate'
+  | 'initial'
+  | 'variants'
+  | 'onAnimationStart'
+  | 'onAnimationComplete'
+  | 'onDrag'
+  | 'onDragStart'
+  | 'onDragEnd'
+>
+
+export interface NavbarProps
+  extends Omit<UseNavbarProps, 'hideOnScroll' | 'ref'>,
+    Omit<HTMLChakraProps<'div'>, keyof MotionProps | 'height'>,
+    MotionProps,
+    ThemingProps<'SuiNavbar'> {
+  children?: React.ReactNode | React.ReactNode[]
+}
 
 export interface UseNavbarProps {
   /**
@@ -35,7 +55,7 @@ export interface UseNavbarProps {
    * The props to modify the framer motion animation. Use the `variants` API to create your own animation.
    * This motion is only available if the `shouldHideOnScroll` prop is set to `true`.
    */
-  motionProps?: HTMLMotionProps<'nav'>
+  motionProps?: MotionProps
   /**
    * The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled.
    * it only works if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`.
@@ -110,7 +130,7 @@ export function useNavbar(props: UseNavbarProps) {
     },
   })
 
-  const getContainerProps: PropGetterV2<any> = (props = {}) => ({
+  const getContainerProps = (props: NavbarProps = {}) => ({
     ...containerProps,
     ...motionProps,
     'data-hidden': dataAttr(isHidden),

packages/saas-ui-core/src/sidebar/nav-group.tsx

@@ -8,8 +8,7 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
-import { runIfFn, cx } from '@chakra-ui/utils'
-import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { runIfFn, cx, MaybeRenderProp } from '@chakra-ui/utils'
 import { ChevronDownIcon, ChevronRightIcon } from '../icons'
 
 import { CollapseProvider, useCollapseContext, useCollapse } from '../collapse'

packages/saas-ui-core/src/sidebar/sidebar-types.ts

@@ -5,7 +5,7 @@ import {
   SystemProps,
   ThemingProps,
 } from '@chakra-ui/react'
-import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { MaybeRenderProp } from '@chakra-ui/utils'
 import { HTMLMotionProps } from 'framer-motion'
 
 export interface SidebarOptions {

packages/saas-ui-core/src/sidebar/use-sidebar.ts

@@ -1,11 +1,10 @@
-import { createContext, PropGetter } from '@chakra-ui/react-utils'
 import {
   ResponsiveValue,
   ThemeTypings,
   UseDisclosureReturn,
 } from '@chakra-ui/react'
 import { useAppShellContext } from '../app-shell/app-shell-context'
-import { callAllHandlers } from '@chakra-ui/utils'
+import { callAllHandlers, createContext, PropGetter } from '@chakra-ui/utils'
 
 type Variants = 'compact' | 'default'
 

packages/saas-ui-core/src/stepper/use-stepper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 
 export const [StepperProvider, useStepperContext] =
   createContext<UseStepperReturn>({

packages/saas-ui-core/src/structured-list/list.tsx

@@ -14,8 +14,7 @@ import {
   useMergeRefs,
 } from '@chakra-ui/react'
 
-import { callAllHandlers, cx, dataAttr } from '@chakra-ui/utils'
-import { createContext } from '@chakra-ui/react-utils'
+import { callAllHandlers, cx, dataAttr, createContext } from '@chakra-ui/utils'
 
 import { nextById, prevById, queryAll } from '@zag-js/dom-utils'
 

packages/saas-ui-date-picker/src/calendar-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 import { CalendarAria } from '@react-aria/calendar'
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar'
 

packages/saas-ui-date-picker/src/segmented-input.tsx

@@ -10,8 +10,7 @@ import {
   useStyleConfig,
   useTheme,
 } from '@chakra-ui/react'
-import { createContext } from '@chakra-ui/react-utils'
-import { dataAttr, mapResponsive } from '@chakra-ui/utils'
+import { createContext, dataAttr, mapResponsive } from '@chakra-ui/utils'
 
 import defaultStyleConfig from './segmented-input-styles'
 

packages/saas-ui-file-upload/package.json

@@ -58,7 +58,6 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/styled-system": "^2.11.1",
     "@chakra-ui/theme-tools": "^2.2.5",
     "@chakra-ui/utils": "^2.2.1",

packages/saas-ui-file-upload/src/file-upload-context.ts

@@ -1,5 +1,5 @@
 import { SystemStyleObject } from '@chakra-ui/react'
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 import { normalizeProps, useMachine } from '@zag-js/react'
 import * as fileUpload from '@zag-js/file-upload'
 import { useId } from 'react'

packages/saas-ui-file-upload/src/file-upload.tsx

@@ -12,7 +12,7 @@ import {
   ThemingProps,
 } from '@chakra-ui/react'
 
-import { pick, runIfFn, split } from '@chakra-ui/utils'
+import { pick, runIfFn, split, MaybeRenderProp } from '@chakra-ui/utils'
 import {
   FileUploadProvider,
   useFileUpload,
@@ -23,7 +23,6 @@ import {
   FileUploadRenderContext,
 } from './file-upload-context'
 
-import { MaybeRenderProp } from '@chakra-ui/react-utils'
 import { fileUploadTheme } from './file-upload-theme'
 import { FileChangeDetails } from '@zag-js/file-upload'
 

packages/saas-ui-forms/package.json

@@ -101,7 +101,6 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.2.1",
     "@hookform/resolvers": "^3.9.0",
     "@saas-ui/core": "workspace:*",

packages/saas-ui-forms/src/array-field.tsx

@@ -28,8 +28,7 @@ import {
   UseArrayFieldReturn,
 } from './use-array-field'
 import { FieldPath, FieldValues } from 'react-hook-form'
-import { isFunction } from '@chakra-ui/utils'
-import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { isFunction, MaybeRenderProp } from '@chakra-ui/utils'
 import { useFieldProps } from './form-context'
 
 export interface ArrayFieldButtonProps extends ButtonProps {}
@@ -180,7 +179,7 @@ ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
 
 export interface ArrayFieldProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > extends ArrayFieldOptions<TFieldValues, TName>,
     Omit<
       BaseFieldProps<TFieldValues, TName>,

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

@@ -1,7 +1,12 @@
 import * as React from 'react'
 
 import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
-import { FocusableElement, cx, runIfFn } from '@chakra-ui/utils'
+import {
+  FocusableElement,
+  cx,
+  runIfFn,
+  MaybeRenderProp,
+} from '@chakra-ui/utils'
 
 import {
   useForm,
@@ -16,7 +21,6 @@ import {
 } from 'react-hook-form'
 import { FormProvider } from './form-context'
 import { FieldResolver } from './field-resolver'
-import { MaybeRenderProp } from '@chakra-ui/react-utils'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 

packages/saas-ui-forms/src/select/select-context.tsx

@@ -4,7 +4,7 @@ import {
   useControllableState,
   useFormControl,
 } from '@chakra-ui/react'
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 import React from 'react'
 import { FieldOptions } from '../types'
 import { mapOptions } from '../utils'

packages/saas-ui-forms/src/types.ts

@@ -1,5 +1,5 @@
 import type { FormControlProps } from '@chakra-ui/react'
-import type { MaybeRenderProp } from '@chakra-ui/react-utils'
+import type { MaybeRenderProp } from '@chakra-ui/utils'
 import type { FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'
 import type { DefaultFields } from './default-fields'
 import type { FormProps, FormRenderContext } from './form'

packages/saas-ui-forms/src/use-array-field.tsx

@@ -8,7 +8,7 @@ import {
 
 import { useFormContext } from './form-context'
 
-import { createContext } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/utils'
 
 export interface UseArrayFieldReturn extends UseFieldArrayReturn {
   /**