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

package/types/tasty/hooks/useProperty.d.ts

@@ -0,0 +1,69 @@
+export interface UsePropertyOptions {
+    /**
+     * 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;
+}
+/**
+ * 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 declare function useProperty(name: string, options?: UsePropertyOptions): void;

package/types/tasty/index.d.ts

@@ -1,6 +1,6 @@
 export { tasty, Element } from './tasty';
-export { useStyles, useGlobalStyles, useRawCSS } from './hooks';
-export type { UseStylesOptions, UseStylesResult } from './hooks';
+export { useStyles, useGlobalStyles, useRawCSS, useProperty } from './hooks';
+export type { UseStylesOptions, UseStylesResult, UsePropertyOptions, } from './hooks';
 export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, hasGlobalKeyframes, getGlobalKeyframes, } from './config';
 export type { TastyConfig } from './config';
 export { okhslPlugin, okhslFunc } from './plugins';
@@ -13,7 +13,6 @@ export * from './utils/filterBaseProps';
 export * from './utils/colors';
 export * from './utils/styles';
 export * from './utils/modAttrs';
-export { styleHandlers } from './styles';
 export { renderStyles, isSelector } from './pipeline';
 export type { StyleResult, RenderResult } from './pipeline';
 export * from './utils/dotize';

package/types/tasty/injector/index.d.ts

@@ -58,6 +58,62 @@ export declare function keyframes(steps: import('./types').KeyframesSteps, nameO
     root?: Document | ShadowRoot;
     name?: string;
 }): import('./types').KeyframesResult;
+export 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',
+ * });
+ * ```
+ */
+export 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
+ */
+export declare function isPropertyDefined(name: string, options?: {
+    root?: Document | ShadowRoot;
+}): boolean;
 /**
  * Get CSS text from all sheets (for SSR)
  */

package/types/tasty/plugins/types.d.ts

@@ -1,7 +1,6 @@
 import type { StyleDetails, UnitHandler } from '../parser/types';
-import type { StyleHandlerDefinition } from '../utils/styles';
 /**
- * A tasty plugin that extends the style system with custom functions, units, states, or handlers.
+ * A tasty plugin that extends the style system with custom functions, units, or states.
  */
 export interface TastyPlugin {
     /** Unique name for the plugin (used for debugging and conflict detection) */
@@ -12,20 +11,6 @@ export interface TastyPlugin {
     units?: Record<string, string | UnitHandler>;
     /** Custom state aliases (e.g., `'@mobile': '@media(w < 768px)'`) */
     states?: Record<string, string>;
-    /**
-     * Custom style handlers that transform style properties into CSS declarations.
-     * Handlers replace built-in handlers for the same style name.
-     * @example
-     * ```ts
-     * handlers: {
-     *   // Simple handler - lookup style inferred from key
-     *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
-     *   // Multi-property handler
-     *   spacing: [['gap', 'padding'], ({ gap, padding }) => ({ ... })],
-     * }
-     * ```
-     */
-    handlers?: Record<string, StyleHandlerDefinition>;
     /** Predefined tokens replaced during style parsing (`$name` or `#name`) */
     tokens?: {
         [key: `$${string}` | `#${string}`]: string | number;

package/types/tasty/styles/boxShadow.combinator.d.ts

@@ -1,6 +1,6 @@
-export declare function boxShadowCombinator(styles: any): {
+export declare function boxShadowCombinator(styles: any): "" | {
     'box-shadow': string;
-} | undefined;
+};
 export declare namespace boxShadowCombinator {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/color.d.ts

@@ -1,8 +1,8 @@
 export declare function colorStyle({ color }: {
     color: any;
-}): {
+}): "" | {
     color: any;
-} | undefined;
+};
 export declare namespace colorStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/dimension.d.ts

@@ -1 +1 @@
-export declare function dimensionStyle(name: any): (val: any) => Record<string, string | string[]> | undefined;
+export declare function dimensionStyle(name: any): (val: any) => "" | Record<string, string | string[]>;

package/types/tasty/styles/fade.d.ts

@@ -1,9 +1,9 @@
 export declare function fadeStyle({ fade }: {
     fade: any;
-}): {
+}): "" | {
     mask: any;
     'mask-composite': string;
-} | undefined;
+};
 export declare namespace fadeStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/fill.d.ts

@@ -1,16 +1,16 @@
 export declare function fillStyle({ fill }: {
     fill: any;
-}): {
+}): "" | {
     'background-color': any;
-} | undefined;
+};
 export declare namespace fillStyle {
     var __lookupStyles: string[];
 }
 export declare function svgFillStyle({ svgFill }: {
     svgFill: any;
-}): {
+}): "" | {
     fill: any;
-} | undefined;
+};
 export declare namespace svgFillStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/groupRadius.d.ts

@@ -1,11 +1,11 @@
 export declare function groupRadiusAttr({ groupRadius, flow }: {
     groupRadius: any;
     flow: any;
-}): {
+}): "" | {
     $: string;
     'border-radius': any;
     '--local-radius': any;
-}[] | undefined;
+}[];
 export declare namespace groupRadiusAttr {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/height.d.ts

@@ -1,6 +1,6 @@
 export declare function heightStyle({ height }: {
     height: any;
-}): Record<string, string | string[]> | undefined;
+}): "" | Record<string, string | string[]>;
 export declare namespace heightStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/index.d.ts

@@ -1,7 +1,5 @@
-import { styleHandlers } from './predefined';
 declare const STYLE_HANDLER_MAP: {
     [x: string]: import("..").StyleHandler[];
 }, defineCustomStyle: typeof import("./predefined").defineCustomStyle, defineStyleAlias: typeof import("./predefined").defineStyleAlias;
-export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias, styleHandlers, };
+export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
 export * from './createStyle';
-export { normalizeHandlerDefinition, registerHandler, resetHandlers, validateHandlerResult, } from './predefined';

package/types/tasty/styles/predefined.d.ts

@@ -1,36 +1,6 @@
-import { RawStyleHandler, StyleHandler, StyleHandlerDefinition } from '../utils/styles';
-import { alignStyle } from './align';
-import { borderStyle } from './border';
-import { colorStyle } from './color';
-import { displayStyle } from './display';
-import { fadeStyle } from './fade';
-import { fillStyle, svgFillStyle } from './fill';
-import { flowStyle } from './flow';
-import { fontStyle } from './font';
-import { fontStyleStyle } from './fontStyle';
-import { gapStyle } from './gap';
-import { groupRadiusAttr } from './groupRadius';
-import { heightStyle } from './height';
-import { insetStyle } from './inset';
-import { justifyStyle } from './justify';
-import { marginStyle } from './margin';
-import { outlineStyle } from './outline';
-import { paddingStyle } from './padding';
-import { presetStyle } from './preset';
-import { radiusStyle } from './radius';
-import { resetStyle } from './reset';
-import { scrollbarStyle } from './scrollbar';
-import { shadowStyle } from './shadow';
-import { styledScrollbarStyle } from './styledScrollbar';
-import { transitionStyle } from './transition';
-import { widthStyle } from './width';
+import { RawStyleHandler, StyleHandler } from '../utils/styles';
 type StyleHandlerMap = Record<string, StyleHandler[]>;
 export declare const STYLE_HANDLER_MAP: StyleHandlerMap;
-/**
- * Reset STYLE_HANDLER_MAP to the initial built-in state.
- * Called by resetConfig() to restore handlers after tests.
- */
-export declare function resetHandlers(): void;
 export declare function defineCustomStyle(names: string[] | StyleHandler, handler?: RawStyleHandler): void;
 type ConverterHandler = (s: string | boolean | number | undefined) => string | undefined;
 export declare function defineStyleAlias(styleName: string, cssStyleName?: string, converter?: ConverterHandler): void;
@@ -39,77 +9,4 @@ export declare function predefine(): {
     defineCustomStyle: typeof defineCustomStyle;
     defineStyleAlias: typeof defineStyleAlias;
 };
-/**
- * Normalize a handler definition to a StyleHandler with __lookupStyles.
- * - Function only: lookup styles inferred from key name
- * - [string, fn]: single lookup style
- * - [string[], fn]: multiple lookup styles
- */
-export declare function normalizeHandlerDefinition(keyName: string, definition: StyleHandlerDefinition): StyleHandler;
-/**
- * Validate a handler result in development mode.
- * Call this after invoking a handler to check the return value.
- */
-export declare function validateHandlerResult(name: string, result: unknown): void;
-/**
- * Register a custom handler, replacing any existing handlers for the same lookup styles.
- * This is called by configure() to process user-defined handlers.
- *
- * When registering a handler for style X, any existing handler that processes X
- * is removed from ALL its lookup styles to prevent double-processing.
- * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler
- * is registered for just ['gap'], gapStyle is removed from display and flow too.
- */
-export declare function registerHandler(handler: StyleHandler): void;
-/**
- * Exported object containing wrapped predefined style handlers.
- * Users can import and call these to extend or delegate to built-in behavior.
- *
- * Internal handlers use *Style suffix for searchability.
- * External API uses short names for convenience.
- *
- * @example
- * ```ts
- * import { styleHandlers, configure } from '@cube-dev/ui-kit';
- *
- * configure({
- *   handlers: {
- *     fill: ({ fill }) => {
- *       if (fill?.startsWith('gradient:')) {
- *         return { background: fill.slice(9) };
- *       }
- *       return styleHandlers.fill({ fill });
- *     },
- *   },
- * });
- * ```
- */
-export declare const styleHandlers: {
-    readonly align: typeof alignStyle;
-    readonly border: typeof borderStyle;
-    readonly color: typeof colorStyle;
-    readonly display: typeof displayStyle;
-    readonly fade: typeof fadeStyle;
-    readonly fill: typeof fillStyle;
-    readonly svgFill: typeof svgFillStyle;
-    readonly flow: typeof flowStyle;
-    readonly font: typeof fontStyle;
-    readonly fontStyle: typeof fontStyleStyle;
-    readonly gap: typeof gapStyle;
-    readonly groupRadius: typeof groupRadiusAttr;
-    readonly height: typeof heightStyle;
-    readonly inset: typeof insetStyle;
-    readonly justify: typeof justifyStyle;
-    readonly margin: typeof marginStyle;
-    readonly outline: typeof outlineStyle;
-    readonly padding: typeof paddingStyle;
-    readonly preset: typeof presetStyle;
-    readonly radius: typeof radiusStyle;
-    readonly reset: typeof resetStyle;
-    readonly scrollbar: typeof scrollbarStyle;
-    readonly shadow: typeof shadowStyle;
-    readonly styledScrollbar: typeof styledScrollbarStyle;
-    readonly transition: typeof transitionStyle;
-    readonly width: typeof widthStyle;
-};
 export {};

package/types/tasty/styles/preset.d.ts

@@ -8,7 +8,7 @@ export declare function presetStyle({ preset, fontSize, lineHeight, textTransfor
     fontWeight?: string | number;
     fontStyle?: string;
     font?: string;
-}): Styles | undefined;
+}): "" | Styles;
 export declare namespace presetStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/radius.d.ts

@@ -1,8 +1,8 @@
 export declare function radiusStyle({ radius }: {
     radius: any;
-}): {
+}): "" | {
     'border-radius': string;
-} | undefined;
+};
 export declare namespace radiusStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/shadow.d.ts

@@ -1,8 +1,8 @@
 export declare function shadowStyle({ shadow }: {
     shadow: any;
-}): {
+}): "" | {
     'box-shadow': any;
-} | undefined;
+};
 export declare namespace shadowStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/width.d.ts

@@ -1,6 +1,6 @@
 export declare function widthStyle({ width }: {
     width: any;
-}): Record<string, string | string[]> | undefined;
+}): "" | Record<string, string | string[]>;
 export declare namespace widthStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/utils/styles.d.ts

@@ -18,17 +18,10 @@ export type CSSMap = {
     [key: string]: string | string[];
 };
 export type StyleHandlerResult = CSSMap | CSSMap[] | void;
-export type RawStyleHandler = (value: StyleValueStateMap) => StyleHandlerResult;
+export type RawStyleHandler = (value: StyleValueStateMap, suffix?: string) => StyleHandlerResult;
 export type StyleHandler = RawStyleHandler & {
     __lookupStyles: string[];
 };
-/**
- * Handler definition forms for configure() and plugins.
- * - Function only: lookup styles inferred from key name
- * - Single property tuple: ['styleName', handler]
- * - Multi-property tuple: [['style1', 'style2'], handler]
- */
-export type StyleHandlerDefinition = RawStyleHandler | [string, RawStyleHandler] | [string[], RawStyleHandler];
 export interface StyleStateData {
     model?: ComputeModel;
     tokens?: string[];

package/types/tasty/zero/babel.d.ts

@@ -16,7 +16,6 @@
  * };
  * ```
  */
-import { StyleHandlerDefinition } from '../utils/styles';
 import type { PluginPass } from '@babel/core';
 import type { KeyframesSteps } from '../injector/types';
 import type { StyleDetails, UnitHandler } from '../parser/types';
@@ -53,20 +52,6 @@ export interface TastyZeroConfig {
      * @example { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }
      */
     keyframes?: Record<string, KeyframesSteps>;
-    /**
-     * Custom style handlers that transform style properties into CSS declarations.
-     * Handlers replace built-in handlers for the same style name.
-     * @example
-     * ```ts
-     * handlers: {
-     *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
-     *   elevation: ({ elevation }) => ({
-     *     'box-shadow': `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
-     *   }),
-     * }
-     * ```
-     */
-    handlers?: Record<string, StyleHandlerDefinition>;
     /**
      * Predefined tokens that are replaced during style parsing.
      * Use `$name` for custom properties and `#name` for color tokens.