fix: remove incorrect imports from chakra ui

.changeset/tough-mice-mix.md

@@ -0,0 +1,6 @@
+---
+'@saas-ui/hooks': patch
+'@saas-ui/core': patch
+---
+
+Removed imports from @chakra-ui/react

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

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
-import { createContext } from '@chakra-ui/react'
 import { nextById, prevById, queryAll } from '@zag-js/dom-utils'
 
-import { callAll, dataAttr } from '#utils'
+import { callAll, createContext, dataAttr } from '#utils'
 
 interface GridListContext {
   id: string

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

@@ -2,8 +2,11 @@
 
 import { useMemo, useState } from 'react'
 
-import { useControllableState } from '@chakra-ui/react'
-import { useDisclosure, useIsMobile } from '@saas-ui/hooks'
+import {
+  useControllableState,
+  useDisclosure,
+  useIsMobile,
+} from '@saas-ui/hooks'
 
 import type { HTMLSystemProps } from '#system'
 import { callAll, createContext } from '#utils'

packages/saas-ui-hooks/package.json

@@ -4,6 +4,7 @@
   "description": "Saas UI react hooks",
   "exports": {
     ".": {
+      "sui": "./src/index.ts",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"

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

@@ -1,3 +1,4 @@
+export { useControllableState } from './use-controllable-state'
 export { usePromise } from './use-promise'
 export type { UsePromise } from './use-promise'
 export { useLocalStorage } from './use-local-storage'

packages/saas-ui-hooks/src/use-callback-ref.ts

@@ -1,5 +1,3 @@
-'use client'
-
 import { useCallback, useInsertionEffect, useRef } from 'react'
 
 /**

packages/saas-ui-hooks/src/use-controllable-state.ts

@@ -0,0 +1,67 @@
+import { useCallback, useState } from 'react'
+
+import { useCallbackRef } from './use-callback-ref'
+
+export interface UseControllableStateProps<T> {
+  /**
+   * The value to used in controlled mode
+   */
+  value?: T
+  /**
+   * The initial value to be used, in uncontrolled mode
+   */
+  defaultValue?: T | (() => T)
+  /**
+   * The callback fired when the value changes
+   */
+  onChange?: (value: T) => void
+  /**
+   * The function that determines if the state should be updated
+   */
+  shouldUpdate?: (prev: T, next: T) => boolean
+}
+
+export function useControllableState<T>(props: UseControllableStateProps<T>) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    shouldUpdate = (prev, next) => prev !== next,
+  } = props
+  const onChangeProp = useCallbackRef(onChange)
+  const shouldUpdateProp = useCallbackRef(shouldUpdate)
+
+  const [valueState, setValue] = useState(defaultValue as T)
+
+  const isControlled = valueProp !== undefined
+  const value = isControlled ? (valueProp as T) : valueState
+
+  const updateValue = useCallback(
+    (next: React.SetStateAction<T>) => {
+      const nextValue = runIfFn(next, value)
+
+      if (!shouldUpdateProp(value, nextValue)) {
+        return
+      }
+
+      if (!isControlled) {
+        setValue(nextValue)
+      }
+
+      onChangeProp(nextValue)
+    },
+    [isControlled, onChangeProp, value, shouldUpdateProp],
+  )
+
+  return [value, updateValue] as [T, React.Dispatch<React.SetStateAction<T>>]
+}
+
+const isFunction = (value: any): value is Function =>
+  typeof value === 'function'
+
+function runIfFn<T, U>(
+  valueOrFn: T | ((...fnArgs: U[]) => T),
+  ...args: U[]
+): T {
+  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn
+}

packages/saas-ui-hooks/src/use-disclosure.ts

@@ -1,5 +1,3 @@
-'use client'
-
 import { useCallback, useState } from 'react'
 
 import { useCallbackRef } from './use-callback-ref.ts'

packages/saas-ui-hooks/src/use-outside-click.ts

@@ -1,6 +1,7 @@
-import { useCallbackRef } from '@chakra-ui/react'
 import { useEffect, useRef } from 'react'
 
+import { useCallbackRef } from './use-callback-ref'
+
 export interface UseOutsideClickProps {
   /**
    * Whether the hook is enabled