refactor: index file. Add /css package for Theme typing

Author: LekoArts

packages/css/src/types.ts

@@ -511,7 +511,7 @@ export type ColorMode = {
 }
 
 export interface Theme {
-  breakpoints?: ObjectOrArray<number | string | symbol>
+  breakpoints?: Array<string>
   mediaQueries?: { [size: string]: string }
   space?: ObjectOrArray<CSS.MarginProperty<number | string>>
   fontSizes?: ObjectOrArray<CSS.FontSizeProperty<number>>

packages/match-media/package.json

@@ -18,7 +18,8 @@
   },
   "devDependencies": {
     "react": "^16.9.0",
-    "theme-ui": "^0.3.1"
+    "@theme-ui/core": "^0.3.1",
+    "@theme-ui/css": "^0.3.1"
   },
   "peerDependencies": {
     "react": "^16.9.0",

packages/match-media/src/index.ts

@@ -1,11 +1,17 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useThemeUI } from 'theme-ui'
+import { useThemeUI } from '@theme-ui/core'
+import { Theme } from '@theme-ui/css'
 
 // Shared with @theme-ui/css
 const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
 
-export const useBreakpointIndex = ({ defaultIndex = 0 }) => {
+type defaultOptions = {
+  defaultIndex?: number
+}
+
+export const useBreakpointIndex = (options: defaultOptions = {}) => {
   const context = useThemeUI()
+  const { defaultIndex = 0 } = options
   const breakpoints =
     (context.theme && context.theme.breakpoints) || defaultBreakpoints
 
@@ -46,7 +52,9 @@ export const useBreakpointIndex = ({ defaultIndex = 0 }) => {
   return value
 }
 
-export const useResponsiveValue = (values, options) => {
+type Values = ((theme: Theme | null) => string[]) | string[]
+
+export const useResponsiveValue = (values: Values, options: defaultOptions) => {
   const { theme } = useThemeUI()
   const array = typeof values === 'function' ? values(theme) : values
   const index = useBreakpointIndex(options)