@cube-dev/ui-kit 0.0.0-canary-53fd4cf → 0.0.0-canary-897ecee

package/es/tasty/hooks/useKeyframes.js

@@ -0,0 +1,65 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * 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;
+    // Store the current keyframes result for cleanup
+    const resultRef = useRef(null);
+    // Track the previous key to detect changes
+    const prevKeyRef = useRef(null);
+    // Inject keyframes synchronously during render to ensure the animation name
+    // is available on the first render. The keyframes() function uses reference
+    // counting internally, so multiple calls with the same content are deduplicated.
+    const name = useMemo(() => {
+        const steps = isFactory
+            ? stepsOrFactory()
+            : stepsOrFactory;
+        const stepsKey = JSON.stringify(steps);
+        // If key matches and we already have a result, reuse it without calling
+        // keyframes() again to avoid incrementing refCount unnecessarily.
+        if (prevKeyRef.current === stepsKey && resultRef.current !== null) {
+            return resultRef.current.toString();
+        }
+        // Key changed or no previous result - dispose old result if present
+        if (resultRef.current !== null) {
+            resultRef.current.dispose();
+            resultRef.current = null;
+        }
+        prevKeyRef.current = stepsKey;
+        if (!steps || Object.keys(steps).length === 0) {
+            return '';
+        }
+        // Inject keyframes synchronously
+        const result = keyframes(steps, {
+            name: opts?.name,
+            root: opts?.root,
+        });
+        resultRef.current = result;
+        return result.toString();
+    }, isFactory
+        ? [...(deps ?? []), opts?.name, opts?.root]
+        : [stepsOrFactory, opts?.name, opts?.root]);
+    // Cleanup on unmount
+    useInsertionEffect(() => {
+        return () => {
+            resultRef.current?.dispose();
+            resultRef.current = null;
+        };
+    }, []);
+    return name;
+}
+
+        

package/es/tasty/hooks/useProperty.js

@@ -0,0 +1,93 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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, useKeyframes, } from './hooks/index.js';
 // Configuration API
 export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, hasGlobalKeyframes, getGlobalKeyframes, } from './config.js';
 // Plugins

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * 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-53fd4cf
+ * @cube-dev/ui-kit v0.0.0-canary-897ecee
  * Released under the MIT license.
  */
 

package/es/tasty/styles/color.js

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

package/es/tasty/styles/createStyle.js

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

package/es/tasty/styles/dimension.js

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

package/es/tasty/styles/display.js

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

package/es/tasty/styles/fade.js

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

package/es/tasty/styles/fill.js

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

package/es/tasty/styles/flow.js

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

package/es/tasty/styles/font.js

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

package/es/tasty/styles/fontStyle.js

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

package/es/tasty/styles/gap.js

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

package/es/tasty/styles/groupRadius.js

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

package/es/tasty/styles/height.js

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

package/es/tasty/styles/index.js

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

package/es/tasty/styles/inset.js

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

package/es/tasty/styles/justify.js

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