/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { getGlobalInjector } from "../config.js";
import { useInsertionEffect, useMemo } from "react";

//#region src/tasty/hooks/useProperty.ts
/**
* Hook to register a CSS @property custom property.
* This enables advanced features like animating custom properties.
*
* Note: @property rules are global and persistent once defined.
* The hook ensures the property is only registered once per root.
*
* Accepts tasty token syntax for the property name:
* - `$name` → defines `--name`
* - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
* - `--name` → defines `--name` (legacy format)
*
* @param name - The property token ($name, #name) or CSS property name (--name)
* @param options - Property configuration
*
* @example Basic property with token syntax
* ```tsx
* function Spinner() {
*   useProperty('$rotation', {
*     syntax: '<angle>',
*     inherits: false,
*     initialValue: '0deg',
*   });
*
*   return <div className="spinner" />;
* }
* ```
*
* @example Color property with token syntax (auto-sets syntax)
* ```tsx
* function MyComponent() {
*   useProperty('#theme', {
*     initialValue: 'red', // syntax: '<color>' is auto-set
*   });
*
*   // Now --theme-color can be animated with CSS transitions
*   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
* }
* ```
*
* @example Legacy format (still supported)
* ```tsx
* function ResizableBox() {
*   useProperty('--box-size', {
*     syntax: '<length>',
*     initialValue: '100px',
*   });
*
*   return <div style={{ width: 'var(--box-size)' }} />;
* }
* ```
*/
function useProperty(name, options) {
	useInsertionEffect(() => {
		if (!name) {
			console.warn(`[Tasty] useProperty: property name is required`);
			return;
		}
		const injector = getGlobalInjector();
		if (injector.isPropertyDefined(name, { root: options?.root })) return;
		injector.property(name, {
			syntax: options?.syntax,
			inherits: options?.inherits,
			initialValue: options?.initialValue,
			root: options?.root
		});
	}, [
		name,
		useMemo(() => {
			if (!options) return "";
			return JSON.stringify({
				syntax: options.syntax,
				inherits: options.inherits,
				initialValue: options.initialValue
			});
		}, [
			options?.syntax,
			options?.inherits,
			options?.initialValue
		]),
		options?.root
	]);
}

//#endregion
export { useProperty };
//# sourceMappingURL=useProperty.js.map