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

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-a465ecb
- * 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-a465ecb
- * Released under the MIT license.
- */
-
-export * from './Tabs/index.js';
-
-        

package/es/tasty/hooks/useKeyframes.js

@@ -1,66 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a465ecb
- * 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;
-    const disposeRef = useRef(null);
-    const nameRef = useRef('');
-    // Generate a stable key for memoization
-    const stepsKey = useMemo(() => {
-        const steps = isFactory
-            ? stepsOrFactory()
-            : stepsOrFactory;
-        // Store steps for later use in effect
-        return JSON.stringify(steps);
-    }, isFactory ? deps ?? [] : [stepsOrFactory]);
-    // Store parsed steps for the effect
-    const stepsRef = useRef({});
-    // Update steps when key changes
-    if (stepsKey) {
-        try {
-            stepsRef.current = JSON.parse(stepsKey);
-        }
-        catch {
-            stepsRef.current = {};
-        }
-    }
-    // Inject keyframes in insertion effect
-    useInsertionEffect(() => {
-        // Dispose previous injection
-        disposeRef.current?.();
-        disposeRef.current = null;
-        const steps = stepsRef.current;
-        if (!steps || Object.keys(steps).length === 0) {
-            nameRef.current = '';
-            return;
-        }
-        // Inject keyframes
-        const result = keyframes(steps, {
-            name: opts?.name,
-            root: opts?.root,
-        });
-        nameRef.current = result.toString();
-        disposeRef.current = result.dispose;
-        // Cleanup on unmount or when steps change
-        return () => {
-            disposeRef.current?.();
-            disposeRef.current = null;
-        };
-    }, [stepsKey, opts?.name, opts?.root]);
-    return nameRef.current;
-}
-
-        

package/es/tasty/hooks/useProperty.js

@@ -1,93 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a465ecb
- * 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.
- *
- * @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 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 || !name.startsWith('--')) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn(`[Tasty] useProperty: property name must start with "--". Got: "${name}"`);
-            }
-            return;
-        }
-        const injector = getGlobalInjector();
-        // Check if already defined (properties are persistent)
-        if (injector.isPropertyDefined(name, { root: options?.root })) {
-            return;
-        }
-        // Register the property
-        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/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, 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';

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

@@ -1,52 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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;