@cube-dev/ui-kit 0.0.0-canary-d4047d7 → 0.0.0-canary-a465ecb

package/es/tasty/config.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 
@@ -18,9 +18,7 @@
  * reconfigure will emit a warning and be ignored.
  */
 import { StyleInjector } from './injector/injector.js';
-import { clearPipelineCache } from './pipeline/index.js';
 import { setGlobalPredefinedStates } from './states/index.js';
-import { normalizeHandlerDefinition, registerHandler, resetHandlers, } from './styles/predefined.js';
 import { isDevEnv } from './utils/isDevEnv.js';
 import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, } from './utils/styles.js';
 // Warnings tracking to avoid duplicates
@@ -182,7 +180,6 @@ export function configure(config = {}) {
     let mergedStates = {};
     let mergedUnits = {};
     let mergedFuncs = {};
-    let mergedHandlers = {};
     let mergedTokens = {};
     // Process plugins in order
     if (config.plugins) {
@@ -196,9 +193,6 @@ export function configure(config = {}) {
             if (plugin.funcs) {
                 mergedFuncs = { ...mergedFuncs, ...plugin.funcs };
             }
-            if (plugin.handlers) {
-                mergedHandlers = { ...mergedHandlers, ...plugin.handlers };
-            }
             if (plugin.tokens) {
                 mergedTokens = { ...mergedTokens, ...plugin.tokens };
             }
@@ -214,9 +208,6 @@ export function configure(config = {}) {
     if (config.funcs) {
         mergedFuncs = { ...mergedFuncs, ...config.funcs };
     }
-    if (config.handlers) {
-        mergedHandlers = { ...mergedHandlers, ...config.handlers };
-    }
     if (config.tokens) {
         mergedTokens = { ...mergedTokens, ...config.tokens };
     }
@@ -246,13 +237,6 @@ export function configure(config = {}) {
     if (config.keyframes) {
         setGlobalKeyframes(config.keyframes);
     }
-    // Handle custom handlers
-    if (Object.keys(mergedHandlers).length > 0) {
-        for (const [name, definition] of Object.entries(mergedHandlers)) {
-            const handler = normalizeHandlerDefinition(name, definition);
-            registerHandler(handler);
-        }
-    }
     // Handle predefined tokens
     // Note: Tokens are processed by the classifier, not here.
     // We just store the raw values; the classifier will process them when encountered.
@@ -264,8 +248,8 @@ export function configure(config = {}) {
         }
         setGlobalPredefinedTokens(processedTokens);
     }
-    // Create config without states, parser options, plugins, keyframes, handlers, and tokens (handled separately)
-    const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, handlers: _handlers, tokens: _tokens, ...injectorConfig } = config;
+    // Create config without states, parser options, plugins, keyframes, and tokens (handled separately)
+    const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, tokens: _tokens, ...injectorConfig } = config;
     const fullConfig = {
         ...createDefaultConfig(),
         ...currentConfig,
@@ -307,8 +291,6 @@ export function resetConfig() {
     currentConfig = null;
     globalKeyframes = null;
     resetGlobalPredefinedTokens();
-    resetHandlers();
-    clearPipelineCache();
     emittedWarnings.clear();
     const storage = typeof window !== 'undefined' ? window : globalThis;
     delete storage[GLOBAL_INJECTOR_KEY];

package/es/tasty/debug.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/hooks/index.js

@@ -1,12 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 
 export { useStyles } from './useStyles.js';
 export { useGlobalStyles } from './useGlobalStyles.js';
 export { useRawCSS } from './useRawCSS.js';
+export { useKeyframes } from './useKeyframes.js';
+export { useProperty } from './useProperty.js';
 
         

package/es/tasty/hooks/useGlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/hooks/useKeyframes.js

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo, useRef } from 'react';
+import { keyframes } from '../injector/index.js';
+// Implementation
+export function useKeyframes(stepsOrFactory, depsOrOptions, options) {
+    // Detect which overload is being used
+    const isFactory = typeof stepsOrFactory === 'function';
+    // Parse arguments based on overload
+    const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;
+    const opts = isFactory
+        ? options
+        : depsOrOptions;
+    const disposeRef = useRef(null);
+    const nameRef = useRef('');
+    // Generate a stable key for memoization
+    const stepsKey = useMemo(() => {
+        const steps = isFactory
+            ? stepsOrFactory()
+            : stepsOrFactory;
+        // Store steps for later use in effect
+        return JSON.stringify(steps);
+    }, isFactory ? deps ?? [] : [stepsOrFactory]);
+    // Store parsed steps for the effect
+    const stepsRef = useRef({});
+    // Update steps when key changes
+    if (stepsKey) {
+        try {
+            stepsRef.current = JSON.parse(stepsKey);
+        }
+        catch {
+            stepsRef.current = {};
+        }
+    }
+    // Inject keyframes in insertion effect
+    useInsertionEffect(() => {
+        // Dispose previous injection
+        disposeRef.current?.();
+        disposeRef.current = null;
+        const steps = stepsRef.current;
+        if (!steps || Object.keys(steps).length === 0) {
+            nameRef.current = '';
+            return;
+        }
+        // Inject keyframes
+        const result = keyframes(steps, {
+            name: opts?.name,
+            root: opts?.root,
+        });
+        nameRef.current = result.toString();
+        disposeRef.current = result.dispose;
+        // Cleanup on unmount or when steps change
+        return () => {
+            disposeRef.current?.();
+            disposeRef.current = null;
+        };
+    }, [stepsKey, opts?.name, opts?.root]);
+    return nameRef.current;
+}
+
+        

package/es/tasty/hooks/useProperty.js

@@ -0,0 +1,93 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
+ * Released under the MIT license.
+ */
+
+import { useInsertionEffect, useMemo } from 'react';
+import { getGlobalInjector } from '../config.js';
+/**
+ * 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.
+ *
+ * @param name - The custom property name (must start with --)
+ * @param options - Property configuration
+ *
+ * @example Basic color property
+ * ```tsx
+ * function MyComponent() {
+ *   useProperty('--my-color', {
+ *     syntax: '<color>',
+ *     initialValue: 'red',
+ *   });
+ *
+ *   // Now --my-color can be animated with CSS transitions
+ *   return <div style={{ '--my-color': 'blue' } as React.CSSProperties}>Colored</div>;
+ * }
+ * ```
+ *
+ * @example Angle property for rotations
+ * ```tsx
+ * function Spinner() {
+ *   useProperty('--rotation', {
+ *     syntax: '<angle>',
+ *     inherits: false,
+ *     initialValue: '0deg',
+ *   });
+ *
+ *   return <div className="spinner" />;
+ * }
+ * ```
+ *
+ * @example Length property
+ * ```tsx
+ * function ResizableBox() {
+ *   useProperty('--box-size', {
+ *     syntax: '<length>',
+ *     initialValue: '100px',
+ *   });
+ *
+ *   return <div style={{ width: 'var(--box-size)' }} />;
+ * }
+ * ```
+ */
+export function useProperty(name, options) {
+    // Memoize the options to create a stable dependency
+    const optionsKey = useMemo(() => {
+        if (!options)
+            return '';
+        return JSON.stringify({
+            syntax: options.syntax,
+            inherits: options.inherits,
+            initialValue: options.initialValue,
+        });
+    }, [options?.syntax, options?.inherits, options?.initialValue]);
+    useInsertionEffect(() => {
+        if (!name || !name.startsWith('--')) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn(`[Tasty] useProperty: property name must start with "--". Got: "${name}"`);
+            }
+            return;
+        }
+        const injector = getGlobalInjector();
+        // Check if already defined (properties are persistent)
+        if (injector.isPropertyDefined(name, { root: options?.root })) {
+            return;
+        }
+        // Register the property
+        injector.property(name, {
+            syntax: options?.syntax,
+            inherits: options?.inherits,
+            initialValue: options?.initialValue,
+            root: options?.root,
+        });
+        // No cleanup - @property rules are global and persistent
+        // Re-registering is a no-op anyway due to the isPropertyDefined check
+    }, [name, optionsKey, options?.root]);
+}
+
+        

package/es/tasty/hooks/useRawCSS.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/hooks/useStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/index.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 
 import { configure } from './config.js';
 import { okhslPlugin } from './plugins/index.js';
 export { tasty, Element } from './tasty.js';
-export { useStyles, useGlobalStyles, useRawCSS } from './hooks/index.js';
+export { useStyles, useGlobalStyles, useRawCSS, useProperty } from './hooks/index.js';
 // Configuration API
 export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, hasGlobalKeyframes, getGlobalKeyframes, } from './config.js';
 // Plugins
@@ -24,7 +24,6 @@ export * from './utils/filterBaseProps.js';
 export * from './utils/colors.js';
 export * from './utils/styles.js';
 export * from './utils/modAttrs.js';
-export { styleHandlers } from './styles/index.js';
 export { renderStyles, isSelector } from './pipeline/index.js';
 export * from './utils/dotize.js';
 export * from './styles/list.js';

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 
@@ -59,6 +59,44 @@ export function getRawCSSText(options) {
 export function keyframes(steps, nameOrOptions) {
     return getGlobalInjector().keyframes(steps, nameOrOptions);
 }
+/**
+ * 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',
+ * });
+ * ```
+ */
+export function property(name, options) {
+    return getGlobalInjector().property(name, options);
+}
+/**
+ * Check if a CSS @property has already been defined
+ *
+ * @param name - The custom property name to check
+ * @param options - Options including root
+ */
+export function isPropertyDefined(name, options) {
+    return getGlobalInjector().isPropertyDefined(name, options);
+}
 /**
  * Get CSS text from all sheets (for SSR)
  */

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/injector/sheet-manager.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/keyframes/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/parser/classify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/parser/const.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/parser/lru.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/parser/parser.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/parser/tokenizer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/parser/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/conditions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/exclusive.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/materialize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/parseStateKey.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/pipeline/simplify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/plugins/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/plugins/okhsl-plugin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/plugins/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/states/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/static/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/static/tastyStatic.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/static/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/styles/align.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/styles/border.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 

package/es/tasty/styles/boxShadow.combinator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ export function boxShadowCombinator(styles) {
         return list;
     }, []);
     if (!values.length)
-        return;
+        return '';
     return { 'box-shadow': values.join(', ') };
 }
 boxShadowCombinator.__lookupStyles = ['outline', 'shadow'];

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d4047d7
+ * @cube-dev/ui-kit v0.0.0-canary-a465ecb
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ import { parseColor } from '../utils/styles.js';
 import { convertColorChainToRgbChain } from './createStyle.js';
 export function colorStyle({ color }) {
     if (!color)
-        return;
+        return '';
     if (color === true)
         color = 'currentColor';
     // Handle color values that need parsing: