@tenphi/tasty 0.0.0-snapshot.bbd10c7 → 0.0.0-snapshot.bbd36bd

package/dist/font-face/index.js

@@ -1,63 +0,0 @@
-//#region src/font-face/index.ts
-const FONT_FACE_KEY = "@fontFace";
-/**
-* Check if styles object has local @fontFace definition.
-*/
-function hasLocalFontFace(styles) {
-	return FONT_FACE_KEY in styles;
-}
-/**
-* Extract local @fontFace from styles object.
-* Returns null if no local font faces (fast path).
-*/
-function extractLocalFontFace(styles) {
-	const fontFace = styles[FONT_FACE_KEY];
-	if (!fontFace || typeof fontFace !== "object") return null;
-	return fontFace;
-}
-const FONT_FACE_DESCRIPTOR_MAP = {
-	fontWeight: "font-weight",
-	fontStyle: "font-style",
-	fontStretch: "font-stretch",
-	fontDisplay: "font-display",
-	unicodeRange: "unicode-range",
-	ascentOverride: "ascent-override",
-	descentOverride: "descent-override",
-	lineGapOverride: "line-gap-override",
-	sizeAdjust: "size-adjust",
-	fontFeatureSettings: "font-feature-settings",
-	fontVariationSettings: "font-variation-settings"
-};
-/**
-* Format the inner declarations of a @font-face rule (no wrapper).
-* Used by the injector which needs selector and declarations separately.
-*/
-function formatFontFaceDeclarations(family, descriptors) {
-	const parts = [];
-	parts.push(`font-family: "${family}";`);
-	parts.push(`src: ${descriptors.src};`);
-	for (const [key, cssName] of Object.entries(FONT_FACE_DESCRIPTOR_MAP)) {
-		const value = descriptors[key];
-		if (value !== void 0) parts.push(`${cssName}: ${value};`);
-	}
-	return parts.join(" ");
-}
-/**
-* Format a single @font-face rule as CSS.
-*/
-function formatFontFaceRule(family, descriptors) {
-	return `@font-face { ${formatFontFaceDeclarations(family, descriptors)} }`;
-}
-/**
-* Generate a content hash for deduplication of a single font-face rule.
-*/
-function fontFaceContentHash(family, descriptors) {
-	return JSON.stringify({
-		family,
-		...descriptors
-	});
-}
-//#endregion
-export { extractLocalFontFace, fontFaceContentHash, formatFontFaceDeclarations, formatFontFaceRule, hasLocalFontFace };
-
-//# sourceMappingURL=index.js.map

package/dist/font-face/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/font-face/index.ts"],"sourcesContent":["/**\n * Font Face Utilities\n *\n * Utilities for extracting and processing CSS @font-face definitions in styles.\n * Font-face rules are permanent once injected and do not need cleanup.\n */\n\nimport type { FontFaceDescriptors, FontFaceInput } from '../injector/types';\nimport type { Styles } from '../styles/types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst FONT_FACE_KEY = '@fontFace';\n\n// ============================================================================\n// Extraction Functions\n// ============================================================================\n\n/**\n * Check if styles object has local @fontFace definition.\n */\nexport function hasLocalFontFace(styles: Styles): boolean {\n  return FONT_FACE_KEY in styles;\n}\n\n/**\n * Extract local @fontFace from styles object.\n * Returns null if no local font faces (fast path).\n */\nexport function extractLocalFontFace(\n  styles: Styles,\n): Record<string, FontFaceInput> | null {\n  const fontFace = styles[FONT_FACE_KEY];\n  if (!fontFace || typeof fontFace !== 'object') {\n    return null;\n  }\n  return fontFace as Record<string, FontFaceInput>;\n}\n\n// ============================================================================\n// CSS Formatting\n// ============================================================================\n\nconst FONT_FACE_DESCRIPTOR_MAP: Record<string, string> = {\n  fontWeight: 'font-weight',\n  fontStyle: 'font-style',\n  fontStretch: 'font-stretch',\n  fontDisplay: 'font-display',\n  unicodeRange: 'unicode-range',\n  ascentOverride: 'ascent-override',\n  descentOverride: 'descent-override',\n  lineGapOverride: 'line-gap-override',\n  sizeAdjust: 'size-adjust',\n  fontFeatureSettings: 'font-feature-settings',\n  fontVariationSettings: 'font-variation-settings',\n};\n\n/**\n * Format the inner declarations of a @font-face rule (no wrapper).\n * Used by the injector which needs selector and declarations separately.\n */\nexport function formatFontFaceDeclarations(\n  family: string,\n  descriptors: FontFaceDescriptors,\n): string {\n  const parts: string[] = [];\n\n  parts.push(`font-family: \"${family}\";`);\n  parts.push(`src: ${descriptors.src};`);\n\n  for (const [key, cssName] of Object.entries(FONT_FACE_DESCRIPTOR_MAP)) {\n    const value = descriptors[key as keyof FontFaceDescriptors];\n    if (value !== undefined) {\n      parts.push(`${cssName}: ${value};`);\n    }\n  }\n\n  return parts.join(' ');\n}\n\n/**\n * Format a single @font-face rule as CSS.\n */\nexport function formatFontFaceRule(\n  family: string,\n  descriptors: FontFaceDescriptors,\n): string {\n  return `@font-face { ${formatFontFaceDeclarations(family, descriptors)} }`;\n}\n\n/**\n * Format all @font-face rules for a family (handles single or array form).\n * Returns an array of CSS strings, one per rule.\n */\nexport function formatFontFaceRules(\n  family: string,\n  input: FontFaceInput,\n): string[] {\n  const descriptors = Array.isArray(input) ? input : [input];\n  return descriptors.map((desc) => formatFontFaceRule(family, desc));\n}\n\n/**\n * Generate a content hash for deduplication of a single font-face rule.\n */\nexport function fontFaceContentHash(\n  family: string,\n  descriptors: FontFaceDescriptors,\n): string {\n  return JSON.stringify({ family, ...descriptors });\n}\n"],"mappings":";AAcA,MAAM,gBAAgB;;;;AAStB,SAAgB,iBAAiB,QAAyB;AACxD,QAAO,iBAAiB;;;;;;AAO1B,SAAgB,qBACd,QACsC;CACtC,MAAM,WAAW,OAAO;AACxB,KAAI,CAAC,YAAY,OAAO,aAAa,SACnC,QAAO;AAET,QAAO;;AAOT,MAAM,2BAAmD;CACvD,YAAY;CACZ,WAAW;CACX,aAAa;CACb,aAAa;CACb,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,iBAAiB;CACjB,YAAY;CACZ,qBAAqB;CACrB,uBAAuB;CACxB;;;;;AAMD,SAAgB,2BACd,QACA,aACQ;CACR,MAAM,QAAkB,EAAE;AAE1B,OAAM,KAAK,iBAAiB,OAAO,IAAI;AACvC,OAAM,KAAK,QAAQ,YAAY,IAAI,GAAG;AAEtC,MAAK,MAAM,CAAC,KAAK,YAAY,OAAO,QAAQ,yBAAyB,EAAE;EACrE,MAAM,QAAQ,YAAY;AAC1B,MAAI,UAAU,KAAA,EACZ,OAAM,KAAK,GAAG,QAAQ,IAAI,MAAM,GAAG;;AAIvC,QAAO,MAAM,KAAK,IAAI;;;;;AAMxB,SAAgB,mBACd,QACA,aACQ;AACR,QAAO,gBAAgB,2BAA2B,QAAQ,YAAY,CAAC;;;;;AAkBzE,SAAgB,oBACd,QACA,aACQ;AACR,QAAO,KAAK,UAAU;EAAE;EAAQ,GAAG;EAAa,CAAC"}

package/dist/hooks/index.d.ts

@@ -1,7 +0,0 @@
-import { UseStylesOptions, UseStylesResult, useStyles } from "./useStyles.js";
-import { useGlobalStyles } from "./useGlobalStyles.js";
-import { useRawCSS } from "./useRawCSS.js";
-import { useKeyframes } from "./useKeyframes.js";
-import { UsePropertyOptions, useProperty } from "./useProperty.js";
-import { useFontFace } from "./useFontFace.js";
-import { useCounterStyle } from "./useCounterStyle.js";

package/dist/hooks/useCounterStyle.d.ts

@@ -1,50 +0,0 @@
-import { CounterStyleDescriptors } from "../injector/types.js";
-
-//#region src/hooks/useCounterStyle.d.ts
-interface UseCounterStyleOptions {
-  name?: string;
-  root?: Document | ShadowRoot;
-}
-/**
- * Hook to inject a CSS @counter-style rule and return the generated name.
- * Permanent — no cleanup on unmount. Deduplicates by name.
- *
- * @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>
- *   );
- * }
- * ```
- *
- * @example Factory function with dependencies
- * ```tsx
- * function DynamicList({ marker }: { marker: string }) {
- *   const styleName = useCounterStyle(
- *     () => ({
- *       system: 'cyclic',
- *       symbols: `"${marker}"`,
- *       suffix: '" "',
- *     }),
- *     [marker],
- *   );
- *
- *   return <ol style={{ listStyleType: styleName }}>...</ol>;
- * }
- * ```
- */
-declare function useCounterStyle(descriptors: CounterStyleDescriptors, options?: UseCounterStyleOptions): string;
-declare function useCounterStyle(factory: () => CounterStyleDescriptors, deps: readonly unknown[], options?: UseCounterStyleOptions): string;
-//#endregion
-export { useCounterStyle };
-//# sourceMappingURL=useCounterStyle.d.ts.map

package/dist/hooks/useCounterStyle.js

@@ -1,45 +0,0 @@
-import { formatCounterStyleRule } from "../counter-style/index.js";
-import { getGlobalInjector } from "../config.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo } from "react";
-//#region src/hooks/useCounterStyle.ts
-let clientCounterStyleCounter = 0;
-function useCounterStyle(descriptorsOrFactory, depsOrOptions, options) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const isFactory = typeof descriptorsOrFactory === "function";
-	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
-	const opts = isFactory ? options : depsOrOptions;
-	const inputKey = useMemo(() => isFactory ? null : JSON.stringify(descriptorsOrFactory), [isFactory ? null : descriptorsOrFactory]);
-	const descriptorsData = useMemo(() => {
-		const descriptors = isFactory ? descriptorsOrFactory() : descriptorsOrFactory;
-		if (!descriptors || !descriptors.system) return null;
-		return descriptors;
-	}, isFactory ? deps ?? [] : [inputKey]);
-	const name = useMemo(() => {
-		if (!descriptorsData) return "";
-		if (ssrCollector) {
-			const actualName = ssrCollector.allocateCounterStyleName(opts?.name);
-			const css = formatCounterStyleRule(actualName, descriptorsData);
-			ssrCollector.collectCounterStyle(actualName, css);
-			return actualName;
-		}
-		return opts?.name ?? `cs${clientCounterStyleCounter++}`;
-	}, [
-		descriptorsData,
-		opts?.name,
-		ssrCollector
-	]);
-	useInsertionEffect(() => {
-		if (!descriptorsData || !name) return;
-		getGlobalInjector().counterStyle(name, descriptorsData, { root: opts?.root });
-	}, [
-		descriptorsData,
-		name,
-		opts?.root
-	]);
-	return name;
-}
-//#endregion
-export { useCounterStyle };
-
-//# sourceMappingURL=useCounterStyle.js.map

package/dist/hooks/useCounterStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCounterStyle.js","names":[],"sources":["../../src/hooks/useCounterStyle.ts"],"sourcesContent":["import { useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { formatCounterStyleRule } from '../counter-style';\nimport type { CounterStyleDescriptors } from '../injector/types';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseCounterStyleOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nlet clientCounterStyleCounter = 0;\n\n/**\n * Hook to inject a CSS @counter-style rule and return the generated name.\n * Permanent — no cleanup on unmount. Deduplicates by name.\n *\n * @example Basic usage\n * ```tsx\n * function EmojiList() {\n *   const styleName = useCounterStyle({\n *     system: 'cyclic',\n *     symbols: '\"👍\"',\n *     suffix: '\" \"',\n *   }, { name: 'thumbs' });\n *\n *   return (\n *     <ol style={{ listStyleType: styleName }}>\n *       <li>First</li>\n *       <li>Second</li>\n *     </ol>\n *   );\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function DynamicList({ marker }: { marker: string }) {\n *   const styleName = useCounterStyle(\n *     () => ({\n *       system: 'cyclic',\n *       symbols: `\"${marker}\"`,\n *       suffix: '\" \"',\n *     }),\n *     [marker],\n *   );\n *\n *   return <ol style={{ listStyleType: styleName }}>...</ol>;\n * }\n * ```\n */\n\n// Overload 1: Static descriptors\nexport function useCounterStyle(\n  descriptors: CounterStyleDescriptors,\n  options?: UseCounterStyleOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useCounterStyle(\n  factory: () => CounterStyleDescriptors,\n  deps: readonly unknown[],\n  options?: UseCounterStyleOptions,\n): string;\n\n// Implementation\nexport function useCounterStyle(\n  descriptorsOrFactory:\n    | CounterStyleDescriptors\n    | (() => CounterStyleDescriptors),\n  depsOrOptions?: readonly unknown[] | UseCounterStyleOptions,\n  options?: UseCounterStyleOptions,\n): string {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  const isFactory = typeof descriptorsOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseCounterStyleOptions | undefined);\n\n  // Stable key for the static path — avoids re-triggering when caller\n  // passes an inline object literal with the same content.\n  const inputKey = useMemo(\n    () => (isFactory ? null : JSON.stringify(descriptorsOrFactory)),\n    [isFactory ? null : descriptorsOrFactory],\n  );\n\n  const descriptorsData = useMemo(\n    () => {\n      const descriptors = isFactory\n        ? (descriptorsOrFactory as () => CounterStyleDescriptors)()\n        : (descriptorsOrFactory as CounterStyleDescriptors);\n\n      if (!descriptors || !descriptors.system) {\n        return null;\n      }\n\n      return descriptors;\n    },\n\n    isFactory ? (deps ?? []) : [inputKey],\n  );\n\n  const name = useMemo(() => {\n    if (!descriptorsData) {\n      return '';\n    }\n\n    // SSR path: format and collect, return name without DOM injection\n    if (ssrCollector) {\n      const actualName = ssrCollector.allocateCounterStyleName(opts?.name);\n      const css = formatCounterStyleRule(actualName, descriptorsData);\n      ssrCollector.collectCounterStyle(actualName, css);\n      return actualName;\n    }\n\n    // Client path: return the name (injection happens in useInsertionEffect)\n    return opts?.name ?? `cs${clientCounterStyleCounter++}`;\n  }, [descriptorsData, opts?.name, ssrCollector]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!descriptorsData || !name) return;\n\n    const injector = getGlobalInjector();\n    injector.counterStyle(name, descriptorsData, { root: opts?.root });\n  }, [descriptorsData, name, opts?.root]);\n\n  return name;\n}\n"],"mappings":";;;;;AAYA,IAAI,4BAA4B;AAuDhC,SAAgB,gBACd,sBAGA,eACA,SACQ;CACR,MAAM,eAAe,2BAA2B;CAEhD,MAAM,YAAY,OAAO,yBAAyB;CAElD,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAIL,MAAM,WAAW,cACR,YAAY,OAAO,KAAK,UAAU,qBAAqB,EAC9D,CAAC,YAAY,OAAO,qBAAqB,CAC1C;CAED,MAAM,kBAAkB,cAChB;EACJ,MAAM,cAAc,YACf,sBAAwD,GACxD;AAEL,MAAI,CAAC,eAAe,CAAC,YAAY,OAC/B,QAAO;AAGT,SAAO;IAGT,YAAa,QAAQ,EAAE,GAAI,CAAC,SAAS,CACtC;CAED,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,gBACH,QAAO;AAIT,MAAI,cAAc;GAChB,MAAM,aAAa,aAAa,yBAAyB,MAAM,KAAK;GACpE,MAAM,MAAM,uBAAuB,YAAY,gBAAgB;AAC/D,gBAAa,oBAAoB,YAAY,IAAI;AACjD,UAAO;;AAIT,SAAO,MAAM,QAAQ,KAAK;IACzB;EAAC;EAAiB,MAAM;EAAM;EAAa,CAAC;AAG/C,0BAAyB;AACvB,MAAI,CAAC,mBAAmB,CAAC,KAAM;AAEd,qBAAmB,CAC3B,aAAa,MAAM,iBAAiB,EAAE,MAAM,MAAM,MAAM,CAAC;IACjE;EAAC;EAAiB;EAAM,MAAM;EAAK,CAAC;AAEvC,QAAO"}

package/dist/hooks/useFontFace.d.ts

@@ -1,43 +0,0 @@
-import { FontFaceInput } from "../injector/types.js";
-
-//#region src/hooks/useFontFace.d.ts
-interface UseFontFaceOptions {
-  root?: Document | ShadowRoot;
-}
-/**
- * Hook to inject CSS @font-face rules.
- * Permanent — no cleanup on unmount. Deduplicates by content hash.
- *
- * @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>;
- * }
- * ```
- */
-declare function useFontFace(family: string, input: FontFaceInput, options?: UseFontFaceOptions): void;
-//#endregion
-export { useFontFace };
-//# sourceMappingURL=useFontFace.d.ts.map

package/dist/hooks/useFontFace.js

@@ -1,69 +0,0 @@
-import { fontFaceContentHash, formatFontFaceRule } from "../font-face/index.js";
-import { getGlobalInjector } from "../config.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo } from "react";
-//#region src/hooks/useFontFace.ts
-/**
-* Hook to inject CSS @font-face rules.
-* Permanent — no cleanup on unmount. Deduplicates by content hash.
-*
-* @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) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const inputKey = useMemo(() => JSON.stringify(input), [input]);
-	useMemo(() => {
-		if (!ssrCollector || !family) return;
-		const descriptors = Array.isArray(input) ? input : [input];
-		for (const desc of descriptors) {
-			const hash = fontFaceContentHash(family, desc);
-			const css = formatFontFaceRule(family, desc);
-			ssrCollector.collectFontFace(hash, css);
-		}
-	}, [
-		ssrCollector,
-		family,
-		inputKey
-	]);
-	useInsertionEffect(() => {
-		if (!family) return;
-		const injector = getGlobalInjector();
-		const descriptors = Array.isArray(input) ? input : [input];
-		for (const desc of descriptors) injector.fontFace(family, desc, { root: options?.root });
-	}, [
-		family,
-		inputKey,
-		options?.root
-	]);
-}
-//#endregion
-export { useFontFace };
-
-//# sourceMappingURL=useFontFace.js.map

package/dist/hooks/useFontFace.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFontFace.js","names":[],"sources":["../../src/hooks/useFontFace.ts"],"sourcesContent":["import { useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { fontFaceContentHash, formatFontFaceRule } from '../font-face';\nimport type { FontFaceDescriptors, FontFaceInput } from '../injector/types';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseFontFaceOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject CSS @font-face rules.\n * Permanent — no cleanup on unmount. Deduplicates by content hash.\n *\n * @param family - The font-family name\n * @param input - Single descriptor object or array of descriptors (for multiple weights/styles)\n * @param options - Optional settings (e.g. Shadow DOM root)\n *\n * @example Single weight\n * ```tsx\n * function App() {\n *   useFontFace('Brand Sans', {\n *     src: 'url(\"/fonts/brand-sans.woff2\") format(\"woff2\")',\n *     fontWeight: '400 700',\n *     fontDisplay: 'swap',\n *   });\n *\n *   return <div style={{ fontFamily: '\"Brand Sans\", sans-serif' }}>Hello</div>;\n * }\n * ```\n *\n * @example Multiple weights\n * ```tsx\n * function App() {\n *   useFontFace('Brand Sans', [\n *     { src: 'url(\"/fonts/brand-regular.woff2\") format(\"woff2\")', fontWeight: 400, fontDisplay: 'swap' },\n *     { src: 'url(\"/fonts/brand-bold.woff2\") format(\"woff2\")', fontWeight: 700, fontDisplay: 'swap' },\n *   ]);\n *\n *   return <div style={{ fontFamily: '\"Brand Sans\", sans-serif' }}>Hello</div>;\n * }\n * ```\n */\nexport function useFontFace(\n  family: string,\n  input: FontFaceInput,\n  options?: UseFontFaceOptions,\n): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  const inputKey = useMemo(() => JSON.stringify(input), [input]);\n\n  // SSR path: collect @font-face CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !family) return;\n\n    const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n      ? input\n      : [input];\n\n    for (const desc of descriptors) {\n      const hash = fontFaceContentHash(family, desc);\n      const css = formatFontFaceRule(family, desc);\n      ssrCollector.collectFontFace(hash, css);\n    }\n  }, [ssrCollector, family, inputKey]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!family) return;\n\n    const injector = getGlobalInjector();\n    const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n      ? input\n      : [input];\n\n    for (const desc of descriptors) {\n      injector.fontFace(family, desc, { root: options?.root });\n    }\n  }, [family, inputKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,YACd,QACA,OACA,SACM;CACN,MAAM,eAAe,2BAA2B;CAEhD,MAAM,WAAW,cAAc,KAAK,UAAU,MAAM,EAAE,CAAC,MAAM,CAAC;AAG9D,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,OAAQ;EAE9B,MAAM,cAAqC,MAAM,QAAQ,MAAM,GAC3D,QACA,CAAC,MAAM;AAEX,OAAK,MAAM,QAAQ,aAAa;GAC9B,MAAM,OAAO,oBAAoB,QAAQ,KAAK;GAC9C,MAAM,MAAM,mBAAmB,QAAQ,KAAK;AAC5C,gBAAa,gBAAgB,MAAM,IAAI;;IAExC;EAAC;EAAc;EAAQ;EAAS,CAAC;AAGpC,0BAAyB;AACvB,MAAI,CAAC,OAAQ;EAEb,MAAM,WAAW,mBAAmB;EACpC,MAAM,cAAqC,MAAM,QAAQ,MAAM,GAC3D,QACA,CAAC,MAAM;AAEX,OAAK,MAAM,QAAQ,YACjB,UAAS,SAAS,QAAQ,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC;IAEzD;EAAC;EAAQ;EAAU,SAAS;EAAK,CAAC"}

package/dist/hooks/useGlobalStyles.d.ts

@@ -1,30 +0,0 @@
-import { Styles } from "../styles/types.js";
-
-//#region src/hooks/useGlobalStyles.d.ts
-/**
- * Hook to 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.
- *
- * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
- * @param styles - Tasty styles object
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   useGlobalStyles('.card', {
- *     padding: '2x',
- *     radius: '1r',
- *     fill: '#white',
- *   });
- *
- *   return <div className="card">Content</div>;
- * }
- * ```
- */
-declare function useGlobalStyles(selector: string, styles?: Styles): void;
-//#endregion
-export { useGlobalStyles };
-//# sourceMappingURL=useGlobalStyles.d.ts.map

package/dist/hooks/useGlobalStyles.js

@@ -1,77 +0,0 @@
-import { renderStyles } from "../pipeline/index.js";
-import { getConfig } from "../config.js";
-import { injectGlobal } from "../injector/index.js";
-import { collectAutoInferredProperties } from "../ssr/collect-auto-properties.js";
-import { formatGlobalRules } from "../ssr/format-global-rules.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { resolveRecipes } from "../utils/resolve-recipes.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
-//#region src/hooks/useGlobalStyles.ts
-/**
-* Hook to 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.
-*
-* @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
-* @param styles - Tasty styles object
-*
-* @example
-* ```tsx
-* function MyComponent() {
-*   useGlobalStyles('.card', {
-*     padding: '2x',
-*     radius: '1r',
-*     fill: '#white',
-*   });
-*
-*   return <div className="card">Content</div>;
-* }
-* ```
-*/
-function useGlobalStyles(selector, styles) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const disposeRef = useRef(null);
-	const resolvedStyles = useMemo(() => {
-		if (!styles) return styles;
-		return resolveRecipes(styles);
-	}, [styles]);
-	const styleResults = useMemo(() => {
-		if (!resolvedStyles) return [];
-		if (!selector) {
-			console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
-			return [];
-		}
-		return renderStyles(resolvedStyles, selector);
-	}, [resolvedStyles, selector]);
-	useMemo(() => {
-		if (!ssrCollector || styleResults.length === 0) return;
-		ssrCollector.collectInternals();
-		const css = formatGlobalRules(styleResults);
-		if (css) {
-			const key = `global:${selector}:${css.length}:${css.slice(0, 64)}`;
-			ssrCollector.collectGlobalStyles(key, css);
-		}
-		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);
-	}, [
-		ssrCollector,
-		styleResults,
-		selector
-	]);
-	useInsertionEffect(() => {
-		disposeRef.current?.();
-		if (styleResults.length > 0) {
-			const { dispose } = injectGlobal(styleResults);
-			disposeRef.current = dispose;
-		} else disposeRef.current = null;
-		return () => {
-			disposeRef.current?.();
-			disposeRef.current = null;
-		};
-	}, [styleResults]);
-}
-//#endregion
-export { useGlobalStyles };
-
-//# sourceMappingURL=useGlobalStyles.js.map

package/dist/hooks/useGlobalStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { getConfig } from '../config';\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { collectAutoInferredProperties } from '../ssr/collect-auto-properties';\nimport { formatGlobalRules } from '../ssr/format-global-rules';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\nimport type { Styles } from '../styles/types';\nimport { resolveRecipes } from '../utils/resolve-recipes';\n\n/**\n * Hook to inject global styles for a given selector.\n * Useful for styling elements by selector without generating classNames.\n *\n * SSR-aware: when a ServerStyleCollector is available, CSS is collected\n * during the render phase instead of being injected into the DOM.\n *\n * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')\n * @param styles - Tasty styles object\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   useGlobalStyles('.card', {\n *     padding: '2x',\n *     radius: '1r',\n *     fill: '#white',\n *   });\n *\n *   return <div className=\"card\">Content</div>;\n * }\n * ```\n */\nexport function useGlobalStyles(selector: string, styles?: Styles): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Resolve recipes before rendering (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Render styles with the provided selector\n  // Note: renderStyles overload with selector string returns StyleResult[] directly\n  const styleResults = useMemo((): StyleResult[] => {\n    if (!resolvedStyles) return [];\n\n    if (!selector) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(\n          '[Tasty] useGlobalStyles: selector is required and cannot be empty. ' +\n            'Styles will not be injected.',\n        );\n      }\n      return [];\n    }\n\n    const result = renderStyles(resolvedStyles, selector);\n    return result as StyleResult[];\n  }, [resolvedStyles, selector]);\n\n  // SSR path: collect CSS during render\n  useMemo(() => {\n    if (!ssrCollector || styleResults.length === 0) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = `global:${selector}:${css.length}:${css.slice(0, 64)}`;\n      ssrCollector.collectGlobalStyles(key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);\n    }\n  }, [ssrCollector, styleResults, selector]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (styleResults.length > 0) {\n      const { dispose } = injectGlobal(styleResults);\n      disposeRef.current = dispose;\n    } else {\n      disposeRef.current = null;\n    }\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [styleResults]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,gBAAgB,UAAkB,QAAuB;CACvE,MAAM,eAAe,2BAA2B;CAEhD,MAAM,aAAa,OAA4B,KAAK;CAGpD,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,eAAe,OAAO;IAC5B,CAAC,OAAO,CAAC;CAIZ,MAAM,eAAe,cAA6B;AAChD,MAAI,CAAC,eAAgB,QAAO,EAAE;AAE9B,MAAI,CAAC,UAAU;AAEX,WAAQ,KACN,kGAED;AAEH,UAAO,EAAE;;AAIX,SADe,aAAa,gBAAgB,SAAS;IAEpD,CAAC,gBAAgB,SAAS,CAAC;AAG9B,eAAc;AACZ,MAAI,CAAC,gBAAgB,aAAa,WAAW,EAAG;AAEhD,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,UAAU,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AAChE,gBAAa,oBAAoB,KAAK,IAAI;;AAG5C,MAAI,WAAW,CAAC,sBAAsB,MACpC,+BAA8B,cAAc,cAAc,eAAe;IAE1E;EAAC;EAAc;EAAc;EAAS,CAAC;AAG1C,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,aAAa,SAAS,GAAG;GAC3B,MAAM,EAAE,YAAY,aAAa,aAAa;AAC9C,cAAW,UAAU;QAErB,YAAW,UAAU;AAGvB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,aAAa,CAAC"}

package/dist/hooks/useKeyframes.d.ts

@@ -1,56 +0,0 @@
-import { KeyframesSteps } from "../injector/types.js";
-
-//#region src/hooks/useKeyframes.d.ts
-interface UseKeyframesOptions {
-  name?: string;
-  root?: Document | ShadowRoot;
-}
-/**
- * Hook to inject CSS @keyframes and return the generated animation name.
- * Handles keyframes injection with proper cleanup on unmount or dependency changes.
- *
- * @example Basic usage - steps object is the dependency
- * ```tsx
- * function MyComponent() {
- *   const bounce = useKeyframes({
- *     '0%': { transform: 'scale(1)' },
- *     '50%': { transform: 'scale(1.1)' },
- *     '100%': { transform: 'scale(1)' },
- *   });
- *
- *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;
- * }
- * ```
- *
- * @example With custom name
- * ```tsx
- * function MyComponent() {
- *   const fadeIn = useKeyframes(
- *     { from: { opacity: 0 }, to: { opacity: 1 } },
- *     { name: 'fadeIn' }
- *   );
- *
- *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;
- * }
- * ```
- *
- * @example Factory function with dependencies
- * ```tsx
- * function MyComponent({ scale }: { scale: number }) {
- *   const pulse = useKeyframes(
- *     () => ({
- *       '0%': { transform: 'scale(1)' },
- *       '100%': { transform: `scale(${scale})` },
- *     }),
- *     [scale]
- *   );
- *
- *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;
- * }
- * ```
- */
-declare function useKeyframes(steps: KeyframesSteps, options?: UseKeyframesOptions): string;
-declare function useKeyframes(factory: () => KeyframesSteps, deps: readonly unknown[], options?: UseKeyframesOptions): string;
-//#endregion
-export { useKeyframes };
-//# sourceMappingURL=useKeyframes.d.ts.map

package/dist/hooks/useKeyframes.js

@@ -1,63 +0,0 @@
-import { keyframes } from "../injector/index.js";
-import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
-//#region src/hooks/useKeyframes.ts
-function useKeyframes(stepsOrFactory, depsOrOptions, options) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const isFactory = typeof stepsOrFactory === "function";
-	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
-	const opts = isFactory ? options : depsOrOptions;
-	const stepsData = useMemo(() => {
-		const steps = isFactory ? stepsOrFactory() : stepsOrFactory;
-		if (!steps || Object.keys(steps).length === 0) return null;
-		return steps;
-	}, isFactory ? deps ?? [] : [stepsOrFactory]);
-	const renderResultRef = useRef(null);
-	const effectResultRef = useRef(null);
-	const name = useMemo(() => {
-		if (!stepsData) return "";
-		if (ssrCollector) {
-			const actualName = ssrCollector.allocateKeyframeName(opts?.name);
-			const css = formatKeyframesCSS(actualName, stepsData);
-			ssrCollector.collectKeyframes(actualName, css);
-			return actualName;
-		}
-		renderResultRef.current?.dispose();
-		renderResultRef.current = null;
-		const result = keyframes(stepsData, {
-			name: opts?.name,
-			root: opts?.root
-		});
-		renderResultRef.current = result;
-		return result.toString();
-	}, [
-		stepsData,
-		opts?.name,
-		opts?.root,
-		ssrCollector
-	]);
-	useInsertionEffect(() => {
-		effectResultRef.current?.dispose();
-		effectResultRef.current = null;
-		if (stepsData) effectResultRef.current = keyframes(stepsData, {
-			name: opts?.name,
-			root: opts?.root
-		});
-		return () => {
-			effectResultRef.current?.dispose();
-			effectResultRef.current = null;
-			renderResultRef.current?.dispose();
-			renderResultRef.current = null;
-		};
-	}, [
-		stepsData,
-		opts?.name,
-		opts?.root
-	]);
-	return name;
-}
-//#endregion
-export { useKeyframes };
-
-//# sourceMappingURL=useKeyframes.js.map

package/dist/hooks/useKeyframes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { keyframes } from '../injector';\nimport type { KeyframesResult, KeyframesSteps } from '../injector/types';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseKeyframesOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject CSS @keyframes and return the generated animation name.\n * Handles keyframes injection with proper cleanup on unmount or dependency changes.\n *\n * @example Basic usage - steps object is the dependency\n * ```tsx\n * function MyComponent() {\n *   const bounce = useKeyframes({\n *     '0%': { transform: 'scale(1)' },\n *     '50%': { transform: 'scale(1.1)' },\n *     '100%': { transform: 'scale(1)' },\n *   });\n *\n *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;\n * }\n * ```\n *\n * @example With custom name\n * ```tsx\n * function MyComponent() {\n *   const fadeIn = useKeyframes(\n *     { from: { opacity: 0 }, to: { opacity: 1 } },\n *     { name: 'fadeIn' }\n *   );\n *\n *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function MyComponent({ scale }: { scale: number }) {\n *   const pulse = useKeyframes(\n *     () => ({\n *       '0%': { transform: 'scale(1)' },\n *       '100%': { transform: `scale(${scale})` },\n *     }),\n *     [scale]\n *   );\n *\n *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;\n * }\n * ```\n */\n\n// Overload 1: Static steps object\nexport function useKeyframes(\n  steps: KeyframesSteps,\n  options?: UseKeyframesOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useKeyframes(\n  factory: () => KeyframesSteps,\n  deps: readonly unknown[],\n  options?: UseKeyframesOptions,\n): string;\n\n// Implementation\nexport function useKeyframes(\n  stepsOrFactory: KeyframesSteps | (() => KeyframesSteps),\n  depsOrOptions?: readonly unknown[] | UseKeyframesOptions,\n  options?: UseKeyframesOptions,\n): string {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  // Detect which overload is being used\n  const isFactory = typeof stepsOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseKeyframesOptions | undefined);\n\n  // Memoize the keyframes steps to get a stable reference\n  const stepsData = useMemo(\n    () => {\n      const steps = isFactory\n        ? (stepsOrFactory as () => KeyframesSteps)()\n        : (stepsOrFactory as KeyframesSteps);\n\n      if (!steps || Object.keys(steps).length === 0) {\n        return null;\n      }\n\n      return steps;\n    },\n\n    isFactory ? (deps ?? []) : [stepsOrFactory],\n  );\n\n  // Store keyframes results for cleanup (client only)\n  const renderResultRef = useRef<KeyframesResult | null>(null);\n  const effectResultRef = useRef<KeyframesResult | null>(null);\n\n  const name = useMemo(() => {\n    if (!stepsData) {\n      return '';\n    }\n\n    // SSR path: format and collect, return name without DOM injection\n    if (ssrCollector) {\n      const actualName = ssrCollector.allocateKeyframeName(opts?.name);\n      const css = formatKeyframesCSS(actualName, stepsData);\n      ssrCollector.collectKeyframes(actualName, css);\n      return actualName;\n    }\n\n    // Client path: inject keyframes synchronously for immediate name availability\n    renderResultRef.current?.dispose();\n    renderResultRef.current = null;\n\n    const result = keyframes(stepsData, {\n      name: opts?.name,\n      root: opts?.root,\n    });\n\n    renderResultRef.current = result;\n\n    return result.toString();\n  }, [stepsData, opts?.name, opts?.root, ssrCollector]);\n\n  // Client path: handle Strict Mode double-invocation and cleanup\n  useInsertionEffect(() => {\n    effectResultRef.current?.dispose();\n    effectResultRef.current = null;\n\n    if (stepsData) {\n      const result = keyframes(stepsData, {\n        name: opts?.name,\n        root: opts?.root,\n      });\n      effectResultRef.current = result;\n    }\n\n    return () => {\n      effectResultRef.current?.dispose();\n      effectResultRef.current = null;\n      renderResultRef.current?.dispose();\n      renderResultRef.current = null;\n    };\n  }, [stepsData, opts?.name, opts?.root]);\n\n  return name;\n}\n"],"mappings":";;;;;AAuEA,SAAgB,aACd,gBACA,eACA,SACQ;CACR,MAAM,eAAe,2BAA2B;CAGhD,MAAM,YAAY,OAAO,mBAAmB;CAG5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,YAAY,cACV;EACJ,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,MAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;AAGT,SAAO;IAGT,YAAa,QAAQ,EAAE,GAAI,CAAC,eAAe,CAC5C;CAGD,MAAM,kBAAkB,OAA+B,KAAK;CAC5D,MAAM,kBAAkB,OAA+B,KAAK;CAE5D,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,UACH,QAAO;AAIT,MAAI,cAAc;GAChB,MAAM,aAAa,aAAa,qBAAqB,MAAM,KAAK;GAChE,MAAM,MAAM,mBAAmB,YAAY,UAAU;AACrD,gBAAa,iBAAiB,YAAY,IAAI;AAC9C,UAAO;;AAIT,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;EAE1B,MAAM,SAAS,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAEF,kBAAgB,UAAU;AAE1B,SAAO,OAAO,UAAU;IACvB;EAAC;EAAW,MAAM;EAAM,MAAM;EAAM;EAAa,CAAC;AAGrD,0BAAyB;AACvB,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;AAE1B,MAAI,UAKF,iBAAgB,UAJD,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAIJ,eAAa;AACX,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;AAC1B,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;;IAE3B;EAAC;EAAW,MAAM;EAAM,MAAM;EAAK,CAAC;AAEvC,QAAO"}

package/dist/hooks/useProperty.d.ts

@@ -1,79 +0,0 @@
-//#region src/hooks/useProperty.d.ts
-interface UsePropertyOptions {
-  /**
-   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').
-   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
-   */
-  syntax?: string;
-  /**
-   * Whether the property inherits from parent elements
-   * @default true
-   */
-  inherits?: boolean;
-  /**
-   * Initial value for the property.
-   * For color tokens (#name), this defaults to 'transparent' if not specified.
-   */
-  initialValue?: string | number;
-  /**
-   * Shadow root or document to inject into
-   */
-  root?: Document | ShadowRoot;
-}
-/**
- * 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)' }} />;
- * }
- * ```
- */
-declare function useProperty(name: string, options?: UsePropertyOptions): void;
-//#endregion
-export { UsePropertyOptions, useProperty };
-//# sourceMappingURL=useProperty.d.ts.map