@cube-dev/ui-kit 0.0.0-canary-3f98351 → 0.0.0-canary-00718fb

package/es/components/navigation/Tabs/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-3f98351
- * Released under the MIT license.
- */
-
-export { Tabs, Tab } from './Tabs.js';
-
-        

package/es/components/navigation/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-3f98351
- * Released under the MIT license.
- */
-
-export * from './Tabs/index.js';
-
-        

package/es/tasty/hooks/useKeyframes.js

@@ -1,82 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-3f98351
- * 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;
-    // Memoize the keyframes steps to get a stable reference
-    const stepsData = useMemo(() => {
-        const steps = isFactory
-            ? stepsOrFactory()
-            : stepsOrFactory;
-        if (!steps || Object.keys(steps).length === 0) {
-            return null;
-        }
-        return steps;
-    }, isFactory ? deps ?? [] : [stepsOrFactory]);
-    // Store keyframes results for cleanup - we need to track both the render-time
-    // injection (for the name) and the effect-time injection (for Strict Mode safety)
-    const renderResultRef = useRef(null);
-    const effectResultRef = useRef(null);
-    // Inject keyframes during render to ensure the animation name is available
-    // immediately. The keyframes() function uses reference counting internally,
-    // so multiple calls with the same content are deduplicated.
-    const name = useMemo(() => {
-        // Dispose previous render-time result if deps changed
-        renderResultRef.current?.dispose();
-        renderResultRef.current = null;
-        if (!stepsData) {
-            return '';
-        }
-        // Inject keyframes synchronously
-        const result = keyframes(stepsData, {
-            name: opts?.name,
-            root: opts?.root,
-        });
-        renderResultRef.current = result;
-        return result.toString();
-    }, [stepsData, opts?.name, opts?.root]);
-    // Handle injection and cleanup in useInsertionEffect to properly support
-    // React 18+ Strict Mode double-invocation (mount → unmount → mount).
-    // The effect setup re-injects the keyframes if cleanup was called, ensuring
-    // the CSS exists after Strict Mode remounts.
-    useInsertionEffect(() => {
-        // Dispose previous effect-time result
-        effectResultRef.current?.dispose();
-        effectResultRef.current = null;
-        // Re-inject keyframes. This ensures the CSS exists after Strict Mode cleanup.
-        // The keyframes() function uses reference counting, so this is idempotent
-        // if the CSS wasn't disposed.
-        if (stepsData) {
-            const result = keyframes(stepsData, {
-                name: opts?.name,
-                root: opts?.root,
-            });
-            effectResultRef.current = result;
-        }
-        // Cleanup on unmount or when dependencies change.
-        // Dispose both the effect-time and render-time results to properly
-        // decrement the reference count.
-        return () => {
-            effectResultRef.current?.dispose();
-            effectResultRef.current = null;
-            renderResultRef.current?.dispose();
-            renderResultRef.current = null;
-        };
-    }, [stepsData, opts?.name, opts?.root]);
-    return name;
-}
-
-        

package/es/tasty/hooks/useProperty.js

@@ -1,100 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-3f98351
- * 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.
- *
- * 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 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) {
-            if (process.env.NODE_ENV !== 'production') {
-                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,
-            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/properties/index.js

@@ -1,211 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-3f98351
- * Released under the MIT license.
- */
-
-/**
- * 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>')
- */
-// ============================================================================
-// Constants
-// ============================================================================
-const PROPERTIES_KEY = '@properties';
-/**
- * Valid CSS custom property name pattern (after the -- prefix).
- * Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.
- */
-const VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;
-// ============================================================================
-// Validation Functions
-// ============================================================================
-/**
- * Validate a CSS custom property name (the part after --).
- * Returns true if the name is valid for use as a CSS custom property.
- */
-export function isValidPropertyName(name) {
-    return VALID_PROPERTY_NAME_PATTERN.test(name);
-}
-// ============================================================================
-// Extraction Functions
-// ============================================================================
-/**
- * Check if styles object has local @properties definition.
- * Fast path: single property lookup.
- */
-export function hasLocalProperties(styles) {
-    return PROPERTIES_KEY in styles;
-}
-/**
- * Extract local @properties from styles object.
- * Returns null if no local properties (fast path).
- */
-export function extractLocalProperties(styles) {
-    const properties = styles[PROPERTIES_KEY];
-    if (!properties || typeof properties !== 'object') {
-        return null;
-    }
-    return properties;
-}
-// ============================================================================
-// Token Parsing Functions
-// ============================================================================
-/**
- * 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 function parsePropertyToken(token) {
-    if (!token || typeof token !== 'string') {
-        return {
-            cssName: '',
-            isColor: false,
-            isValid: false,
-            error: 'Property token must be a non-empty string',
-        };
-    }
-    let name;
-    let isColor;
-    if (token.startsWith('$')) {
-        // Regular property token: $name → --name
-        name = token.slice(1);
-        isColor = false;
-    }
-    else if (token.startsWith('#')) {
-        // Color property token: #name → --name-color
-        name = token.slice(1);
-        isColor = true;
-    }
-    else if (token.startsWith('--')) {
-        // Legacy format with -- prefix
-        name = token.slice(2);
-        isColor = token.endsWith('-color');
-    }
-    else {
-        // Legacy format without prefix
-        name = token;
-        isColor = token.endsWith('-color');
-    }
-    // Validate the name
-    if (!name) {
-        return {
-            cssName: '',
-            isColor,
-            isValid: false,
-            error: 'Property name cannot be empty',
-        };
-    }
-    if (!isValidPropertyName(name)) {
-        return {
-            cssName: '',
-            isColor,
-            isValid: false,
-            error: `Invalid property name "${name}". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`,
-        };
-    }
-    // Build the CSS custom property name
-    // For #name tokens, we add -color suffix
-    // For legacy formats (--name-color or name-color), the name already includes -color
-    let cssName;
-    if (token.startsWith('#')) {
-        // Color token: #name → --name-color
-        cssName = `--${name}-color`;
-    }
-    else {
-        // All other formats: just add -- prefix
-        cssName = `--${name}`;
-    }
-    return {
-        cssName,
-        isColor,
-        isValid: true,
-    };
-}
-// ============================================================================
-// Normalization Functions
-// ============================================================================
-/**
- * Normalize a property name to the CSS custom property format.
- *
- * @deprecated Use parsePropertyToken instead for proper token handling
- */
-export function normalizePropertyName(name) {
-    const result = parsePropertyToken(name);
-    return result.isValid ? result.cssName : `--${name}`;
-}
-/**
- * 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 function normalizePropertyDefinition(def) {
-    const normalized = {};
-    // Add properties in alphabetical order
-    if (def.inherits !== undefined) {
-        normalized.inherits = def.inherits;
-    }
-    if (def.initialValue !== undefined) {
-        normalized.initialValue = String(def.initialValue);
-    }
-    if (def.syntax !== undefined) {
-        normalized.syntax = def.syntax;
-    }
-    return JSON.stringify(normalized);
-}
-/**
- * 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 function getEffectiveDefinition(token, userDefinition) {
-    const parsed = parsePropertyToken(token);
-    if (!parsed.isValid) {
-        return {
-            cssName: '',
-            definition: userDefinition,
-            isValid: false,
-            error: parsed.error,
-        };
-    }
-    if (parsed.isColor) {
-        // Color properties have fixed syntax and default initialValue
-        return {
-            cssName: parsed.cssName,
-            definition: {
-                syntax: '<color>', // Always '<color>' for color tokens, cannot be overridden
-                inherits: userDefinition.inherits, // Allow inherits to be customized
-                initialValue: userDefinition.initialValue ?? 'transparent', // Default to transparent
-            },
-            isValid: true,
-        };
-    }
-    // Regular properties use the definition as-is
-    return {
-        cssName: parsed.cssName,
-        definition: userDefinition,
-        isValid: true,
-    };
-}
-
-        

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

@@ -1,235 +0,0 @@
-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' | '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)
-     * - `panel` - Panel-style tabs with sharp edges and no gaps
-     * - `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

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

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

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