@cube-dev/ui-kit 0.0.0-canary-a465ecb → 0.0.0-canary-89f3845

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

@@ -1,6 +1,36 @@
-import { RawStyleHandler, StyleHandler } from '../utils/styles';
+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';
 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;
@@ -9,4 +39,77 @@ 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;
+}): Styles | undefined;
 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[]>;
+}): Record<string, string | string[]> | undefined;
 export declare namespace widthStyle {
     var __lookupStyles: string[];
 }

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

@@ -18,10 +18,17 @@ export type CSSMap = {
     [key: string]: string | string[];
 };
 export type StyleHandlerResult = CSSMap | CSSMap[] | void;
-export type RawStyleHandler = (value: StyleValueStateMap, suffix?: string) => StyleHandlerResult;
+export type RawStyleHandler = (value: StyleValueStateMap) => 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,6 +16,7 @@
  * };
  * ```
  */
+import { StyleHandlerDefinition } from '../utils/styles';
 import type { PluginPass } from '@babel/core';
 import type { KeyframesSteps } from '../injector/types';
 import type { StyleDetails, UnitHandler } from '../parser/types';
@@ -52,6 +53,20 @@ 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.