@yamada-ui/react/dist/esm/hooks/use-value/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { useSystem } from "../../core/system/system-provider.js";
import { useColorMode } from "../../core/system/color-mode-provider.js";
import { getColorModeValue } from "../../core/system/use-color-mode-value.js";
import { useBreakpoint } from "../use-breakpoint/use-breakpoint.js";
import { getBreakpointValue } from "../use-breakpoint/use-breakpoint-value.js";
import { useMemo } from "react";

//#region src/hooks/use-value/index.ts
/**
* `useValue` is a custom hook that combines `useBreakpointValue` and `useColorModeValue`.
*
* @see https://yamada-ui.com/docs/hooks/use-value
*/
const useValue = (value) => {
	const system = useSystem();
	const breakpoint = useBreakpoint();
	const { colorMode } = useColorMode();
	return useMemo(() => {
		return getValue(value)(system, colorMode, breakpoint);
	}, [
		value,
		system,
		colorMode,
		breakpoint
	]);
};
const getValue = (value) => (system, colorMode, breakpoint) => {
	if ((0, utils_exports.isObject)(value)) return getBreakpointValue(value)(system, breakpoint);
	else if ((0, utils_exports.isArray)(value)) {
		const [light, dark] = value;
		return getColorModeValue(light, dark)(colorMode);
	} else return value;
};

//#endregion
export { getValue, useValue };
//# sourceMappingURL=index.js.map