Design Token Hook (styled-system/use-token.ts)

React hook to retrieve theme token values by category and name(s) from Chakra context.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
"use client"

import { useMemo } from "react"
import { useChakraContext } from "./provider"

export function useToken(category: string, token: string | string[]): string[] {
  const sys = useChakraContext()
  return useMemo(() => {
    const arr = Array.isArray(token) ? token : [token]
    return arr.map((t) => sys.token(`${category}.${t}`, t))
  }, [sys, category, token])
}