@cube-dev/ui-kit 0.0.0-canary-00718fb → 0.0.0-canary-837dfc4

package/types/components/navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,236 @@
+import { Key } from '@react-types/shared';
+import { ReactElement, ReactNode } from 'react';
+import { BaseProps, Styles } from '../../../tasty';
+import { CubeItemProps } from '../../content/Item';
+/** Visual appearance type for tabs */
+export type TabType = 'default' | 'file' | 'panel' | 'radio';
+/** Tab size options */
+export type TabSize = 'medium' | 'large';
+/** Common props for panel rendering behavior */
+interface PanelBehaviorProps {
+    /** If true, panel is rendered but hidden when not active. */
+    prerender?: boolean;
+    /** If true, once visited the panel stays in DOM. */
+    keepMounted?: boolean;
+}
+/** Common props for QA attributes */
+interface QAProps {
+    /** QA selector attribute. */
+    qa?: string;
+    /** Additional QA value attribute. */
+    qaVal?: string;
+}
+/** Props from CubeItemProps that don't apply to Tab */
+type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'description' | 'descriptionPlacement' | 'descriptionProps' | 'tooltip' | 'defaultTooltipPlacement' | 'hotkeys' | 'keyboardShortcutProps' | 'loadingSlot' | 'isLoading' | 'labelProps' | 'labelRef' | 'level' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles' | 'variant' | 'htmlType' | 'isSelected' | 'preserveActionsSpace' | 'disableActionsFocus' | 'actions' | 'showActionsOnHover';
+/** Common styling props for tabs - inherits style props from CubeItemProps */
+interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
+    /** Tab size. Large uses `t2m` preset, medium uses `t3m`. */
+    size?: TabSize;
+    /** Visual appearance type. */
+    type?: TabType;
+    /** Whether to show actions only on hover. */
+    showActionsOnHover?: boolean;
+}
+export interface CubeTabsProps extends BaseProps, PanelBehaviorProps {
+    /** Controlled active tab key. When provided, component is controlled. */
+    activeKey?: Key;
+    /** Initial active tab key for uncontrolled mode. */
+    defaultActiveKey?: Key;
+    /**
+     * Visual appearance type for tabs.
+     * - `default` - Standard tabs with selection indicator below (default)
+     * - `file` - File-style tabs with fill highlight on selection, delimiter between tabs
+     * - `panel` - Panel-style tabs with border bottom highlight on selection, delimiter between tabs
+     * - `radio` - Radio button style for tab selection
+     * @default 'default'
+     */
+    type?: TabType;
+    /** Tab size. Large uses `t2m` preset, medium uses `t3m`. */
+    size?: TabSize;
+    /** Accessible label for the tab list. */
+    label?: string;
+    /** Content rendered before the tab list. */
+    prefix?: ReactNode;
+    /** Content rendered after the tab list. */
+    suffix?: ReactNode;
+    /** Callback when active tab changes. */
+    onChange?: (key: Key) => void;
+    /** Callback when tab delete button is clicked. Presence enables delete buttons. */
+    onDelete?: (key: Key) => void;
+    /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */
+    onTitleChange?: (key: Key, newTitle: string) => void;
+    /** Whether to show tab actions only on hover. Can be overridden per-tab. */
+    showActionsOnHover?: boolean;
+    /** Custom tasty styles for the tab bar container. */
+    styles?: Styles;
+    /** QA selector attribute. */
+    qa?: string;
+    /** Tab components or Tabs.List with Tabs.Panel. */
+    children?: ReactNode;
+    /**
+     * Functional content renderer for optimized lazy evaluation.
+     * When provided, panel content is only evaluated for the active tab,
+     * while inactive tabs use cached content. This prevents expensive
+     * re-renders of tab content on every parent render.
+     *
+     * Use with tabs that have no children for maximum optimization.
+     *
+     * @param key - The key of the tab to render content for
+     * @returns Panel content for the given tab
+     *
+     * @example
+     * ```tsx
+     * <Tabs
+     *   renderPanel={(key) => {
+     *     switch (key) {
+     *       case 'tab1': return <ExpensiveComponent />;
+     *       case 'tab2': return <AnotherExpensive />;
+     *       default: return null;
+     *     }
+     *   }}
+     * >
+     *   <Tab key="tab1" title="Tab 1" />
+     *   <Tab key="tab2" title="Tab 2" />
+     * </Tabs>
+     * ```
+     */
+    renderPanel?: (key: Key) => ReactNode;
+    /**
+     * Cache keys for individual panels. Enables caching for specified panels.
+     *
+     * By default (without cache keys), panels re-render on every Tabs render.
+     * When a panel has a non-undefined cache key defined, its content is cached
+     * and reused until the cache key changes.
+     *
+     * **Important:**
+     * - Cache keys must be primitive values (string, number, boolean, null).
+     * - Objects/arrays will cause cache misses on every render (reference comparison).
+     * - Symbol tab keys are not supported for caching (use string keys instead).
+     * - Setting a key to `undefined` is the same as not having it (no caching).
+     *
+     * @example
+     * ```tsx
+     * // Enable caching for specific panels with their dependencies as cache keys
+     * <Tabs
+     *   renderPanel={(key) => <Panel data={data[key]} />}
+     *   panelCacheKeys={{
+     *     tab1: data.tab1.version,  // Cached, invalidates when version changes
+     *     tab2: data.tab2.version,  // Cached, invalidates when version changes
+     *     // tab3 has no cache key - re-renders on every Tabs render
+     *   }}
+     * />
+     * ```
+     */
+    panelCacheKeys?: Record<string | number, string | number | boolean | null | undefined>;
+}
+export interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
+    /**
+     * Unique identifier for the tab. Used for activeKey matching.
+     * Auto-injected from the React `key` prop (converted to string).
+     * Note: All keys are internally converted to strings for React Aria compatibility.
+     */
+    id?: string;
+    /** Content displayed in the tab button. */
+    title: ReactNode;
+    /** Panel content rendered when tab is active. */
+    children?: ReactNode;
+    /** Disables the tab (cannot be selected). */
+    isDisabled?: boolean;
+    /** Actions to render in the tab (e.g., icons, buttons). Rendered before delete action if tab is deletable. */
+    actions?: ReactNode;
+    /** Whether the tab title can be edited. Requires onTitleChange on Tabs or Tab. */
+    isEditable?: boolean;
+    /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */
+    onTitleChange?: (newTitle: string) => void;
+}
+export interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {
+    /**
+     * Panel identifier. Must match a Tab's id.
+     * Auto-injected from the React `key` prop (converted to string).
+     */
+    id?: string;
+    /** Panel content. */
+    children?: ReactNode;
+    /** Custom tasty styles for the panel container. */
+    styles?: Styles;
+}
+export interface CubeTabListProps {
+    /** Tab components. */
+    children?: ReactNode;
+}
+/** Ref API for programmatic control of Tabs component */
+export interface CubeTabsRef {
+    /** The root DOM element of the Tabs component */
+    element: HTMLDivElement | null;
+    /** Start editing a tab's title by its key */
+    startEditing: (key: Key) => void;
+    /** Cancel the current editing session */
+    cancelEditing: () => void;
+}
+declare function Tab(_props: CubeTabProps): ReactElement | null;
+declare namespace Tab {
+    var displayName: string;
+}
+declare function TabPanel(_props: CubeTabPanelProps): ReactElement | null;
+declare namespace TabPanel {
+    var displayName: string;
+}
+declare function TabList(_props: CubeTabListProps): ReactElement | null;
+declare namespace TabList {
+    var displayName: string;
+}
+/**
+ * Tabs component for organizing content into multiple panels.
+ * Built with React Aria for full accessibility support.
+ *
+ * **Note:** Tab keys are internally converted to strings for React Aria compatibility.
+ * When using `activeKey`, `onChange`, etc., be aware that numeric keys will be
+ * converted to their string equivalents.
+ *
+ * @example
+ * // Simple usage
+ * <Tabs defaultActiveKey="tab1">
+ *   <Tab key="tab1" title="Tab 1">Content 1</Tab>
+ *   <Tab key="tab2" title="Tab 2">Content 2</Tab>
+ * </Tabs>
+ *
+ * @example
+ * // Tabs-only (no panels)
+ * <Tabs activeKey={activeTab} onChange={setActiveTab}>
+ *   <Tab key="overview" title="Overview" />
+ *   <Tab key="settings" title="Settings" />
+ * </Tabs>
+ *
+ * @example
+ * // Explicit panels
+ * <Tabs defaultActiveKey="tab1">
+ *   <Tabs.List>
+ *     <Tab key="tab1" title="Tab 1" />
+ *     <Tab key="tab2" title="Tab 2" />
+ *   </Tabs.List>
+ *   <Tabs.Panel key="tab1">Content 1</Tabs.Panel>
+ *   <Tabs.Panel key="tab2">Content 2</Tabs.Panel>
+ * </Tabs>
+ *
+ * @example
+ * // Optimized lazy rendering with renderPanel
+ * <Tabs
+ *   defaultActiveKey="tab1"
+ *   renderPanel={(key) => {
+ *     switch (key) {
+ *       case 'tab1': return <ExpensiveComponent />;
+ *       case 'tab2': return <AnotherExpensive />;
+ *       default: return null;
+ *     }
+ *   }}
+ * >
+ *   <Tab key="tab1" title="Tab 1" />
+ *   <Tab key="tab2" title="Tab 2" />
+ * </Tabs>
+ */
+export declare const Tabs: import("react").ForwardRefExoticComponent<CubeTabsProps & import("react").RefAttributes<CubeTabsRef>> & {
+    Tab: typeof Tab;
+    List: typeof TabList;
+    Panel: typeof TabPanel;
+};
+export { Tab, TabList, TabPanel };

package/types/components/navigation/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, Tab } from './Tabs';
+export type { CubeTabsProps, CubeTabsRef, CubeTabProps, CubeTabPanelProps, CubeTabListProps, } from './Tabs';

package/types/components/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tabs';
+export type { CubeTabsProps, CubeTabProps, CubeTabPanelProps, CubeTabListProps, } from './Tabs';

package/types/index.d.ts

@@ -98,6 +98,7 @@ export type { CubeTooltipTriggerProps } from './components/overlays/Tooltip/Tool
 export { TooltipProvider } from './components/overlays/Tooltip/TooltipProvider';
 export type { CubeTooltipProviderProps } from './components/overlays/Tooltip/TooltipProvider';
 export * from './components/content/Alert';
+export * from './components/navigation';
 export { FileTabs } from './components/organisms/FileTabs/FileTabs';
 export type { CubeFileTabProps } from './components/organisms/FileTabs/FileTabs';
 export { StatsCard } from './components/organisms/StatsCard/StatsCard';

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

@@ -2,3 +2,6 @@ export { useStyles } from './useStyles';
 export type { UseStylesOptions, UseStylesResult } from './useStyles';
 export { useGlobalStyles } from './useGlobalStyles';
 export { useRawCSS } from './useRawCSS';
+export { useKeyframes } from './useKeyframes';
+export { useProperty } from './useProperty';
+export type { UsePropertyOptions } from './useProperty';

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

@@ -0,0 +1,52 @@
+import { KeyframesSteps } from '../injector/types';
+type UseKeyframesOptions = {
+    name?: string;
+    root?: Document | ShadowRoot;
+};
+/**
+ * Hook to inject CSS @keyframes and return the generated animation name.
+ * Handles keyframes injection with proper cleanup on unmount or dependency changes.
+ *
+ * @example Basic usage - steps object is the dependency
+ * ```tsx
+ * function MyComponent() {
+ *   const bounce = useKeyframes({
+ *     '0%': { transform: 'scale(1)' },
+ *     '50%': { transform: 'scale(1.1)' },
+ *     '100%': { transform: 'scale(1)' },
+ *   });
+ *
+ *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;
+ * }
+ * ```
+ *
+ * @example With custom name
+ * ```tsx
+ * function MyComponent() {
+ *   const fadeIn = useKeyframes(
+ *     { from: { opacity: 0 }, to: { opacity: 1 } },
+ *     { name: 'fadeIn' }
+ *   );
+ *
+ *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;
+ * }
+ * ```
+ *
+ * @example Factory function with dependencies
+ * ```tsx
+ * function MyComponent({ scale }: { scale: number }) {
+ *   const pulse = useKeyframes(
+ *     () => ({
+ *       '0%': { transform: 'scale(1)' },
+ *       '100%': { transform: `scale(${scale})` },
+ *     }),
+ *     [scale]
+ *   );
+ *
+ *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;
+ * }
+ * ```
+ */
+export declare function useKeyframes(steps: KeyframesSteps, options?: UseKeyframesOptions): string;
+export declare function useKeyframes(factory: () => KeyframesSteps, deps: readonly unknown[], options?: UseKeyframesOptions): string;
+export {};

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

@@ -0,0 +1,75 @@
+export interface UsePropertyOptions {
+    /**
+     * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').
+     * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.
+     * @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.
+     * For color tokens (#name), this defaults to 'transparent' if not specified.
+     */
+    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.
+ *
+ * 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 property with token syntax
+ * ```tsx
+ * function Spinner() {
+ *   useProperty('$rotation', {
+ *     syntax: '<angle>',
+ *     inherits: false,
+ *     initialValue: '0deg',
+ *   });
+ *
+ *   return <div className="spinner" />;
+ * }
+ * ```
+ *
+ * @example Color property with token syntax (auto-sets syntax)
+ * ```tsx
+ * function MyComponent() {
+ *   useProperty('#theme', {
+ *     initialValue: 'red', // syntax: '<color>' is auto-set
+ *   });
+ *
+ *   // Now --theme-color can be animated with CSS transitions
+ *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
+ * }
+ * ```
+ *
+ * @example Legacy format (still supported)
+ * ```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, useKeyframes, } 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';

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)
  */
@@ -93,6 +149,6 @@ export declare function destroy(root?: Document | ShadowRoot): void;
  * Create a new isolated injector instance
  */
 export declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, } from './types';
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, PropertyDefinition, } from './types';
 export { StyleInjector } from './injector';
 export { SheetManager } from './sheet-manager';

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

@@ -3,7 +3,7 @@
  * Eliminates CSS string parsing for better performance
  */
 import { StyleResult } from '../pipeline';
-import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, RawCSSResult, StyleInjectorConfig } from './types';
+import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from './types';
 export declare class StyleInjector {
     private sheetManager;
     private config;
@@ -82,19 +82,31 @@ export declare class StyleInjector {
         root?: Document | ShadowRoot;
     }): void;
     /**
-     * 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: string, options?: {
-        syntax?: string;
-        inherits?: boolean;
-        initialValue?: string | number;
+    property(name: string, options?: PropertyDefinition & {
         root?: Document | ShadowRoot;
     }): void;
     /**
-     * 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: string, options?: {
         root?: Document | ShadowRoot;

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

@@ -88,8 +88,8 @@ export interface RootRegistry {
     keyframesNameToContent: Map<string, string>;
     /** Counter for generating keyframes names like k0, k1, k2... */
     keyframesCounter: number;
-    /** Set of injected @property names for tracking */
-    injectedProperties: Set<string>;
+    /** Map of injected @property names to their normalized declarations for tracking */
+    injectedProperties: Map<string, string>;
     /** Global rules tracking for index adjustment */
     globalRules: Map<string, RuleInfo>;
 }
@@ -112,6 +112,18 @@ export interface KeyframesCacheEntry {
     refCount: number;
     info: KeyframesInfo;
 }
+/**
+ * Definition for a CSS @property at-rule.
+ * Used to define custom property syntax, inheritance, and initial value.
+ */
+export interface PropertyDefinition {
+    /** CSS syntax string (e.g., '<color>', '<angle>', '<number>') */
+    syntax?: string;
+    /** Whether the property inherits (default: true) */
+    inherits?: boolean;
+    /** Initial value for the property */
+    initialValue?: string | number;
+}
 export interface RawCSSInfo {
     /** Unique identifier for this raw CSS block */
     id: string;

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

@@ -0,0 +1,90 @@
+/**
+ * Properties Utilities
+ *
+ * Utilities for extracting and processing CSS @property definitions in styles.
+ * Unlike keyframes, properties are permanent once registered and don't need cleanup.
+ *
+ * Property names use tasty token syntax:
+ * - `$name` for regular properties → `--name`
+ * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>')
+ */
+import { PropertyDefinition } from '../injector/types';
+import { Styles } from '../styles/types';
+/**
+ * Validate a CSS custom property name (the part after --).
+ * Returns true if the name is valid for use as a CSS custom property.
+ */
+export declare function isValidPropertyName(name: string): boolean;
+/**
+ * Result of parsing a property token.
+ */
+export interface ParsedPropertyToken {
+    /** The CSS custom property name (e.g., '--my-prop') */
+    cssName: string;
+    /** Whether this is a color property */
+    isColor: boolean;
+    /** Whether the token was valid */
+    isValid: boolean;
+    /** Error message if invalid */
+    error?: string;
+}
+/**
+ * Check if styles object has local @properties definition.
+ * Fast path: single property lookup.
+ */
+export declare function hasLocalProperties(styles: Styles): boolean;
+/**
+ * Extract local @properties from styles object.
+ * Returns null if no local properties (fast path).
+ */
+export declare function extractLocalProperties(styles: Styles): Record<string, PropertyDefinition> | null;
+/**
+ * Parse a property token name and return the CSS property name and whether it's a color.
+ * Supports tasty token syntax and validates the property name.
+ *
+ * Token formats:
+ * - `$name` → { cssName: '--name', isColor: false }
+ * - `#name` → { cssName: '--name-color', isColor: true }
+ * - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
+ * - `name` → { cssName: '--name', isColor: false } (legacy)
+ *
+ * @param token - The property token to parse
+ * @returns Parsed result with cssName, isColor, isValid, and optional error
+ */
+export declare function parsePropertyToken(token: string): ParsedPropertyToken;
+/**
+ * Normalize a property name to the CSS custom property format.
+ *
+ * @deprecated Use parsePropertyToken instead for proper token handling
+ */
+export declare function normalizePropertyName(name: string): string;
+/**
+ * Normalize a property definition to a consistent string representation.
+ * Used for comparing definitions to detect changes/conflicts.
+ *
+ * Keys are sorted alphabetically to ensure consistent comparison:
+ * { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
+ */
+export declare function normalizePropertyDefinition(def: PropertyDefinition): string;
+/**
+ * Result of getEffectiveDefinition.
+ */
+export interface EffectiveDefinitionResult {
+    /** The CSS custom property name */
+    cssName: string;
+    /** The effective property definition */
+    definition: PropertyDefinition;
+    /** Whether the token was valid */
+    isValid: boolean;
+    /** Error message if invalid */
+    error?: string;
+}
+/**
+ * Get the effective property definition for a token.
+ * For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
+ *
+ * @param token - Property token ($name, #name, --name, or plain name)
+ * @param userDefinition - User-provided definition options
+ * @returns Effective definition with cssName, definition, isValid, and optional error
+ */
+export declare function getEffectiveDefinition(token: string, userDefinition: PropertyDefinition): EffectiveDefinitionResult;

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

@@ -1,11 +1,19 @@
 /**
+ * Border style handler with multi-group support.
  *
- * @param border
- * @return {{border: string}|*}
+ * Single group (backward compatible):
+ * - `border="1bw solid #red"` - all sides
+ * - `border="1bw solid #red top left"` - only top and left
+ *
+ * Multi-group (new):
+ * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+ * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
+ *
+ * Later groups override earlier groups for conflicting directions.
  */
 export declare function borderStyle({ border }: {
     border: any;
-}): {} | undefined;
+}): Record<string, string> | undefined;
 export declare namespace borderStyle {
     var __lookupStyles: string[];
 }

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

@@ -1,7 +1,7 @@
 export declare function fadeStyle({ fade }: {
     fade: any;
 }): {
-    mask: any;
+    mask: string;
     'mask-composite': string;
 } | undefined;
 export declare namespace fadeStyle {