@tenphi/tasty 2.0.2 → 2.0.4

package/dist/index.js

@@ -1,36 +1,729 @@
-import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, hslToRgbValues, strToRgb } from "./utils/color-math.js";
-import { Bucket } from "./parser/types.js";
-import { StyleParser } from "./parser/parser.js";
-import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
-import { CUSTOM_UNITS, DIRECTIONS, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles } from "./utils/styles.js";
-import { deprecationWarning, warn } from "./utils/warnings.js";
-import { styleHandlers } from "./styles/predefined.js";
-import { SheetManager } from "./injector/sheet-manager.js";
-import { StyleInjector } from "./injector/injector.js";
-import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
-import { parseStateKey } from "./pipeline/parseStateKey.js";
-import { isSelector, renderStyles } from "./pipeline/index.js";
-import { generateTypographyTokens } from "./utils/typography.js";
-import { configure, getConfig, getGlobalCounterStyle, getGlobalFontFace, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
-import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
-import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
-import { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property, touch } from "./injector/index.js";
-import { mergeStyles } from "./utils/merge-styles.js";
-import { resolveRecipes } from "./utils/resolve-recipes.js";
-import { computeStyles } from "./compute-styles.js";
-import { filterBaseProps } from "./utils/filter-base-props.js";
-import { color } from "./utils/colors.js";
-import { _modAttrs } from "./utils/mod-attrs.js";
-import { dotize } from "./utils/dotize.js";
-import { processTokens } from "./utils/process-tokens.js";
-import { tastyDebug } from "./debug.js";
-import { getDisplayName } from "./utils/get-display-name.js";
-import { Element, tasty } from "./tasty.js";
-import { useStyles } from "./hooks/useStyles.js";
-import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
-import { useRawCSS } from "./hooks/useRawCSS.js";
-import { useKeyframes } from "./hooks/useKeyframes.js";
-import { useProperty } from "./hooks/useProperty.js";
-import { useFontFace } from "./hooks/useFontFace.js";
-import { useCounterStyle } from "./hooks/useCounterStyle.js";
+import { $ as parseStyle, B as deprecationWarning, D as getGlobalPredefinedStates, F as formatFontFaceRule, G as DIRECTIONS, J as getGlobalFuncs, K as customFunc, L as SheetManager, O as setGlobalPredefinedStates, P as fontFaceContentHash, Q as parseColor, S as parseStateKey, St as strToRgb, V as warn, W as CUSTOM_UNITS, X as getGlobalPredefinedTokens, Y as getGlobalParser, Z as normalizeColorTokenValue, _ as resetConfig, a as getGlobalCounterStyle, at as StyleParser, b as isSelector, bt as hexToRgb, c as getGlobalKeyframes, ct as hashString, d as hasGlobalKeyframes, et as resetGlobalPredefinedTokens, f as hasGlobalRecipes, h as isTestEnvironment, it as okhslPlugin, j as formatCounterStyleRule, k as StyleInjector, l as getGlobalRecipes, m as isConfigLocked, n as getConfig, nt as stringifyStyles, o as getGlobalFontFace, ot as Bucket, p as hasStylesGenerated, q as filterMods, rt as okhslFunc, s as getGlobalInjector, t as configure, tt as setGlobalPredefinedTokens, v as generateTypographyTokens, vt as getNamedColorHex, w as createStateParserContext, x as renderStyles, xt as hslToRgbValues, yt as getRgbValuesFromRgbaString, z as styleHandlers } from "./config-5jzS6k6B.js";
+import { d as categorizeStyleKeys, l as CHUNK_NAMES, u as STYLE_TO_CHUNK } from "./keyframes-b7X3UxDV.js";
+import { A as property, B as INNER_STYLES, C as getRawCSSText, D as injector, E as injectRawCSS, F as BLOCK_STYLES, H as POSITION_STYLES, I as COLOR_STYLES, L as CONTAINER_STYLES, M as BASE_STYLES, N as BLOCK_INNER_STYLES, O as isPropertyDefined, P as BLOCK_OUTER_STYLES, R as DIMENSION_STYLES, S as getIsTestEnvironment, T as injectGlobal, U as TEXT_STYLES, V as OUTER_STYLES, _ as destroy, a as color, b as getCssText, c as hasKeys, d as collectAutoInferredPropertiesRSC, f as getStyleTarget, g as createInjector, h as counterStyle, i as _modAttrs, j as touch, k as keyframes, l as formatKeyframesCSS, m as cleanup, n as processTokens, o as filterBaseProps, p as pushRSCCSS, r as dotize, s as computeStyles, t as tastyDebug, u as collectAutoInferredProperties, v as fontFace, w as inject, x as getCssTextForNode, y as gc, z as FLOW_STYLES } from "./core-CtU6-9OC.js";
+import { n as formatPropertyCSS } from "./format-rules-DH13ewDu.js";
+import { t as mergeStyles } from "./merge-styles-Tgo3BbL2.js";
+import { t as resolveRecipes } from "./resolve-recipes-Ca2-5CxM.js";
+import { t as getTastySSRContext } from "./context-CkSg-kDT.js";
+import { t as formatGlobalRules } from "./format-global-rules-Dbc_1tc3.js";
+import { Fragment, createElement, forwardRef, useContext } from "react";
+//#region src/utils/get-display-name.ts
+const DEFAULT_NAME = "Anonymous";
+function getDisplayName(Component, fallbackName = DEFAULT_NAME) {
+	if (typeof Component === "function") return Component.displayName ?? Component.name ?? fallbackName;
+	return fallbackName;
+}
+//#endregion
+//#region src/utils/is-valid-element-type.ts
+/**
+* Lightweight replacement for `react-is`'s isValidElementType.
+* Detects string tags, function/class components, and React exotic types
+* (forwardRef, memo, lazy, etc.) via their internal $$typeof symbol.
+*/
+function isValidElementType(value) {
+	if (typeof value === "string" || typeof value === "function") return true;
+	if (typeof value === "object" && value !== null) return typeof value.$$typeof === "symbol";
+	return false;
+}
+//#endregion
+//#region src/tasty.tsx
+/**
+* Precalculated entries for performance optimization
+*/
+const IS_PROPERTIES_ENTRIES = Object.entries({
+	isDisabled: "disabled",
+	isHidden: "hidden",
+	isChecked: "checked"
+});
+/**
+* Helper function to handle is* properties consistently
+* Transforms is* props to HTML attributes and adds corresponding data-* attributes
+*/
+function handleIsProperties(props) {
+	for (const [isProperty, targetAttribute] of IS_PROPERTIES_ENTRIES) {
+		if (isProperty in props) {
+			props[targetAttribute] = props[isProperty];
+			delete props[isProperty];
+		}
+		const dataAttribute = `data-${targetAttribute}`;
+		if (!(dataAttribute in props) && props[targetAttribute]) props[dataAttribute] = "";
+	}
+}
+/**
+* Creates a sub-element component for compound component patterns.
+* Sub-elements are lightweight components with data-element attribute for CSS targeting.
+*/
+function createSubElement(elementName, definition) {
+	const config = typeof definition === "string" ? { as: definition } : definition;
+	const tag = config.as ?? "div";
+	const defaultQa = config.qa;
+	const defaultQaVal = config.qaVal;
+	const SubElement = forwardRef((props, ref) => {
+		const { qa, qaVal, mods, tokens, isDisabled, isHidden, isChecked, className, style, ...htmlProps } = props;
+		let modDataAttrs;
+		if (mods) modDataAttrs = _modAttrs(mods);
+		const tokenStyle = tokens ? processTokens(tokens) : void 0;
+		let mergedStyle;
+		if (tokenStyle || style) mergedStyle = tokenStyle && style ? {
+			...tokenStyle,
+			...style
+		} : tokenStyle ?? style;
+		const elementProps = {
+			"data-element": elementName,
+			"data-qa": qa ?? defaultQa,
+			"data-qaval": qaVal ?? defaultQaVal,
+			...modDataAttrs || {},
+			...htmlProps,
+			className,
+			style: mergedStyle,
+			isDisabled,
+			isHidden,
+			isChecked,
+			ref
+		};
+		handleIsProperties(elementProps);
+		if (elementProps["data-qa"] === void 0) delete elementProps["data-qa"];
+		if (elementProps["data-qaval"] === void 0) delete elementProps["data-qaval"];
+		return createElement(tag, elementProps);
+	});
+	SubElement.displayName = `SubElement(${elementName})`;
+	return SubElement;
+}
+/**
+* Pre-compute the mapping from prop name to token key at component-creation time.
+* Array form: `'progress'` -> `'$progress'`, `'accentColor'` -> `'#accent'`.
+* Object form: entries used as-is.
+*/
+function buildTokenPropsMapping(def) {
+	if (Array.isArray(def)) return def.map((propName) => {
+		if (propName.endsWith("Color") && propName.length > 5) return [propName, `#${propName.slice(0, -5)}`];
+		return [propName, `$${propName}`];
+	});
+	return Object.entries(def);
+}
+function tasty(Component, options) {
+	if (isValidElementType(Component)) return tastyWrap(Component, options);
+	return tastyElement(Component);
+}
+function tastyWrap(Component, options) {
+	const { as: extendTag, element: extendElement, ...defaultProps } = options ?? {};
+	const propsWithStyles = ["styles"].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith("Styles")));
+	const _WrappedComponent = forwardRef((props, ref) => {
+		const { as, element, ...restProps } = props;
+		const mergedStylesMap = propsWithStyles.reduce((map, prop) => {
+			const restValue = restProps[prop];
+			const defaultValue = defaultProps[prop];
+			if (restValue != null && defaultValue != null) map[prop] = mergeStyles(defaultValue, restValue);
+			else map[prop] = restValue ?? defaultValue;
+			return map;
+		}, {});
+		return createElement(Component, {
+			...defaultProps,
+			...restProps,
+			...mergedStylesMap,
+			as: as ?? extendTag,
+			element: element || extendElement,
+			ref
+		});
+	});
+	_WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? "Anonymous")})`;
+	return _WrappedComponent;
+}
+function tastyElement(tastyOptions) {
+	const { as: originalAs = "div", element: defaultElement, styles: defaultStyles, styleProps, modProps: modPropsDef, tokenProps: tokenPropsDef, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
+	let variantStylesMap;
+	if (variants) {
+		let baseStyles = defaultStyles;
+		let extensionStyles;
+		if (defaultStyles) for (const key of Object.keys(defaultStyles)) {
+			if (isSelector(key)) continue;
+			const value = defaultStyles[key];
+			if (typeof value === "object" && value !== null && !Array.isArray(value) && !("" in value)) {
+				if (!extensionStyles) {
+					baseStyles = { ...defaultStyles };
+					extensionStyles = {};
+				}
+				extensionStyles[key] = value;
+				delete baseStyles[key];
+			}
+		}
+		variantStylesMap = Object.entries(variants).reduce((map, [variant, variantStyles]) => {
+			map[variant] = extensionStyles ? mergeStyles(baseStyles, variantStyles, extensionStyles) : mergeStyles(baseStyles, variantStyles);
+			return map;
+		}, {});
+		if (!variantStylesMap["default"]) variantStylesMap["default"] = defaultStyles;
+	}
+	const { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
+	const propsToCheck = styleProps ? styleProps.concat(BASE_STYLES) : BASE_STYLES;
+	const modPropsKeys = modPropsDef ? Array.isArray(modPropsDef) ? modPropsDef : Object.keys(modPropsDef) : void 0;
+	const tokenPropsMapping = tokenPropsDef ? buildTokenPropsMapping(tokenPropsDef) : void 0;
+	const classNameCache = /* @__PURE__ */ new Map();
+	const _TastyComponent = forwardRef((allProps, ref) => {
+		const { as, styles: rawStyles, variant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
+		let styles = rawStyles;
+		let propStyles = null;
+		for (const prop of propsToCheck) {
+			const key = prop;
+			if (key in otherProps) {
+				if (!propStyles) propStyles = {};
+				const value = otherProps[key];
+				propStyles[key] = value;
+				delete otherProps[key];
+			}
+		}
+		if (!styles || styles && !hasKeys(styles)) styles = void 0;
+		let propMods;
+		if (modPropsKeys) {
+			for (const key of modPropsKeys) if (key in otherProps) {
+				if (!propMods) propMods = {};
+				propMods[key] = otherProps[key];
+				delete otherProps[key];
+			}
+		}
+		let propTokens;
+		if (tokenPropsMapping) {
+			for (const [propName, tokenKey] of tokenPropsMapping) if (propName in otherProps) {
+				if (!propTokens) propTokens = {};
+				propTokens[tokenKey] = otherProps[propName];
+				delete otherProps[propName];
+			}
+		}
+		const baseStyles = variantStylesMap ? variantStylesMap[variant || "default"] ?? variantStylesMap["default"] : defaultStyles;
+		const hasInstanceStyles = styles && hasKeys(styles);
+		const hasPropStyles = propStyles && hasKeys(propStyles);
+		const allStyles = hasInstanceStyles || hasPropStyles ? mergeStyles(baseStyles, styles, propStyles) : baseStyles;
+		const useFactoryCache = typeof document !== "undefined";
+		let stylesResult;
+		if (useFactoryCache && allStyles === baseStyles && classNameCache.has(allStyles)) {
+			stylesResult = { className: classNameCache.get(allStyles) };
+			touch(stylesResult.className);
+		} else {
+			stylesResult = computeStyles(allStyles);
+			if (useFactoryCache && allStyles === baseStyles) classNameCache.set(allStyles, stylesResult.className);
+		}
+		let mergedTokens;
+		if (defaultTokens || tokens || propTokens) if (!defaultTokens && !propTokens) mergedTokens = tokens;
+		else if (!tokens && !propTokens) mergedTokens = defaultTokens;
+		else mergedTokens = {
+			...defaultTokens,
+			...tokens,
+			...propTokens
+		};
+		const processedTokenStyle = processTokens(mergedTokens);
+		let mergedStyle;
+		if (processedTokenStyle || style) if (!processedTokenStyle) mergedStyle = style;
+		else if (!style) mergedStyle = processedTokenStyle;
+		else mergedStyle = {
+			...processedTokenStyle,
+			...style
+		};
+		const mergedMods = propMods ? {
+			...mods,
+			...propMods
+		} : mods;
+		let modDataAttrs;
+		if (mergedMods) modDataAttrs = _modAttrs(mergedMods);
+		const finalClassName = [userClassName || "", stylesResult.className].filter(Boolean).join(" ");
+		const elementProps = {
+			"data-element": element || defaultElement,
+			"data-qa": qa || defaultQa,
+			"data-qaval": qaVal || defaultQaVal,
+			...otherDefaultProps,
+			...modDataAttrs || {},
+			...otherProps,
+			className: finalClassName,
+			style: mergedStyle,
+			ref
+		};
+		handleIsProperties(elementProps);
+		const el = createElement(as ?? originalAs, elementProps);
+		if (stylesResult.css) {
+			const nonce = getConfig().nonce;
+			return createElement(Fragment, null, createElement("style", {
+				"data-tasty-rsc": "",
+				nonce,
+				dangerouslySetInnerHTML: { __html: stylesResult.css }
+			}), el);
+		}
+		return el;
+	});
+	_TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
+	if (elements) {
+		const subElements = Object.entries(elements).reduce((acc, [name, definition]) => {
+			acc[name] = createSubElement(name, definition);
+			return acc;
+		}, {});
+		return Object.assign(_TastyComponent, subElements);
+	}
+	return _TastyComponent;
+}
+const Element = tasty({});
+//#endregion
+//#region src/hooks/useStyles.ts
+/**
+* Hook to generate CSS classes from Tasty styles.
+* Thin wrapper around `computeStyles()` that adds React context-based
+* SSR collector discovery for backward compatibility with TastyRegistry.
+*
+* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { className } = useStyles({
+*     padding: '2x',
+*     fill: '#purple',
+*     radius: '1r',
+*   });
+*
+*   return <div className={className}>Styled content</div>;
+* }
+* ```
+*/
+function useStyles(styles) {
+	return computeStyles(styles, { ssrCollector: useContext(getTastySSRContext()) });
+}
+//#endregion
+//#region src/hooks/useGlobalStyles.ts
+const clientGlobalEntries = /* @__PURE__ */ new Map();
+/**
+* Inject global styles for a given selector.
+* Useful for styling elements by selector without generating classNames.
+*
+* SSR-aware: when a ServerStyleCollector is available, CSS is collected
+* during the render phase instead of being injected into the DOM.
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* Injected styles are permanent — they are not cleaned up on component unmount.
+* Use the `id` option for update tracking when styles change over the
+* component lifecycle.
+*
+* @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
+* @param styles - Tasty styles object
+* @param options - Optional settings including `id` for update tracking
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   useGlobalStyles('.card', {
+*     padding: '2x',
+*     radius: '1r',
+*     fill: '#white',
+*   });
+*
+*   return <div className="card">Content</div>;
+* }
+* ```
+*/
+function useGlobalStyles(selector, styles, options) {
+	if (!styles) return;
+	if (!selector) {
+		console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
+		return;
+	}
+	const target = getStyleTarget();
+	if (target.mode === "client") {
+		const slotKey = options?.id ?? selector;
+		const stylesKey = JSON.stringify(styles);
+		const existing = clientGlobalEntries.get(slotKey);
+		if (existing && existing.stylesKey === stylesKey) return;
+	}
+	const resolvedStyles = resolveRecipes(styles);
+	const styleResults = renderStyles(resolvedStyles, selector);
+	if (styleResults.length === 0) return;
+	if (target.mode === "ssr") {
+		target.collector.collectInternals();
+		const css = formatGlobalRules(styleResults);
+		if (css) {
+			const key = options?.id ? `global:${options.id}` : `global:${selector}:${hashString(css)}`;
+			target.collector.collectGlobalStyles(key, css);
+		}
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, target.collector, resolvedStyles);
+		return;
+	}
+	if (target.mode === "rsc") {
+		const css = formatGlobalRules(styleResults);
+		if (css) {
+			const key = options?.id ? `__global:${options.id}` : `__global:${selector}:${hashString(css)}`;
+			pushRSCCSS(target.cache, key, css);
+		}
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredPropertiesRSC(styleResults, target.cache, resolvedStyles);
+		return;
+	}
+	const slotKey = options?.id ?? selector;
+	const existing = clientGlobalEntries.get(slotKey);
+	if (existing) existing.dispose();
+	const { dispose } = injectGlobal(styleResults);
+	clientGlobalEntries.set(slotKey, {
+		stylesKey: JSON.stringify(styles),
+		dispose
+	});
+}
+//#endregion
+//#region src/utils/deps-equal.ts
+/**
+* Shallow comparison of two dependency arrays using Object.is semantics.
+* Returns true when both arrays have the same length and every element
+* at the same index is identical.
+*/
+function depsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
+	return true;
+}
+//#endregion
+//#region src/hooks/useRawCSS.ts
+const clientEntries = /* @__PURE__ */ new Map();
+const clientContentDedup = /* @__PURE__ */ new Set();
+const factoryDepsCache$1 = /* @__PURE__ */ new Map();
+/**
+* Inject raw CSS text directly without parsing.
+* This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
+*
+* The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
+* with tasty's chunked style sheets.
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* Injected styles are permanent — they are not cleaned up on component unmount.
+* Use the `id` option for update tracking when styles change over the
+* component lifecycle.
+*
+* @example Static CSS string
+* ```tsx
+* function GlobalStyles() {
+*   useRawCSS(`
+*     body {
+*       margin: 0;
+*       padding: 0;
+*       font-family: sans-serif;
+*     }
+*   `);
+*
+*   return null;
+* }
+* ```
+*
+* @example Factory function with dependencies
+* ```tsx
+* function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
+*   useRawCSS(() => `
+*     :root {
+*       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
+*       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
+*     }
+*   `, [theme], { id: 'theme-vars' });
+*
+*   return null;
+* }
+* ```
+*
+* @example With options
+* ```tsx
+* function ShadowStyles({ shadowRoot }) {
+*   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
+*   return null;
+* }
+* ```
+*/
+function useRawCSS(cssOrFactory, depsOrOptions, options) {
+	const isFactory = typeof cssOrFactory === "function";
+	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
+	const opts = isFactory ? options : depsOrOptions;
+	const target = getStyleTarget();
+	if (isFactory && deps && opts?.id && target.mode === "client") {
+		const cachedDeps = factoryDepsCache$1.get(opts.id);
+		if (cachedDeps && depsEqual(cachedDeps, deps)) return;
+	}
+	const css = isFactory ? cssOrFactory() : cssOrFactory;
+	if (!css.trim()) return;
+	if (target.mode === "ssr") {
+		const key = opts?.id ? `raw:${opts.id}` : `raw:${hashString(css)}`;
+		target.collector.collectRawCSS(key, css);
+		return;
+	}
+	if (target.mode === "rsc") {
+		const key = opts?.id ? `__raw:${opts.id}` : `__raw:${hashString(css)}`;
+		pushRSCCSS(target.cache, key, css);
+		return;
+	}
+	const id = opts?.id;
+	if (id) {
+		const existing = clientEntries.get(id);
+		if (existing) {
+			if (existing.contentKey === css) return;
+			existing.dispose();
+		}
+		const { dispose } = injectRawCSS(css, opts);
+		clientEntries.set(id, {
+			contentKey: css,
+			dispose
+		});
+		if (deps) factoryDepsCache$1.set(id, deps);
+	} else {
+		const contentKey = hashString(css);
+		if (clientContentDedup.has(contentKey)) return;
+		clientContentDedup.add(contentKey);
+		injectRawCSS(css, opts);
+	}
+}
+//#endregion
+//#region src/hooks/useKeyframes.ts
+const clientContentToName$1 = /* @__PURE__ */ new Map();
+const factoryDepsCache = /* @__PURE__ */ new Map();
+function useKeyframes(stepsOrFactory, depsOrOptions, options) {
+	const isFactory = typeof stepsOrFactory === "function";
+	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
+	const opts = isFactory ? options : depsOrOptions;
+	const target = getStyleTarget();
+	if (isFactory && deps && opts?.name && target.mode === "client") {
+		const cached = factoryDepsCache.get(opts.name);
+		if (cached && depsEqual(cached.deps, deps)) return cached.name;
+	}
+	const steps = isFactory ? stepsOrFactory() : stepsOrFactory;
+	if (!steps || Object.keys(steps).length === 0) return "";
+	if (target.mode === "ssr") {
+		const actualName = target.collector.allocateKeyframeName(opts?.name);
+		const css = formatKeyframesCSS(actualName, steps);
+		target.collector.collectKeyframes(actualName, css);
+		return actualName;
+	}
+	if (target.mode === "rsc") {
+		const serializedContent = JSON.stringify(steps);
+		const key = `__kf:${opts?.name ?? ""}:${serializedContent}`;
+		const existingName = target.cache.generatedNames.get(key);
+		if (existingName) return existingName;
+		const actualName = opts?.name ?? `k${hashString(serializedContent)}`;
+		const css = formatKeyframesCSS(actualName, steps);
+		pushRSCCSS(target.cache, key, css);
+		target.cache.generatedNames.set(key, actualName);
+		return actualName;
+	}
+	const serializedContent = JSON.stringify(steps);
+	const cacheKey = `${opts?.name ?? ""}:${serializedContent}`;
+	const cachedName = clientContentToName$1.get(cacheKey);
+	if (cachedName) return cachedName;
+	const name = keyframes(steps, {
+		name: opts?.name,
+		root: opts?.root
+	}).toString();
+	clientContentToName$1.set(cacheKey, name);
+	if (deps && opts?.name) factoryDepsCache.set(opts.name, {
+		deps,
+		name
+	});
+	return name;
+}
+//#endregion
+//#region src/hooks/useProperty.ts
+/**
+* Register a CSS @property custom property.
+* This enables advanced features like animating custom properties.
+*
+* Note: @property rules are global and persistent once defined.
+* The function 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)
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* @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) {
+	if (!name) {
+		console.warn(`[Tasty] useProperty: property name is required`);
+		return;
+	}
+	const target = getStyleTarget();
+	if (target.mode === "ssr") {
+		target.collector.collectInternals();
+		const css = formatPropertyCSS(name, {
+			syntax: options?.syntax,
+			inherits: options?.inherits,
+			initialValue: options?.initialValue
+		});
+		if (css) target.collector.collectProperty(name, css);
+		return;
+	}
+	if (target.mode === "rsc") {
+		const css = formatPropertyCSS(name, {
+			syntax: options?.syntax,
+			inherits: options?.inherits,
+			initialValue: options?.initialValue
+		});
+		if (css) pushRSCCSS(target.cache, `__prop:${name}`, css);
+		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
+	});
+}
+//#endregion
+//#region src/hooks/useFontFace.ts
+/**
+* Inject CSS @font-face rules.
+* Permanent — no cleanup on unmount. Deduplicates by content hash.
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* @param family - The font-family name
+* @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
+* @param options - Optional settings (e.g. Shadow DOM root)
+*
+* @example Single weight
+* ```tsx
+* function App() {
+*   useFontFace('Brand Sans', {
+*     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+*     fontWeight: '400 700',
+*     fontDisplay: 'swap',
+*   });
+*
+*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+* }
+* ```
+*
+* @example Multiple weights
+* ```tsx
+* function App() {
+*   useFontFace('Brand Sans', [
+*     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+*     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+*   ]);
+*
+*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+* }
+* ```
+*/
+function useFontFace(family, input, options) {
+	if (!family) return;
+	const descriptors = Array.isArray(input) ? input : [input];
+	const target = getStyleTarget();
+	if (target.mode === "ssr") {
+		for (const desc of descriptors) {
+			const hash = fontFaceContentHash(family, desc);
+			const css = formatFontFaceRule(family, desc);
+			target.collector.collectFontFace(hash, css);
+		}
+		return;
+	}
+	if (target.mode === "rsc") {
+		for (const desc of descriptors) {
+			const hash = fontFaceContentHash(family, desc);
+			const css = formatFontFaceRule(family, desc);
+			pushRSCCSS(target.cache, `__ff:${hash}`, css);
+		}
+		return;
+	}
+	const injector = getGlobalInjector();
+	for (const desc of descriptors) injector.fontFace(family, desc, { root: options?.root });
+}
+//#endregion
+//#region src/hooks/useCounterStyle.ts
+let clientCounterStyleCounter = 0;
+const clientContentToName = /* @__PURE__ */ new Map();
+/**
+* Inject a CSS @counter-style rule and return the generated name.
+* Permanent — no cleanup on unmount. Deduplicates by name.
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* @example Basic usage
+* ```tsx
+* function EmojiList() {
+*   const styleName = useCounterStyle({
+*     system: 'cyclic',
+*     symbols: '"👍"',
+*     suffix: '" "',
+*   }, { name: 'thumbs' });
+*
+*   return (
+*     <ol style={{ listStyleType: styleName }}>
+*       <li>First</li>
+*       <li>Second</li>
+*     </ol>
+*   );
+* }
+* ```
+*
+*/
+function useCounterStyle(descriptors, options) {
+	if (!descriptors || !descriptors.system) return "";
+	const target = getStyleTarget();
+	if (target.mode === "ssr") {
+		const actualName = target.collector.allocateCounterStyleName(options?.name);
+		const css = formatCounterStyleRule(actualName, descriptors);
+		target.collector.collectCounterStyle(actualName, css);
+		return actualName;
+	}
+	if (target.mode === "rsc") {
+		const serializedContent = JSON.stringify(descriptors);
+		const key = `__cs:${options?.name ?? ""}:${serializedContent}`;
+		const existingName = target.cache.generatedNames.get(key);
+		if (existingName) return existingName;
+		const actualName = options?.name ?? `cs${hashString(serializedContent)}`;
+		const css = formatCounterStyleRule(actualName, descriptors);
+		pushRSCCSS(target.cache, key, css);
+		target.cache.generatedNames.set(key, actualName);
+		return actualName;
+	}
+	const serializedContent = JSON.stringify(descriptors);
+	const cacheKey = `${options?.name ?? ""}:${serializedContent}`;
+	const existingName = clientContentToName.get(cacheKey);
+	if (existingName) return existingName;
+	const name = options?.name ?? `cs${clientCounterStyleCounter++}`;
+	clientContentToName.set(cacheKey, name);
+	getGlobalInjector().counterStyle(name, descriptors, { root: options?.root });
+	return name;
+}
+//#endregion
 export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+
+//# sourceMappingURL=index.js.map