@cube-dev/ui-kit 0.0.0-canary-897ecee → 0.0.0-canary-5681e22

package/es/stories/FormFieldArgs.js

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

package/es/stories/SimpleLayout.stories.js

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

package/es/stories/Tasty.stories.js

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

package/es/stories/components/ConfirmDeletionDialogForm.js

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

package/es/stories/components/DialogFormApp.js

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

package/es/stories/components/StyledButton.js

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

package/es/stories/lists/baseProps.js

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

package/es/stories/playground/PlaygroundEditor.js

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

package/es/stories/playground/PlaygroundLayout.js

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

package/es/stories/playground/PlaygroundOutput.js

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

package/es/stories/playground/PlaygroundPreview.js

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

package/es/stories/playground/components/Button.js

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

package/es/stories/playground/components/Card.js

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

package/es/stories/playground/components/ScrollProgress.js

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

package/es/stories/playground/examples.js

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

package/es/tasty/chunks/cacheKey.js

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

package/es/tasty/chunks/definitions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * Released under the MIT license.
  */
 
@@ -240,8 +240,8 @@ export function categorizeStyleKeys(styles) {
     const keys = Object.keys(styles);
     for (const key of keys) {
         // Skip the $ helper key (used for selector combinators)
-        // Skip @keyframes (processed separately in useStyles)
-        if (key === '$' || key === '@keyframes') {
+        // Skip @keyframes and @properties (processed separately in useStyles)
+        if (key === '$' || key === '@keyframes' || key === '@properties') {
             continue;
         }
         if (isSelector(key)) {

package/es/tasty/chunks/index.js

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

package/es/tasty/chunks/renderChunk.js

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

package/es/tasty/config.js

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

package/es/tasty/debug.js

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

package/es/tasty/hooks/index.js

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

package/es/tasty/hooks/useGlobalStyles.js

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

package/es/tasty/hooks/useKeyframes.js

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

package/es/tasty/hooks/useProperty.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * Released under the MIT license.
  */
 
@@ -14,36 +14,40 @@ import { getGlobalInjector } from '../config.js';
  * 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 --)
+ * 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 color property
+ * @example Basic property with token syntax
  * ```tsx
- * function MyComponent() {
- *   useProperty('--my-color', {
- *     syntax: '<color>',
- *     initialValue: 'red',
+ * function Spinner() {
+ *   useProperty('$rotation', {
+ *     syntax: '<angle>',
+ *     inherits: false,
+ *     initialValue: '0deg',
  *   });
  *
- *   // Now --my-color can be animated with CSS transitions
- *   return <div style={{ '--my-color': 'blue' } as React.CSSProperties}>Colored</div>;
+ *   return <div className="spinner" />;
  * }
  * ```
  *
- * @example Angle property for rotations
+ * @example Color property with token syntax (auto-sets syntax)
  * ```tsx
- * function Spinner() {
- *   useProperty('--rotation', {
- *     syntax: '<angle>',
- *     inherits: false,
- *     initialValue: '0deg',
+ * function MyComponent() {
+ *   useProperty('#theme', {
+ *     initialValue: 'red', // syntax: '<color>' is auto-set
  *   });
  *
- *   return <div className="spinner" />;
+ *   // Now --theme-color can be animated with CSS transitions
+ *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
  * }
  * ```
  *
- * @example Length property
+ * @example Legacy format (still supported)
  * ```tsx
  * function ResizableBox() {
  *   useProperty('--box-size', {
@@ -67,18 +71,21 @@ export function useProperty(name, options) {
         });
     }, [options?.syntax, options?.inherits, options?.initialValue]);
     useInsertionEffect(() => {
-        if (!name || !name.startsWith('--')) {
+        if (!name) {
             if (process.env.NODE_ENV !== 'production') {
-                console.warn(`[Tasty] useProperty: property name must start with "--". Got: "${name}"`);
+                console.warn(`[Tasty] useProperty: property name is required`);
             }
             return;
         }
         const injector = getGlobalInjector();
         // Check if already defined (properties are persistent)
+        // The injector handles token parsing internally
         if (injector.isPropertyDefined(name, { root: options?.root })) {
             return;
         }
         // Register the property
+        // The injector handles $name, #name, --name parsing and auto-sets
+        // syntax for color tokens
         injector.property(name, {
             syntax: options?.syntax,
             inherits: options?.inherits,

package/es/tasty/hooks/useRawCSS.js

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

package/es/tasty/hooks/useStyles.js

@@ -1,16 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * Released under the MIT license.
  */
 
 import { useInsertionEffect, useMemo, useRef } from 'react';
 import { categorizeStyleKeys, CHUNK_NAMES, generateChunkCacheKey, renderStylesForChunk, } from '../chunks/index.js';
 import { getGlobalKeyframes, hasGlobalKeyframes } from '../config.js';
-import { allocateClassName, inject, keyframes } from '../injector/index.js';
+import { allocateClassName, inject, keyframes, property } from '../injector/index.js';
 import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames, } from '../keyframes/index.js';
 import { renderStyles } from '../pipeline/index.js';
+import { extractLocalProperties, hasLocalProperties } from '../properties/index.js';
 import { stringifyStyles } from '../utils/styles.js';
 /**
  * Check if styles contain @starting-style rules.
@@ -173,6 +174,18 @@ export function useStyles(styles) {
                 nameMap = null;
             }
         }
+        // Register @properties if defined (no dispose needed - properties are permanent)
+        // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')
+        // The injector.property() handles token parsing and auto-settings internally
+        if (currentStyles && hasLocalProperties(currentStyles)) {
+            const properties = extractLocalProperties(currentStyles);
+            if (properties) {
+                for (const [token, definition] of Object.entries(properties)) {
+                    // Pass the token directly - injector handles parsing
+                    property(token, definition);
+                }
+            }
+        }
         // Inject each chunk
         for (const chunk of processedChunks) {
             if (chunk.renderResult.rules.length > 0) {

package/es/tasty/index.js

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

package/es/tasty/injector/index.js

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

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * Released under the MIT license.
  */
 
@@ -9,6 +9,8 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
+import { getEffectiveDefinition, normalizePropertyDefinition, } from '../properties/index.js';
+import { isDevEnv } from '../utils/isDevEnv.js';
 import { parseStyle } from '../utils/styles.js';
 import { SheetManager } from './sheet-manager.js';
 /**
@@ -315,56 +317,105 @@ export class StyleInjector {
         this.sheetManager.resetMetrics(registry);
     }
     /**
-     * Define a CSS @property custom property
+     * Define a CSS @property custom property.
+     *
+     * 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)
+     *
      * Example:
      * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
+     *
      * Note: No caching or dispose — this defines a global property.
+     *
+     * If the same property is registered with different options, a warning is emitted
+     * but the original definition is preserved (CSS @property cannot be redefined).
      */
     property(name, options) {
         const root = options?.root || document;
         const registry = this.sheetManager.getRegistry(root);
-        // Check if already defined to avoid duplicates
-        if (registry.injectedProperties.has(name)) {
+        // Parse the token and get effective definition
+        // This handles $name, #name, --name formats and auto-sets syntax for colors
+        const userDefinition = {
+            syntax: options?.syntax,
+            inherits: options?.inherits,
+            initialValue: options?.initialValue,
+        };
+        const effectiveResult = getEffectiveDefinition(name, userDefinition);
+        if (!effectiveResult.isValid) {
+            if (isDevEnv()) {
+                console.warn(`[Tasty] property(): ${effectiveResult.error}. Got: "${name}"`);
+            }
+            return;
+        }
+        const cssName = effectiveResult.cssName;
+        const definition = effectiveResult.definition;
+        // Normalize the definition for comparison
+        const normalizedDef = normalizePropertyDefinition(definition);
+        // Check if already defined
+        const existingDef = registry.injectedProperties.get(cssName);
+        if (existingDef !== undefined) {
+            // Property already exists - check if definitions match
+            if (existingDef !== normalizedDef) {
+                // Different definition - warn but don't replace (CSS @property can't be redefined)
+                if (isDevEnv()) {
+                    console.warn(`[Tasty] @property ${cssName} was already defined with a different declaration. ` +
+                        `The new declaration will be ignored. ` +
+                        `Original: ${existingDef}, New: ${normalizedDef}`);
+                }
+            }
+            // Either exact match or warned - skip injection
             return;
         }
         const parts = [];
-        if (options?.syntax != null) {
-            let syntax = String(options.syntax).trim();
+        if (definition.syntax != null) {
+            let syntax = String(definition.syntax).trim();
             if (!/^['"]/u.test(syntax))
                 syntax = `"${syntax}"`;
             parts.push(`syntax: ${syntax};`);
         }
         // inherits is required by the CSS @property spec - default to true
-        const inherits = options?.inherits ?? true;
+        const inherits = definition.inherits ?? true;
         parts.push(`inherits: ${inherits ? 'true' : 'false'};`);
-        if (options?.initialValue != null) {
+        if (definition.initialValue != null) {
             let initialValueStr;
-            if (typeof options.initialValue === 'number') {
-                initialValueStr = String(options.initialValue);
+            if (typeof definition.initialValue === 'number') {
+                initialValueStr = String(definition.initialValue);
             }
             else {
                 // Process via tasty parser to resolve custom units/functions
-                initialValueStr = parseStyle(options.initialValue).output;
+                initialValueStr = parseStyle(definition.initialValue).output;
             }
             parts.push(`initial-value: ${initialValueStr};`);
         }
         const declarations = parts.join(' ').trim();
         const rule = {
-            selector: `@property ${name}`,
+            selector: `@property ${cssName}`,
             declarations,
         };
         // Insert as a global rule; ignore returned info (no tracking/dispose)
         this.sheetManager.insertGlobalRule(registry, [rule], `property:${name}`, root);
-        // Track that this property was injected
-        registry.injectedProperties.add(name);
+        // Track that this property was injected with its normalized definition
+        registry.injectedProperties.set(cssName, normalizedDef);
     }
     /**
-     * Check whether a given @property name was already injected by this injector
+     * Check whether a given @property name was already injected by this injector.
+     *
+     * Accepts tasty token syntax:
+     * - `$name` → checks `--name`
+     * - `#name` → checks `--name-color`
+     * - `--name` → checks `--name` (legacy format)
      */
     isPropertyDefined(name, options) {
         const root = options?.root || document;
         const registry = this.sheetManager.getRegistry(root);
-        return registry.injectedProperties.has(name);
+        // Parse the token to get the CSS property name
+        const effectiveResult = getEffectiveDefinition(name, {});
+        if (!effectiveResult.isValid) {
+            return false;
+        }
+        return registry.injectedProperties.has(effectiveResult.cssName);
     }
     /**
      * Inject keyframes and return object with toString() and dispose()

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-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * Released under the MIT license.
  */
 
@@ -49,7 +49,7 @@ export class SheetManager {
                 keyframesCache: new Map(),
                 keyframesNameToContent: new Map(),
                 keyframesCounter: 0,
-                injectedProperties: new Set(),
+                injectedProperties: new Map(),
                 globalRules: new Map(),
             };
             this.rootRegistries.set(root, registry);

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * 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-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * 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-897ecee
+ * @cube-dev/ui-kit v0.0.0-canary-5681e22
  * Released under the MIT license.
  */
 
@@ -72,6 +72,20 @@ export function classify(raw, opts, recurse) {
         (token.startsWith("'") && token.endsWith("'"))) {
         return { bucket: Bucket.Value, processed: token };
     }
+    // 0. Double prefix for literal CSS property names ($$name -> --name, ##name -> --name-color)
+    // Used in transitions and animations to reference the property name itself, not its value
+    if (token.startsWith('$$')) {
+        const name = token.slice(2);
+        if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {
+            return { bucket: Bucket.Value, processed: `--${name}` };
+        }
+    }
+    if (token.startsWith('##')) {
+        const name = token.slice(2);
+        if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {
+            return { bucket: Bucket.Value, processed: `--${name}-color` };
+        }
+    }
     // 0a. Check for predefined tokens (configured via configure({ tokens: {...} }))
     // Must happen before default $ and # handling to allow overriding
     if (token[0] === '$' || token[0] === '#') {

package/es/tasty/parser/const.js

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