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

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

package/dist/hooks/useProperty.js

@@ -1,108 +0,0 @@
-import { getGlobalInjector } from "../config.js";
-import { formatPropertyCSS } from "../ssr/format-property.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo } from "react";
-//#region src/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) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const optionsKey = useMemo(() => {
-		if (!options) return "";
-		return JSON.stringify({
-			syntax: options.syntax,
-			inherits: options.inherits,
-			initialValue: options.initialValue
-		});
-	}, [
-		options?.syntax,
-		options?.inherits,
-		options?.initialValue
-	]);
-	useMemo(() => {
-		if (!ssrCollector || !name) return;
-		ssrCollector.collectInternals();
-		const css = formatPropertyCSS(name, {
-			syntax: options?.syntax,
-			inherits: options?.inherits,
-			initialValue: options?.initialValue
-		});
-		if (css) ssrCollector.collectProperty(name, css);
-	}, [
-		ssrCollector,
-		name,
-		optionsKey
-	]);
-	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,
-		optionsKey,
-		options?.root
-	]);
-}
-//#endregion
-export { useProperty };
-
-//# sourceMappingURL=useProperty.js.map

package/dist/hooks/useProperty.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProperty.js","names":[],"sources":["../../src/hooks/useProperty.ts"],"sourcesContent":["import { useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { formatPropertyCSS } from '../ssr/format-property';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\nexport interface UsePropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').\n   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property.\n   * For color tokens (#name), this defaults to 'transparent' if not specified.\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to register a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * The hook ensures the property is only registered once per root.\n *\n * Accepts tasty token syntax for the property name:\n * - `$name` → defines `--name`\n * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n * - `--name` → defines `--name` (legacy format)\n *\n * @param name - The property token ($name, #name) or CSS property name (--name)\n * @param options - Property configuration\n *\n * @example Basic property with token syntax\n * ```tsx\n * function Spinner() {\n *   useProperty('$rotation', {\n *     syntax: '<angle>',\n *     inherits: false,\n *     initialValue: '0deg',\n *   });\n *\n *   return <div className=\"spinner\" />;\n * }\n * ```\n *\n * @example Color property with token syntax (auto-sets syntax)\n * ```tsx\n * function MyComponent() {\n *   useProperty('#theme', {\n *     initialValue: 'red', // syntax: '<color>' is auto-set\n *   });\n *\n *   // Now --theme-color can be animated with CSS transitions\n *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;\n * }\n * ```\n *\n * @example Legacy format (still supported)\n * ```tsx\n * function ResizableBox() {\n *   useProperty('--box-size', {\n *     syntax: '<length>',\n *     initialValue: '100px',\n *   });\n *\n *   return <div style={{ width: 'var(--box-size)' }} />;\n * }\n * ```\n */\nexport function useProperty(name: string, options?: UsePropertyOptions): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  // Memoize the options to create a stable dependency\n  const optionsKey = useMemo(() => {\n    if (!options) return '';\n    return JSON.stringify({\n      syntax: options.syntax,\n      inherits: options.inherits,\n      initialValue: options.initialValue,\n    });\n  }, [options?.syntax, options?.inherits, options?.initialValue]);\n\n  // SSR path: collect @property CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !name) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      ssrCollector.collectProperty(name, css);\n    }\n  }, [ssrCollector, name, optionsKey]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!name) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(`[Tasty] useProperty: property name is required`);\n      }\n      return;\n    }\n\n    const injector = getGlobalInjector();\n\n    if (injector.isPropertyDefined(name, { root: options?.root })) {\n      return;\n    }\n\n    injector.property(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n      root: options?.root,\n    });\n  }, [name, optionsKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,YAAY,MAAc,SAAoC;CAC5E,MAAM,eAAe,2BAA2B;CAGhD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,KAAK,UAAU;GACpB,QAAQ,QAAQ;GAChB,UAAU,QAAQ;GAClB,cAAc,QAAQ;GACvB,CAAC;IACD;EAAC,SAAS;EAAQ,SAAS;EAAU,SAAS;EAAa,CAAC;AAG/D,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,KAAM;AAE5B,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,cAAa,gBAAgB,MAAM,IAAI;IAExC;EAAC;EAAc;EAAM;EAAW,CAAC;AAGpC,0BAAyB;AACvB,MAAI,CAAC,MAAM;AAEP,WAAQ,KAAK,iDAAiD;AAEhE;;EAGF,MAAM,WAAW,mBAAmB;AAEpC,MAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAGF,WAAS,SAAS,MAAM;GACtB,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,MAAM,SAAS;GAChB,CAAC;IACD;EAAC;EAAM;EAAY,SAAS;EAAK,CAAC"}

package/dist/hooks/useRawCSS.d.ts

@@ -1,53 +0,0 @@
-//#region src/hooks/useRawCSS.d.ts
-interface UseRawCSSOptions {
-  root?: Document | ShadowRoot;
-}
-/**
- * Hook to 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.
- *
- * @example Static CSS string
- * ```tsx
- * function GlobalStyles() {
- *   useRawCSS(`
- *     body {
- *       margin: 0;
- *       padding: 0;
- *       font-family: sans-serif;
- *     }
- *   `);
- *
- *   return null;
- * }
- * ```
- *
- * @example Factory function with dependencies (like useMemo)
- * ```tsx
- * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
- *   useRawCSS(() => `
- *     :root {
- *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
- *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
- *     }
- *   `, [theme]);
- *
- *   return null;
- * }
- * ```
- *
- * @example With options
- * ```tsx
- * function ShadowStyles({ shadowRoot }) {
- *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
- *   return null;
- * }
- * ```
- */
-declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
-declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
-//#endregion
-export { useRawCSS };
-//# sourceMappingURL=useRawCSS.d.ts.map

package/dist/hooks/useRawCSS.js

@@ -1,34 +0,0 @@
-import { injectRawCSS } from "../injector/index.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
-import { useInsertionEffect, useMemo, useRef } from "react";
-//#region src/hooks/useRawCSS.ts
-function useRawCSS(cssOrFactory, depsOrOptions, options) {
-	const ssrCollector = getRegisteredSSRCollector();
-	const isFactory = typeof cssOrFactory === "function";
-	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
-	const opts = isFactory ? options : depsOrOptions;
-	const css = useMemo(() => isFactory ? cssOrFactory() : cssOrFactory, isFactory ? deps ?? [] : [cssOrFactory]);
-	useMemo(() => {
-		if (!ssrCollector || !css.trim()) return;
-		const key = `raw:${css.length}:${css.slice(0, 64)}`;
-		ssrCollector.collectRawCSS(key, css);
-	}, [ssrCollector, css]);
-	const disposeRef = useRef(null);
-	useInsertionEffect(() => {
-		disposeRef.current?.();
-		if (!css.trim()) {
-			disposeRef.current = null;
-			return;
-		}
-		const { dispose } = injectRawCSS(css, opts);
-		disposeRef.current = dispose;
-		return () => {
-			disposeRef.current?.();
-			disposeRef.current = null;
-		};
-	}, [css, opts?.root]);
-}
-//#endregion
-export { useRawCSS };
-
-//# sourceMappingURL=useRawCSS.js.map

package/dist/hooks/useRawCSS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseRawCSSOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies (like useMemo)\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme]);\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n// Implementation\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  // Detect which overload is being used\n  const isFactory = typeof cssOrFactory === '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 UseRawCSSOptions | undefined);\n\n  // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself\n  const css = useMemo(\n    () =>\n      isFactory ? (cssOrFactory as () => string)() : (cssOrFactory as string),\n\n    isFactory ? (deps ?? []) : [cssOrFactory],\n  );\n\n  // SSR path: collect raw CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !css.trim()) return;\n\n    const key = `raw:${css.length}:${css.slice(0, 64)}`;\n    ssrCollector.collectRawCSS(key, css);\n  }, [ssrCollector, css]);\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;AAiEA,SAAgB,UACd,cACA,eACA,SACM;CACN,MAAM,eAAe,2BAA2B;CAGhD,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;AAGD,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,IAAI,MAAM,CAAE;EAElC,MAAM,MAAM,OAAO,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AACjD,eAAa,cAAc,KAAK,IAAI;IACnC,CAAC,cAAc,IAAI,CAAC;CAEvB,MAAM,aAAa,OAA4B,KAAK;AAGpD,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAGF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAErB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}

package/dist/hooks/useStyles.d.ts

@@ -1,40 +0,0 @@
-import { Styles } from "../styles/types.js";
-
-//#region src/hooks/useStyles.d.ts
-/**
- * Tasty styles object to generate CSS classes for.
- * Can be undefined or empty object for no styles.
- */
-type UseStylesOptions = Styles | undefined;
-interface UseStylesResult {
-  /**
-   * Generated className(s) to apply to the element.
-   * Can be empty string if no styles are provided.
-   * With chunking enabled, may contain multiple space-separated class names.
-   */
-  className: string;
-}
-/**
- * Generate CSS classes from Tasty styles.
- * Thin re-export of `computeStyles()` kept for backward compatibility.
- *
- * Unlike a React hook, this is a plain function and can be called
- * from both client components and React Server Components.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { className } = useStyles({
- *     padding: '2x',
- *     fill: '#purple',
- *     radius: '1r',
- *   });
- *
- *   return <div className={className}>Styled content</div>;
- * }
- * ```
- */
-declare function useStyles(styles: UseStylesOptions): UseStylesResult;
-//#endregion
-export { UseStylesOptions, UseStylesResult, useStyles };
-//# sourceMappingURL=useStyles.d.ts.map

package/dist/hooks/useStyles.js

@@ -1,29 +0,0 @@
-import { computeStyles } from "../compute-styles.js";
-//#region src/hooks/useStyles.ts
-/**
-* Generate CSS classes from Tasty styles.
-* Thin re-export of `computeStyles()` kept for backward compatibility.
-*
-* Unlike a React hook, this is a plain function and can be called
-* from both client components and React Server Components.
-*
-* @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);
-}
-//#endregion
-export { useStyles };
-
-//# sourceMappingURL=useStyles.js.map

package/dist/hooks/useStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { computeStyles } from '../compute-styles';\nimport type { Styles } from '../styles/types';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Generate CSS classes from Tasty styles.\n * Thin re-export of `computeStyles()` kept for backward compatibility.\n *\n * Unlike a React hook, this is a plain function and can be called\n * from both client components and React Server Components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  return computeStyles(styles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,UAAU,QAA2C;AACnE,QAAO,cAAc,OAAO"}

package/dist/injector/index.d.ts

@@ -1,166 +0,0 @@
-import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./types.js";
-import { StyleResult } from "../pipeline/index.js";
-import { SheetManager } from "./sheet-manager.js";
-import { StyleInjector } from "./injector.js";
-
-//#region src/injector/index.d.ts
-/**
- * Inject styles and return className with dispose function
- */
-declare function inject(rules: StyleResult[], options?: {
-  root?: Document | ShadowRoot;
-  cacheKey?: string;
-}): InjectResult;
-/**
- * Inject global rules that should not reserve tasty class names
- */
-declare function injectGlobal(rules: StyleResult[], options?: {
-  root?: Document | ShadowRoot;
-}): GlobalInjectResult;
-/**
- * Inject raw CSS text directly without parsing
- * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
- * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
- *
- * @example
- * ```tsx
- * // Inject raw CSS
- * const { dispose } = injectRawCSS(`
- *   body { margin: 0; padding: 0; }
- *   .my-class { color: red; }
- * `);
- *
- * // Later, remove the injected CSS
- * dispose();
- * ```
- */
-declare function injectRawCSS(css: string, options?: {
-  root?: Document | ShadowRoot;
-}): {
-  dispose: () => void;
-};
-/**
- * Get raw CSS text for SSR
- */
-declare function getRawCSSText(options?: {
-  root?: Document | ShadowRoot;
-}): string;
-/**
- * Inject keyframes and return object with toString() and dispose()
- */
-declare function keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
-  root?: Document | ShadowRoot;
-  name?: string;
-}): KeyframesResult;
-interface PropertyOptions {
-  /**
-   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
-   * @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
-   */
-  initialValue?: string | number;
-  /**
-   * Shadow root or document to inject into
-   */
-  root?: Document | ShadowRoot;
-}
-/**
- * Define a CSS @property custom property.
- * This enables advanced features like animating custom properties.
- *
- * Note: @property rules are global and persistent once defined.
- * Re-registering the same property name is a no-op.
- *
- * @param name - The custom property name (must start with --)
- * @param options - Property configuration
- *
- * @example
- * ```ts
- * // Define a color property that can be animated
- * property('--my-color', {
- *   syntax: '<color>',
- *   initialValue: 'red',
- * });
- *
- * // Define an angle property
- * property('--rotation', {
- *   syntax: '<angle>',
- *   inherits: false,
- *   initialValue: '0deg',
- * });
- * ```
- */
-declare function property(name: string, options?: PropertyOptions): void;
-/**
- * Check if a CSS @property has already been defined
- *
- * @param name - The custom property name to check
- * @param options - Options including root
- */
-declare function isPropertyDefined(name: string, options?: {
-  root?: Document | ShadowRoot;
-}): boolean;
-/**
- * Inject a CSS @font-face rule.
- *
- * Permanent and global — no dispose or ref-counting.
- * Deduplicates by content hash (family + descriptors).
- */
-declare function fontFace(family: string, descriptors: FontFaceDescriptors, options?: {
-  root?: Document | ShadowRoot;
-}): void;
-/**
- * Inject a CSS @counter-style rule.
- *
- * Permanent and global — no dispose or ref-counting.
- * Deduplicates by name (first definition wins).
- */
-declare function counterStyle(name: string, descriptors: CounterStyleDescriptors, options?: {
-  root?: Document | ShadowRoot;
-}): void;
-/**
- * Get CSS text from all sheets (for SSR)
- */
-declare function getCssText(options?: {
-  root?: Document | ShadowRoot;
-}): string;
-/**
- * Collect only CSS used by a rendered subtree (like jest-styled-components).
- * Pass the container returned by render(...).
- */
-declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
-  root?: Document | ShadowRoot;
-}): string;
-/**
- * Force cleanup of unused rules
- */
-declare function cleanup(root?: Document | ShadowRoot): void;
-/**
- * Check if we're currently running in a test environment
- */
-declare function getIsTestEnvironment(): boolean;
-/**
- * Get the global injector instance for debugging
- */
-declare const injector: {
-  readonly instance: StyleInjector;
-};
-/**
- * Destroy all resources and clean up
- */
-declare function destroy(root?: Document | ShadowRoot): void;
-/**
- * Create a new isolated injector instance
- */
-declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-//#endregion
-export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
-//# sourceMappingURL=index.d.ts.map